/* Ciemny motyw „Kobalt” (według ustawień systemu albo ręcznie przełącznikiem w nagłówku) */
:root[data-theme="dark"] {
  --bg: #0e131a; --panel: #161c26; --head: #1f2735; --hover: #1b2331; --line: #263042; --line-2: #34415a;
  --ink: #e9eef6; --ink-2: #aeb9c9; --ink-3: #7f8c9f;
  --accent: #3d7be8; --accent-ink: #fff; --accent-text: #7fb0ff; --pos: #35d39b; --neg: #ff6f62;
  --c1: #5b9bff; --c2: #ff9a55; --c3: #2cc9bb; --c4: #f5c24b; --c5: #a98bff; --c6: #aeb9c9;
  --card-ring: 0 0 0 1px #263042; --tip-bg: #1d2533; --tip-title: #e9eef6; --tip-ink: #aeb9c9; --tip-border: #34415a;
  --row: #1f2735; color-scheme: dark;
}
:root[data-theme="dark"] {
  .cat-tag { background: var(--head); color: var(--ink-2); }
  .cat-0, .name-cell em .cat-0 { background: color-mix(in srgb, #4c8dff 20%, var(--panel)); color: #9cc2ff; }
  .cat-1, .name-cell em .cat-1 { background: color-mix(in srgb, #2fc88f 18%, var(--panel)); color: #7fe3b9; }
  .cat-2, .name-cell em .cat-2 { background: color-mix(in srgb, #9a7cf0 22%, var(--panel)); color: #c3b0ff; }
  .cat-3, .name-cell em .cat-3 { background: color-mix(in srgb, #2cc9d8 18%, var(--panel)); color: #7fe0ea; }
  .cat-4, .name-cell em .cat-4 { background: color-mix(in srgb, #f0b429 20%, var(--panel)); color: #f5cf75; }
  .cat-5, .name-cell em .cat-5 { background: color-mix(in srgb, #f0703f 20%, var(--panel)); color: #ffa985; }
  .cat-6, .name-cell em .cat-6 { background: color-mix(in srgb, #e0589f 20%, var(--panel)); color: #f5a1cf; }
  .cat-7, .name-cell em .cat-7 { background: color-mix(in srgb, #8a9bb4 20%, var(--panel)); color: #c3cddd; }
  .btn { background: var(--head); color: var(--ink); }
  .skeleton { background: var(--head); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0e131a; --panel: #161c26; --head: #1f2735; --hover: #1b2331; --line: #263042; --line-2: #34415a;
  --ink: #e9eef6; --ink-2: #aeb9c9; --ink-3: #7f8c9f;
  --accent: #3d7be8; --accent-ink: #fff; --accent-text: #7fb0ff; --pos: #35d39b; --neg: #ff6f62;
  --c1: #5b9bff; --c2: #ff9a55; --c3: #2cc9bb; --c4: #f5c24b; --c5: #a98bff; --c6: #aeb9c9;
  --card-ring: 0 0 0 1px #263042; --tip-bg: #1d2533; --tip-title: #e9eef6; --tip-ink: #aeb9c9; --tip-border: #34415a;
  --row: #1f2735; color-scheme: dark;
  }
  :root:not([data-theme="light"]) {
  .cat-tag { background: var(--head); color: var(--ink-2); }
  .cat-0, .name-cell em .cat-0 { background: color-mix(in srgb, #4c8dff 20%, var(--panel)); color: #9cc2ff; }
  .cat-1, .name-cell em .cat-1 { background: color-mix(in srgb, #2fc88f 18%, var(--panel)); color: #7fe3b9; }
  .cat-2, .name-cell em .cat-2 { background: color-mix(in srgb, #9a7cf0 22%, var(--panel)); color: #c3b0ff; }
  .cat-3, .name-cell em .cat-3 { background: color-mix(in srgb, #2cc9d8 18%, var(--panel)); color: #7fe0ea; }
  .cat-4, .name-cell em .cat-4 { background: color-mix(in srgb, #f0b429 20%, var(--panel)); color: #f5cf75; }
  .cat-5, .name-cell em .cat-5 { background: color-mix(in srgb, #f0703f 20%, var(--panel)); color: #ffa985; }
  .cat-6, .name-cell em .cat-6 { background: color-mix(in srgb, #e0589f 20%, var(--panel)); color: #f5a1cf; }
  .cat-7, .name-cell em .cat-7 { background: color-mix(in srgb, #8a9bb4 20%, var(--panel)); color: #c3cddd; }
  .btn { background: var(--head); color: var(--ink); }
  .skeleton { background: var(--head); }
  }
}

/* Przełącznik motywu */
.theme-btn { flex: none; width: 42px; height: 42px; margin-left: 8px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 18px/1 var(--font); cursor: pointer; }
.theme-btn:hover { background: var(--head); color: var(--ink); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmd + .theme-btn { margin-left: 0; }
@media (max-width: 760px) { .bar { position: relative; } .theme-btn { position: absolute; right: 16px; top: 12px; margin: 0; width: 40px; height: 40px; } }