/* ============================================================
   AIShop — «macOS desktop» тема (по образцу aivex.work).
   Плоский серый фон, полупрозрачные меню-бар + док, iOS-тайлы,
   светлая (дефолт) и тёмная темы + переключатель.
   theme.css подключается СТАТИЧЕСКИ последним (после style-v2.css),
   поэтому перебивает тёмный слой style.css (1485–1664).
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root, html, body{
  color-scheme:light;
  /* поверхности «рабочего стола» */
  --desk:#ececee; --bg:#ececee; --bg2:#f5f5f7;
  --chrome:rgba(249,249,251,.86);
  --chrome-brd:rgba(0,0,0,.08);
  --panel:#ffffff; --panel2:#f5f5f7;
  --border:rgba(0,0,0,.09); --border2:rgba(0,0,0,.16);
  /* текст */
  --txt:#202127; --dim:#54545a; --dim2:#5f5f66;
  /* акцент действия. Системный #0a84ff — это подложки/рамки/график; ДЛЯ ТЕКСТА он
     не годится: #0a84ff на белом = 3.68:1, а 11–14px требуют 4.5:1 (метки тиров,
     множители ×N, инлайновый код в docs, ссылки в карточках — 40+ мест style.css,
     все они берут color:var(--acc)). Поэтому в светлой теме --acc = #0060df
     (5.6:1), а bright-вариант остаётся в --acc2/--accSoft для свечений и заливок. */
  --acc:#0060df; --acc-dim:#0050b8; --acc2:#0a84ff;
  --accSoft:10,132,255; --accDim:0,96,223; --acc2RGB:10,132,255;
  --accd:rgba(0,96,223,.10);
  /* --grad — подложка кнопок с БЕЛЫМ текстом: берём #0071e3→#0054b8, чтобы подпись
     проходила AA (4.7:1 в верхней точке) а не 3.65:1 у системного #0a84ff. */
  --grad:linear-gradient(180deg,#0071e3,#0054b8);
  /* 5 пастельных iOS-тайлов (палитра aivex) */
  --tile-rose:#c34f80; --tile-blue:#467fc1; --tile-mint:#328c81;
  --tile-silver:#707986; --tile-graphite:#444d59;
  /*brand-dot — точка в логотипе: #c34f80 на светлом = 4.13:1 (16px, не «крупный») */
  --brand-dot:#b04472;
  /* статусы/тиры — нейтраль, без пурпура */
  --warn:#ff9f0a; --bad:#ff453a; --link:#0060df;
  --ok:#2ac65a; --okSoft:42,198,90;
  /* --*-text — те же статусы, но там, где они подписи (11–14px): базовые #2ac65a /
     #ff453a на белом дают 2.2–3.0:1 и не читаются. */
  --ok-text:#086a34; --bad-text:#c92a21; --warn-text:#8a5300;
  --t0:#6a6a72; --t1:#0060df; --t2:#0060df; --t3:#0050b8;
  /* треки прогресса/слайдера */
  --track:#e3e3e7;
  /* радиусы + тени */
  --r:13px; --r-tile:16px; --r-dock:19px;
  --glass:blur(22px) saturate(180%);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 22px rgba(0,0,0,.07);
  --dock-shadow:0 12px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.6);
  --tile-shadow:0 3px 8px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.28);
  --glow:0 1px 2px rgba(0,0,0,.04);
  --dock-h:72px; --bar-h:56px;
  --fd:"Manrope","Segoe UI",sans-serif;
  --fb:"Manrope","Segoe UI",system-ui,sans-serif;
  --fm:"JetBrains Mono",Consolas,monospace;
}
html[data-theme="dark"], html[data-theme="dark"] body{
  color-scheme:dark;
  --desk:#101113; --bg:#101113; --bg2:#191a1d;
  --chrome:rgba(30,31,34,.82);
  --chrome-brd:rgba(255,255,255,.10);
  --panel:#191a1d; --panel2:#212226;
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.20);
  --txt:#f0f0f3; --dim:#a7a9b0; --dim2:#9ba0a8;
  --acc:#0a84ff; --acc-dim:#409cff; --accDim:64,156,255;
  /* --accd на тёмном обязан быть СВЕТЛОЙ заливкой: в светлой теме это rgba(0,96,223,.10),
     и без переопределения активные чипы/табы проваливались бы в чёрный. */
  --accd:rgba(10,132,255,.16);
  --link:#409cff;
  /* --grad не переопределяем: тот же синий, что и в светлой теме — белый текст на
     кнопке проходит AA (3.65:1 у светлого варианта #0a84ff — не проходит). */
  /* подписи-статусы на тёмном: ярче базовых, чтобы читались как текст, а не как акцент */
  --ok-text:#5ee08a; --bad-text:#ff7b72; --warn-text:#ffb84d;
  --t0:#9aa0a8; --t1:#409cff; --t2:#409cff; --t3:#6ab8ff;
  --track:#2a2b30;
  --tile-rose:#b34a76; --tile-blue:#3f76b3; --tile-mint:#2c7d73;
  --tile-silver:#666f7d; --tile-graphite:#3c444f;
  /* точка логотипа на тёмном: базовая #c34f80 даёт 3.85:1 */
  --brand-dot:#e87fa8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px rgba(0,0,0,.5);
  --dock-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  --tile-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- 2. БАЗА ---------- */
body{
  background:var(--desk);
  background-attachment:fixed;
  color:var(--txt);
}
body::after{display:none!important}          /* точечная сетка style-v2:24 */
main::before{display:none!important}         /* блик home style.css:1501 */
::selection{background:rgba(var(--accSoft),.22)}
html{scrollbar-color:#c7c7cc var(--desk)}
html[data-theme="dark"]{scrollbar-color:#3a3b40 var(--desk)}
::-webkit-scrollbar-track{background:var(--desk)}
::-webkit-scrollbar-thumb{background:#c7c7cc;border:2px solid var(--desk)}
::-webkit-scrollbar-thumb:hover{background:#aeaeb4}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3b40;border-color:var(--desk)}

/* ---------- 3. НЕЙТРАЛИЗАЦИЯ ТЁМНОГО СЛОЯ style.css ---------- */
/* глобальные поверхности */
.card,.step,.tile,a.tile,.exbox,.metric,.mrow,.dcard,details,.side-ref,.sidestat{
  background:var(--panel);border-color:var(--border);box-shadow:var(--shadow);
}
.card::before,.metric::before{display:none!important}
.card:hover,.step:hover,a.tile:hover,.mrow:hover,.metric:hover{border-color:var(--border2);box-shadow:0 2px 4px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.09)}
.vchip,.tabs,.msearch input,.field input,.field textarea,.field select,.pchip,.badge{
  background-color:var(--panel2);background:var(--panel2);border-color:var(--border);color:var(--dim);
}
.vchip.on,.pchip.on{background:var(--accd);border-color:var(--acc);color:var(--acc-dim);box-shadow:none}
.field input:focus,.field textarea:focus,.field select:focus,.msearch input:focus{box-shadow:0 0 0 3px var(--accd)}
.mrange{accent-color:var(--acc)}
.btn{background:var(--grad);color:#fff;border:1px solid rgba(0,0,0,.04);box-shadow:0 1px 2px rgba(0,0,0,.10),0 3px 10px rgba(0,var(--accDim),.22),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:hover{filter:brightness(1.05)}
.btn.ghost,.btn.ghost:hover{background:var(--panel);color:var(--txt);border:1px solid var(--border2);box-shadow:var(--shadow);filter:none}
.btn.ghost:hover{background:var(--panel2)}
.hcta.hctaCab{background:var(--grad);color:#fff}
.card.qtop{border-color:var(--border)}
.topbar .hcta,.topbar .docbtn,.topbar .hl{color:var(--dim)}

/* home-специфичные (spec = body[data-page="home"] X) — зеркалим */
body[data-page="home"] .hero::before,body[data-page="home"] .hero::after{display:none!important;opacity:0!important}
body[data-page="home"] .hero h1 b,body[data-page="home"] .hero-title b{background:none;-webkit-text-fill-color:initial;color:var(--acc)}
body[data-page="home"] .hero p.sub,body[data-page="home"] .hero .sub{color:var(--dim)}
body[data-page="home"] .hero-eyebrow,body[data-page="home"] .hero .hero-eyebrow{
  color:var(--dim);background:var(--panel2);border-color:var(--border);box-shadow:none;
}
body[data-page="home"] .term,body[data-page="home"] .term{background:var(--panel);border-color:var(--border);box-shadow:var(--shadow)}
body[data-page="home"] .term .tbar{background:var(--panel2)}
body[data-page="home"] .metric{background:var(--panel)}
body[data-page="home"] .metric .mv{color:var(--txt)}
body[data-page="home"] .metric .ml{color:var(--dim)}
body[data-page="home"] .step,body[data-page="home"] a.tile{background:var(--panel)}
body[data-page="home"] .fic,body[data-page="home"] a.tile .ic{background:var(--panel2);border-color:var(--border)}
body[data-page="home"] .exbox{background:var(--panel);border-color:var(--border)}
body[data-page="home"] .exmid{border-color:var(--border2);box-shadow:var(--shadow)}
body[data-page="home"] #calcCard{background:var(--panel);border-color:var(--border)}
body[data-page="home"] .trustsec::before{display:none!important}
body[data-page="home"] section.wrap>h2::after{background:var(--acc)}
h1 b,h2 b{background:none;-webkit-text-fill-color:initial;color:var(--acc)}
.hero-eyebrow{color:var(--dim);background:var(--panel2);border-color:var(--border);box-shadow:none}
.term{background:var(--panel);border-color:var(--border);box-shadow:var(--shadow)}
.term .tbar{background:var(--panel2);border-bottom:1px solid var(--border)}
.term pre,.term code{background:var(--panel2);color:var(--txt)}
.copy{background:var(--panel2);border:1px solid var(--border);color:var(--dim)}
.copy:hover{border-color:var(--acc);color:var(--acc)}
/* style-v2:87 зашивает .mono в тёмную палитру (#e3e6ec на почти прозрачном белом) → в светлой теме 1.25:1.
   inherit даёт цвет родителя: читается и в прозе, и внутри тёмных терминалов. */
.mono{color:inherit;background:rgba(128,134,146,.10);border-color:var(--border)}
.flo,.floaties{display:none!important}

/* ---------- 3b. ПОВЕРХНОСТЬ ПОПОЛНЕНИЯ: тёмный слой → токены ----------
   style.css:249,678,692,745,753,757,794,797,948,982,1214,1271,1278,1297,1461,1546
   зашивают «Midnight Violet» прямо в правила (тёмно-синие подложки, пурпурные
   подписи). В светлой теме текст при этом берётся из светлых токенов: подложка
   rgb(12,18,26), надпись #202127 → 1.04:1, то есть «на странице пополнения не видно
   текст». Переводим всё на токены: светлая тема — белая карточка и тёмный текст,
   тёмная — панель #191a1d и светлый текст. */
.overlay{background:rgba(0,0,0,.42)}
html[data-theme="dark"] .overlay{background:rgba(0,0,0,.66)}
.modal{background:var(--panel);border-color:var(--border);box-shadow:0 22px 64px rgba(0,0,0,.24)}
.modal::before{display:none}
.mhead .aic,.tgb .aic,.card.pkey .aic{background:var(--accd);border-color:var(--border)}
.mhead .aic img{filter:none}
.mx{background:var(--panel2);border-color:var(--border);color:var(--dim)}
.mx:hover{color:var(--txt);border-color:var(--border2)}
.mtitle{color:var(--txt)}
.msub{color:var(--dim)}
.calc,.tiershop{background:var(--panel2);border-color:var(--border);box-shadow:none}
.calc .cl,.tssub{color:var(--dim)}
.calc .cv,.calc .cp{color:var(--txt)}
.tsbig{color:var(--acc-dim)}
.tssave{color:var(--dim)}
.tierhint,.scale,.smallnote{color:var(--dim)}
.tierhint b{color:var(--txt)}
.payopt{background:var(--panel2);border-color:var(--border);color:var(--dim)}
.payopt b{color:var(--txt)}
.payopt.on{background:var(--accd);border-color:var(--acc);box-shadow:none}
.payopt.on b{color:var(--acc-dim)}
.payopt .pic{border:1px solid var(--border)}
.pgnote{color:var(--dim)}
.ferr{color:var(--bad-text);background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.34)}
.fok{color:var(--ok-text);background:rgba(var(--okSoft),.09);border-color:rgba(var(--okSoft),.34)}
.warn{color:var(--txt);background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.34)}

/* карточка «Быстрое пополнение» в правой колонке дашборда */
.card.qtop{background:var(--panel);border-color:var(--border);box-shadow:var(--shadow)}
.qlab{color:var(--dim)}
.qwal,.qhic{color:var(--acc-dim);background:var(--accd);border-color:var(--border);box-shadow:none}
.qhic{border-radius:var(--r)}
.qhic svg{filter:none}
.qbal .qv,.qprice b{color:var(--txt)}
.qbal .ql,.qprice .prate,.qprice .prwas{color:var(--dim)}

/* дашборд: цветные подписи метрик из тёмного слоя (#a78bfa/#60a5fa/#fbbf2f) — 2.2–2.7:1 */
.dcards .dcard:nth-child(4n+1) .dl,.dcards .dcard:nth-child(4n+2) .dl,
.dcards .dcard:nth-child(4n+3) .dl,.dcards .dcard:nth-child(4n+4) .dl,
.dl.c-v,.dl.c-b,.dl.c-g,.dl.c-a{color:var(--dim)}
.dcard .ds{color:var(--dim)}
.dic,.dic.c-v,.dic.c-b,.dic.c-g,.dic.c-a,.dcard .dic{color:var(--acc-dim);background:var(--accd);border-color:var(--border);box-shadow:none}
.dic.c-g,.dcard .dic.c-g{color:var(--ok-text)}

/* ключи, журнал, чипы */
.chip{background:var(--panel2);border-color:var(--border)}.chip code{color:var(--acc-dim)}
.seg{background:var(--panel2);border-color:var(--border)}
.seg button.on{color:var(--acc-dim);background:var(--accd)}
.badge.v{color:var(--acc-dim);background:var(--accd);border-color:var(--border)}
.badge.pers{color:var(--acc-dim);border-color:var(--border);background:var(--accd)}
.pkb .v.bad{color:var(--bad-text)}
.livelogs .llscroll{background:none;scrollbar-color:var(--border2) transparent}
.livelogs .llscroll::-webkit-scrollbar-thumb{background:var(--border2)}
.livelogs .llscroll::-webkit-scrollbar-thumb:hover{background:var(--dim2)}
.ldtxt{color:var(--dim)}
.ldtxt.live{color:var(--ok-text)}
.pchip.on .pa,.pchip.on .pp{color:var(--acc-dim)}
/* style-v2.css:а красит ссылки в --acc2 (#0a84ff) — на белом 3.65:1. Ссылка текста
   должна читаться: берём --link (светлая #0071e3 / тёмная #409cff). */
a{color:var(--link)}
/* .topbar живёт на части страниц: перебиваем пурпурный градиент более специфичным селектором */
.topbar .hcta.hctaCab{background:var(--grad);color:#fff}
/* переключатель языка в подвале: синий текст по голубой подложке = 3.2:1 */
.langsw button.on{background:var(--accd);color:var(--acc-dim)}
/* бейдж «основной»: #fcd34d по кремовой подложке — 1.38:1, не читается */
body[data-page="cabinet"] .badge.def{color:var(--warn-text);background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.42)}
body[data-page="cabinet"] .badge.def .bstar{filter:none}
/* ≤720 строки журнала складываются в карточки с тёмной подложкой (style.css:369) */
@media(max-width:720px){
  .rtable tr,.livelogs .rtable tr{background:var(--panel2);border-color:var(--border)}
  .rtable tbody tr:hover{background:var(--accd)}
  .rtable td::before{color:var(--dim)}
  .livelogs .rtable td:nth-child(1),.livelogs .rtable td:nth-child(3)::before,.livelogs .rtable td:nth-child(4)::before{color:var(--dim)}
}
/* style-v2.css:106,114: активная вкладка/фильтр — БЕЛЫМ по голубой подложке 13% →
   в светлой теме 1.2:1, «Дашборд / Ключи / Рефералка» не читаются */
.tab.on{background:var(--accd);border-color:var(--acc);color:var(--acc-dim)}
.tab:hover{background:var(--panel2)}
.osbtn.on{background:var(--accd);border-color:var(--acc);color:var(--acc-dim)}
.mb-item.on{color:var(--acc-dim)}
.mb-controls .langsw button.on{background:var(--grad);color:#fff}

/* ---------- 3c. Остальные тёмные подложки style.css: rgba(9,14,20,…) ----------
   Наследие «Midnight Violet»: карточки рефералки, ключей, логов, шагов, графиков и
   т.п. красятся полупрозрачным чёрным, а текст берётся из светлых токенов → в
   светлой теме 1.4–3.1:1. Строки style.css: 297 .keyrow, 312 .stp, 320 .pick a,
   428 .vgi, 468 .bcrow, 579 details .a code, 584 a.tile .ic, 587 .fic, 694 .krow,
   711 .rcard, 925 .demo, 932 .trustsec .step, 953 .chartbox, 964 .reflink,
   967 .refstat, 292 .picon, 823 .exbox .ic, 870 .pkwait .wic.
   Тёмными оставлены только терминалы pre (style.css:256 со своим светлым
   текстом #c9d6e4) и декоративная плашка логотипа .mb-mark. */
.reflink,.refstat,.krow,.rcard,.keyrow,.stp,.pick a,.chartbox,.demo,.bcrow{
  background:var(--panel2);border-color:var(--border);box-shadow:none}
.stp{border-left:3px solid var(--acc);color:var(--txt)}
.stp b{color:var(--acc-dim)}
.reflink code,.refstat b,.krow .kbal,.rcard .rprice,.pick a .arr{color:var(--acc-dim)}
.krow .kmask,.rcard .rl,.keyrow .lab{color:var(--dim)}
/* style.css:700 «ключ не действует» — --bad (#ff453a) на светлом = 3.13:1.
   Cabinet-полировка (cabinet-polish.css:54) красит то же правило селектором
   (0,2,1), поэтому повторяем его специфичность — иначе переопределение мертво. */
.kbal.bad,body[data-page="cabinet"] .kbal.bad{color:var(--bad-text)}
.pick a:hover,.krow:hover,.rcard:hover{background:var(--accd);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.picon,.vgi,.fic,a.tile .ic,.exbox .ic,.pkwait .wic{background:var(--panel2);border-color:var(--border);box-shadow:none}
.vgi img,.fic img,.picon img{filter:none}
details .a code{background:var(--panel2);border-color:var(--border);color:var(--txt)}
.bcrow .bnum,.bcrow.bt .bl{color:var(--txt)}
.bcrow.bt{background:var(--accd);border-color:rgba(var(--accSoft),.4)}
.bcrow.bt .bnum{color:var(--acc-dim)}
.trustsec .step{background:var(--panel);border-color:var(--border)}
.trustsec .step .n{background:transparent;color:var(--acc-dim);box-shadow:inset 0 0 0 1.5px var(--border2)}
.chartbox .chartempty{color:var(--dim)}
/* комментарии в тёмных блока кода (--dim2 на чёрном = 2.6:1) */
pre .cmt{color:#8fa3b8}
/* style-v2.css:8 тёмный скроллбар на светлом столе */
html{scrollbar-color:var(--border2) transparent}
/* каталог моделей (style.css:519 .mpop, 540 .mcell.c-st, 552 .mpb, 414 .mult):
   зелёные #4bd19c/#34d399 на светлом = 1.75–1.92:1, пагинация — тёмные плитки */
.mpop,.mcell.c-st{color:var(--ok-text)}
.mpop svg{color:var(--ok-text)}
.mpb{background:var(--panel2);border-color:var(--border);color:var(--dim);box-shadow:none}
.mpb:hover:not(:disabled):not(.on){border-color:var(--border2);color:var(--txt);background:var(--accd)}
.mpb.on{background:var(--accd);border-color:var(--acc);color:var(--acc-dim);box-shadow:none}
.mcell small,.mpinfo{color:var(--dim2)}
.tier{border-color:var(--border2)}
/* статус-кольцо таймера остатка (style.css:1134) */
.wtimer.ok .wring-fg,.wtimer.ok .wtimer-t b{color:var(--ok-text);stroke:var(--ok-text)}
/* калькулятор экономии на models.html: пурпурный слой style.css:459–478 */
.bccard,.bcex{background:var(--panel2);border-color:var(--border)}
.bccard:hover{border-color:var(--border2);background:var(--accd)}
.bccard b svg{color:var(--acc-dim)}
.bcrow.bt2{border-color:rgba(var(--accSoft),.34);background:var(--accd)}
.bcrow.bt2 .bnum{color:var(--acc-dim)}
/* светлый текст внутри тёмных блоков кода (pre остаётся «терминалом») */
pre b,pre strong,pre small{color:#c9d6e4}
/* models.html: премиальный слой image-карточек живёт в <style> шапки страницы
   (строки 33–105) и перебивает style.css, но НЕ theme.css — он подключён позже. */
.igp{background:var(--panel2);border-color:var(--border)}
.igico,.igbad{background:var(--accd);border-color:var(--border);box-shadow:none}
.igico img,.igbad img{filter:none}
.ignew,.igst{color:var(--ok-text);background:rgba(var(--okSoft),.10);border-color:rgba(var(--okSoft),.32)}
.igst i{background:var(--ok);box-shadow:none}
.igfeat svg{color:var(--ok-text)}
.igbtn{background:var(--panel2);border-color:var(--border2);color:var(--txt)}
.igbtn:hover{border-color:var(--acc);color:var(--acc-dim)}
.igcp{border-bottom-color:var(--border2)}
.igcp:hover,.igcp.copied{color:var(--acc-dim);border-bottom-color:var(--acc-dim)}
.igex{background:#0a0c10}
.igexcopy{background:rgba(9,14,20,.88);color:#9ba2b1}
.igexcopy:hover,.igexcopy.ok{color:#8ab6ff;border-color:#8ab6ff}
/* style.css:424 счётчик во включённом чипе: --acc на его же заливке = 4.14:1 */
.vchip.on .cnt,.vmorebtn:hover .cnt{color:var(--acc-dim)}
/* style-v2.css:99 номер шага: --acc2 (#0a84ff) на голубой плитке = 2.72:1 */
.mh .mn{color:var(--acc-dim);background:var(--accd);border-color:rgba(var(--accSoft),.32)}
/* style.css:1010 инлайновый код в docs: --acc на серой подложке mono = 4.34:1 (нужно 4.5) */
.docsec .mono{color:var(--acc-dim)}

/* ---------- 4. ЛЕЙАУТ: полный контент, без сайдбара ---------- */
main,footer{margin-left:0!important}
body aside.side,.scrim{display:none!important}
/* точечно: `.side` — класс и у кнопок пагинации в models.html, трогать только aside */
main{padding-top:var(--bar-h);padding-bottom:calc(var(--dock-h) + 40px)}
body[data-page="admin"] main{padding-bottom:calc(var(--dock-h) + 40px)} /* перебить admin.css:72px — иначе таблицы уходят под док */
.wrap{max-width:1080px}

/* ---------- 5. МЕНЮ-БАР ---------- */
.menubar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:60;
  display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--chrome);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-bottom:1px solid var(--chrome-brd);
}
.mb-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--txt)}
.mb-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:linear-gradient(180deg,#3a3a3c,#1d1d1f);color:#fff;font-weight:800;font-size:15px;box-shadow:var(--tile-shadow)}
html[data-theme="dark"] .mb-mark{background:linear-gradient(180deg,#f5f5f7,#d8d8dc);color:#1d1d1f}
.mb-name{font-weight:800;font-size:16px;letter-spacing:-.3px}
.mb-name b{color:var(--txt)}
.mb-name small{font-weight:600;font-size:11px;color:var(--dim2);letter-spacing:.02em}
.mb-dot{color:var(--brand-dot);font-style:normal;font-weight:800}
.mb-status{display:flex;align-items:center}
.mb-status .apist{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
  padding:5px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--border)}
.mb-status .apist .sdot{width:7px;height:7px;border-radius:50%;background:var(--dim2);animation:pulse 2.2s infinite}
.mb-status .apist.ok .sdot{background:var(--ok)}
.mb-status .apist.err .sdot{background:var(--bad)}
.mb-status .stx{white-space:nowrap}
.menubar .sp{flex:1}
.mb-item{display:inline-flex;align-items:center;gap:7px;color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:600;padding:7px 11px;border-radius:10px}
.mb-item:hover{color:var(--acc);background:var(--accd)}
.mb-item.on{color:var(--acc);background:var(--accd)}
.mb-item svg{width:17px;height:17px}
.mb-controls{display:flex;align-items:center;gap:10px}
.mb-controls .langsw{display:inline-flex;background:var(--panel2);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.mb-controls .langsw button{border:0;background:transparent;color:var(--dim);font-weight:700;font-size:12px;padding:5px 9px;cursor:pointer}
.mb-controls .langsw button.on{background:var(--grad);color:#fff}
.mb-theme{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--border);color:var(--dim)}
.mb-theme:hover{color:var(--acc);border-color:var(--acc)}
.mb-theme svg{width:18px;height:18px}
.mb-theme .ico-moon{display:none}
html[data-theme="dark"] .mb-theme .ico-moon{display:block}
html[data-theme="dark"] .mb-theme .ico-sun{display:none}
/* style-v2:181 держит #authArea фиксированным слотом 330/166px под старый топбар — в меню-баре он не нужен */
.mb-controls #authArea{display:flex;align-items:center;gap:8px;width:auto;flex:0 0 auto;min-width:0}
.mb-controls #authArea .btn.sm{height:34px;padding:0 14px;font-size:13px}
.mb-controls #authArea .userchip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--txt);text-decoration:none}
.mb-controls #authArea .userchip .uav{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:11px;font-weight:800}
.mb-controls #authArea .uinfo{display:flex;flex-direction:column;line-height:1.1;font-size:12px}
.mb-controls #authArea .uinfo small{color:var(--dim2);font-size:10.5px}
.mb-controls #authArea .hl.ico{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--panel2);border:1px solid var(--border);color:var(--dim);cursor:pointer}
.mb-controls #authArea .hl.ico svg{width:18px;height:18px}

/* ---------- 6. ДОК (низ) ---------- */
.dock{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:6px;padding:8px 10px;max-width:calc(100vw - 20px);
  background:var(--chrome);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--chrome-brd);border-radius:var(--r-dock);box-shadow:var(--dock-shadow);
}
.dock .dt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  width:56px;padding:6px 2px;border-radius:12px;text-decoration:none;color:var(--dim);transition:transform .12s}
.dock .dt:hover{transform:translateY(-3px)}
.dock .dt .dt-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--panel);border:1px solid var(--border);color:var(--dim);box-shadow:var(--tile-shadow)}
.dock .dt .dt-ico svg{width:20px;height:20px}
.dock .dt .dt-lbl{font-size:10px;font-weight:600;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock .dt.on .dt-ico{background:var(--grad);border-color:transparent;color:#fff}
.dock .dt.on{color:var(--txt)}
.dock .dt-sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--border2)}
.dock .cabnav-dock{display:flex;align-items:center;gap:6px}
.dock .cabnav-dock:empty{display:none}

/* ---------- 7. DESKTOP-ТАЙЛЫ (главная) ---------- */
/* 7 тайлов (кабинет + 6 разделов) сеткой 4+3: 4*96 + 3*26 = 462 */
.desktop{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 26px;margin:30px auto 4px;max-width:470px}
.tile-app{display:flex;flex-direction:column;align-items:center;gap:9px;width:96px;text-decoration:none;color:var(--txt)}
.tile-app .ta-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r-tile);color:#fff;
  box-shadow:var(--tile-shadow);transition:transform .14s}
.tile-app:hover .ta-ico{transform:translateY(-4px) scale(1.03)}
.tile-app .ta-ico svg{width:30px;height:30px}
.tile-app .ta-lbl{font-size:12.5px;font-weight:600;text-align:center}
.t-rose .ta-ico{background:var(--tile-rose)}
.t-blue .ta-ico{background:var(--tile-blue)}
.t-mint .ta-ico{background:var(--tile-mint)}
.t-silver .ta-ico{background:var(--tile-silver)}
.t-graphite .ta-ico{background:var(--tile-graphite)}

/* ---------- 8. HERO-КОМПОЗИЦИЯ (главная) ---------- */
.hero-title{font-family:var(--fd);font-weight:500;font-size:clamp(40px,7vw,60px);line-height:1;letter-spacing:-2px;margin:6px 0 0}
.hero-title .dot{color:var(--brand-dot)}
body[data-page="home"] .hero h1.hero-title{max-width:none;margin:6px 0 0;font-family:var(--fd);font-weight:500;font-size:clamp(44px,8vw,68px);line-height:1;letter-spacing:-2.4px;text-shadow:none}
.hero-tag{font-size:clamp(17px,2.4vw,22px);font-weight:600;color:var(--txt);margin:14px 0 0;letter-spacing:-.3px}
.hero-tag b{color:var(--acc)}
.provchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
.provchips .pc{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13px;font-weight:600;color:var(--dim)}
.provchips .pc img{width:17px;height:17px}
.endpoint{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:640px;margin:26px auto 0;padding:16px 18px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);text-align:left}
.endpoint .ep-lab{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.endpoint .ep-url{font-family:var(--fm);font-size:15px;font-weight:700;color:var(--txt);word-break:break-all}
.endpoint .ep-cap{font-size:12px;color:var(--dim2)}
.endpoint .ep-copy{margin-left:auto}

/* ---------- 9. ПРОГРЕСС/СЛАЙДЕР/ЧАРТ ---------- */
.bar,.bar-fill,.progress,.progress-bar,.usage,.meter,.meter-fill,.track,.fill,.tokenbar,.bal-bar,.chartbar{border-radius:999px}
[class*="track"],.bar,.meter,.progress,.tokenbar,.bal-bar{background:var(--track)}
[class*="fill"],[class*="bar-fill"],.bar>i,.bar>span,.meter-fill,.progress-bar,.tokenbar>i,.bal-bar>i{background:var(--grad)!important}
.chartbar{fill:rgba(var(--accSoft),.6)!important}
.chartline{stroke:var(--acc)!important}
.chartdot{fill:var(--acc)!important}
.chartgrid{stroke:var(--border)!important}
.wring-bg{stroke:var(--track)!important}
.wring-fg{stroke:var(--acc)!important}
.mrange{background:linear-gradient(90deg,var(--acc) 0%,var(--acc) var(--p,50%),var(--track) var(--p,50%));box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.mrange::-webkit-slider-thumb{background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 3px rgba(0,0,0,.28),0 3px 10px rgba(0,0,0,.12)}
.mrange::-webkit-slider-thumb:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mrange::-webkit-slider-thumb:active{transform:scale(1.07)}
.mrange::-moz-range-thumb{background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.mrange::-moz-range-track{background:var(--track)}
.mrange::-moz-range-progress{background:var(--acc)}
.tiermark span,.tiermark i,.tmark{background:#c7c7cc!important}
html[data-theme="dark"] .mrange::-webkit-slider-thumb{background:#f5f5f7;border-color:rgba(255,255,255,.2)}
.qbal .qv,.kbal .kbv,.dcard .dv{color:var(--txt)}
.qbal .ql{color:var(--dim2)}

/* ---------- 9b. ДЕНЬГИ: рублёвый счёт, таблица конвертации, выпуск ключа ----------
   Карточки новые (п.4/п.5), поэтому красим их теми же токенами, что и остальные:
   в тёмной теме --panel/--txt сами меняются, жёстких цветов здесь нет. */
.card.conv,.card.ops,.card.newkey{background:var(--panel);border-color:var(--border);box-shadow:var(--shadow)}
.card.newkey h3,.card.conv h3,.card.ops h3{color:var(--txt)}
/* цены моделей: имя — обычный текст, чтобы вся таблица не кричала акцентом */
#convRows td b{color:var(--txt)}
/* движки по счёту: приход зелёный, расход — обычный текст */
.ops .oprow{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.ops .oprow:last-child{border-bottom:0}
.oprow .opd{color:var(--dim2);font-family:var(--fm);font-size:11.5px;white-space:nowrap}
.oprow .opn{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oprow .ops{margin-left:auto;font-family:var(--fm);font-weight:700;white-space:nowrap}
.oprow.in .ops{color:var(--ok-text)}
.oprow.out .ops{color:var(--txt)}
/* карточка выпуска ключа: итоговая стоимость в строку с остатком на счёте */
.newkey .field input{background:var(--panel2);border-color:var(--border2);color:var(--txt)}
.ckcost{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:2px 0 12px;font-size:12.5px;color:var(--dim)}
.ckcost b{font-family:var(--fm);font-size:15px;color:var(--txt)}
.ckcost .smallnote{font-size:11.5px}
/* строка ключа: лимит/срок и инлайн-редактор */
.krow .kmeta{font-size:11.5px;color:var(--dim2);margin:2px 0 0}
.krow .kmeta.bad{color:var(--bad-text)}
.kedit{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.kedit .field input{background:var(--panel);border-color:var(--border2);color:var(--txt)}

/* ---- раскладка денежной колонки ----
   1) style.css:1195 даёт боковой колонке 330px. В нихроманную 4-столбцовую таблицу
      конвертации это не влезает (у th стоит nowrap — шапка распирает сетку), поэтому
      на десктопе колонка шире, а сама таблица плотнее.
   2) .dashside стоит position:sticky. С «Балансом счёта» + таблицей + движками колонка
      стала выше вьюпорта, и sticky навсегда отрезал бы её низ — на десктопе снимаем.
   3) На узких экранах style.css:1204 разворачивает колонки в один поток через order.
      У новых карточек order по умолчанию 0 — таблица «Ваши рубли в токенах» и движки
      уезжали ВЫШЕ самого баланса. Проставляем порядок с запасом в 10. */
@media(min-width:1101px){
  .dashgrid{grid-template-columns:minmax(0,1fr) 372px}
  .dashside{position:static}
}
@media(min-width:721px){
  .conv .rtable{font-size:12.5px}
  .conv .rtable th,.conv .rtable td{padding:8px 6px}
  .conv .rtable th:first-child,.conv .rtable td:first-child{padding-left:0}
  .conv .rtable th:last-child,.conv .rtable td:last-child{padding-right:0;text-align:right}
  .conv .rtable .badge{font-size:10px;padding:1px 6px}
}
@media(max-width:1100px){
  .dashgrid > .dashmain > .card{order:70}
  .dashgrid > .dashmain > .dcards{order:10}
  .dashgrid > .dashmain > .pkey{order:20}
  .dashgrid > .dashside > .qtop{order:30}
  .dashgrid > .dashside > .conv{order:40}
  .dashgrid > .dashside > .ops{order:50}
  .dashgrid > .dashmain > .livelogs{order:60}
  .dashgrid > .dashmain > .tgb{order:80}
  .dashgrid > .dashside > .qhelp{order:90}
}
@media(max-width:720px){
  /* 14 моделей — не список пакетов: сворачиваем строку в две линии (имя сверху,
     «×коэф» и «цена / 1 млн» второй строкой). Колонку «на ваш остаток» прячем:
     остаток уже показан в сводке над таблицей, а 4 подписи на строку давали простыню. */
  .conv .rtable tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 12px;margin-bottom:8px;align-items:baseline}
  .conv .rtable td{display:block;border-bottom:0;padding:0;min-width:0}
  .conv .rtable td::before{display:none}
  .conv .rtable td:first-child{grid-column:1/-1}
  .conv .rtable td:nth-child(2){color:var(--dim);font-size:12px}
  .conv .rtable td:nth-child(3){text-align:right;font-weight:700}
  .conv .rtable td:nth-child(3)::after{content:" / 1 млн";color:var(--dim);font-weight:600;font-size:11.5px}
  body.lang-en .conv .rtable td:nth-child(3)::after{content:" / 1M"}
  .conv .rtable td:nth-child(4){display:none}
}

/* ---------- 10. ПОДВАЛ ---------- */
/* --dim2 на сером «столе» даёт 2.9:1 — подписи, почта и Platega читаются плохо, берём --dim (~6:1) */
footer{background:transparent!important;border-top:1px solid var(--border)}
footer .f{border-bottom:0;color:var(--dim)}
footer .f a{color:var(--dim)}
footer .f a:hover{color:var(--acc)}
footer .f .fmail{white-space:nowrap}
footer .f .fmail a{font-family:var(--fm);font-size:12.8px;font-weight:500}
.fplatega{display:block;width:100%;text-align:center;margin-top:12px;color:var(--dim);font-size:12.5px;letter-spacing:.2px}

/* ---------- 11. ADMIN светлые токены ---------- */
body[data-page="admin"]{--admin-panel:var(--panel);--admin-line:var(--border)}
body[data-page="admin"] .tabs{background:var(--chrome)}
body[data-page="admin"] .admin-fact{background:var(--panel2)}
body[data-page="admin"] .clickrows tr:hover{background:var(--accd)}

/* ---------- 12. АДАПТИВ ---------- */
/* style.css:163,168,1260 прячет «Админку» и выход на ≤980 — они жили в сайдбаре.
   В меню-баре это единственные точки доступа, возвращаем. Доки — и так в доке. */
@media(max-width:980px){
  #authArea .hl.ico{display:grid}
  .mb-controls .mb-item[href="docs.html"]{display:none}
}
@media(max-width:720px){
  :root,html,body{--bar-h:52px;--dock-h:66px}
  .mb-status,.mb-item span{display:none}
  .mb-item{padding:7px}
  .dock{left:8px;right:8px;transform:none;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .dock::-webkit-scrollbar{display:none}
  .dock .dt{width:50px;flex:0 0 auto}
  .desktop{gap:16px 18px}
  .tile-app{width:80px}
  .tile-app .ta-ico{width:56px;height:56px}
  /* поддержка — в подвале и кабинете; доки уже в доке (≤980) */
  .mb-name small,.mb-controls .mb-item.mb-support{display:none}
  .menubar{gap:8px;padding:0 10px}
  .mb-controls,.mb-controls #authArea{gap:6px}
  .mb-controls .langsw button{padding:4px 6px}
  .mb-controls #authArea .btn.sm{padding:0 10px;font-size:12px;white-space:nowrap}
  /* чип = только аватар: .uinfo шире слота 42px и наползает на кнопку выхода */
  .mb-controls #authArea .uinfo{display:none}
  .mb-controls #authArea .userchip{width:auto;padding:4px}
}
@media(max-width:420px){
  .mb-name{display:none}   /* остаётся знак «A» — он же ссылка на главную */
}