:root { --radius:14px; --radius-sm:9px; font-synthesis:none; }
[data-theme=dark] { --bg:#0b0b0c; --surface:#141416; --surface2:#1b1b1e; --line:#26262a; --text:#f4f3f0; --muted:#94928c; --accent:#c9a876; --on:#17120a; --good:#5cb79f; --warn:#d9a441; --bad:#e0736d; --logo:#d9733a; --grid:#232327; --shadow:0 18px 50px rgba(0,0,0,.5); }
[data-theme=light] { --bg:#f6f4f0; --surface:#fff; --surface2:#f1eee8; --line:#e4e0d8; --text:#1b1a18; --muted:#6d6a64; --accent:#94703a; --on:#fff; --good:#1f7a64; --warn:#94670e; --bad:#b83f39; --logo:#c8622f; --grid:#eae6de; --shadow:0 18px 50px rgba(60,50,30,.14); }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--text); font:14.5px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
h1 { font-size:26px; line-height:1.2; letter-spacing:-.02em; margin:0; font-weight:600; }
h2 { font-size:15px; font-weight:600; margin:0; }
h3 { font-size:14px; font-weight:600; margin:0; }
p { margin:0; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .num { font-variant-numeric:tabular-nums; } .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all; }
.error { color:var(--bad); min-height:20px; font-size:13px; }
svg.i { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.brand { font-size:24px; font-weight:650; letter-spacing:-.04em; color:var(--logo); display:flex; align-items:baseline; gap:8px; }
.brand-sub { font-size:12px; letter-spacing:0; font-weight:500; color:var(--muted); }
.brand-lg { font-size:38px; }
/* Вход */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:100%; max-width:360px; display:grid; gap:14px; }
.login-card h1 { font-size:20px; }
.login-card form { display:grid; gap:10px; }
.code { text-align:center; font-size:26px; letter-spacing:.28em; font-variant-numeric:tabular-nums; }
/* Каркас */
.shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
aside { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:22px; padding:20px 12px; border-right:1px solid var(--line); background:var(--bg); z-index:30; }
aside .brand { padding:0 10px; }
#nav-items { display:grid; gap:2px; flex:1; align-content:start; overflow:auto; }
.nav-link, .nav-btn { display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px; border:0; border-radius:var(--radius-sm); background:none; color:var(--muted); font:inherit; cursor:pointer; text-align:left; text-decoration:none; }
.nav-link:hover, .nav-btn:hover { background:var(--surface); color:var(--text); text-decoration:none; }
.nav-link.active { background:var(--surface2); color:var(--text); }
.nav-link.active svg { color:var(--accent); }
.nav-badge { margin-left:auto; min-width:20px; padding:0 6px; border-radius:10px; background:var(--bad); color:#fff; font-size:11.5px; line-height:20px; text-align:center; }
.nav-foot { display:grid; gap:2px; }
.topbar { display:none; }
.content { min-width:0; }
main { max-width:1180px; margin:0 auto; padding:30px 32px 80px; display:grid; gap:18px; }
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:4px; }
.page-head p { margin-top:4px; color:var(--muted); }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.between { justify-content:space-between; }
.stack { display:grid; gap:12px; }
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-width:0; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
/* Показатели */
.stat { display:grid; gap:4px; text-decoration:none; color:inherit; }
a.stat:hover { border-color:var(--accent); text-decoration:none; }
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.stat-note { color:var(--muted); font-size:12.5px; }
/* Кнопки и поля */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface2); color:var(--text); font:inherit; font-weight:500; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--muted); text-decoration:none; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on); }
.btn.danger { color:var(--bad); }
.btn.small { padding:4px 10px; font-size:13px; }
.btn.wide { width:100%; }
.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; }
input,textarea,select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font:inherit; }
input[type=checkbox],input[type=radio] { width:auto; accent-color:var(--accent); }
input[type=range] { padding:0; accent-color:var(--accent); }
textarea { resize:vertical; min-height:84px; }
:is(input,textarea,select,button,a):focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
label.field { display:grid; gap:5px; font-size:13px; color:var(--muted); }
label.field small { font-size:12px; }
.check { display:inline-flex; align-items:center; gap:7px; color:var(--text); cursor:pointer; }
.seg { display:inline-flex; padding:3px; gap:2px; background:var(--surface2); border-radius:var(--radius-sm); flex-wrap:wrap; }
.seg button { padding:5px 11px; border:0; border-radius:7px; background:none; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.seg button.on { background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--line); }
/* Таблицы */
.table-wrap { overflow-x:auto; margin:0 -18px -6px; padding:0 18px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; font-weight:500; color:var(--muted); font-size:12.5px; padding:6px 10px 8px 0; white-space:nowrap; border-bottom:1px solid var(--line); }
td { padding:9px 10px 9px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
td.r,th.r { text-align:right; padding-right:0; }
tr.click { cursor:pointer; } tr.click:hover td { background:var(--surface2); }
/* Состояния: значок и подпись, не только цвет */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; padding:1px 9px 1px 7px; border-radius:20px; background:var(--surface2); white-space:nowrap; }
.pill svg.i { width:13px; height:13px; stroke-width:2.2; }
.pill.good svg { color:var(--good); } .pill.warn svg { color:var(--warn); } .pill.bad svg { color:var(--bad); }
.alert { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--bad); border-radius:var(--radius); background:var(--surface); }
.alert svg { color:var(--bad); }
.notice { display:flex; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); background:var(--surface2); color:var(--muted); font-size:13px; }
.notice svg { color:var(--accent); margin-top:1px; }
.empty { padding:26px 10px; text-align:center; color:var(--muted); }
/* Графики: тонкие метки, одна серия, подпись на наведении */
.chart { position:relative; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .gl { stroke:var(--grid); stroke-width:1; }
.chart .tick { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .bar { fill:var(--accent); }
.chart .hit { fill:transparent; }
.chart .hit:hover + .bar, .chart .bar.hl { opacity:.72; }
.chart .ln { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .ar { fill:var(--accent); opacity:.1; }
.chart .dot { fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.chart .cross { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.tip { position:absolute; pointer-events:none; padding:5px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface2); box-shadow:var(--shadow); font-size:12.5px; white-space:nowrap; transform:translate(-50%,-110%); z-index:5; }
.tip b { font-weight:600; }
.hbars { display:grid; gap:9px; }
.hbar { display:grid; grid-template-columns:minmax(70px,34%) 1fr auto; align-items:center; gap:10px; font-size:13.5px; }
.hbar-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar-track { height:8px; border-radius:4px; background:var(--surface2); overflow:hidden; }
.hbar-fill { display:block; height:100%; border-radius:4px; background:var(--accent); }
.hbar-val { font-variant-numeric:tabular-nums; color:var(--muted); min-width:36px; text-align:right; }
.link-btn { border:0; padding:0; background:none; color:var(--muted); font:inherit; font-size:12.5px; cursor:pointer; } .link-btn:hover { color:var(--text); }
/* Чек-лист */
.steps { display:grid; }
.step { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.step:last-child { border-bottom:0; }
.step.done .step-text { color:var(--muted); text-decoration:line-through; }
.step-text { flex:1; min-width:0; }
.progress { height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; }
.progress span { display:block; height:100%; border-radius:3px; background:var(--accent); }
/* Выпуски */
.platform { display:grid; gap:10px; }
.version { font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.drop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); }
.drop:last-child { border-bottom:0; }
.drop-title { flex:1; min-width:180px; }
/* Предпросмотр как в приложении */
.phone { max-width:330px; padding:14px; border:1px solid var(--line); border-radius:22px; background:#0b0b0c; color:#f4f3f0; display:grid; gap:10px; }
.phone-logo { justify-self:center; font-weight:650; font-size:18px; letter-spacing:-.04em; }
.phone-card { display:flex; gap:10px; align-items:center; padding:11px; border:1px solid #2a2a2e; border-radius:12px; background:#141416; font-size:13px; word-break:break-word; }
.phone-card svg { color:#8f8d88; } .phone-card.warn svg { color:#e0736d; }
.phone-ghost { height:42px; border-radius:12px; background:#141416; opacity:.55; }
/* Окна */
.modal-wrap { position:fixed; inset:0; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.55); z-index:60; }
.modal { width:100%; max-width:440px; max-height:90vh; overflow:auto; display:grid; gap:14px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.modal.wide { max-width:640px; }
.modal h2 { font-size:17px; }
.toasts { position:fixed; right:18px; bottom:18px; display:grid; gap:8px; z-index:70; }
.toast { display:flex; gap:8px; align-items:center; max-width:360px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface2); box-shadow:var(--shadow); }
.toast.bad svg { color:var(--bad); } .toast.good svg { color:var(--good); }
.skeleton { height:110px; border-radius:var(--radius); background:var(--surface); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.5; } }
@media (prefers-reduced-motion:reduce) { .skeleton { animation:none; } }
.kv { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13.5px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; min-width:0; word-break:break-word; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:25; }
@media (max-width:980px) { .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3,.g2 { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  aside { position:fixed; left:0; width:252px; transform:translateX(-100%); transition:transform .18s; }
  aside.open { transform:none; box-shadow:var(--shadow); }
  .topbar { display:flex; align-items:center; gap:12px; position:sticky; top:0; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line); z-index:20; }
  main { padding:18px 14px 70px; }
  h1 { font-size:22px; }
  .card { padding:15px; }
  .table-wrap { margin:0 -15px -6px; padding:0 15px; }
  .stat-value { font-size:25px; }
  .hide-m { display:none; }
}