/* dark.css — тёмная тема GymnastPro: глубокий индиго-слива + лёгкий неон.
Включается атрибутом , переключатель — в меню ☰. */
html[data-theme="dark"]{
color-scheme: dark;
--bg: #0c0a14;
--bg-1: #0c0a14;
--bg-2: #131022;
--card: #171428;
--text: #e8e4f5;
--text-header: #f3effc;
--muted: #9d95b8;
--border: rgba(167,139,250,.20);
--shadow: 0 10px 28px rgba(0,0,0,.45);
--brand: #a78bfa; /* неоновая сирень */
--brand-200: #7c5cbf;
--brand-100: #241d3d;
--success: #34d399;
--warn: #fbbf24;
--danger: #f87171;
--neon: #22d3ee; /* киберпанк-циан для акцентов */
}
/* ── фон: неоновые олимпийские кольца + мягкое сияние ── */
html[data-theme="dark"] body.sg-body{
background:
url("data:image/svg+xml;utf8,")
right -70px bottom -40px / 620px auto no-repeat fixed,
radial-gradient(1000px 500px at 85% -10%, rgba(124,58,237,.16), transparent 60%),
radial-gradient(800px 420px at -10% 108%, rgba(34,211,238,.08), transparent 55%),
linear-gradient(180deg,var(--bg-1),var(--bg-2)) !important;
color:var(--text);
}
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4{ color:var(--text-header) }
/* ── шапка ── */
html[data-theme="dark"] .sg-header{
background:rgba(19,16,34,.86);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(167,139,250,.22);
box-shadow:0 1px 0 rgba(34,211,238,.12), 0 8px 26px rgba(0,0,0,.35);
}
html[data-theme="dark"] .sg-title{ color:var(--text-header) }
/* ── логотип-надпись GymnastPro: неоновый градиент с мерцающим свечением ── */
@keyframes gpBrandGlow{
0%,100%{ filter:drop-shadow(0 0 6px rgba(167,139,250,.55)) drop-shadow(0 0 10px rgba(34,211,238,.25)) }
50%{ filter:drop-shadow(0 0 12px rgba(167,139,250,.9)) drop-shadow(0 0 22px rgba(34,211,238,.55)) }
}
html[data-theme="dark"] .sg-title.brand,
html[data-theme="dark"] .brand span{
background:linear-gradient(90deg,#c4b5fd 0%,#a78bfa 40%,#22d3ee 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
animation:gpBrandGlow 3s ease-in-out infinite;
}
/* логотип-картинка: неоновая подсветка вокруг + пульс */
@keyframes gpLogoGlow{
0%,100%{ box-shadow:0 0 10px rgba(124,58,237,.45), 0 0 20px rgba(34,211,238,.18) }
50%{ box-shadow:0 0 18px rgba(124,58,237,.75), 0 0 34px rgba(34,211,238,.4) }
}
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .sg-header img[src*="logo"],
html[data-theme="dark"] .auth-hero img[src*="logo"]{
border-radius:12px;
animation:gpLogoGlow 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
html[data-theme="dark"] .sg-title.brand,
html[data-theme="dark"] .brand span{ animation:none; filter:drop-shadow(0 0 8px rgba(167,139,250,.6)) }
html[data-theme="dark"] .brand img{ animation:none; box-shadow:0 0 14px rgba(124,58,237,.55) }
}
/* ── карточки и поверхности ── */
html[data-theme="dark"] .sg-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .coach-card,
html[data-theme="dark"] .ath-card,
html[data-theme="dark"] .exercise-card,
html[data-theme="dark"] .day-block,
html[data-theme="dark"] .combination-box,
html[data-theme="dark"] .session-block,
html[data-theme="dark"] .lib-sec,
html[data-theme="dark"] .lib-item,
html[data-theme="dark"] .lib-folder,
html[data-theme="dark"] .ef-folder,
html[data-theme="dark"] .ex-card,
html[data-theme="dark"] .arc-card,
html[data-theme="dark"] .arc-kpi,
html[data-theme="dark"] .ac,
html[data-theme="dark"] .workout,
html[data-theme="dark"] .modal .sheet,
html[data-theme="dark"] .sheet-head{
background:var(--card);
border-color:var(--border);
color:var(--text);
}
html[data-theme="dark"] .sg-card, html[data-theme="dark"] .modal .sheet{
box-shadow:var(--shadow), 0 0 0 1px rgba(167,139,250,.06);
}
/* ── формы ── */
html[data-theme="dark"] .sg-input,
html[data-theme="dark"] .sg-select,
html[data-theme="dark"] textarea.sg-input,
html[data-theme="dark"] input.input, html[data-theme="dark"] .input,
html[data-theme="dark"] .cbx-input{
background:#1d1932; border-color:rgba(167,139,250,.28); color:var(--text);
}
html[data-theme="dark"] .sg-input::placeholder,
html[data-theme="dark"] .cbx-input::placeholder{ color:#7d7698 }
html[data-theme="dark"] .sg-input:focus,
html[data-theme="dark"] .sg-select:focus,
html[data-theme="dark"] .cbx-input:focus,
html[data-theme="dark"] .cbx.open .cbx-input{
border-color:var(--neon);
box-shadow:0 0 0 3px rgba(34,211,238,.16), 0 0 14px rgba(34,211,238,.10);
}
html[data-theme="dark"] .sg-label{ color:#b7aed6 }
/* ── кнопки (в app.css они прибиты !important — перебиваем тем же) ── */
html[data-theme="dark"] body.sg-body .sg-btn{
background:#1d1932 !important;
color:#cfc6ea !important;
border:1px solid rgba(167,139,250,.30) !important;
box-shadow:0 4px 14px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] body.sg-body .sg-btn:hover{
border-color:#a78bfa !important; color:#e8e4f5 !important;
box-shadow:0 6px 18px rgba(124,58,237,.30) !important;
}
html[data-theme="dark"] body.sg-body .sg-btn.primary{
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
border-color:transparent !important; color:#fff !important;
box-shadow:0 4px 18px rgba(124,58,237,.45) !important;
}
html[data-theme="dark"] body.sg-body .sg-btn.primary:hover{
box-shadow:0 4px 26px rgba(168,85,247,.60) !important;
}
html[data-theme="dark"] body.sg-body .sg-btn.alt{
background:#211b3a !important; color:#c4b5fd !important;
border-color:rgba(167,139,250,.35) !important;
}
html[data-theme="dark"] body.sg-body .sg-btn.danger{
background:#2a1520 !important; color:#fda4af !important;
border-color:rgba(244,63,94,.40) !important;
}
/* ── таблицы ── */
html[data-theme="dark"] table th, html[data-theme="dark"] table td{
border-color:rgba(167,139,250,.14); color:var(--text);
}
html[data-theme="dark"] .workout thead th{
background:linear-gradient(180deg,#1d1932,#171428);
color:#c4b5fd; border-bottom:2px solid rgba(167,139,250,.30);
}
html[data-theme="dark"] .workout tbody tr:not(.combo-summary):not(.ap-row):not(.aux-row):nth-child(even) td{
background:#1a1630;
}
html[data-theme="dark"] .table tbody tr:nth-child(even) td{ background:#1a1630 }
/* ── меню профиля ── */
html[data-theme="dark"] .sg-menu-list{
background:#1d1932; border-color:rgba(167,139,250,.25);
box-shadow:0 16px 42px rgba(0,0,0,.6);
}
html[data-theme="dark"] .sg-menu-item{ color:#d6cdef }
html[data-theme="dark"] .sg-menu-item:hover{ background:#262046 }
html[data-theme="dark"] .sg-menu-user .nm{ color:var(--text-header) }
/* ── комбобокс ── */
html[data-theme="dark"] .cbx-list{
background:#1d1932; border-color:rgba(167,139,250,.30);
box-shadow:0 18px 44px rgba(0,0,0,.65), 0 0 20px rgba(124,58,237,.15);
}
html[data-theme="dark"] .cbx-group{ background:#241d3d; color:#a78bfa; border-color:rgba(167,139,250,.18) }
html[data-theme="dark"] .cbx-item{ color:#d6cdef }
html[data-theme="dark"] .cbx-item:hover, html[data-theme="dark"] .cbx-item.act{ background:#2b2350; color:#fff }
html[data-theme="dark"] .cbx-item b{ color:var(--neon) }
/* ── конструктор ── */
html[data-theme="dark"] .pool .ex{
background:linear-gradient(180deg,#1d1932,#171428);
border-color:rgba(167,139,250,.22); color:var(--text);
}
html[data-theme="dark"] .pool .ex:hover{
border-color:var(--neon); box-shadow:0 0 14px rgba(34,211,238,.18);
}
html[data-theme="dark"] .sel{
background:linear-gradient(180deg,#1d1932,#171428);
border-color:rgba(167,139,250,.25); color:var(--text);
}
html[data-theme="dark"] .sel.in-combo{
border-color:#2dd4bf; background:linear-gradient(180deg,#122b29,#101f22);
box-shadow:0 0 0 2px rgba(45,212,191,.18);
}
html[data-theme="dark"] .drop{ border-color:rgba(167,139,250,.30); background:rgba(23,20,40,.4) }
html[data-theme="dark"] .drop.grp-multi .plan-group{
border-color:rgba(167,139,250,.20); background:rgba(29,25,50,.5);
}
html[data-theme="dark"] .plan-group-head .pg-name{
background:#241d3d; border-color:rgba(167,139,250,.35); color:#c4b5fd;
}
html[data-theme="dark"] .plan-group-head .pg-count{ background:#a78bfa; color:#171428 }
html[data-theme="dark"] .combo-slim{
border-color:#2dd4bf; background:linear-gradient(180deg,#122b29,#101f22);
}
html[data-theme="dark"] .combo-slim .cs-name{ color:#5eead4 }
html[data-theme="dark"] .combo-slim.is-comb{
border-color:#a78bfa; background:linear-gradient(180deg,#241d3d,#1b1631);
}
html[data-theme="dark"] .combo-slim.is-comb .cs-name{ color:#c4b5fd }
html[data-theme="dark"] .combo-slim .cs-sub{ color:#8d84ab }
html[data-theme="dark"] .combo-passes, html[data-theme="dark"] .lib-passes{
background:#0f2422; border-color:#155e56; color:#5eead4;
}
html[data-theme="dark"] .combo-panel, html[data-theme="dark"] .lib-panel, html[data-theme="dark"] .va-panel{
background:var(--card); border-color:var(--border);
}
html[data-theme="dark"] .lib-fchip, html[data-theme="dark"] .fchip, html[data-theme="dark"] .afchip{
background:#1d1932; border-color:rgba(167,139,250,.30); color:#c0b7dd;
}
html[data-theme="dark"] .pool-fchip{ background:#1d1932 }
html[data-theme="dark"] .lib-row{ background:#1d1932; border-color:rgba(167,139,250,.20) }
html[data-theme="dark"] .lib-tab{ background:#1d1932; color:#c0b7dd; border-color:rgba(167,139,250,.30) }
/* ── секции снарядов в таблице тренера: оставляем цветные, чуть глубже ── */
html[data-theme="dark"] .ap-row-pill{
background:#241d3d !important; border-color:rgba(167,139,250,.35) !important; color:#c4b5fd !important;
}
/* шапка тренировки, строка добавления, хорео-полоса, cv-чипы */
html[data-theme="dark"] .workout-head{
background:linear-gradient(180deg,#1d1932,#171428) !important;
border-bottom:2px solid rgba(167,139,250,.3) !important;
}
html[data-theme="dark"] .workout-head .fw-700{ color:var(--text-header) }
html[data-theme="dark"] .add-ex-row{ background:#1a1630 !important; border-top-color:rgba(167,139,250,.2) !important }
html[data-theme="dark"] .type-cell{ color:#8d84ab }
html[data-theme="dark"] .choreo-strip{
background:#1d1932 !important; border-color:rgba(167,139,250,.28) !important;
}
html[data-theme="dark"] .cv-chip{ background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd }
html[data-theme="dark"] .cv-chip.good{ background:#0f231c; border-color:rgba(52,211,153,.4); color:#6ee7b7 }
html[data-theme="dark"] .cv-chip.mid{ background:#251d0e; border-color:rgba(251,191,36,.4); color:#fcd34d }
html[data-theme="dark"] .cv-chip.bad{ background:#2a1215; border-color:rgba(248,113,113,.4); color:#fda4af }
html[data-theme="dark"] .cv-chip.neutral{ background:#1d1932; color:#c0b7dd }
html[data-theme="dark"] .athlete-note{ background:#1d1932 !important; border-color:rgba(167,139,250,.25) !important; color:#c0b7dd !important }
html[data-theme="dark"] .sec-count{ background:rgba(167,139,250,.25); color:#e8e4f5 }
/* ── календарь ── */
html[data-theme="dark"] .cal-cell{ background:#1a1630; border-color:rgba(167,139,250,.16) }
html[data-theme="dark"] .cal-cell.out{ background:#141126; opacity:.55 }
html[data-theme="dark"] .cal-cell.today{
border-color:var(--neon); box-shadow:0 0 0 1px var(--neon), 0 0 16px rgba(34,211,238,.25);
}
html[data-theme="dark"] .cal-date{ color:var(--text) }
/* ── графики: светлая панель, чтобы подписи читались ── */
html[data-theme="dark"] .chart{
background:#f4f2fb; border-radius:12px; padding:8px;
box-shadow:inset 0 0 0 1px rgba(124,58,237,.15);
}
/* ── перехват инлайновых светлых стилей (бейджи, плашки в шаблонах) ── */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#fbfcfe"],
html[data-theme="dark"] [style*="background:#fbfaff"]{
background:#1d1932 !important; color:var(--text) !important;
border-color:rgba(167,139,250,.25) !important;
}
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color:#2f2040"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color:#3b4b63"],
html[data-theme="dark"] [style*="color:#111827"]{ color:var(--text) !important }
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color:#8b7fa3"]{ color:var(--muted) !important }
/* светлые цветные плашки-подсказки оставляем как есть — на тёмном они читаются
(тёмный текст на светлой пастели), это осознанный акцент */
/* ── прочее ── */
html[data-theme="dark"] .sg-muted, html[data-theme="dark"] .muted{ color:var(--muted) }
html[data-theme="dark"] .hint{ color:#8d84ab }
html[data-theme="dark"] .warn{ background:#2a2210; border-color:#a16207; color:#fcd34d }
html[data-theme="dark"] .alert{ background:#1d1932; border-color:rgba(167,139,250,.3); color:var(--text) }
html[data-theme="dark"] .alert.ok{ border-color:rgba(52,211,153,.5); color:#6ee7b7 }
html[data-theme="dark"] .alert.error{ border-color:rgba(248,113,113,.5); color:#fda4af }
html[data-theme="dark"] .comments .sg-input{ background:#1d1932 }
html[data-theme="dark"] .attwrap .file-card{ background:#1d1932; border-color:rgba(167,139,250,.2) }
html[data-theme="dark"] .day-cmt{ background:#1d1932; border-color:rgba(167,139,250,.18); color:#c0b7dd }
html[data-theme="dark"] .day-cmt b{ color:#d6cdef }
html[data-theme="dark"] .fold-zone, html[data-theme="dark"] .ef-loose{
background:#141126; border-color:rgba(167,139,250,.28);
}
html[data-theme="dark"] .empty, html[data-theme="dark"] .ef-empty{ color:#7d7698 }
html[data-theme="dark"] .fold-cnt{ background:#2b2350; color:#c4b5fd }
html[data-theme="dark"] ::-webkit-scrollbar{ width:10px; height:10px }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2b2350; border-radius:8px }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent }
/* ── конструктор: вкладки разделов и плитки ── */
html[data-theme="dark"] .tabs a{
background:#1d1932; color:#c0b7dd; border-color:rgba(167,139,250,.28);
}
html[data-theme="dark"] .tabs a:hover{ border-color:#a78bfa; color:#e8e4f5 }
html[data-theme="dark"] .tabs a.active{
color:#c4b5fd; border-color:#a78bfa;
box-shadow:0 0 0 2px rgba(167,139,250,.22) inset, 0 0 12px rgba(124,58,237,.25);
background:#241d3d;
}
html[data-theme="dark"] .input{ background:#1d1932; color:var(--text); border-color:rgba(167,139,250,.28) }
html[data-theme="dark"] .ex .label{ color:#cfc6ea }
html[data-theme="dark"] .ex:hover{ border-color:var(--neon) }
html[data-theme="dark"] .ex.added{
border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,.30), 0 0 16px rgba(124,58,237,.35);
}
html[data-theme="dark"] .hint{ color:#7d7698 }
html[data-theme="dark"] .combo-badge{ background:#0f2422; border-color:#155e56; color:#5eead4 }
html[data-theme="dark"] .lib-badge{ background:#241d3d; color:#c4b5fd; border-color:rgba(167,139,250,.3) }
html[data-theme="dark"] .lib-tab.active{ background:#241d3d; color:#c4b5fd; border-color:#a78bfa }
html[data-theme="dark"] .lib-row .nm{ color:#e8e4f5 }
html[data-theme="dark"] .lib-row .preview{ color:#8d84ab }
html[data-theme="dark"] .va-panel{ background:#1b1631 }
html[data-theme="dark"] .va-line{ color:#8d84ab }
html[data-theme="dark"] .muted{ color:var(--muted) }
/* ── панели риска на карточке спортсмена ── */
html[data-theme="dark"] .risk-box{ background:var(--card); border-color:var(--border) }
html[data-theme="dark"] .risk-box.low{
background:linear-gradient(180deg,#0f231c,#12291f); border-color:rgba(52,211,153,.40);
}
html[data-theme="dark"] .risk-box.medium{
background:linear-gradient(180deg,#251d0e,#2a2210); border-color:rgba(251,191,36,.40);
}
html[data-theme="dark"] .risk-box.high{
background:linear-gradient(180deg,#2a1215,#301418); border-color:rgba(248,113,113,.45);
}
html[data-theme="dark"] .risk-title{ color:var(--text-header) }
html[data-theme="dark"] .risk-box.low .risk-title{ color:#6ee7b7 }
html[data-theme="dark"] .risk-box.medium .risk-title{ color:#fcd34d }
html[data-theme="dark"] .risk-box.high .risk-title{ color:#fda4af }
html[data-theme="dark"] .risk-chip{
background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd;
}
/* ── лента тренировок: таблицы, пилюли, сводка связки ── */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .workout table{ background:var(--card) }
html[data-theme="dark"] .workout table thead th{ background:#1d1932 }
html[data-theme="dark"] .tp-pill{ background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd }
html[data-theme="dark"] .tp-pill.badge{ background:#1d1932 }
html[data-theme="dark"] .tp-pill.ok{ background:#0f231c; border-color:rgba(52,211,153,.4); color:#6ee7b7 }
html[data-theme="dark"] .tp-pill.warn{ background:#251d0e; border-color:rgba(251,191,36,.4); color:#fcd34d }
html[data-theme="dark"] .pill, html[data-theme="dark"] .coach,
html[data-theme="dark"] .med-chip{ background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd }
/* базовый тёмный фон ВСЕХ ячеек таблицы тренировки — гасит белые «пятна» */
html[data-theme="dark"] .workout table td{ background-color:#171428 }
html[data-theme="dark"] .workout tbody tr:hover > td{ background-color:#201b38 !important }
html[data-theme="dark"] tr.ap-row > td{ background:transparent !important }
html[data-theme="dark"] tr.aux-row > td, html[data-theme="dark"] tr.aux-row.aux-empty > td{
background-color:#171428 !important;
}
html[data-theme="dark"] .combo-member td{ background:#141f24 !important }
html[data-theme="dark"] .combo-summary td{
background:linear-gradient(180deg,#0f2422,#101f22) !important;
border-top-color:#155e56 !important;
}
/* ── комбинация: одна карточка-строка в неоновой «капсуле» киберпанк ── */
html[data-theme="dark"] tr.comb-head-row > td{
background:linear-gradient(180deg,#241d3d,#1d1932) !important;
border-top:2px solid #a78bfa !important;
box-shadow:inset 0 0 22px rgba(124,58,237,.20);
}
html[data-theme="dark"] tr.comb-head-row > td:first-child{
box-shadow:inset 3px 0 0 #a78bfa, inset 8px 0 18px rgba(124,58,237,.16);
}
html[data-theme="dark"] .comb-head-name{ color:#d6c9ff !important }
html[data-theme="dark"] .comb-head-meta{ background:#a78bfa !important; color:#171428 !important }
html[data-theme="dark"] .comb-chain-seg{
background:#2b2350 !important; border-color:rgba(167,139,250,.5) !important; color:#d6c9ff !important;
box-shadow:0 0 10px rgba(124,58,237,.25);
}
html[data-theme="dark"] .comb-chain-plus{ color:#a78bfa !important }
html[data-theme="dark"] .combo-tag, html[data-theme="dark"] .combo-att,
html[data-theme="dark"] .chain-chip{
background:#0f2422 !important; border-color:#155e56 !important; color:#5eead4 !important;
}
html[data-theme="dark"] .chain-arr{ background:transparent; color:#2dd4bf }
html[data-theme="dark"] .att-item, html[data-theme="dark"] .file-card{
background:#1d1932; border-color:rgba(167,139,250,.2);
}
html[data-theme="dark"] .rm-item{ background:#2a1520; border-color:rgba(244,63,94,.4); color:#fda4af }
html[data-theme="dark"] .cmt-toggle, html[data-theme="dark"] .att-clip{
background:#1d1932; border-color:rgba(167,139,250,.3); color:#c0b7dd;
}
html[data-theme="dark"] .combo-item{ background:#1d1932; border-color:rgba(167,139,250,.25); color:var(--text) }
/* ── неоновое свечение папок ── */
html[data-theme="dark"] .ef-folder{
border-width:2px;
box-shadow:
0 0 18px color-mix(in srgb, var(--efc, #7c3aed) 45%, transparent),
inset 0 0 12px color-mix(in srgb, var(--efc, #7c3aed) 18%, transparent);
}
html[data-theme="dark"] .ef-folder > summary{
background:linear-gradient(135deg,
color-mix(in srgb, var(--efc,#7c3aed) 82%, black),
color-mix(in srgb, var(--efc,#7c3aed) 55%, black));
text-shadow:0 0 12px rgba(255,255,255,.55), 0 0 4px rgba(255,255,255,.35);
}
html[data-theme="dark"] .ef-folder .ef-cnt{
background:rgba(255,255,255,.18); box-shadow:0 0 8px rgba(255,255,255,.25);
}
/* тёмно-сливовые заголовки страниц папок — читаемыми и со свечением */
html[data-theme="dark"] [style*="color:#3b1f52"]{ color:#c4b5fd !important; text-shadow:0 0 10px rgba(167,139,250,.45) }
html[data-theme="dark"] .ef-loose-title{ color:#c4b5fd; text-shadow:0 0 10px rgba(167,139,250,.45) }
html[data-theme="dark"] .lib-sec h2{ color:#e8e4f5; text-shadow:0 0 12px rgba(167,139,250,.4) }
html[data-theme="dark"] .pool-fchip{ color:var(--pfc) }
html[data-theme="dark"] .pool-fchip.on{
background:var(--pfc); color:#0c0a14;
box-shadow:0 0 14px color-mix(in srgb, var(--pfc) 60%, transparent);
text-shadow:none; font-weight:800;
}
html[data-theme="dark"] .lib-folder summary{ color:#c4b5fd }
html[data-theme="dark"] .lib-folder[open]{
box-shadow:0 0 12px rgba(124,58,237,.22);
}
html[data-theme="dark"] .fold-title{ color:#c4b5fd; text-shadow:0 0 10px rgba(167,139,250,.45) }
/* ── тренировочный день спортсмена: hero, плашка времени ── */
html[data-theme="dark"] .wo-hero{
border-color:rgba(167,139,250,.25);
background:
radial-gradient(380px 170px at 92% -7%, rgba(124,58,237,.28), transparent 72%),
radial-gradient(220px 120px at -8% 115%, rgba(34,211,238,.14), transparent 70%),
linear-gradient(135deg,#241d3d 0%,#171428 62%) !important;
box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 24px rgba(124,58,237,.18);
}
html[data-theme="dark"] .wo-hero h1{ color:var(--text-header) }
html[data-theme="dark"] .hero-kicker{ color:#c084fc }
html[data-theme="dark"] .hero-sub{ color:var(--muted) }
html[data-theme="dark"] .hero-sub b{ color:#c4b5fd }
html[data-theme="dark"] .wo-kpi .kpi-card,
html[data-theme="dark"] .kpi-card{ background:var(--card); border-color:var(--border) }
html[data-theme="dark"] .kpi-label{ color:var(--muted) }
html[data-theme="dark"] .kpi-value{ color:var(--text-header) }
html[data-theme="dark"] .workout-acc{ background:var(--card); border-color:var(--border) }
html[data-theme="dark"] .workout-acc__head{ background:transparent; color:var(--text) }
html[data-theme="dark"] .workout-time{
background:#241d3d; border-color:rgba(167,139,250,.35); color:#c4b5fd;
}
/* ── дневник спортсмена: тёмные подложки вместо белых окон ── */
html[data-theme="dark"] .ath-hero{
background:linear-gradient(135deg,#241d3d,#171428);
border-color:rgba(167,139,250,.25);
box-shadow:0 0 24px rgba(124,58,237,.18);
}
html[data-theme="dark"] .hero-kicker{ color:#a78bfa }
html[data-theme="dark"] .hero-sub{ color:var(--muted) }
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .diary-card,
html[data-theme="dark"] .month-chip,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .workout-acc{
background:var(--card); border-color:var(--border); color:var(--text);
}
html[data-theme="dark"] .kpi-label{ color:var(--muted) }
html[data-theme="dark"] .kpi-value{ color:var(--text-header) }
html[data-theme="dark"] .workout-acc__head{ background:#1d1932; color:var(--text) }
html[data-theme="dark"] .cl-row{ background:#1d1932; border-color:rgba(167,139,250,.2); color:var(--text) }
html[data-theme="dark"] .cl-row.miss{ background:#251d0e; border-color:rgba(251,191,36,.35) }
html[data-theme="dark"] .cl-row.done{ background:#0f231c; border-color:rgba(52,211,153,.35) }
html[data-theme="dark"] .status.todo{ background:#251d0e; color:#fcd34d; border-color:rgba(251,191,36,.4) }
html[data-theme="dark"] .status.done{ background:#0f231c; color:#6ee7b7; border-color:rgba(52,211,153,.4) }
html[data-theme="dark"] .vaa-mode{ background:#1d1932; border-color:rgba(167,139,250,.3) }
html[data-theme="dark"] .vaa-panel, html[data-theme="dark"] .vaa-line{ color:var(--muted) }
html[data-theme="dark"] .sg-field.phase-box,
html[data-theme="dark"] .phase-box{ background:#1d1932; border-color:rgba(167,139,250,.2) }
/* чипы состояния (тонус, зоны) — тёмные, выбранные светятся своим цветом */
html[data-theme="dark"] .chip{ background:#1d1932; border-color:rgba(167,139,250,.28); color:#c0b7dd }
html[data-theme="dark"] .chip:hover{ border-color:#a78bfa }
html[data-theme="dark"] .chip.on{ box-shadow:0 0 12px rgba(124,58,237,.25) }
html[data-theme="dark"] .chip.on.good{ background:#0f231c; border-color:#34d399; color:#6ee7b7 }
html[data-theme="dark"] .chip.on.mid{ background:#251d0e; border-color:#fbbf24; color:#fcd34d }
html[data-theme="dark"] .chip.on.bad{ background:#2a1215; border-color:#f87171; color:#fda4af }
html[data-theme="dark"] .chip.on.focus, html[data-theme="dark"] .chip.focus.on{
background:#241d3d; border-color:#a78bfa; color:#c4b5fd;
}
html[data-theme="dark"] .chk{ color:var(--text) }
/* карточка хореографии */
html[data-theme="dark"] .choreo-card{
border-color:rgba(167,139,250,.28);
background:radial-gradient(500px 130px at 92% -10%, rgba(124,58,237,.2), transparent 70%),
linear-gradient(180deg,#1d1932,#171428) !important;
}
html[data-theme="dark"] .choreo-block-title{ color:var(--text-header) }
html[data-theme="dark"] .choreo-qlabel{ color:var(--muted) }
html[data-theme="dark"] .exercise-card{ background:var(--card); border-color:var(--border) }
html[data-theme="dark"] .exercise-card.combo{
background:var(--card) !important;
border-color:rgba(45,212,191,.4) !important;
border-left:3px solid #2dd4bf !important;
}
/* выполнено — киберпанк: тёмная карточка + мерцающая неоновая рамка, без зелёной заливки */
@keyframes gpDonePulse{
0%,100%{ box-shadow:0 0 0 1px rgba(52,211,153,.55), 0 0 10px rgba(52,211,153,.20), inset 0 0 12px rgba(52,211,153,.05) }
50%{ box-shadow:0 0 0 1.5px rgba(45,212,191,.95), 0 0 20px rgba(45,212,191,.45), 0 0 34px rgba(34,211,238,.22), inset 0 0 16px rgba(45,212,191,.10) }
}
html[data-theme="dark"] .done-card{
background:var(--card) !important;
border:1px solid rgba(52,211,153,.55) !important;
border-left:3px solid #2dd4bf !important;
animation:gpDonePulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
html[data-theme="dark"] .done-card{ animation:none;
box-shadow:0 0 0 1.5px rgba(45,212,191,.7), 0 0 16px rgba(45,212,191,.3) !important; }
}
html[data-theme="dark"] .skipped-card{
background:var(--card) !important;
border:1px solid rgba(251,146,60,.5) !important;
border-left:3px solid #fb923c !important;
box-shadow:0 0 12px rgba(251,146,60,.15) !important;
}
html[data-theme="dark"] .done-badge{ background:#12241d; border-color:rgba(52,211,153,.45); color:#6ee7b7 }
html[data-theme="dark"] .skip-badge{ background:#241d0e; border-color:rgba(251,146,60,.45); color:#fdba74 }
html[data-theme="dark"] .mine-badge{ background:#241d3d; border-color:rgba(167,139,250,.4); color:#c4b5fd }
html[data-theme="dark"] .coach-score{ background:#12241d; border-color:rgba(52,211,153,.35); color:#6ee7b7 }
html[data-theme="dark"] .combo-tag{ background:#0f2422; border-color:#155e56; color:#5eead4 }
html[data-theme="dark"] .chain-chip, html[data-theme="dark"] .chain-ap{ background:#141f24; border-color:rgba(45,212,191,.3); color:#7dd3c8 }
html[data-theme="dark"] .exercise-title{ color:var(--text-header) }
html[data-theme="dark"] .exercise-plan{ color:var(--muted) }
html[data-theme="dark"] .coach-note{ background:#241d3d; border-color:rgba(167,139,250,.3); color:#d6cdef }
html[data-theme="dark"] .note-box{ background:#1d1932; border-color:rgba(167,139,250,.2); color:#c0b7dd }
html[data-theme="dark"] .ap-group{
border-color:rgba(167,139,250,.22) !important;
background:linear-gradient(180deg,#1b1730,#171428) !important;
}
html[data-theme="dark"] .ap-group-head{
background:linear-gradient(180deg,#241d3d,#1d1932) !important;
border-color:rgba(167,139,250,.35) !important; color:#c4b5fd !important;
}
html[data-theme="dark"] .ap-group-body{ background:transparent }
html[data-theme="dark"] .chain-ap{ color:#8d84ab }
html[data-theme="dark"] .thumb{ background:#1d1932; border-color:rgba(167,139,250,.2) }
html[data-theme="dark"] .thumb .vid{ background:#241d3d; color:#c4b5fd }
html[data-theme="dark"] .attach-hint{ color:#7d7698 }
html[data-theme="dark"] .add-own-form{ background:#1d1932; border-color:rgba(167,139,250,.25) }
html[data-theme="dark"] .combination-title{ color:#fff }
html[data-theme="dark"] .combination-box{
border-color:rgba(167,139,250,.4) !important;
background:
radial-gradient(500px 120px at 92% -10%, rgba(124,58,237,.22), transparent 70%),
linear-gradient(180deg,#241d3d,#171428) !important;
}
html[data-theme="dark"] .comb-count-badge{ background:#a78bfa; color:#171428 }
html[data-theme="dark"] .chain-chip.comb-seg{
background:#2b2350 !important; border-color:rgba(167,139,250,.5) !important; color:#d6c9ff !important;
box-shadow:0 0 10px rgba(124,58,237,.25);
}
html[data-theme="dark"] .comb-inner-combo{
background:#1d1932 !important; border-color:rgba(167,139,250,.35) !important;
}
html[data-theme="dark"] .comb-inner-name{ color:#d6c9ff }
/* ── помощник в дневнике: тёмный неоново-розовый ── */
html[data-theme="dark"] .vaa-panel{
background:linear-gradient(135deg,#2a1225,#1b1631);
border-color:rgba(236,72,153,.35);
box-shadow:0 0 18px rgba(236,72,153,.15);
}
html[data-theme="dark"] .vaa-line{ color:#c987ad }
html[data-theme="dark"] .vaa-mode{ background:#1d1932; border-color:rgba(236,72,153,.35) }
html[data-theme="dark"] .vaa-mode-opt{ color:#c987ad }
/* ── кнопка-бургер и навигация месяца ── */
html[data-theme="dark"] .sg-menu > summary{
background:#1d1932; border-color:rgba(167,139,250,.35); color:#c4b5fd;
}
html[data-theme="dark"] .icon-btn{
background:#1d1932; border-color:rgba(167,139,250,.3); color:#c4b5fd;
}
html[data-theme="dark"] .month-chip{ background:#241d3d; border-color:rgba(167,139,250,.35); color:#e8e4f5 }
/* кликабельные тренировки в списке дня */
html[data-theme="dark"] .day-item{ background:#1d1932; border-color:rgba(167,139,250,.22) }
html[data-theme="dark"] .day-item-link:hover{ border-color:#a78bfa; box-shadow:0 0 16px rgba(124,58,237,.28) }
html[data-theme="dark"] .day-time{ background:#241d3d; border-color:rgba(167,139,250,.35); color:#c4b5fd }
html[data-theme="dark"] .day-title{ color:var(--text-header) }
html[data-theme="dark"] .day-sub{ color:var(--muted) }
html[data-theme="dark"] .day-item-go{ color:#c4b5fd }
html[data-theme="dark"] .day-timeline{ color:var(--text) }
html[data-theme="dark"] .diary-card__head h3{ color:var(--text-header) }
html[data-theme="dark"] .cal-weekdays{ color:var(--muted) }
html[data-theme="dark"] .cal-mark.train{ background:#241d3d; color:#c4b5fd; border-color:rgba(167,139,250,.35) }
html[data-theme="dark"] .legend-swatch{ border-color:rgba(167,139,250,.35) }
/* ── попап дня в календаре спортсмена ── */
html[data-theme="dark"] .day-pop{ background:rgba(0,0,0,.6) }
html[data-theme="dark"] .day-pop-in{
background:#1b1631; border:1px solid rgba(167,139,250,.3);
box-shadow:0 -8px 40px rgba(124,58,237,.25);
}
html[data-theme="dark"] .day-pop-head button{
background:#1d1932; border-color:rgba(167,139,250,.3); color:#c4b5fd;
}
html[data-theme="dark"] #dayPopBody div{
border-color:rgba(167,139,250,.22); color:var(--text); background:#1d1932;
}
/* ── страница входа ── */
html[data-theme="dark"] body.auth{
background:
url("data:image/svg+xml;utf8,")
right -50px bottom -28px / 440px auto no-repeat fixed,
radial-gradient(1200px 400px at -10% -20%, rgba(124,58,237,.22), transparent 60%),
radial-gradient(900px 420px at 120% 30%, rgba(34,211,238,.10), transparent 60%),
linear-gradient(180deg,#0c0a14,#131022) !important;
color:var(--text);
}
html[data-theme="dark"] .auth-card{
background:var(--card); border-color:rgba(167,139,250,.25);
box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(124,58,237,.15);
}
html[data-theme="dark"] .auth-hero{
background:linear-gradient(145deg,#241d3d,#171428 70%);
border-color:rgba(167,139,250,.2);
}
html[data-theme="dark"] .auth-card .title,
html[data-theme="dark"] .auth-card .hero-title,
html[data-theme="dark"] .auth-card h1, html[data-theme="dark"] .auth-card h2{ color:var(--text-header) }
html[data-theme="dark"] .auth-card label{ color:#b7aed6 }
html[data-theme="dark"] .auth-card button[type="button"]{
background:#1d1932; border-color:rgba(167,139,250,.3); color:#c4b5fd;
}
html[data-theme="dark"] .alert.error{ background:#2a1520; border-color:rgba(244,63,94,.4); color:#fda4af }
html[data-theme="dark"] .alert.ok{ background:#0f231c; border-color:rgba(52,211,153,.4); color:#6ee7b7 }
/* ── плитки-хабы (Упражнения, Снаряды, СФП) ── */
html[data-theme="dark"] .hero-tile{
background:linear-gradient(180deg,#1d1932,#171428);
border-color:rgba(167,139,250,.22);
color:var(--text-header);
box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 20px color-mix(in srgb, var(--acc, #7c3aed) 8%, transparent);
}
html[data-theme="dark"] .hero-tile:hover{
border-color:var(--acc, #a78bfa);
box-shadow:0 0 22px color-mix(in srgb, var(--acc, #a78bfa) 40%, transparent);
}
html[data-theme="dark"] .hero-tile .sub{ color:var(--muted) }
/* ── ОБЩИЙ АУДИТ: имена/заголовки/значения, заданные тёмным цветом в стилях страниц ── */
html[data-theme="dark"] .ac .nm,
html[data-theme="dark"] .nm,
html[data-theme="dark"] .a-name,
html[data-theme="dark"] .num,
html[data-theme="dark"] .lib-row .nm,
html[data-theme="dark"] .lib-item .nm,
html[data-theme="dark"] .arc-name,
html[data-theme="dark"] .arc-kpi .v,
html[data-theme="dark"] .task-title,
html[data-theme="dark"] .meal-title,
html[data-theme="dark"] .exercise-title,
html[data-theme="dark"] .day-title,
html[data-theme="dark"] .day-h2,
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .kpi .num,
html[data-theme="dark"] .empty-title,
html[data-theme="dark"] .head-title,
html[data-theme="dark"] .section-head h3,
html[data-theme="dark"] .diary-card__head h3,
html[data-theme="dark"] .choreo-block-title,
html[data-theme="dark"] .cw-title,
html[data-theme="dark"] .cw-main,
html[data-theme="dark"] .cw-summary-item b,
html[data-theme="dark"] .task-title b,
html[data-theme="dark"] .ph-card h3,
html[data-theme="dark"] .wo-hero h1,
html[data-theme="dark"] .meals-hero h1,
html[data-theme="dark"] .tasks-hero h1,
html[data-theme="dark"] .ath-hero h1,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .fw-700,
html[data-theme="dark"] .ex-title-text{
color:var(--text-header) !important;
}
/* тёмная «муть» — приглушённые подписи, чтобы не терялись, но и не кричали */
html[data-theme="dark"] .a-sub,
html[data-theme="dark"] .day-sub,
html[data-theme="dark"] .meal-sub,
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .num-label,
html[data-theme="dark"] .cell-cap{
color:var(--muted) !important;
}
/* ── календарь-сетка дневника (.calendar-pro) — белые ячейки ── */
html[data-theme="dark"] .calendar-pro .cal-cell{
background:#1a1630 !important; border-color:rgba(167,139,250,.18) !important; color:var(--text) !important;
}
html[data-theme="dark"] .calendar-pro .cal-cell.muted{ background:#141126 !important; opacity:.5 }
html[data-theme="dark"] .calendar-pro .cal-cell.active{
border-color:#a78bfa !important;
background:linear-gradient(180deg,#241d3d,#1d1932) !important;
box-shadow:0 0 0 2px rgba(167,139,250,.25), 0 0 16px rgba(124,58,237,.22) !important;
}
html[data-theme="dark"] .calendar-pro .cal-cell.today{
border-color:var(--neon) !important; box-shadow:0 0 0 2px rgba(34,211,238,.2) inset !important;
}
html[data-theme="dark"] .calendar-pro .cal-cell.filled{
background:linear-gradient(180deg,#12241d,#0f1f1a) !important; border-color:rgba(52,211,153,.4) !important;
}
html[data-theme="dark"] .calendar-pro .cal-cell.filled .cal-date{ color:#6ee7b7 !important }
html[data-theme="dark"] .calendar-pro .cal-date{ color:var(--text) }
html[data-theme="dark"] .cal-cell:hover{ border-color:#a78bfa !important }
/* ── сессии/тренер в ленте тренировок ── */
html[data-theme="dark"] .session-mini{
background:#241d3d !important; border-color:rgba(167,139,250,.35) !important; color:#c4b5fd !important;
}
html[data-theme="dark"] .coach-by{
background:#1d1932 !important; border-color:rgba(167,139,250,.3) !important; color:#c0b7dd !important;
}
/* ── заголовки конструкторов в библиотеке (были зелёным #0f766e) ── */
html[data-theme="dark"] .lib-create .small[style*="0f766e"],
html[data-theme="dark"] [style*="color:#0f766e"]{ color:#5eead4 !important }
html[data-theme="dark"] [style*="color:#7c3aed"]{ color:#c4b5fd !important }
/* ── бейджи и чипы общего вида ── */
html[data-theme="dark"] .badge{ background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd }
html[data-theme="dark"] .badge.warn{ background:#251d0e; border-color:rgba(251,191,36,.45); color:#fcd34d }
html[data-theme="dark"] .badge.ok{ background:#0f231c; border-color:rgba(52,211,153,.45); color:#6ee7b7 }
html[data-theme="dark"] .chip{ background:#1d1932; border-color:rgba(167,139,250,.25); color:#c0b7dd }
/* ── генеральный запасной стиль для «голых» инпутов (без .sg-input) ── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
background-color:#1d1932; color:var(--text);
border-color:rgba(167,139,250,.28);
}
html[data-theme="dark"] .combo-passes input,
html[data-theme="dark"] .lib-passes input{ background:transparent; color:inherit }
/* лайтбокс архива и так тёмный — ок */
/* ── 🏆 Достижения и цели ── */
html[data-theme="dark"] .goal-card{
background:var(--card); border-color:rgba(167,139,250,.3);
box-shadow:0 0 18px rgba(124,58,237,.12);
}
html[data-theme="dark"] .goal-card.won{ box-shadow:0 0 18px rgba(34,197,94,.15) }
html[data-theme="dark"] .goal-emoji{
background:linear-gradient(135deg,#3a2c14,#4a3a12); border-color:rgba(245,158,11,.45);
box-shadow:0 0 14px rgba(245,158,11,.3);
}
html[data-theme="dark"] .goal-name{ color:var(--text-header) }
html[data-theme="dark"] .goal-dates{ color:#9a8fc4 }
html[data-theme="dark"] .goal-dates b{ color:#d6c9ff }
html[data-theme="dark"] .goal-countdown{
background:linear-gradient(135deg,#2b2350,#241d3d); border-color:rgba(167,139,250,.4);
box-shadow:0 0 12px rgba(124,58,237,.25);
}
html[data-theme="dark"] .goal-countdown .n{ color:#c4b5fd }
html[data-theme="dark"] .goal-place{
background:linear-gradient(135deg,#3a2c14,#453412); border-color:rgba(245,158,11,.45);
box-shadow:0 0 12px rgba(245,158,11,.25);
}
html[data-theme="dark"] .goal-place .n{ color:#fbbf24 }
html[data-theme="dark"] .goal-place .t{ color:#d3a94f }
html[data-theme="dark"] .prep-bar{ background:#241d3d }
html[data-theme="dark"] .prep-kpi{ background:#1d1932; border-color:rgba(167,139,250,.2); color:#b7aed6 }
html[data-theme="dark"] .prep-kpi b{ color:var(--text-header) }
html[data-theme="dark"] .tg-cell{
background:linear-gradient(180deg,#1d1932,#171428); border-color:rgba(167,139,250,.22);
}
html[data-theme="dark"] .tg-cell.aa{
background:linear-gradient(180deg,#2b2350,#241d3d); border-color:rgba(167,139,250,.45);
box-shadow:0 0 12px rgba(124,58,237,.2);
}
html[data-theme="dark"] .tg-target{ color:var(--text-header) }
html[data-theme="dark"] .tg-avg{ color:#5eead4 }
html[data-theme="dark"] .goal-notes{ background:#1d1932; border-color:rgba(167,139,250,.3); color:#b7aed6 }
html[data-theme="dark"] .goal-form{
background:linear-gradient(180deg,#1d1932,#171428); border-color:rgba(167,139,250,.35);
}
html[data-theme="dark"] .gf-title{ color:var(--text-header) }
html[data-theme="dark"] .gf-field > span{ color:#9a8fc4 }
html[data-theme="dark"] .icon-opt .box{ background:#1d1932; border-color:rgba(167,139,250,.3) }
html[data-theme="dark"] .icon-opt input:checked + .box{
background:linear-gradient(135deg,#3a2c14,#4a3a12); border-color:#f59e0b;
box-shadow:0 0 14px rgba(245,158,11,.4);
}
html[data-theme="dark"] .ap-row{ background:#1d1932; border-color:rgba(167,139,250,.25) }
html[data-theme="dark"] .ap-row.on{ background:#2b2350; border-color:#a78bfa; box-shadow:0 0 10px rgba(124,58,237,.25) }
html[data-theme="dark"] .ap-row .nm{ color:var(--text) }
html[data-theme="dark"] .aa-row{
background:linear-gradient(90deg,#2b2350,#241d3d); border-color:rgba(167,139,250,.4);
}
html[data-theme="dark"] .aa-row .nm{ color:#d6c9ff }
html[data-theme="dark"] .res-form{ border-top-color:rgba(167,139,250,.3) }
html[data-theme="dark"] .wbtn-ghost{ background:#1d1932; border-color:rgba(167,139,250,.35); color:#d6c9ff }
html[data-theme="dark"] .wbtn-ghost:hover{ background:#2b2350 }
html[data-theme="dark"] .wbtn-danger{ background:#1d1932; border-color:rgba(248,113,113,.4); color:#f87171 }
html[data-theme="dark"] .gl-empty{ background:var(--card); border-color:rgba(167,139,250,.3) }
html[data-theme="dark"] .gl-empty .t{ color:var(--text-header) }
html[data-theme="dark"] body.sg-body .sg-btn.btn-goals{
background:linear-gradient(180deg,#3a2c14,#2c2210) !important;
border-color:rgba(245,158,11,.5) !important; color:#fbbf24 !important;
box-shadow:0 0 10px rgba(245,158,11,.2);
}
html[data-theme="dark"] .wo-vol{
background:#0f2422 !important; border-color:#155e56 !important; color:#5eead4 !important;
}
html[data-theme="dark"] .cl-decode{ color:#9a8fc4 }
html[data-theme="dark"] .cl-decode.vol{ color:#5eead4 }