/* Koyu tema. Yalnızca ekranda geçerli; yazdırma her zaman açık renkli. */
.theme-toggle { border: 0; background: var(--accent-soft); color: var(--accent); width: 38px; height: 38px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
.theme-toggle:hover { filter: brightness(0.96); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
.nav { align-items: center; }
@media screen {
  :root[data-theme="dark"] {
    --bg: #0f1224;
    --surface: #1a1e38;
    --surface2: #212645;
    --field: #262b4d;
    --field2: #262b4d;
    --ink: #e8ebfa;
    --muted: #a3abcf;
    --line: #333961;
    --accent: #8f86ff;
    --accent-soft: #2b2a5c;
    --teal: #2cc4b0;
    --amber: #f5b64f;
    --ok: #4cd08f;
    --ok-soft: #153a2c;
    --warn: #f0b04a;
    --warn-soft: #3d3016;
    --bad: #ff7a82;
    --bad-soft: #43202a;
    --bar: rgba(15, 18, 36, 0.9);
    --web: rgba(255, 255, 255, 0.28);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
  :root[data-theme="dark"] .btn, :root[data-theme="dark"] #play, :root[data-theme="dark"] .chip.on { color: #12142a; }
  :root[data-theme="dark"] #play, :root[data-theme="dark"] #play[aria-pressed="false"] { color: #12142a; }
  :root[data-theme="dark"] .btn.ghost { color: var(--accent); }
  :root[data-theme="dark"] .bd-outer { fill: #3a4470; }
  :root[data-theme="dark"] .bd-inner { fill: #5a6aa0; }
  :root[data-theme="dark"] .g1 { stroke: #8be6d8; }
  :root[data-theme="dark"] .g2 { stroke: #ffd793; }
  :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
}
@media print { .theme-toggle { display: none !important; } }

/* Açılır listeler: seçenekler koyu temada da okunur olsun */
select, select option, select optgroup { background-color: var(--field); color: var(--ink); }
select option:checked, select option:hover { background-color: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea { color-scheme: dark; }
:root[data-theme="light"] select, :root[data-theme="light"] input { color-scheme: light; }

:root[data-theme="dark"] { --grid-bg: #12261a; --grid-line: rgba(74, 200, 120, 0.34); --grid-line-soft: rgba(74, 200, 120, 0.14); }
.lang-toggle { font: 700 12px/1 inherit; font-family: inherit; letter-spacing: .04em; }
