/* Shared theme control; the light palette overrides Signal's shared layout. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-divider); border-radius: 10px; background: transparent; color: var(--color-text); cursor: pointer; }
.theme-toggle:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }
html[data-theme="signal"] .theme-icon-sun { display: block; }
html[data-theme="signal"] .theme-icon-moon { display: none; }
html[data-theme] .drawer-section-label { display: block; cursor: default; }
html[data-theme] .nav > .seg { margin-left: 0 !important; flex-shrink: 0; }

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-text: #1f2340;
  --text-muted: #59657c;
  --signal-blue: #248296;
  --color-divider: #24365720;
  --color-accent: #ff6f61;
  --color-accent-100: #fff0eb;
  --color-accent-200: #984a40;
  --color-accent-300: #bd483a;
  --color-accent-400: #e96958;
  --color-accent-500: #f47765;
  --color-accent-600: #b74336;
  --color-accent-700: #ab3f33;
  --color-accent-800: #78392f;
  --color-accent-900: #edf2f8;
  --color-accent-2: #248296;
  --color-accent-2-100: #eaf5f8;
  --color-accent-2-200: #d8edf2;
  --color-accent-2-300: #448c9b;
  --color-accent-2-400: #348798;
  --color-accent-2-500: #2c7f90;
  --color-accent-2-600: #236d7f;
  --color-accent-2-700: #25657b;
  --color-accent-2-800: #1c5265;
  --color-accent-2-900: #e9f1f8;
  --color-neutral-100: #eef2f7;
  --color-neutral-200: #e4eaf2;
  --color-neutral-300: #cbd4e2;
  --color-neutral-400: #9daabe;
  --color-neutral-500: #7b89a0;
  --color-neutral-600: #5e6d87;
  --color-neutral-700: #43516a;
  --color-neutral-800: #2b354d;
  --color-neutral-900: #182036;
  --shadow-sm: 0 4px 16px #26395708;
  --shadow-md: 0 16px 40px #2639570e;
  --shadow-lg: 0 28px 80px #26395718;
}
html[data-theme="light"] ::selection { color: #1f2340; background: #ffd7cf; }
html[data-theme="light"] .nav { background: #ffffffed !important; box-shadow: 0 4px 20px #22365904; }
html[data-theme="light"] [data-submenu] { background: #fffffffa; }
html[data-theme="light"] [data-subitem]:hover { background: #fff0eb; color: #1f2340; }
html[data-theme="light"] .seg { background: #f0f3f8; }
html[data-theme="light"] [data-lang="zh"] [data-langbtn="zh"],
html[data-theme="light"] [data-lang="ru"] [data-langbtn="ru"],
html[data-theme="light"] [data-lang="en"] [data-langbtn="en"] { color: #1f2340; }
html[data-theme="light"] [data-drawer] { background: #fff !important; }
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] [data-btn="wire"] { color: #2f3854; border-color: #c6cfde; background: #ffffffa8; }
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] [data-btn="wire"]:hover { background: #fff; border-color: #e18375; }

/* Bright, airy hero with a softly tinted workbench. */
html[data-theme="light"] .home-hero { background: #f7f9fc !important; }
html[data-theme="light"] .home-hero > div:first-child { opacity: .4 !important; background-image: linear-gradient(#48658d0c 1px, transparent 1px), linear-gradient(90deg, #48658d0c 1px, transparent 1px) !important; background-size: 72px 72px; }
html[data-theme="light"] .home-hero > div:nth-child(2) { background: radial-gradient(ellipse at 86% 28%, #ffded078, transparent 52%), radial-gradient(ellipse at 36% 100%, #dcecf77a, transparent 60%) !important; }
html[data-theme="light"] .hero-label { color: #a2473b; }
html[data-theme="light"] .hero-edition { color: #78849a; }
html[data-theme="light"] [data-hero-h1] [data-l] > span { color: #c14d3e !important; }
html[data-theme="light"] .home-hero [data-hero-rise] > p { color: #59657c !important; }
html[data-theme="light"] .hero-console { background: linear-gradient(145deg, #ffffffeb, #f1f5fbf5) !important; border-color: #c8d3e3 !important; box-shadow: 0 24px 70px #37507712, 0 0 60px #ff6f6108, inset 0 1px 0 #fff; }
html[data-theme="light"] .console-heading { border-color: #24365718; color: #5e6a81; }
html[data-theme="light"] .console-dots i { background: #c2ccdc; }
html[data-theme="light"] .console-dots i:first-child { background: #ff8575; }
html[data-theme="light"] .console-signal { background: repeating-linear-gradient(90deg, #248296 0 2px, transparent 2px 5px); }
html[data-theme="light"] #hero-draw { filter: none; }
html[data-theme="light"] #hero-draw > rect:first-of-type { fill: #a8d4df; opacity: .3; }
html[data-theme="light"] #hero-draw g[clip-path="url(#hero-print)"] { fill: #334e70; }

html[data-theme="light"] [data-invert] {
  --color-text: #1f2340;
  --color-divider: #24365720;
  --color-accent: #ff6f61;
  --color-accent-100: #fff0eb;
  --color-accent-400: #e96958;
  --color-accent-700: #ab3f33;
  --color-accent-800: #78392f;
}
html[data-theme="light"] [data-band="steel"] { background: linear-gradient(120deg, #edf2f8, #f2f6fb 60%, #eef4f8) !important; border-color: #2436570c; }
html[data-theme="light"] [data-band="steel"] > div[style*="pointer-events:none"] { opacity: .2 !important; background-image: linear-gradient(#48658d16 1px, transparent 1px), linear-gradient(90deg, #48658d16 1px, transparent 1px) !important; background-size: 72px 72px; }
html[data-theme="light"] [data-band="steel"] p { color: #546079 !important; }
html[data-theme="light"] [data-band="steel"] .tag-accent { color: #a3483b; background: #ffe8e0; }
html[data-theme="light"] [data-back]:hover { color: #ab3f33; }
html[data-theme="light"] [data-page] svg [stroke="#f2f2f3"] { stroke: #334e70; }
html[data-theme="light"] [data-page] svg [stroke="#eef6ff"] { stroke: #d65f50; }
html[data-theme="light"] [data-page] svg [fill="#eef6ff"] { fill: #d65f50; }

html[data-theme="light"] [data-sol="1"],
html[data-theme="light"] [data-ep],
html[data-theme="light"] .guide-link { background: #fff; border-color: #dae1eb; box-shadow: 0 6px 24px #26395706; }
html[data-theme="light"] [data-band="steel"] .blueprint { border-color: #cbd6e4; }
html[data-theme="light"] [data-page] .blueprint:hover { border-color: #ec9e91; }
html[data-theme="light"] [data-solmore],
html[data-theme="light"] .guide-link-action { color: #ab3f33; }
html[data-theme="light"] [data-sol="1"]:hover [data-solmore] { color: #81382f; }
html[data-theme="light"] .home-video-meta { color: #64738e; }
html[data-theme="light"] [data-flow] > div { background: #fff; }
html[data-theme="light"] [data-flow] > i { color: #bc665a; }
html[data-theme="light"] [data-series="pda"] { --s-ink: #a85643; --s-tint: #fff0e8; }
html[data-theme="light"] [data-series="admin"] { --s-ink: #266f83; --s-tint: #eaf5f8; }
html[data-theme="light"] .tutorial-entry { background: #fff; border-color: #d7e1ec; border-left-color: var(--s-ink); }
html[data-theme="light"] .tutorial-entry p,
html[data-theme="light"] [data-band="steel"] .tutorial-entry p { color: #59657c !important; }
html[data-theme="light"] .watch-player { border-color: #cbd6e4; }
html[data-theme="light"] .watch-item { background: #fff; }
html[data-theme="light"] .watch-item[aria-current="page"] { background: #fff0eb; color: #9e4033; border-color: #e8a496; }
html[data-theme="light"] .input { background: #fff; border-color: #cbd4e2; }
html[data-theme="light"] .input::placeholder { color: #77849a; }
html[data-theme="light"] [data-cmp="1"] thead [data-hcol="1"],
html[data-theme="light"] [data-cmp="1"]:has([data-col="2"]:hover) thead [data-hcol="2"],
html[data-theme="light"] [data-cmp="1"]:has([data-col="3"]:hover) thead [data-hcol="3"] { background: #ffebe4; }
html[data-theme="light"] [data-cmp="1"] tfoot [data-hcol="1"] button,
html[data-theme="light"] [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"] button,
html[data-theme="light"] [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] button { color: #1f2340; }
html[data-theme="light"] footer { background: #edf2f7; border-top-color: #d7dfea !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-theme="light"] .guide-link:hover,
  html[data-theme="light"] [data-sol="1"]:hover { box-shadow: 0 16px 36px #26395712; border-color: #e99d8e; }
}
@media (max-width: 480px) { .theme-toggle { width: 32px; height: 32px; } }
@media (max-width: 380px) {
  html[data-theme] .nav { gap: 6px !important; }
  html[data-theme] .nav .brand-logo { width: 96px; }
  html[data-theme] .nav [data-langbtn] { padding-inline: 5px; }
}