/* Оформление «Оникс»: нейтральный чёрный на основе #020202. Графит остаётся оформлением по умолчанию.
   Переопределяются только токены из :root в index.html, поэтому разделы перекрашиваются без правок. */
html[data-theme="onyx"]{
  --primary:#9ea4a8; --primary-hover:#e6e9eb; --primary-focus:#b4babe;
  --on-primary:#020202; --primary-soft:rgba(230,233,235,.1);
  --ink:#f2f2f2; --ink-muted:#cdcdcd; --ink-subtle:#8c8c8c; --ink-tertiary:#666666;
  --canvas:#020202; --s1:#0a0a0a; --s2:#111111; --s3:#181818; --s4:#202020;
  --line:#1c1c1c; --line-2:#2a2a2a; --line-3:#3a3a3a;
  --chart-grid:#151515; --chart-zero:#2a2a2a; --chart-text:#8c8c8c; --chart-faint:#666666;
  --chart-track:#171717; --chart-fill:rgba(230,233,235,.08);
  --tip-bg:#1c1c1c; --tip-title:#f2f2f2; --tip-body:#cdcdcd; --ring-border:#0a0a0a;
  --sh:0 8px 24px rgba(0,0,0,.7);
}
html[data-theme="onyx"] ::selection{background:rgba(230,233,235,.28)}
html[data-theme="onyx"] .ra-fn-step:last-child .ra-fn-bar:not([data-zero]){color:#04120a}

/* выбор оформления в профиле, общий для обеих тем */
.theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-choice{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--s1);color:var(--ink-muted);text-align:left;transition:border-color .12s,background .12s}
.theme-choice:hover{border-color:var(--line-3);color:var(--ink)}
.theme-choice.on{border-color:var(--primary);background:var(--primary-soft);color:var(--ink)}
.theme-choice b{display:block;font-size:13.5px;font-weight:600}
.theme-choice small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--ink-subtle)}
.theme-swatch{position:relative;flex:none;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-3);overflow:hidden}
.theme-swatch i{position:absolute;display:block;border-radius:4px}
.theme-swatch i:nth-child(1){left:6px;right:6px;bottom:6px;height:16px}
.theme-swatch i:nth-child(2){left:6px;top:7px;width:18px;height:6px}
@media(max-width:560px){.theme-picker{grid-template-columns:minmax(0,1fr)}}