/* Production Off White theme (also accepts ?theme=off-white and ?theme=light).
 * Reference: Shopify draft “Minimal Gamers Custom v0.1 - Off White”,
 * theme 204790497623, current settings read on 2026-10-03.
 * Canvas/text/lime match the draft; darker accents keep small text accessible.
 * All rules are scoped: ?theme=dark retains the dark configurator.
 */

html[data-mg-theme="light"] {
  color-scheme: light;
  --mg-bg: #f2f0ef;
  --mg-bg-deep: #e9e6e4;
  --mg-panel: rgba(255, 255, 255, .94);
  --mg-panel-strong: rgba(255, 255, 255, .985);
  --mg-panel-soft: #eae7e5;
  --mg-line: #d9d3d0;
  --mg-line-strong: #afa5a1;
  --mg-text: #1c2024;
  --mg-muted: #605b60;
  --mg-muted-2: #6b646b;
  --mg-cyan: #006c62;
  --mg-cyan-soft: #e2f0eb;
  --mg-pink: #b91859;
  --mg-pink-2: #6632bd;
  --mg-pink-soft: #f8e7ee;
  --mg-warning: #805000;
  --mg-warning-soft: #fff4de;
  --mg-danger: #b4233c;
  --mg-danger-soft: #fff0f2;
  --mg-success: #006c62;
  --mg-lime: #b9ff00;
  --mg-shadow: 0 18px 48px rgba(43, 32, 29, .08);
  --mg-action: linear-gradient(115deg, #b91859, #6632bd);
  --ecosystem-bg: #15121f;
  --ecosystem-bg-end: #241c36;
  --ecosystem-text: #fffafe;
  --ecosystem-muted: #d9d3e6;
  --ecosystem-accent: #b9ff00;
  --ecosystem-pill: #2a223c;
  /* Shared gaming surfaces: the canvas stays warm, every workflow uses these. */
  --game-panel: #191622;
  --game-panel-raised: #241d33;
  --game-panel-soft: #2c243c;
  --game-hover: #362647;
  --game-field: #13111b;
  --game-line: #594866;
  --game-text: #fffafe;
  --game-muted: #c9c0d6;
  --game-magenta: #ff9dd4;
  --game-blue: #aac7ff;
  --game-success: #80ead2;
  --game-success-bg: #202d29;
  --game-warning: #ffd276;
  --game-warning-bg: #322719;
  --game-danger: #ff9bad;
  --game-danger-bg: #35202c;
  --game-focus: #9861ff;
  --game-ink: #15121f;
  --teal: var(--mg-cyan);
  --punch: var(--mg-pink);
  --punch-dark: #971349;
  --bg: var(--mg-bg);
  --bg2: var(--mg-panel);
  --bg3: var(--mg-panel-strong);
  --ink: var(--mg-text);
  --ink2: var(--mg-muted);
  --ink3: var(--mg-muted);
  --ink4: var(--mg-muted-2);
  --muted: var(--mg-muted);
  background: var(--mg-bg);
  scrollbar-color: var(--mg-line-strong) var(--mg-bg);
}

html[data-mg-theme="light"] body {
  color: var(--mg-text);
  background: var(--mg-bg);
}

html[data-mg-theme="light"] .topbar,
html[data-mg-theme="light"] .mbb-bar {
  background: rgba(255, 255, 255, .92);
  border-color: var(--mg-line);
  box-shadow: 0 10px 34px rgba(31, 40, 58, .07);
}

html[data-mg-theme="light"] .topbar-brand img {
  filter: brightness(0) saturate(100%) drop-shadow(0 0 14px rgba(216, 61, 146, .12));
}

html[data-mg-theme="light"] .content,
html[data-mg-theme="light"] .main,
html[data-mg-theme="light"] .sidebar {
  border-color: var(--mg-line);
}

html[data-mg-theme="light"] .sidebar {
  background: rgba(255, 255, 255, .76);
}

html[data-mg-theme="light"] .chapter-hero {
  background: radial-gradient(ellipse at 92% 25%, #e9e1ee, transparent 55%),
    linear-gradient(115deg, #fcfbfa 42%, #efebe7);
  border-color: var(--mg-line);
  box-shadow: var(--mg-shadow);
}

html[data-mg-theme="light"] .section-title,
html[data-mg-theme="light"] .modal h2,
html[data-mg-theme="light"] .modal h3,
html[data-mg-theme="light"] .v2-overlay-panel h2,
html[data-mg-theme="light"] .product-name,
html[data-mg-theme="light"] .riep-name,
html[data-mg-theme="light"] .summary-title,
html[data-mg-theme="light"] .technical-check-title,
html[data-mg-theme="light"] .technical-review-status strong,
html[data-mg-theme="light"] .technical-correction-copy strong,
html[data-mg-theme="light"] .technical-recommendations-heading strong {
  color: var(--mg-text);
}

html[data-mg-theme="light"] .chapter-title {
  color: var(--mg-text);
}

html[data-mg-theme="light"] .chapter-description {
  color: var(--mg-muted);
}

html[data-mg-theme="light"] .chapter-index {
  color: var(--mg-muted);
  background: rgba(255, 255, 255, .88);
  border-color: var(--mg-line);
}

html[data-mg-theme="light"] .chapter-constraint {
  color: var(--mg-cyan);
  background: var(--mg-cyan-soft);
  border-color: #b4cec5;
}

html[data-mg-theme="light"] .pf-brand-name,
html[data-mg-theme="light"] .pf-brand.active .pf-brand-name,
html[data-mg-theme="light"] .pf-socket-name,
html[data-mg-theme="light"] .pf-socket-card.active .pf-socket-name {
  color: var(--mg-text);
}

html[data-mg-theme="light"] .pf-brand::before {
  color: rgba(21, 25, 35, .035);
}
html[data-mg-theme="light"] .pf-brand.active .pf-brand-sub {
  color: var(--mg-muted);
}

html[data-mg-theme="light"] :is(
  .pf-brand,
  .pf-socket-card,
  .subcat-card,
  .product-card,
  .catalog-tools,
  .resoconto-box,
  .riep-row,
  .summary-card,
  .build-summary,
  .saved-build-choice,
  .chapter-top-action,
  .summary-top-action,
  .insight-section,
  .comparison-guide,
  .comparison-row,
  .comparison-card,
  .v2-header-total,
  .v2-header-financing,
  .technical-review-status,
  .technical-check,
  .technical-correction-guide,
  .technical-recommendations,
  .technical-recommendation,
  .build-creation-progress
) {
  background-color: rgba(255, 255, 255, .86);
  border-color: var(--mg-line);
  box-shadow: 0 14px 42px rgba(31, 40, 58, .055);
}

html[data-mg-theme="light"] :is(.pf-brand, .pf-socket-card, .subcat-card, .product-card):hover {
  color: var(--mg-text);
  background-color: #fff;
  border-color: rgba(216, 61, 146, .34);
  box-shadow: 0 18px 48px rgba(31, 40, 58, .11);
}

html[data-mg-theme="light"] .product-card.selected,
html[data-mg-theme="light"] .pf-brand.active,
html[data-mg-theme="light"] .pf-socket-card.active,
html[data-mg-theme="light"] .subcat-card.active {
  background: linear-gradient(110deg, rgba(216, 61, 146, .095), rgba(17, 143, 132, .06));
  border-color: rgba(216, 61, 146, .46);
}

html[data-mg-theme="light"] .product-photo,
html[data-mg-theme="light"] .product-image,
html[data-mg-theme="light"] .comparison-product-image {
  background: #fff;
  border-color: rgba(26, 34, 48, .1);
}

html[data-mg-theme="light"] :is(.search-input, .sort-control select, .form-input, textarea, select) {
  color: var(--mg-text);
  background-color: #fff;
  border-color: rgba(26, 34, 48, .16);
}

html[data-mg-theme="light"] .catalog-tools .sort-control > span {
  color: #60697b;
}

html[data-mg-theme="light"] :is(.search-input, .form-input, input, textarea)::placeholder {
  color: var(--mg-muted-2);
}

html[data-mg-theme="light"] :is(.availability-toggle, .step-back-btn, .product-action.compare, .product-action.insight, .saved-build-discard, .technical-check-edit.secondary, .technical-correction-guide > button) {
  color: rgba(21, 25, 35, .78);
  background: rgba(255, 255, 255, .88);
  border-color: rgba(26, 34, 48, .16);
}

html[data-mg-theme="light"] :is(.availability-toggle, .step-back-btn, .product-action.compare, .product-action.insight):hover {
  color: var(--mg-text);
  background: #fff;
  border-color: rgba(17, 143, 132, .38);
}

html[data-mg-theme="light"] .modal-overlay,
html[data-mg-theme="light"] .v2-overlay {
  background: rgba(32, 38, 50, .58);
}

html[data-mg-theme="light"] .modal,
html[data-mg-theme="light"] .v2-overlay-panel {
  color: var(--mg-text);
  background: rgba(251, 252, 254, .985);
  border-color: rgba(26, 34, 48, .16);
  box-shadow: 0 30px 90px rgba(24, 31, 46, .24);
}

html[data-mg-theme="light"] .modal-header,
html[data-mg-theme="light"] .modal-footer,
html[data-mg-theme="light"] .v2-overlay-header,
html[data-mg-theme="light"] .technical-check-instructions,
html[data-mg-theme="light"] .technical-check-actions {
  border-color: var(--mg-line);
  background: rgba(244, 246, 249, .72);
}

html[data-mg-theme="light"] .technical-check,
html[data-mg-theme="light"] .technical-recommendation {
  color: var(--mg-text);
  background: rgba(255, 255, 255, .9);
}

html[data-mg-theme="light"] .technical-return-notice,
html[data-mg-theme="light"] .technical-correction-copy p,
html[data-mg-theme="light"] .technical-check-description,
html[data-mg-theme="light"] .technical-check-instructions p,
html[data-mg-theme="light"] .technical-recommendations-heading p {
  color: rgba(21, 25, 35, .72);
}

html[data-mg-theme="light"] .technical-recommendation-routes > button {
  color: #5c3b05;
  background: rgba(245, 185, 92, .15);
}

html[data-mg-theme="light"] .side-list-item,
html[data-mg-theme="light"] .sidebar-row,
html[data-mg-theme="light"] .riep-row {
  border-color: rgba(26, 34, 48, .09);
}

html[data-mg-theme="light"] .side-list-item:hover,
html[data-mg-theme="light"] .sidebar-row:hover {
  background: rgba(17, 143, 132, .055);
}

html[data-mg-theme="light"] .chapter-top-action.waiting button {
  color: rgba(21, 25, 35, .32);
  background: rgba(21, 25, 35, .055);
  border-color: rgba(21, 25, 35, .08);
}

html[data-mg-theme="light"] .comparison-bridge,
html[data-mg-theme="light"] .mobile-build-summary {
  background: rgba(255, 255, 255, .97);
  border-color: var(--mg-line);
}

html[data-mg-theme="light"] ::selection {
  color: #fff;
  background: rgba(216, 61, 146, .78);
}

/* Later feature layers: warm surfaces instead of dark glass. */
html[data-mg-theme="light"] :is(.topbar, .mbb-bar, .progress-strip) {
  background: rgba(242, 240, 239, .97);
  border-color: var(--mg-line);
  box-shadow: 0 6px 24px rgba(43, 32, 29, .06);
}
html[data-mg-theme="light"] .topbar-brand img { filter: brightness(0); }
html[data-mg-theme="light"] .sidebar { background: rgba(252, 251, 250, .8); }
html[data-mg-theme="light"] .chapter-product-preview img { filter: drop-shadow(0 18px 20px rgba(43, 32, 29, .18)); }
html[data-mg-theme="light"] :is(
  .pf-brand, .pf-socket-card, .subcat-card, .product-card, .catalog-tools,
  .resoconto-box, .summary-card, .saved-build-choice, .chapter-top-action,
  .summary-top-action, .insight-section, .insight-spec-group, .comparison-guide,
  .comparison-verdict, .comparison-advantage-card, .v2-header-total,
  .v2-header-financing, .fps-visualizer, .technical-review-status,
  .technical-check, .technical-correction-guide, .technical-recommendations,
  .technical-recommendation, .guided-problem-card, .guided-solution-product,
  .workshop-checks, .build-creation-progress, .mobile-build-summary,
  .mobile-build-row, .achievement-popup, .build-undo
) { background: #fcfbfa; border-color: var(--mg-line); box-shadow: var(--mg-shadow); }
html[data-mg-theme="light"] :is(.pf-brand, .pf-socket-card, .subcat-card, .product-card):hover {
  color: var(--mg-text); background: #fff; border-color: var(--mg-pink);
  box-shadow: 0 18px 44px rgba(43, 32, 29, .1);
}
html[data-mg-theme="light"] :is(.pf-brand.active, .pf-socket-card.active, .subcat-card.selected, .product-card.selected) {
  background: linear-gradient(115deg, #f8e7ee, #fcfbfa 70%);
  border-color: var(--mg-pink); box-shadow: 0 0 0 1px var(--mg-pink), var(--mg-shadow);
}
html[data-mg-theme="light"] :is(.product-photo, .product-card.selected .product-photo) { box-shadow: 0 8px 24px rgba(43, 32, 29, .08); }

/* All hardcoded white text, including guided corrections and checkout. */
html[data-mg-theme="light"] :is(
  .topbar-brand-title, .subcat-name, .product-spec-chip strong,
  .riep-val, .resoconto-title, .progress-dot.active, .sb-name, .mbb-total,
  .mobile-build-progress strong, .mobile-build-row-copy strong, .modal-title,
  .pc-name-preview strong, .customer-account-copy strong, .build-action-step strong,
  .build-progress-title, .build-save-result strong, .insight-technical-head strong, .insight-spec-group summary,
  .insight-spec-group dd, .saved-build-choice span, .chapter-top-action strong,
  .summary-top-action strong, .technical-check-copy strong,
  .technical-review-status strong, .technical-correction-copy strong,
  .technical-correction-copy p b, .technical-correction-result strong,
  .technical-recommendations-heading strong, .technical-recommendation-copy strong,
  .technical-verified-list strong, .guided-technical-review > h1,
  .guided-problem-head strong, .guided-solution-label, .guided-solution-copy strong,
  .workshop-checks summary strong, .workshop-checks-list strong,
  .comparison-guide summary strong, .achievement-popup .ach-title
) { color: var(--mg-text); }
html[data-mg-theme="light"] :is(
  .chapter-description, .search-flex-note, .comparison-guide-detail,
  .comparison-guide summary small, .comparison-guide summary > .material-symbols-rounded:last-child,
  .technical-review-heading p, .technical-review-status span,
  .technical-check-copy small, .technical-check-label, .technical-check-number,
  .technical-check-instructions p, .technical-check-actions > small,
  .technical-verified-list small, .technical-correction-copy p,
  .technical-correction-result small, .technical-recommendations-heading small,
  .technical-recommendation-routes > span, .technical-return-notice,
  .guided-reassurance, .guided-problem-head p, .guided-solution-copy small,
  .guided-solution-price small, .workshop-checks summary,
  .workshop-checks summary small, .workshop-checks summary > .material-symbols-rounded:last-child,
  .workshop-checks-list small, .saved-build-choice small, .chapter-top-action small,
  .summary-top-action small, .insight-technical-head small, .insight-spec-group dt,
  .insight-spec-group dl.is-missing dd, .fps-build-modifiers span,
  .achievement-popup .ach-product, .build-action-step small, .build-generate-locked
) { color: var(--mg-muted); }
html[data-mg-theme="light"] :is(
  .subcat-tag, .product-badge, .product-spec-chip, .optional-chip, .product-select-state,
  .mbb-info, .mobile-build-row-icon, .insight-fact-grid > div, .fps-game,
  .comparison-table thead th, .comparison-completeness, .pc-name-preview,
  .workshop-checks-list > div, .technical-verified-list > div, .fps-build-modifiers span
) { background: var(--mg-panel-soft); border-color: var(--mg-line); }
html[data-mg-theme="light"] :is(.product-badge.punch, .active-filter-chip, .product-smart-badge) { color: var(--mg-pink); background: var(--mg-pink-soft); border-color: #e7b9c9; }
html[data-mg-theme="light"] :is(.product-badge.ok, .pf-brand-badge, .pf-socket-ddr, .compat-banner, .v2-save-status.saved, .mobile-build-row.selected, .customer-account-gate.authenticated, .build-save-result) { color: var(--mg-cyan); background: var(--mg-cyan-soft); border-color: #b4cec5; }
html[data-mg-theme="light"] :is(.sb-row, .riep-row, .insight-spec-group dl, .insight-spec-group > div, .modal-header, .modal-footer, .v2-overlay-header) { border-color: var(--mg-line); }
html[data-mg-theme="light"] .sb-row:hover { background: var(--mg-panel-soft); }
html[data-mg-theme="light"] #sidebarBody { scrollbar-color: var(--mg-line-strong) transparent; }
html[data-mg-theme="light"] :is(.build-health-bar, .mobile-build-meter, .guided-progress-track, .build-progress-track, .fps-meter) { background: var(--mg-line); }

/* Native controls and keyboard focus. Checkbox styling stays native. */
html[data-mg-theme="light"] :is(.search-input, .sort-control select, .form-input, textarea, select) { color: var(--mg-text); background: #fff; border-color: var(--mg-line-strong); }
html[data-mg-theme="light"] :is(.search-input, .form-input, textarea)::placeholder { color: var(--mg-muted-2); opacity: 1; }
html[data-mg-theme="light"] .form-input[readonly] { background: var(--mg-panel-soft); color: var(--mg-muted); opacity: 1; }
html[data-mg-theme="light"] input[type="checkbox"] { accent-color: var(--mg-pink); }
html[data-mg-theme="light"] .form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--mg-text); -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
html[data-mg-theme="light"] :is(
  .availability-toggle, .step-back-btn, .product-action.compare, .product-action.insight,
  .subcat-back, .saved-build-discard, .technical-check-edit.secondary,
  .technical-correction-guide > button, .guided-fix-secondary,
  .optional-top-action button, .topbar-sounds, .v2-mobile-back,
  .customer-account-link, .modal-close, .v2-overlay-close,
  .comparison-clear, .comparison-remove, .fps-controls button, .fps-controls select
) { color: var(--mg-text); background: #fff; border-color: var(--mg-line-strong); }
html[data-mg-theme="light"] :is(.availability-toggle.active, .product-action.compare.active, .topbar-sounds.is-on) { color: var(--mg-cyan); background: var(--mg-cyan-soft); border-color: var(--mg-cyan); }
html[data-mg-theme="light"] .catalog-tools .sort-control > span { color: var(--mg-muted); }
html[data-mg-theme="light"] :is(
  .product-action.select, .product-action.select:hover, .product-action.select:focus-visible,
  .step-continue-btn, .step-skip-btn-top, .cta-primary, .mbb-btn,
  .overlay-primary, .compare-dock button, .guided-fix-primary, .technical-check-edit,
  .saved-build-resume, .chapter-top-action button, .summary-top-action button
) { color: #fff; background: var(--mg-action); border-color: var(--mg-pink); box-shadow: 0 6px 20px rgba(185, 24, 89, .13); }
html[data-mg-theme="light"] .product-action.select :is(strong, small) { color: #fff; }
html[data-mg-theme="light"] :is(.product-action.select.selected, .product-action.select.selected:hover, .product-action.select.selected:focus-visible) { color: #fff; background: var(--mg-cyan); border-color: var(--mg-cyan); }
html[data-mg-theme="light"] .product-action.select.selected :is(strong, small) { color: #fff; }
html[data-mg-theme="light"] :is(.customer-account-button, .technical-recommendation-action, .fps-controls button.active, .fps-controls .fps-upscale.active, .compare-dock.ready-yes button) { color: #fff; background: var(--mg-cyan); border-color: var(--mg-cyan); }
html[data-mg-theme="light"] :is(.modal-buy-shopify, .modal-buy-shopify:hover:not(:disabled)) { color: var(--mg-text); background: var(--mg-lime); box-shadow: 0 8px 22px rgba(87, 108, 25, .12); }
html[data-mg-theme="light"] .modal-buy-shopify svg { stroke: currentColor; }
html[data-mg-theme="light"] :is(.modal-save-build, .overlay-secondary, .step-skip-btn, .technical-return-notice button) { color: var(--mg-cyan); background: var(--mg-cyan-soft); border-color: #97bcb1; }
html[data-mg-theme="light"] :is(.modal-submit, .cta-wa) { color: #fff; background: #006c42; }
html[data-mg-theme="light"] :is(.product-action.select:disabled, .modal-buy-shopify:disabled, .overlay-primary:disabled, .chapter-top-action.waiting button, .compare-dock button:disabled) { color: var(--mg-muted); background: var(--mg-panel-soft); border-color: var(--mg-line); box-shadow: none; }
html[data-mg-theme="light"] .product-action.select:disabled :is(strong, small) { color: var(--mg-muted); }
html[data-mg-theme="light"] :is(.progress-dot.done, .progress-dot.active) { color: var(--mg-text); }
html[data-mg-theme="light"] .progress-dot.done .dot-num { color: #fff; background: var(--mg-cyan); }
html[data-mg-theme="light"] .progress-dot.active .dot-num { color: var(--mg-pink); background: var(--mg-pink-soft); border-color: var(--mg-pink); }
html[data-mg-theme="light"] .progress-dot.skipped .dot-num { color: var(--mg-muted); background: var(--mg-panel-soft); }

/* Consistent warning/error/success states for guided correction. */
html[data-mg-theme="light"] :is(.guided-problem-card, .technical-check.warning, .technical-review-status.manual, .technical-recommendations.empty, .technical-return-notice.pending, .customer-account-gate.error, .insight-section.warning) { background: var(--mg-warning-soft); border-color: #d6b278; }
html[data-mg-theme="light"] :is(
  .guided-problem-icon, .guided-problem-head small, .technical-check.warning .alert-icon,
  .technical-check.warning .technical-check-instructions span,
  .technical-review-status.manual > .material-symbols-rounded,
  .technical-return-notice.pending > .material-symbols-rounded,
  .technical-check-actions > small .material-symbols-rounded,
  .technical-recommendations.empty .technical-recommendations-heading > .material-symbols-rounded,
  .technical-recommendation-routes .material-symbols-rounded,
  .build-progress-warning, .pc-name-counter.near-limit
) { color: var(--mg-warning); }
html[data-mg-theme="light"] :is(.technical-check.critical, .technical-review-status.critical, .technical-correction-guide.failed, .technical-correction-result) { background: var(--mg-danger-soft); border-color: #d695a1; }
html[data-mg-theme="light"] :is(.technical-correction-result b, .technical-correction-result > .material-symbols-rounded, .campo-errore-msg) { color: var(--mg-danger); }
html[data-mg-theme="light"] :is(.technical-correction-icon, .technical-correction-copy > span, .chapter-top-action.technical-correction > div > .material-symbols-rounded, .technical-recommendation-price) { color: var(--mg-pink); }
html[data-mg-theme="light"] :is(.technical-check-instructions, .technical-check-instructions > div, .technical-check-actions) { background: rgba(255, 255, 255, .5); border-color: var(--mg-line); }
html[data-mg-theme="light"] .technical-recommendation-routes > button { color: var(--mg-warning); background: var(--mg-warning-soft); border-color: #d6b278; }
html[data-mg-theme="light"] :is(.customer-account-gate, .mobile-build-progress, .compare-dock) { color: var(--mg-text); background: #fcfbfa; border-color: var(--mg-line-strong); box-shadow: var(--mg-shadow); }
html[data-mg-theme="light"] .customer-account-gate.authenticated .customer-account-icon { color: var(--mg-cyan); background: #cbe4db; }
html[data-mg-theme="light"] .build-generate-locked.ready { color: var(--mg-cyan); }
html[data-mg-theme="light"] .modal-sp-note { color: var(--mg-cyan); background: var(--mg-cyan-soft); border-color: #b4cec5; }
html[data-mg-theme="light"] :is(.customer-account-button, .customer-account-link) { min-height: 44px; }
/* Supplier snippets still carry inline dark-mode colours. */
html[data-mg-theme="light"] .product-stock[style] { color: var(--mg-warning) !important; }
html[data-mg-theme="light"] .product-stock[style*="#ef4444"],
html[data-mg-theme="light"] .product-incompat-reason { color: var(--mg-danger) !important; background: var(--mg-danger-soft) !important; border-color: #d695a1 !important; }
html[data-mg-theme="light"] #stepCounter { color: var(--mg-cyan) !important; }

/* Sheets, photo viewer and status feedback. */
html[data-mg-theme="light"] :is(.modal-overlay, .v2-overlay, .product-photo-modal) { background: rgba(28, 32, 36, .46); }
html[data-mg-theme="light"] :is(.modal, .v2-overlay-panel, .product-photo-modal-panel) { color: var(--mg-text); background: #fcfbfa; border-color: var(--mg-line); box-shadow: 0 24px 80px rgba(43, 32, 29, .24); }
html[data-mg-theme="light"] .modal-header { background: #fcfbfa; }
html[data-mg-theme="light"] .mg-urgency { background: var(--mg-pink-soft); border-color: #e7b9c9; box-shadow: none; }
html[data-mg-theme="light"] :is(.mg-urg-title, .mg-urg-new) { color: var(--mg-text); }
html[data-mg-theme="light"] :is(.mg-urg-sub, .mg-urg-plbl, .mg-urg-old, .mg-urg-code-lbl, .mg-scalapay-note) { color: var(--mg-muted); }
html[data-mg-theme="light"] .mg-urg-hl { color: var(--mg-pink); background: none; -webkit-text-fill-color: currentColor; }
html[data-mg-theme="light"] :is(.mg-urg-flag, .mg-urg-copy) { background: var(--mg-action); color: #fff; }
html[data-mg-theme="light"] .mg-urg-pricerow { background: #fff; border: 1px solid #e7b9c9; }
html[data-mg-theme="light"] .mg-urg-save { color: var(--mg-cyan); background: var(--mg-cyan-soft); }
html[data-mg-theme="light"] .product-photo-modal-stage { background: #fff; }
html[data-mg-theme="light"] #toast { color: #fff; background: #1c2024; border-color: #4c5054; }
html[data-mg-theme="light"] .site-footer { background: var(--mg-bg-deep); border-color: var(--mg-line); }
html[data-mg-theme="light"] ::selection { color: #fff; background: var(--mg-pink); }
html[data-mg-theme="light"] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mg-pink-2); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-mg-theme="light"] *,
  html[data-mg-theme="light"] *::before,
  html[data-mg-theme="light"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 768px) {
  html[data-mg-theme="light"] .topbar {
    background: rgba(242, 240, 239, .97);
  }

  html[data-mg-theme="light"] .mobile-build-summary {
    box-shadow: 0 -8px 28px rgba(43, 32, 29, .1);
  }
  html[data-mg-theme="light"] .progress-dot.active { background: var(--mg-pink-soft); border-color: #e7b9c9; }
  html[data-mg-theme="light"] .product-card.selected { box-shadow: 0 0 0 1px var(--mg-pink), var(--mg-shadow); }
  html[data-mg-theme="light"] .chapter-product-preview { opacity: 1; }
  html[data-mg-theme="light"] .customer-account-actions { gap: 8px; }
  html[data-mg-theme="light"] .mbb-btn { white-space: normal; line-height: 1.2; text-align: center; min-width: 0; }
}

/* Off White Studio: tactile canvas, centered composition, restrained depth.
 * The tiny cached texture is static: no canvas, JS, animation or click overlay.
 */
html[data-mg-theme="light"] body {
  background-image: url('assets/off-white-grain.svg'),
    radial-gradient(ellipse at 12% 18%, rgba(221, 190, 205, .32), transparent 42rem),
    radial-gradient(ellipse at 78% 52%, rgba(183, 206, 218, .28), transparent 48rem);
  background-size: 160px 160px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-color: var(--mg-bg);
}
html[data-mg-theme="light"] .ecosystem-shell { --ecosystem-width: 780px; }
html[data-mg-theme="light"] .ecosystem-shell :is(.ecosystem-hero, .ecosystem-choice-heading, .pf-brand-row, .pf-socket-section) {
  width: 100%;
  max-width: var(--ecosystem-width);
  margin-inline: auto;
}
html[data-mg-theme="light"] .ecosystem-hero {
  /* Local on-dark token also covers the shared high-specificity text rules. */
  --mg-muted: var(--ecosystem-muted);
  min-height: 264px;
  margin-bottom: 24px;
  background-color: var(--ecosystem-bg);
  background-image: url('assets/off-white-grain.svg'),
    radial-gradient(ellipse at 0% 0%, rgba(230, 28, 151, .2), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(82, 108, 255, .2), transparent 45%),
    linear-gradient(125deg, var(--ecosystem-bg), var(--ecosystem-bg-end));
  background-size: 160px 160px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  border-color: #59356e;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(32, 14, 52, .16), inset 0 1px 0 rgba(255, 255, 255, .09);
}
html[data-mg-theme="light"] .ecosystem-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(194, 177, 225, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 177, 225, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000);
  pointer-events: none;
}
html[data-mg-theme="light"] .ecosystem-hero::after {
  inset: auto 0 0;
  background: linear-gradient(90deg, #d83d94, #9861ff, #526cff);
  opacity: .9;
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-hero-copy {
  width: 100%;
  min-height: 264px;
  padding: 30px 32px;
  align-items: center;
  text-align: center;
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-eyebrow {
  max-width: 100%;
  justify-content: center;
  padding: 7px 12px;
  color: var(--ecosystem-accent);
  border: 1px solid rgba(185, 255, 0, .3);
  border-radius: 8px;
  background: var(--ecosystem-pill);
  font-size: 10px;
  letter-spacing: .13em;
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-title {
  max-width: 680px;
  margin-top: 14px;
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ecosystem-text);
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-title strong {
  display: block;
  color: var(--ecosystem-accent);
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-description {
  max-width: 470px;
  margin-top: 12px;
  font-size: 14px;
  text-wrap: balance;
  color: var(--ecosystem-muted);
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-constraint {
  justify-content: center;
  margin-top: 14px;
  color: var(--ecosystem-muted);
  background: var(--ecosystem-pill);
  border-color: rgba(217, 211, 230, .25);
}
html[data-mg-theme="light"] .ecosystem-hero .chapter-index {
  color: var(--ecosystem-muted);
  background: var(--ecosystem-pill);
  border-color: rgba(217, 211, 230, .25);
}
html[data-mg-theme="light"] .ecosystem-choice-heading {
  justify-content: center;
  text-align: center;
  margin-bottom: 18px;
}
html[data-mg-theme="light"] .ecosystem-choice-heading .component-toolbar-title { font-size: 19px; }
html[data-mg-theme="light"] .ecosystem-choice-heading .component-toolbar-note { font-size: 12px; line-height: 1.5; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-row {
  margin-inline: auto;
  gap: 18px;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand {
  --pf-accent: #ff9dd4;
  --pf-tint: #31162f;
  --pf-surface: #1d1425;
  --pf-edge: #d83d94;
  --pf-badge: #48223d;
  --pf-text: #fffafe;
  --pf-muted: #e0cade;
  --mg-text: var(--pf-text);
  --mg-muted: var(--pf-muted);
  min-height: 248px;
  padding: 24px 20px 18px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--pf-edge);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--pf-tint), var(--pf-surface));
  box-shadow: 0 12px 26px rgba(30, 12, 47, .16), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand[data-mark="INTEL"] {
  --pf-accent: #aac7ff;
  --pf-tint: #182b52;
  --pf-surface: #151d35;
  --pf-edge: #526cff;
  --pf-badge: #22375c;
  --pf-muted: #d0dcf9;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand::before { content: none; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand::after {
  height: 3px;
  inset: auto 12% 0;
  opacity: .8;
  background: linear-gradient(90deg, transparent, var(--pf-edge), transparent);
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-emblem {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--pf-accent);
  background: var(--pf-badge);
  border: 1px solid var(--pf-edge);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(30, 12, 47, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-emblem .material-symbols-rounded { font-size: 27px; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-name { font-size: clamp(38px, 4.5vw, 58px); margin-bottom: 0; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-sub { color: var(--mg-muted); font-size: 11px; margin-top: 8px; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-badge {
  max-width: 100%;
  margin-top: 12px;
  color: var(--pf-accent);
  background: var(--pf-badge);
  border-color: var(--pf-edge);
  font-size: 9px;
  line-height: 1.5;
  text-wrap: balance;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  color: var(--pf-accent);
  font-size: 13px;
  font-weight: 650;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-action .material-symbols-rounded { font-size: 18px; }
/* Brand-card example: genuine wordmarks, useful family names, one selection action. */
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-branded { font-family: inherit; cursor: pointer; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-wordmark {
  display: grid;
  place-items: center;
  width: min(100%, 224px);
  height: 88px;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-wordmark img {
  display: block;
  width: 196px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand[data-mark="INTEL"] .pf-brand-wordmark img { width: 160px; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-family {
  margin-top: 8px;
  color: var(--pf-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-branded .pf-brand-action {
  min-height: 44px;
  margin-top: 24px;
  padding: 8px 18px;
  border: 1px solid var(--pf-edge);
  border-radius: 999px;
  background: var(--pf-badge);
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand.pf-brand-branded.active .pf-brand-action {
  color: var(--game-ink);
  background: var(--mg-lime);
  border-color: var(--mg-lime);
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand-branded:focus-visible {
  outline: 3px solid var(--game-focus);
  outline-offset: 5px;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand.active {
  background: linear-gradient(145deg, var(--pf-tint), var(--pf-surface));
  border-color: var(--mg-lime);
  box-shadow: 0 0 0 1px var(--mg-lime), 0 14px 28px rgba(30, 12, 47, .22);
  transform: none;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-brand.active::after { opacity: 1; }
html[data-mg-theme="light"] .ecosystem-shell .pf-brand.active .pf-brand-action { color: var(--mg-lime); }
html[data-mg-theme="light"] .ecosystem-shell .pf-socket-section { margin: 28px auto 0; }
html[data-mg-theme="light"] .subcat-icon.subcat-brand {
  width: 88px;
  height: 44px;
  padding: 8px;
  color: var(--game-text);
  background: #21192d;
  border-color: #665376;
}
html[data-mg-theme="light"] .subcat-brand img {
  display: block;
  width: 72px;
  max-width: 100%;
  height: auto;
  max-height: 28px;
  object-fit: contain;
}
html[data-mg-theme="light"] .ecosystem-shell .pf-socket-label { color: var(--mg-muted); font-size: 12px; }
html[data-mg-theme="light"] .ecosystem-shell .pf-socket-card { align-items: center; text-align: center; }
html[data-mg-theme="light"] .achievement-popup .ach-label { color: var(--mg-cyan); }
html[data-mg-theme="light"] .achievement-popup :is(.ach-desc, .ach-product) { color: var(--mg-muted); }
html[data-mg-theme="light"] .achievement-popup .ach-product { background: var(--mg-panel-soft); border-color: var(--mg-line); }

@media (hover: hover) and (pointer: fine) {
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, var(--pf-tint), var(--pf-surface));
    border-color: var(--pf-accent);
    box-shadow: 0 18px 32px rgba(30, 12, 47, .2), inset 0 0 24px rgba(152, 97, 255, .06);
  }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand.active:hover { border-color: var(--mg-lime); }
}
@media (max-width: 768px) {
  html[data-mg-theme="light"] .ecosystem-hero { min-height: 0; margin-bottom: 20px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-hero-copy { min-height: 0; padding: 26px 18px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-title { font-size: clamp(30px, 8.8vw, 42px); margin-top: 14px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-eyebrow { font-size: 9px; gap: 6px; letter-spacing: .09em; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-description { max-width: 32ch; font-size: 13px; line-height: 1.5; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-constraint { max-width: 32ch; align-items: center; font-size: 10px; line-height: 1.45; border-radius: 12px; }
  html[data-mg-theme="light"] .ecosystem-choice-heading .component-toolbar-title { font-size: 18px; }
  html[data-mg-theme="light"] .ecosystem-choice-heading .component-toolbar-note { max-width: 34ch; margin-inline: auto; font-size: 12px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-row { gap: 10px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand { min-height: 212px; padding: 18px 9px 16px; border-radius: 20px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-emblem { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-emblem .material-symbols-rounded { font-size: 24px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-name { font-size: clamp(29px, 8.5vw, 38px); }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-sub { font-size: 9px; letter-spacing: .07em; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-badge { min-height: 36px; display: grid; place-items: center; padding: 5px 7px; font-size: 9px; letter-spacing: .025em; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-action { font-size: 12px; margin-top: 13px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-wordmark { height: 68px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-wordmark img { width: 116px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand[data-mark="INTEL"] .pf-brand-wordmark img { width: 96px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-family { font-size: 12px; letter-spacing: 0; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-branded .pf-brand-action { margin-top: 18px; padding: 8px 9px; font-size: 11px; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html[data-mg-theme="light"] .ecosystem-hero { min-height: 0; margin-bottom: 14px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-hero-copy { min-height: 0; padding: 14px 20px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-title { font-size: 30px; margin-top: 8px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-title strong { display: inline; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand { min-height: 180px; padding: 16px; }
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand-emblem { margin-bottom: 8px; }
  html[data-mg-theme="light"] .mbb-bar {
    grid-template-columns: 44px minmax(0, 1fr) minmax(140px, .7fr);
    align-items: center;
    gap: 12px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  }
  html[data-mg-theme="light"] .v2-mobile-back { width: 44px; height: 48px; display: grid; place-items: center; border-radius: 12px; }
  html[data-mg-theme="light"] .mbb-info {
    min-width: 0;
    min-height: 48px;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--mg-text);
    text-align: left;
    background: #fcfbfa;
    border: 1px solid var(--mg-line);
    border-radius: 12px;
  }
  html[data-mg-theme="light"] .mbb-info > .material-symbols-rounded { color: var(--mg-cyan); font-size: 22px; }
  html[data-mg-theme="light"] .mbb-info > span { min-width: 0; display: grid; gap: 2px; }
  html[data-mg-theme="light"] .mbb-total { color: var(--mg-text); -webkit-text-fill-color: currentColor; background: none; font-size: 14px; }
  html[data-mg-theme="light"] .mbb-rata { color: var(--mg-muted); font-size: 10px; }
  html[data-mg-theme="light"] .mbb-btn { min-width: 0; min-height: 48px; padding: 8px 12px; border-radius: 12px; font-size: 12px; white-space: normal; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mg-theme="light"] .ecosystem-shell .pf-brand:hover { transform: none; }
}

/* Center the brand independently of the price controls. On narrow screens
 * the controls get their own row, rather than pushing the logo off-center.
 */
html[data-mg-theme="light"] .topbar-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px minmax(0, 1fr);
  gap: 16px;
}
html[data-mg-theme="light"] .topbar-content {
  grid-column: 2;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
}
html[data-mg-theme="light"] .topbar-brand { justify-content: center; max-width: 100%; min-height: 44px; padding: 0; }
/* Cover trims only the transparent margins of the existing vector master.
 * The artwork stays proportional; the header keeps its original height.
 */
html[data-mg-theme="light"] .topbar-brand img { width: 224px; height: 64px; max-height: none; object-fit: cover; object-position: center; }
html[data-mg-theme="light"] .v2-header-actions { grid-column: 3; justify-self: end; margin-left: 0; }
html[data-mg-theme="light"] .v2-save-status { display: none; }
html[data-mg-theme="light"] .v2-header-build {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  color: var(--ecosystem-text);
  background: var(--ecosystem-bg);
  border: 1px solid #59356e;
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, border-color 180ms ease;
}
html[data-mg-theme="light"] .v2-header-build:hover { background: var(--ecosystem-bg-end); border-color: var(--mg-pink); }
html[data-mg-theme="light"] .v2-header-build > .material-symbols-rounded { color: var(--mg-lime); font-size: 22px; }
html[data-mg-theme="light"] .v2-header-build-count {
  padding: 4px 8px;
  color: var(--mg-text);
  background: var(--mg-lime);
  border-radius: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1080px) {
  html[data-mg-theme="light"] { --mg-header-h: 112px; }
  html[data-mg-theme="light"] .topbar-inner {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px minmax(44px, 1fr);
    gap: 6px;
    padding: 6px 12px;
  }
  html[data-mg-theme="light"] .topbar-content { grid-column: 1; grid-row: 1; }
  html[data-mg-theme="light"] .topbar-brand { width: 176px; max-width: 176px; flex: none; }
  html[data-mg-theme="light"] .topbar-brand img { width: 176px; height: 44px; }
  html[data-mg-theme="light"] .v2-header-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 440px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 8px;
  }
  html[data-mg-theme="light"] .v2-header-build { display: none; }
  html[data-mg-theme="light"] :is(.v2-header-total, .v2-header-financing) { min-width: 0; min-height: 44px; padding: 5px 9px; align-items: flex-start; }
  html[data-mg-theme="light"] .v2-header-kicker { font-size: 9px; letter-spacing: .04em; }
  html[data-mg-theme="light"] :is(.v2-header-total, .v2-header-financing) .v2-header-value { font-size: 13px; }
}
@media (min-width: 700px) and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html[data-mg-theme="light"] { --mg-header-h: 64px; }
  html[data-mg-theme="light"] .topbar-inner { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); grid-template-rows: 1fr; gap: 12px; padding: 6px 12px; }
  html[data-mg-theme="light"] .topbar-content { grid-column: 2; grid-row: 1; }
  html[data-mg-theme="light"] .topbar-brand { width: 160px; max-width: 160px; }
  html[data-mg-theme="light"] .topbar-brand img { width: 160px; height: 44px; }
  html[data-mg-theme="light"] .v2-header-actions { grid-column: 3; grid-row: 1; justify-self: end; width: auto; grid-template-columns: 84px 98px 44px; gap: 6px; }
  html[data-mg-theme="light"] .v2-header-kicker { font-size: 7px; }
  html[data-mg-theme="light"] :is(.v2-header-total, .v2-header-financing) .v2-header-value { font-size: 11px; }
}

/* One visual axis: the summary is opened from the header, never an extra row.
 * Reuse the accessible mobile summary as a desktop drawer / mobile sheet.
 */
html[data-mg-theme="light"] .main-wrap {
  display: block;
  max-width: 1240px;
}
html[data-mg-theme="light"] .content {
  min-height: 0;
  padding: 24px 32px 64px;
  border-right: 0;
}
html[data-mg-theme="light"] .sidebar { display: none !important; }
html[data-mg-theme="light"] .build-summary-modal { padding: 0; background: rgba(15, 31, 33, .56); backdrop-filter: blur(5px); }
html[data-mg-theme="light"] .build-summary-modal.open { place-items: stretch end; }
html[data-mg-theme="light"] .build-summary-panel {
  width: min(480px, 100%);
  height: 100dvh;
  max-height: 100dvh;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  border-radius: 24px 0 0 24px;
  background: var(--mg-bg);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-shadow: -16px 0 60px rgba(15, 31, 33, .2);
}
html[data-mg-theme="light"] .build-summary-panel .v2-overlay-close { width: 44px; height: 44px; }
html[data-mg-theme="light"] .build-summary-panel .overlay-heading p { font-size: 14px; line-height: 1.5; }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-summary { padding: 0; border: 0; background: transparent; box-shadow: none; }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-progress { background: var(--mg-cyan-soft); border-color: #b4cec5; }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-progress span { font-size: 12px; }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-row-copy strong { font-size: 13px; }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-row-copy small { font-size: 12px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
html[data-mg-theme="light"] .content .pf-socket-section,
html[data-mg-theme="light"] .content .guided-problem-card { scroll-margin-top: calc(var(--mg-header-h) + 20px); }
@media (min-width: 769px) {
  html[data-mg-theme="light"] .ecosystem-hero { min-height: 212px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-hero-copy { min-height: 212px; padding: 20px 28px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-eyebrow { padding: 5px 10px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-title { max-width: 900px; font-size: clamp(34px, 3.5vw, 46px); margin-top: 10px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-title strong { display: inline; margin-inline-start: .2em; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-description { max-width: 600px; margin-top: 10px; }
  html[data-mg-theme="light"] .ecosystem-hero .chapter-constraint { margin-top: 10px; }
}
@media (max-width: 1080px) {
  html[data-mg-theme="light"] .build-summary-modal { padding: 12px 12px 0; }
  html[data-mg-theme="light"] .build-summary-modal.open { place-items: end center; }
  html[data-mg-theme="light"] .build-summary-panel { width: min(560px, 100%); height: auto; max-height: 88dvh; border-radius: 24px 24px 0 0; padding-top: 18px; }
}
@media (max-width: 768px) {
  html[data-mg-theme="light"] .content { padding: 12px 12px 28px; }
}

/* Gaming workflow. Local semantic aliases keep inherited/hardcoded legacy
 * text readable on graphite without turning the Off White canvas dark.
 * No geometry, handlers or catalog/account/checkout behaviour changes here.
 */
html[data-mg-theme="light"] :is(
  .chapter-hero, .pf-socket-card, .subcat-card, .product-card, .catalog-tools,
  .resoconto-box, .summary-card, .build-summary, .saved-build-choice,
  .build-summary-panel, .mobile-build-summary, .mobile-build-row, .compat-banner,
  .comparison-guide, .comparison-verdict, .comparison-advantage-card,
  .comparison-row, .comparison-card, .insight-section, .insight-spec-group, .fps-visualizer,
  .chapter-top-action, .summary-top-action, .v2-header-total, .v2-header-financing,
  .technical-review-status, .technical-check, .technical-correction-guide,
  .technical-recommendations, .technical-recommendation, .technical-return-notice,
  .guided-problem-card, .guided-solution-product, .workshop-checks,
  .build-creation-progress, .customer-account-gate, .build-save-result,
  .modal, .v2-overlay-panel, .product-photo-modal-panel, .achievement-popup,
  .build-undo, .compare-dock, .mbb-info, .v2-empty-state, .site-footer
) {
  --mg-text: var(--game-text);
  --mg-muted: var(--game-muted);
  --mg-muted-2: var(--game-muted);
  --mg-panel: var(--game-panel);
  --mg-panel-strong: var(--game-panel-raised);
  --mg-panel-soft: var(--game-panel-soft);
  --mg-line: var(--game-line);
  --mg-line-strong: var(--game-line);
  --mg-pink: var(--game-magenta);
  --mg-pink-2: var(--game-focus);
  --mg-pink-soft: var(--game-panel-soft);
  --mg-cyan: var(--game-success);
  --mg-cyan-soft: var(--game-success-bg);
  --mg-success: var(--game-success);
  --mg-warning: var(--game-warning);
  --mg-warning-soft: var(--game-warning-bg);
  --mg-danger: var(--game-danger);
  --mg-danger-soft: var(--game-danger-bg);
  --teal: var(--game-success);
  --punch: var(--game-magenta);
  --ink: var(--game-text);
  --ink2: var(--game-muted);
  --ink3: var(--game-muted);
  --ink4: var(--game-muted);
  --muted: var(--game-muted);
  color-scheme: dark;
  color: var(--mg-text);
}
html[data-mg-theme="light"] :is(
  .pf-socket-card, .subcat-card, .product-card, .catalog-tools, .resoconto-box,
  .summary-card, .build-summary, .mobile-build-summary, .comparison-row,
  .comparison-card, .saved-build-choice, .chapter-top-action, .summary-top-action,
  .insight-section, .insight-spec-group, .comparison-guide, .comparison-verdict,
  .comparison-advantage-card, .fps-visualizer, .technical-review-status,
  .technical-check, .technical-correction-guide, .technical-recommendations,
  .technical-recommendation, .guided-problem-card, .guided-solution-product,
  .workshop-checks, .build-creation-progress, .mobile-build-row,
  .customer-account-gate, .achievement-popup, .build-undo, .compare-dock,
  .v2-header-total, .v2-header-financing, .mbb-info, .v2-empty-state, .site-footer
) {
  color: var(--game-text);
  background: linear-gradient(135deg, var(--game-panel-raised), var(--game-panel) 75%);
  /* Gradients otherwise leave background-color transparent. During a hover
   * transition the gradient disappears before the new colour is opaque.
   */
  background-color: var(--game-panel);
  border-color: var(--game-line);
  box-shadow: 0 12px 30px rgba(32, 14, 52, .12), inset 0 1px 0 rgba(255, 255, 255, .045);
}
html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) {
  background: radial-gradient(ellipse at 100% 100%, rgba(82, 108, 255, .17), transparent 50%),
    radial-gradient(ellipse at 0% 0%, rgba(230, 28, 151, .12), transparent 45%),
    linear-gradient(125deg, var(--ecosystem-bg), var(--ecosystem-bg-end));
  border-color: var(--game-line);
}
html[data-mg-theme="light"] .chapter-hero .chapter-title strong { color: var(--mg-lime); }
html[data-mg-theme="light"] .chapter-hero .chapter-eyebrow { color: var(--mg-lime); }
html[data-mg-theme="light"] .chapter-hero :is(.chapter-index, .chapter-constraint) {
  color: var(--game-muted); background: var(--game-panel-soft); border-color: var(--game-line);
}
html[data-mg-theme="light"] :is(.pf-socket-card, .subcat-card, .product-card):hover {
  color: var(--game-text); background: var(--game-hover);
  border-color: var(--game-magenta); box-shadow: 0 14px 32px rgba(32, 14, 52, .18);
}
html[data-mg-theme="light"] :is(.pf-socket-card.active, .subcat-card.selected, .subcat-card.active, .product-card.selected),
html[data-mg-theme="light"] :is(.pf-socket-card.active, .subcat-card.selected, .subcat-card.active, .product-card.selected):hover {
  color: var(--game-text); background: var(--game-panel-raised);
  border-color: var(--mg-lime); box-shadow: 0 0 0 1px var(--mg-lime), 0 12px 30px rgba(32, 14, 52, .14);
}
html[data-mg-theme="light"] :is(.pf-socket-card.active, .subcat-card.selected, .subcat-card.active, .product-card.selected):hover {
  background: var(--game-hover);
}
/* Keep the purchase/action cluster proportional on desktop. Phones retain
 * their existing full-width, 44px-or-larger touch controls.
 */
@media (min-width: 769px) {
  html[data-mg-theme="light"] .product-card-actions { width: min(100%, 480px); }
  html[data-mg-theme="light"] .product-secondary-actions .product-action { min-height: 44px; }
}
html[data-mg-theme="light"] :is(.pf-socket-badge-label, .subcat-count, .subcat-icon, .v2-header-value) { color: var(--game-magenta); }
html[data-mg-theme="light"] .subcat-icon { background: var(--game-panel-soft); border-color: var(--game-line); }
html[data-mg-theme="light"] :is(.pf-socket-card.active .pf-socket-badge-label, .product-select-state.selected) { color: var(--mg-lime); }
html[data-mg-theme="light"] :is(.pf-socket-ddr, .product-badge.ok, .product-select-state.selected) { background: var(--game-success-bg); border-color: var(--game-success); }
html[data-mg-theme="light"] :is(.product-badge.punch, .product-smart-badge, .active-filter-chip) { color: var(--game-magenta); background: var(--game-panel-soft); border-color: var(--game-magenta); }
html[data-mg-theme="light"] .optional-chip { color: #49316a; background: #e9dff4; border-color: #b29ec9; }
html[data-mg-theme="light"] .catalog-tools .sort-control > span { color: var(--game-muted); }
html[data-mg-theme="light"] :is(.search-input, .sort-control select, .form-input, textarea, select) {
  color-scheme: dark; color: var(--game-text); background: var(--game-field); border-color: var(--game-line);
}
html[data-mg-theme="light"] :is(.search-input, .form-input, textarea)::placeholder { color: var(--game-muted); }
html[data-mg-theme="light"] .form-input[readonly] { color: var(--game-muted); background: var(--game-panel-soft); }
html[data-mg-theme="light"] .form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--game-text); -webkit-box-shadow: 0 0 0 1000px var(--game-field) inset;
}
html[data-mg-theme="light"] :is(
  .availability-toggle, .step-back-btn, .product-action.compare, .product-action.insight,
  .subcat-back, .saved-build-discard, .technical-check-edit.secondary,
  .technical-correction-guide > button, .guided-fix-secondary, .optional-top-action button,
  .topbar-sounds, .v2-mobile-back, .customer-account-link, .modal-close,
  .v2-overlay-close, .comparison-clear, .comparison-remove, .fps-controls button,
  .overlay-secondary, .step-skip-btn, .technical-return-notice button, .modal-save-build
) { color: var(--game-text); background: var(--game-panel-raised); border-color: var(--game-line); }
html[data-mg-theme="light"] :is(.availability-toggle, .step-back-btn, .product-action.compare, .product-action.insight):hover {
  color: var(--game-text); background: var(--game-panel-soft); border-color: var(--game-blue);
}
html[data-mg-theme="light"] :is(.availability-toggle.active, .product-action.compare.active, .topbar-sounds.is-on) {
  color: var(--mg-lime); background: var(--game-panel-raised); border-color: var(--mg-lime);
}
/* One action colour, with dark labels rather than illegible white on neon. */
html[data-mg-theme="light"] :is(
  .product-action.select, .product-action.select:hover, .product-action.select:focus-visible,
  .step-continue-btn, .step-skip-btn-top, .cta-primary, .mbb-btn, .overlay-primary,
  .compare-dock button, .compare-dock.ready-yes button, .guided-fix-primary,
  .technical-check-edit, .saved-build-resume, .chapter-top-action button,
  .summary-top-action button, .customer-account-button, .technical-recommendation-action,
  .modal-buy-shopify, .modal-buy-shopify:hover:not(:disabled)
) { color: var(--game-ink); background: var(--mg-lime); border-color: var(--mg-lime); box-shadow: 0 5px 18px rgba(100, 125, 0, .14); }
html[data-mg-theme="light"] .product-action.select :is(strong, small) { color: var(--game-ink); }
html[data-mg-theme="light"] .technical-check-edit.secondary {
  color: var(--game-text); background: var(--game-panel-raised); border-color: var(--game-line); box-shadow: none;
}
html[data-mg-theme="light"] :is(.product-action.select.selected, .product-action.select.selected:hover, .product-action.select.selected:focus-visible) {
  color: var(--mg-lime); background: var(--game-success-bg); border-color: var(--mg-lime); box-shadow: none;
}
html[data-mg-theme="light"] .product-action.select.selected :is(strong, small) { color: var(--mg-lime); }
html[data-mg-theme="light"] .product-card .product-select-state.selected {
  color: var(--mg-lime); background: var(--game-success-bg); border-color: var(--mg-lime);
}
html[data-mg-theme="light"] :is(.fps-controls button.active, .fps-controls .fps-upscale.active) { color: var(--game-ink); background: var(--mg-lime); border-color: var(--mg-lime); }
html[data-mg-theme="light"] :is(.product-action.select:disabled, .modal-buy-shopify:disabled, .modal-save-build:disabled, .overlay-primary:disabled, .mbb-btn:disabled, .chapter-top-action.waiting button, .compare-dock button:disabled) {
  color: var(--game-muted); background: var(--game-panel-soft); border-color: var(--game-line); box-shadow: none;
}
html[data-mg-theme="light"] .product-action.select:disabled :is(strong, small) { color: var(--game-muted); }
html[data-mg-theme="light"] :is(.modal, .v2-overlay-panel, .product-photo-modal-panel) {
  color: var(--game-text); background: var(--game-panel); border-color: var(--game-line); box-shadow: 0 24px 70px rgba(25, 12, 38, .3);
}
html[data-mg-theme="light"] :is(.modal-header, .modal-footer, .v2-overlay-header, .technical-check-instructions, .technical-check-actions) {
  background: var(--game-panel-raised); border-color: var(--game-line);
}
html[data-mg-theme="light"] :is(.technical-check-instructions > div, .workshop-checks-list > div, .technical-verified-list > div) {
  background: var(--game-panel); border-color: var(--game-line);
}
html[data-mg-theme="light"] :is(.technical-check-instructions p, .technical-check-description, .technical-correction-copy p, .technical-recommendations-heading p, .technical-return-notice) { color: var(--game-muted); }
html[data-mg-theme="light"] :is(.customer-account-gate.authenticated, .build-save-result, .build-summary-panel .mobile-build-progress, .mobile-build-row.selected, .compat-banner) {
  color: var(--game-success); background: var(--game-success-bg); border-color: var(--game-success);
}
html[data-mg-theme="light"] .compat-banner.requirement {
  color: var(--game-blue); background: var(--game-panel-soft); border-color: var(--game-blue);
}
html[data-mg-theme="light"] .compat-banner.requirement strong { color: inherit; }
html[data-mg-theme="light"] :is(.guided-problem-card, .technical-check.warning, .technical-review-status.manual, .technical-recommendations.empty, .technical-return-notice.pending, .customer-account-gate.error, .insight-section.warning, .summary-top-action.technical-review-required) {
  background: var(--game-warning-bg); border-color: var(--game-warning);
}
html[data-mg-theme="light"] :is(.technical-check.critical, .technical-review-status.critical, .technical-correction-guide.failed, .technical-correction-result, .product-incompat-reason) {
  background: var(--game-danger-bg); border-color: var(--game-danger);
}
html[data-mg-theme="light"] .technical-recommendation-routes > button { color: var(--game-warning); background: var(--game-warning-bg); border-color: var(--game-warning); }
html[data-mg-theme="light"] .product-stock[style] { color: var(--game-warning) !important; }
html[data-mg-theme="light"] .product-stock[style*="#ef4444"],
html[data-mg-theme="light"] .product-incompat-reason { color: var(--game-danger) !important; background: var(--game-danger-bg) !important; border-color: var(--game-danger) !important; }
html[data-mg-theme="light"] :is(.guided-progress-track, .build-progress-track, .build-health-bar, .mobile-build-meter, .fps-meter) { background: var(--game-line); }
html[data-mg-theme="light"] :is(.guided-progress-track, .build-progress-track) > div,
html[data-mg-theme="light"] .mobile-build-meter > span { background: var(--mg-lime); }
html[data-mg-theme="light"] .build-summary-panel { background: var(--game-panel); }
html[data-mg-theme="light"] .riep-row { background: transparent; box-shadow: none; border-color: var(--game-line); }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-progress strong { color: var(--game-text); }
html[data-mg-theme="light"] .build-summary-panel .mobile-build-row-icon { color: var(--game-blue); background: var(--game-panel-soft); }
html[data-mg-theme="light"] :is(.mobile-build-row-copy strong, .mbb-total) { color: var(--game-text); }
html[data-mg-theme="light"] .mbb-info { border-color: var(--game-line); }
html[data-mg-theme="light"] .mbb-info > .material-symbols-rounded { color: var(--mg-lime); }
html[data-mg-theme="light"] :is(.mbb-rata, .v2-header-kicker) { color: var(--game-muted); }
html[data-mg-theme="light"] .v2-header-build-count { color: var(--game-ink); }
html[data-mg-theme="light"] .modal-sp-note { color: var(--game-success); background: var(--game-success-bg); border-color: var(--game-success); }
html[data-mg-theme="light"] .pc-name-preview { color: var(--game-muted); background: var(--game-panel-soft); border-color: var(--game-line); }
html[data-mg-theme="light"] .mg-urgency { color: var(--game-text); background: var(--game-panel-raised); border-color: var(--game-magenta); }
html[data-mg-theme="light"] .mg-urg-pricerow { background: var(--game-panel); border-color: var(--game-line); }
html[data-mg-theme="light"] .mg-urg-save { color: var(--game-success); background: var(--game-success-bg); }
html[data-mg-theme="light"] :is(.product-photo, .product-image, .comparison-product-image, .insight-photo, .comparison-photo, .product-photo-modal-stage) {
  background: #fff; border-color: #ded9e6;
}
html[data-mg-theme="light"] :is(.product-photo-modal-copy strong, .comparison-cell-value, .fps-game-name) { color: var(--game-text); }
html[data-mg-theme="light"] :is(.product-photo-modal-kicker, .product-photo-modal-copy span) { color: var(--game-muted); }
html[data-mg-theme="light"] :is(.build-generate-locked, .build-action-step) .material-symbols-rounded { color: var(--game-success); }
html[data-mg-theme="light"] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--game-focus);
}

/* Give mobile category cutouts their own row: no faded picture behind copy. */
@media (max-width: 768px) {
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) { min-height: 0; }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-hero-copy {
    min-height: 0; padding: 112px 18px 22px;
  }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-eyebrow {
    position: absolute; top: 24px; left: 18px; max-width: calc(100% - 134px);
  }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-title {
    max-width: none; margin-top: 0;
  }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-description { max-width: none; }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-product-preview {
    display: grid; top: 10px; right: 16px; width: 96px; height: 96px; opacity: 1; transform: none;
  }
}
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-hero-copy {
    min-height: 132px; padding: 18px 142px 18px 18px;
  }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-eyebrow {
    position: static; max-width: none;
  }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-title { margin-top: 8px; }
  html[data-mg-theme="light"] .chapter-hero:not(.ecosystem-hero) .chapter-product-preview {
    display: grid; top: 50%; right: 18px; width: 104px; height: 104px; transform: translateY(-50%);
  }
}

/* Trophy finishes remain dark and metallic against the off-white canvas. */
html[data-mg-theme="light"] .achievement-popup.console-trophy {
  color: #f9f7ff;
  background: radial-gradient(ellipse at 5% 45%, var(--trophy-glow), transparent 60%), linear-gradient(135deg, #252333, #12121c);
  border-color: #ffffff29; border-left-color: var(--trophy-metal);
  box-shadow: 0 18px 50px #17122540, inset 0 1px 0 #fff1;
}
html[data-mg-theme="light"] .console-trophy .ach-title { color: #fff; }
html[data-mg-theme="light"] .console-trophy .ach-label { color: #d0cce0; }
html[data-mg-theme="light"] .console-trophy .ach-desc { color: #c7c4d5; }
html[data-mg-theme="light"] .console-trophy .ach-tier,
html[data-mg-theme="light"] .console-trophy .ach-meta { color: var(--trophy-metal); }
html[data-mg-theme="light"] .console-trophy .ach-product { color: #b5b1c8; background: none; border: 0; }
html[data-mg-theme="light"] .build-row-action { color: #cbff50; }
html[data-mg-theme="light"] .build-product-visual.has-photo { background: #fff; border-color: #fff; }
html[data-mg-theme="light"] .build-product-visual:not(.has-photo) { background: #282337; color: #c9c3de; border-color: #615870; }