/* Пикник — мост со старой версии (picnic-ui@1.0.0).
   Подключается ПОСЛЕ старых стилей сервиса и ПОСЛЕ styles.css новой системы.
   Даёт новый вид без переписывания разметки: старые токены → новые, ключевые классы → новый стиль.
   Удаляйте по мере перевода экранов на новые компоненты. В styles.css системы не входит. */
:root, :root[data-theme="dark"]{
  --srf:var(--surface); --srf2:var(--surface-sunken); --ink2:var(--ink-2); --mut:var(--muted);
  --hair:var(--line); --grid:var(--line-soft); --axis:var(--chart-axis);
  --acc:var(--accent); --acc-soft:var(--accent-soft); --plan:var(--chart-plan);
  --shadow:var(--shadow-sm);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --srf:var(--surface); --srf2:var(--surface-sunken); --ink2:var(--ink-2); --mut:var(--muted);
    --hair:var(--line); --grid:var(--line-soft); --axis:var(--chart-axis); --acc:var(--accent); --acc-soft:var(--accent-soft); --plan:var(--chart-plan); --shadow:var(--shadow-sm);
  }
}
html,body{font-family:var(--font-sans)}
body{font-size:15px;line-height:1.45}

/* шапка */
.hd-t{font:400 24px/1.1 var(--font-display);letter-spacing:-.005em}
.icon-btn{border-radius:var(--r-pill)}

/* карточки и цифры */
.card{border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.card h2{font:var(--t-h3)}
.hero-l,.tile .l,.plan-grid .l{font:var(--t-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted)}
.hero-v{font:400 48px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-v small{font:400 24px/1 var(--font-display);color:var(--muted)}
.tile{border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-sm)}
.tile .v,.qv,.big{font:400 28px/1.05 var(--font-display);letter-spacing:-.02em}
.tile .v small,.qv small,.big small{font:400 15px/1 var(--font-display);color:var(--muted)}
.plan-grid .v{font:var(--t-num-m)}
.pill{height:22px;padding:0 8px;font:650 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.decomp{border-radius:var(--r-md)}

/* фильтры и кнопки */
.seg{border-radius:var(--r-pill);border:0;background:var(--surface-sunken)}
.seg button{border-radius:var(--r-pill)}
.seg button.on{box-shadow:var(--shadow-sm)}
.chip{font-weight:600}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--ink-inverse)}
.sel,.search,.custom input{border-radius:var(--r-ctl);border-color:var(--line-strong)}
.btn{border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);border:0;font-weight:600}
.btn.ghost{background:transparent;color:var(--ink-2)}

/* пояснения, списки, графики */
.note.warn{border-radius:var(--r-md);padding:12px 14px;color:var(--ink);font-size:13px}
.track{height:8px;border-radius:var(--r-pill);background:var(--surface-sunken)}
.track .fill{border-radius:var(--r-pill);background:var(--accent)}
.stack{height:14px;border-radius:var(--r-pill);gap:3px}
.row .dot{border-radius:3px}
.dish,.qcard{border-radius:var(--r-md)}
.qcard{border-top-width:1px}
.tip{background:var(--surface-inverse);color:var(--ink-inverse);border-radius:var(--r-sm);font-family:var(--font-sans)}
.chart .ax{font-family:var(--font-sans)}
.skel{border-radius:var(--r-lg)}

/* Главная и справка платформы (public/app.css, body.home): там .btn — второстепенная
   с рамкой, .btn.primary — основная. В аналитике наоборот (.btn — основная). */
.home .btn{background:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);font-weight:600}
.home .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.home .btn.danger{color:var(--bad)}