:root { color-scheme: dark; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #ffffff26;
  border-radius: 10px;
  background: var(--surface);
  color: #d6e8e1;
  box-shadow: 0 3px 9px #00000018, inset 0 1px 0 #ffffff08;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease, transform 150ms var(--motion-ease);
}
.theme-toggle-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
.theme-icon-sun, .theme-icon-moon { display: inline-flex; color: var(--mint); }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: inline-flex; }
.theme-toggle:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; box-shadow: 0 0 0 5px #55dfb41a; }

/* The text accent is deeper on pale surfaces, while primary buttons keep the brand mint. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8f5;
  --surface: #ffffff;
  --surface2: #eaf2ed;
  --mint: #087455;
  --ink: #142d35;
  --muted: #526b72;
  --line: #16383024;
  --orange: #895015;
  --paper: #eef4ef;
  --dark: #173c32;
  --shadow-surface: 0 8px 24px #163a2d0b, inset 0 1px 0 #ffffffc7;
  --shadow-raised: 0 16px 32px #163a2d16, 0 0 0 1px #08745513;
}
[data-theme="light"] .preview-bar { background: #deeee6; color: #45665a; }
[data-theme="light"] .preview-bar > span:first-child,
[data-theme="light"] .preview-bar > a { color: #176c4e; }
[data-theme="light"] #header { background: #f8fbf8f2; border-bottom-color: #cdded3; }
[data-theme="light"] .brand svg path { fill: #ffffff; }
[data-theme="light"] .nav-links > a { color: #47616b; }
[data-theme="light"] .nav-links > a.active { color: #163b31; }
[data-theme="light"] .theme-toggle { background: #fff; border-color: #bacfc2; color: #31594b; }
[data-theme="light"] .hero-note,
[data-theme="light"] .hero-bottom { color: #566f71; }
[data-theme="light"] .art-caption { color: #546e73; }
[data-theme="light"] .feature-icon { background: #e5f4eb; border-color: #26795726; color: #087455; }
[data-theme="light"] .feature-mini { color: #486a5d; }
[data-theme="light"] .road-band { background: linear-gradient(110deg, #eef8f1, #ffffff 50%, #e1f3e8); }
[data-theme="light"] .pro-section { background: #eaf2ed; }
[data-theme="light"] .dashboard { background: #ffffff; border-color: #c0d5c8; box-shadow: 0 18px 40px #173c321c; }
[data-theme="light"] .dash-stat { background: #eff5f0; }
[data-theme="light"] .dash-stat span { color: #526f66; }
[data-theme="light"] .check-list li { color: #3e5f63; }
[data-theme="light"] .float-card { background: #ffffffed; border-color: #bed6c7; box-shadow: 0 12px 28px #173c321c, inset 0 1px 0 #ffffff; }
[data-theme="light"] .float-card b { color: #183d37; }
[data-theme="light"] .float-card p { color: #4e6e65; }
/* This dark cockpit is an illustration of the app, not a site control. */
[data-theme="light"] .phone { color: #ecf2f3; --mint: #55dfb4; }
[data-theme="light"] .phone .avatar { background: #55dfb41c; color: #55dfb4; }
[data-theme="light"] .tag { background: #e5f4ec; border-color: #b9d9c6; color: #176c4e; }
[data-theme="light"] .tag.orange { background: #fff0dc; border-color: #dfc4a0; color: #865019; }
[data-theme="light"] .tag.gray { background: #eaf0ec; border-color: #cad9cf; color: #4d6860; }
[data-theme="light"] .btn { border-color: #a9c1b4; color: #254e45; box-shadow: 0 3px 9px #173c320c, inset 0 1px 0 #ffffffaa; }
[data-theme="light"] .btn.secondary { background: #e9f2ec; }
[data-theme="light"] .btn.primary { background: #55dfb4; border-color: #38b98e; color: #0a3429; box-shadow: 0 4px 14px #2b8f681a, inset 0 1px 0 #ffffff7a; }
[data-theme="light"] .btn.primary:disabled { box-shadow: none; }
[data-theme="light"] .article-meta { color: #526d63; }
[data-theme="light"] .article-meta .category { color: #1c7456; }
[data-theme="light"] .light p { color: #536d62; }
[data-theme="light"] .gear-tease { background: #fff; }
[data-theme="light"] .product-art { background: radial-gradient(ellipse, #f4f8ee, #e0ece3); }
[data-theme="light"] .product-art svg { color: #416c59; filter: drop-shadow(0 14px 9px #1c4c3224); }
[data-theme="light"] .gear-tease .product-art { background: none; }
[data-theme="light"] .cta-box { background: radial-gradient(ellipse at 90% 40%, #d1eddb88, transparent 70%), #e7f4eb; border-color: #b2d7c1; }
[data-theme="light"] .footer-top a:not(.brand) { color: #4e6a6f; }
[data-theme="light"] .footer-bottom { color: #5a7473; }
[data-theme="light"] .notice { background: #e9f5ef; border-color: #b7d9c6; color: #3b6652; }
[data-theme="light"] .notice.orange { background: #fff2e3; border-color: #e6c6a3; color: #795323; }
[data-theme="light"] .breadcrumb,
[data-theme="light"] .back-link { color: #4b6c67; }
[data-theme="light"] :is(.field label, label.field) { color: #425f66; }
[data-theme="light"] :is(.field input, .field select, .field textarea, input.control, select.control) {
  background: #fff;
  border-color: #b9cec1;
  color: #183b34;
}
[data-theme="light"] :is(input, textarea)::placeholder { color: #62756b; opacity: 1; }
[data-theme="light"] input[type="checkbox"] { accent-color: #087455; }
[data-theme="light"] .chip { color: #49675c; }
[data-theme="light"] .chip.active,
[data-theme="light"] .segmented button.active,
[data-theme="light"] .admin-tabs button.active { background: #087455; border-color: #087455; color: #fff; }
[data-theme="light"] .empty { color: #5c756c; border-color: #adc8b8; }
[data-theme="light"] .sidebar button { color: #4c6b61; }
[data-theme="light"] .sidebar button.active { color: #126c4d; background: #e5f4eb; }
[data-theme="light"] .role-box { background: #e9f4ed; border-color: #b8d5c3; }
[data-theme="light"] .topic-row { background: #fff; }
[data-theme="light"] .topic-row .topic-tail { color: #5c746e; }
[data-theme="light"] .topic-preview .reply-count { color: #5c746e; }
[data-theme="light"] .avatar { background: #deeee5; color: #24624b; }
[data-theme="light"] .author-line small { color: #5d746d; }
[data-theme="light"] .post-text { color: #3c5d60; }
[data-theme="light"] .favorite-btn { background: #ffffffdf; border-color: #b7cdbd; color: #4b715d; }
[data-theme="light"] .favorite-btn.active { color: #087455; background: #e0f5e8; }
[data-theme="light"] .spec-list dt { color: #5a716d; }
[data-theme="light"] .spec-list dd { color: #294e53; }
[data-theme="light"] .segmented { background: #e4eee7; border-color: #bdcfc5; }
[data-theme="light"] .segmented button { color: #48645c; }
[data-theme="light"] .price-card { background: #fff; border-color: #c8d9cc; }
[data-theme="light"] .price-card.featured { background: linear-gradient(155deg, #effbf4, #e1f5eb); border-color: #4b9b78; }
[data-theme="light"] .price-card .price span { color: #526b63; }
[data-theme="light"] .price-card .popular { background: #087455; color: #fff; }
[data-theme="light"] .check-field { color: #4b686b; }
[data-theme="light"] .screenshot-frame { background: #fff; }
[data-theme="light"] .fleet-board { background: #fff; border-color: #c7d9cb; }
[data-theme="light"] .fleet-day span { background: #eff4f0; }
[data-theme="light"] .fleet-day .assigned { background: #e1f4e8; color: #176c4e; }
[data-theme="light"] .fleet-day .rest { background: #fff0dc; color: #865019; }
[data-theme="light"] .admin-tabs button { border-color: #bcd1c4; }
[data-theme="light"] #admin-area th { color: #4b6d62; }
[data-theme="light"] .admin-error { color: #a23c28 !important; }
[data-theme="light"] .danger { color: #a23c28 !important; border-color: #c78c7b88 !important; }
[data-theme="light"] dialog { background: #fff; border-color: #b0d4bc; box-shadow: 0 28px 85px #18392b38, inset 0 1px 0 #fff; }
[data-theme="light"] dialog::backdrop { background: #173b466b; }
[data-theme="light"] .dialog-close { color: #526f66; }
[data-theme="light"] #toast { background: #e0f4e7; color: #164b35; border-color: #89be9c; }
[data-theme="light"] .table-wrap,
[data-theme="light"] .sidebar .panel:first-child > div { scrollbar-color: #a1bead transparent; }
[data-theme="light"] :is(.table-wrap, .sidebar .panel:first-child > div)::-webkit-scrollbar-thumb { background: #a1bead; }
[data-theme="light"] .topic-row:focus-visible { background: #e7f3ec; }
[data-theme="light"] :is(.btn, .chip, .favorite-btn, .mobile-menu, .dialog-close):focus-visible { box-shadow: 0 0 0 5px #0874551c, 0 5px 18px #173c3212; }

/* Theme fades only run when a visitor makes a choice, never on the first paint. */
.theme-changing :is(body, #header, .preview-bar, #footer, .pro-section, .section.light,
  .feature-card, .panel, .price-card, .product-card, .gear-tease, .road-band, .cta-box,
  .fleet-board, .screenshot-frame, .role-box, .dashboard, .dash-stat, .float-card,
  .nav-links, .topic-row, .segmented, .product-art, .notice, .tag, .avatar,
  .btn, .chip, .theme-toggle, .favorite-btn, input, select, textarea, dialog) {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: 180ms, 180ms, 180ms, 180ms, 150ms;
  transition-timing-function: ease, ease, ease, ease, var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { border-color: #55dfb488; box-shadow: 0 7px 18px #0002; }
  [data-theme="light"] .btn:not(:disabled):not([aria-disabled="true"]):hover { background-color: #e5f2e9; border-color: #459c74; box-shadow: 0 8px 20px #173c3217; }
  [data-theme="light"] .btn.primary:not(:disabled):hover { background-color: #6ae6c0; border-color: #35a77e; }
  [data-theme="light"] :is(.text-link, .read-link, .nav-links > a):hover { color: #12543d; }
  [data-theme="light"] :is(.chip:not(.active), .sidebar button:not(.active), .admin-tabs button:not(.active), .segmented button:not(.active)):hover { background-color: #e5f3e9; color: #18563f; border-color: #85b69b; }
  [data-theme="light"] .topic-row:hover { background: #edf7f1; border-color: #8bb89c; }
  [data-theme="light"] :is(.favorite-btn, .mobile-menu, .dialog-close, .theme-toggle):hover { background-color: #dff2e7; color: #12543d; border-color: #7ab294; }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle:active { transform: translateY(1px) scale(.985); }
}
@media (min-width: 851px) and (max-width: 1100px) { .nav > .btn { display: none; } }
@media (max-width: 850px) {
  .theme-toggle { margin-left: auto; }
  .mobile-menu { margin-left: 0; }
  .nav { gap: 12px; }
  [data-theme="light"] .nav-links { background: #f8fcf8; border-bottom-color: #bed4c6; box-shadow: 0 18px 30px #173c3220; }
  [data-theme="light"] .nav-links > a:focus-visible { background: #e2f3e8; }
}
@media (max-width: 480px) {
  .theme-toggle { padding: 9px; }
  .theme-toggle-label { display: none; }
  .nav { gap: 8px; }
}
@media (max-width: 360px) {
  .nav .brand { font-size: 20px; gap: 7px; }
  .nav .brand svg { width: 25px; }
  .nav.container { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-changing *, .theme-changing *::before, .theme-changing *::after,
  .theme-changing dialog::backdrop, .theme-toggle { transition: none !important; }
}
/* Reading follows the chosen theme, while cover illustrations keep their artwork. */
[data-theme="dark"] .reader { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .reader .article-hero > p { color: #a4bab9; }
[data-theme="dark"] .reader .meta-line,
[data-theme="dark"] .reader .breadcrumb { color: #9ab0ae; }
[data-theme="dark"] .reader .prose { color: #bdcdd1; }
[data-theme="dark"] .reader .toc { border-color: var(--line); }
[data-theme="dark"] .reader .toc a { color: #acc8bd; }
[data-theme="dark"] .reader .notice { background: #17342f; border-color: #386052; color: #b4d9c8; }
[data-theme="dark"] .reader .tag { color: #8ee2bd; border-color: #416352; background: #19352c; }
[data-theme="dark"] .reader .source-list { color: #b6cebf; border-color: #365846; background: #152d26; }
[data-theme="dark"] .reader .source-list a { color: #8ee2bd; }
[data-theme="dark"] .reader .btn { color: #b9e1ce; border-color: #446c58; }
[data-theme="dark"] .reader :is(a, button):focus-visible { outline-color: #55dfb4; }
@media (max-width: 600px) { [data-theme="dark"] .reader .toc { background: var(--surface); } }