/* Manual appearance: dark on every initial page load, irrespective of OS.
   Native checkbox + :has keep the existing no-JavaScript contract intact. */
.topbar-end { gap: 6px; }
.topbar-end .lang-link, .theme-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted);
  background: transparent; cursor: pointer; text-decoration: none;
}
.topbar-end .lang-link .icon, .theme-toggle .icon { width: 19px; height: 19px; }
.theme-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-toggle:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-moon { display: none; }
.theme-input:checked ~ .theme-sun { display: none; }
.theme-input:checked ~ .theme-moon { display: block; }
.topbar-end .lang-link:hover, .theme-toggle:hover { color: var(--text); background: var(--raised); }
.topbar-end > .button { margin-inline-start: 8px; }
:root:has(#theme-light:checked) {
  color-scheme: light;
  --ground: #fdfafb; --raised: #ffffff; --raised-2: #f1e9ed; --recessed: #f8f2f5;
  --line: rgb(70 26 44 / 12%); --line-strong: rgb(70 26 44 / 22%);
  --text: #24181e; --muted: #66565f; --quiet: #78646f;
  --accent: #703044; --accent-hover: #572136; --on-accent: #ffffff; --theme-ink: #461a2c;
  --aura-warm: #f0d9e2; --aura-mid: #f2dfe7; --aura-deep: #ead0dc;
  --comfortable: #177341; --tight: #96500c; --overspent: #b32838; --reserved: #6750a4; --track: #e3d7de;
}
:root:has(#theme-light:checked) .site-header { background: rgb(253 250 251 / 94%); }
:root:has(#theme-light:checked) .brand-wordmark { filter: brightness(0); }
:root:has(#theme-light:checked) .button.quiet:hover { background: var(--raised-2); border-color: var(--line-strong); }
:root:has(#theme-light:checked) .landing .rd-store { border-color: rgb(255 255 255 / 30%); }
:root:has(#theme-light:checked) .landing .rd-floating .rd-tasks,
:root:has(#theme-light:checked) .landing .rd-floating .rd-counter { box-shadow: 0 18px 55px rgb(70 26 44 / 9%); }
:root:has(#theme-light:checked) .landing .rd-showroom::before { opacity: .28; }
:root:has(#theme-light:checked) .landing .rd-orbit { border-color: var(--line); }
:root:has(#theme-light:checked) .landing .rd-finance,
:root:has(#theme-light:checked) .landing .rd-qatta-product,
:root:has(#theme-light:checked) .landing .rd-ask-product { background: linear-gradient(145deg, var(--raised), var(--recessed)); }
:root:has(#theme-light:checked) .landing .rd-calculation::before { opacity: .2; }
:root:has(#theme-light:checked) .landing .rd-closing { background: radial-gradient(ellipse at 50% 100%, #f2dfe7, transparent 70%); }
/* The product illustration continues to show TWAZ's default dark app.
   Website surfaces and surrounding cards follow the selected appearance. */
.device {
  color-scheme: dark; color: #f3f3f4;
  --ground: #000000; --raised: #17181a; --raised-2: #1f2023; --recessed: #0c0c0d;
  --line: rgb(255 255 255 / 8%); --line-strong: rgb(255 255 255 / 16%);
  --text: #f3f3f4; --muted: #a6a6ac; --quiet: #8c8c93;
  --accent: #f2d6de; --accent-hover: #f8e6eb; --on-accent: #180a0e; --theme-ink: #f8dcd6;
  --aura-warm: #703044; --aura-mid: #5c2438; --aura-deep: #461a2c;
  --comfortable: #33c67d; --track: #2f3033;
}
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .topbar-end { gap: 4px; }
  .topbar-end > .button { margin-inline-start: 4px; font-size: .8rem; padding-inline: 12px; }
}
@media (max-width: 360px) {
  .topbar .brand-wordmark { width: 64px; }
  .topbar-end > .button { padding-inline: 10px; margin-inline-start: 0; }
}
@media (forced-colors: active) {
  .theme-toggle { border-color: ButtonText; }
  .theme-input:checked ~ .theme-moon { stroke: Highlight; }
}
