/* PAG design system — Mini App «Валар» (фундамент для всех страниц). Язык EasyGO / parkaiglobal: глубокий тёмный фон,
   один живой акцент со свечением, поверхности с глубиной (свет по верхней кромке + двухслойная тень), Sora — заголовки,
   Inter — текст, JetBrains Mono — все числа и деньги. Dark по умолчанию, light — data-theme="light" (переопределяются
   ТОЛЬКО токены). Экраны: телефон ≤599 · планшет 600–899 · ПК ≥900 (левый рейл). Движение — только transform/opacity,
   единые --ease/--dur, всё гаснет при prefers-reduced-motion; html.fx-lite (слабые устройства) — без размытия и частиц. */
/* Шрифты — со своего сервера (Google Fonts из РФ медленный/режется, @import блокировал отрисовку): переменные woff2, latin + cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/vendor/fonts@1/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/vendor/fonts@1/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts@1/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts@1/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/vendor/fonts@1/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================ ТОКЕНЫ ================================ */
:root{
  color-scheme:dark;
  /* поверхности: от дальней к ближней */
  --ground:#0B0F14; --ground-top:#0D1720; --ground-bottom:#07090D; --surface:#10161D; --surface-2:#151D26; --surface-3:#1B2430; --surface-4:#222D3A;
  /* текст: основной · вторичный · приглушённый · едва (плейсхолдеры) */
  --ink:#F2F5F7; --ink-2:#C5CFD8; --muted:#8B98A5; --faint:#5F6B78;
  --line:#1F2934; --line-strong:#2B3744;
  /* акцент — один; accent2 — светлее (текст на тёмном), deep — тень градиента */
  --accent:#22C55E; --accent-ink:#04210F; --accent-wash:rgba(34,197,94,.14); --accent2:#4ADE80; --accent-deep:#15803D; --accent-glow:rgba(34,197,94,.35);
  --btn-top:#4ADE80; --btn-mid:#22C55E; --btn-bot:#16A34A;
  --blue:#60A5FA; --blue-wash:rgba(96,165,250,.10);
  /* состояния (+ заливки) — только для статусов, не как акцент */
  --ok:#22C55E; --warn:#F5B93D; --crit:#EF4444; --info:#60A5FA; --crit-ink:#FFFFFF;
  /* премиальная валюта (V-коин, 08.10.2026): золото по тёмно-фиолетовому — только для V-элементов, не акцент проекта */
  --prem:#F5C542; --prem-2:#FFF1BF; --prem-deep:#A8741A; --prem-ink:#1A1206; --prem-violet:#8B5CF6; --prem-night:#1E0B3D; --prem-wash:rgba(245,197,66,.14);
  --ok-wash:rgba(34,197,94,.14); --warn-wash:rgba(245,185,61,.14); --crit-wash:rgba(239,68,68,.14); --info-wash:rgba(96,165,250,.14);
  /* валюты: монеты и кристаллы */
  --coin:#F5C04A; --gem:#67D4F5;
  /* графики: категориальная палитра (проверена на CVD против --surface), «прочее», подсветка колонки */
  --c1:#1FA855; --c2:#4C93F0; --c3:#C77C06; --c4:#9A7CF5; --c5:#E0558F; --c-other:#5F6B78; --chart-band:rgba(255,255,255,.045);
  /* глубина: свет по кромке + тени (контактная + рассеянная) */
  --hl:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.85);
  --shadow-xl:0 2px 6px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,.9);
  --glow:0 8px 28px -8px var(--accent-glow);
  --card-bg:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 70%,var(--surface)) 0%,var(--surface) 72%);
  --card-line:color-mix(in srgb,var(--line-strong) 88%,var(--accent) 12%);
  --glass:color-mix(in srgb,var(--surface) 74%,transparent); --glass-strong:color-mix(in srgb,var(--surface-2) 88%,transparent); --glass-line:color-mix(in srgb,var(--line-strong) 80%,transparent);
  --blur:blur(18px) saturate(160%); --scrim:rgba(3,6,10,.62); --glow-top:28%;
  /* радиусы · отступы · шрифты · шкала */
  --radius:18px; --radius-sm:12px; --r-xs:8px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Consolas,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-base:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;
  /* движение: отклик 120–200 мс, появление 320–480 мс */
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.3,1.35,.5,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms;
  /* раскладка + Telegram runtime (ui.js initRuntime: стабильная высота, безопасная зона fullscreen) */
  --nav-h:64px; --app-max:520px; --gutter:16px; --rail-w:0px;
  --tg-vh:100dvh; --tg-safe-top:0px;
  --safe-top:calc(env(safe-area-inset-top, 0px) + var(--tg-safe-top)); --safe-bottom:env(safe-area-inset-bottom, 0px);
  /* редкость (кейсы / инвентарь / дропы) */
  --r-common:#8a94a3; --r-rare:#3b82f6; --r-epic:#a855f7; --r-legendary:#f2c75c;
  --r-common-wash:rgba(138,148,163,.16); --r-rare-wash:rgba(59,130,246,.18); --r-epic-wash:rgba(168,85,247,.2); --r-legendary-wash:rgba(242,199,92,.2);
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#F2F5F8; --ground-top:#F9FBFC; --ground-bottom:#E6ECF1; --surface:#FFFFFF; --surface-2:#F6F8FA; --surface-3:#EDF1F5; --surface-4:#E3E9EF;
  --ink:#0B0F14; --ink-2:#334150; --muted:#5E6A76; --faint:#9AA5B0;
  --line:#E3E8EE; --line-strong:#CDD5DE;
  --accent:#16A34A; --accent-ink:#FFFFFF; --accent-wash:rgba(22,163,74,.10); --accent2:#15803D; --accent-deep:#166534; --accent-glow:rgba(22,163,74,.26);
  --btn-top:#1FA553; --btn-mid:#178D43; --btn-bot:#146C35;
  --blue:#2563EB; --blue-wash:rgba(37,99,235,.08);
  --ok:#15803D; --warn:#B45309; --crit:#DC2626; --info:#2563EB;
  --prem:#B07A12; --prem-2:#F5C542; --prem-deep:#7A520A; --prem-ink:#FFFFFF; --prem-violet:#7C3AED; --prem-night:#2E1065; --prem-wash:rgba(176,122,18,.10);
  --ok-wash:rgba(22,163,74,.10); --warn-wash:rgba(180,83,9,.10); --crit-wash:rgba(220,38,38,.09); --info-wash:rgba(37,99,235,.09);
  --coin:#B7791F; --gem:#0E8FB5;
  --c1:#16A34A; --c2:#2563EB; --c3:#D97706; --c4:#7C3AED; --c5:#DB2777; --c-other:#94A0AB; --chart-band:rgba(15,21,28,.045);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(15,21,28,.06), 0 4px 10px -6px rgba(15,21,28,.18);
  --shadow:0 1px 2px rgba(15,21,28,.06), 0 10px 28px -18px rgba(15,21,28,.32);
  --shadow-lg:0 2px 4px rgba(15,21,28,.07), 0 24px 48px -20px rgba(15,21,28,.36);
  --shadow-xl:0 2px 6px rgba(15,21,28,.08), 0 36px 80px -30px rgba(15,21,28,.42);
  --card-bg:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%); --card-line:var(--line);
  --glass:color-mix(in srgb,var(--surface) 78%,transparent); --glass-strong:color-mix(in srgb,var(--surface) 92%,transparent); --glass-line:color-mix(in srgb,var(--line-strong) 75%,transparent);
  --scrim:rgba(15,23,32,.38); --glow-top:14%;
  --r-common:#68757F; --r-rare:#2563eb; --r-epic:#7c3aed; --r-legendary:#b8860b;
  --r-common-wash:rgba(104,117,127,.12); --r-rare-wash:rgba(37,99,235,.12); --r-epic-wash:rgba(124,58,237,.12); --r-legendary-wash:rgba(184,134,11,.14);
}
html.fx-lite{--blur:none;--glass:color-mix(in srgb,var(--surface) 97%,transparent);--glass-strong:var(--surface-2)}

/* ================================ БАЗА ================================ */
*{box-sizing:border-box}
html{min-height:100%;background:var(--ground);scrollbar-color:var(--line-strong) transparent}
/* фон — отдельный fixed-слой (композитится, без перерисовки при скролле); под ним только цвет html */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 55% at 50% -12%,color-mix(in srgb,var(--accent) var(--glow-top),transparent),transparent 62%),radial-gradient(45% 40% at -10% 100%,color-mix(in srgb,var(--blue) 18%,transparent),transparent 70%),radial-gradient(40% 35% at 110% 60%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--ground-top) 0%,var(--ground) 45%,var(--ground-bottom) 100%)}
html,body{margin:0;padding:0;color:var(--ink);font:15px/1.5 var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:transparent;min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none}
/* тонкая сетка сверху, гаснет к низу (как на лендинге EasyGO) */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.22;mask-image:radial-gradient(70% 50% at 50% 0%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(70% 50% at 50% 0%,#000 20%,transparent 100%)}
html.has-rail body{padding-left:var(--rail-w)} a{color:var(--accent2);text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button,a,label,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px} ::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}}
.hidden{display:none!important} .muted{color:var(--muted)} .mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.money{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.caps{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .autofit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center{text-align:center;padding:40px 16px} .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app{position:relative;z-index:1;max-width:var(--app-max);margin:0 auto;padding:8px var(--gutter) calc(var(--nav-h) + 30px + var(--safe-bottom));animation:fadeIn var(--dur-3) var(--ease-out)}
.app.mid{--app-max:860px} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================================ ШАПКА ================================ */
/* один паттерн на всех страницах: назад · заголовок + подзаголовок · действия; на телефоне — липкое стекло */
.top{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;min-height:44px;margin:0 calc(var(--gutter) * -1) 14px;padding:calc(8px + var(--safe-top)) var(--gutter) 10px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent);opacity:.55}
.top .grow,.top>.grow{flex:1;min-width:0} .top h1,.page-head h1{margin:0;flex:1;font:800 22px/1.15 var(--display);letter-spacing:-.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .sub,.page-head .sub{font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:subIn .5s .2s var(--ease-out) both}
.top .hdr-acts,.hdr-acts{display:flex;gap:8px;align-items:center;flex:none} .page-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:44px} .page-head .grow{flex:1;min-width:0}
.iconbtn{position:relative;overflow:hidden;width:44px;height:44px;flex:none;padding:0;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));box-shadow:var(--hl),var(--shadow-sm);color:var(--ink-2);font-size:16px;cursor:pointer;transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-2),background var(--dur-2),color var(--dur-2)}
.iconbtn:active{transform:scale(.94)}
.page-head .back,.top .back{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:44px;min-width:44px;padding:0 12px 0 10px;margin:0;flex:none;border-radius:var(--r-md);border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));box-shadow:var(--hl),var(--shadow-sm);color:var(--ink-2);font-size:15px;font-weight:600;transition:transform var(--dur-1) var(--ease-out)}
.page-head .back:active,.top .back:active{transform:scale(.94)} .top .back.iconbtn{padding:0;width:44px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--accent2);background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 10px var(--accent)}
.sec-h{display:flex;align-items:baseline;gap:8px;margin:22px 0 12px} .sec-h h2{margin:0;font:700 18px/1.2 var(--display);letter-spacing:-.015em;position:relative}
.sec-h .muted{font-size:12px;padding:2px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}

/* ================================ ПОВЕРХНОСТИ ================================ */
.card,.rc-card,.item-card,.case-card,.gtile,.betpanel{position:relative;isolation:isolate;background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--hl),var(--shadow)}
.card{border-radius:var(--radius);padding:16px;margin-bottom:12px} .card h3{margin:0 0 8px;font:700 16px/1.25 var(--display);letter-spacing:-.01em;position:relative}
.card.tap{cursor:pointer;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-3)} .card.tap:active{transform:scale(.985)}
.card.tap.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash),var(--hl),var(--shadow)} .card.glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.card.flat{background:var(--surface-2);box-shadow:none;border-color:var(--line)}
.card.halo{overflow:hidden;background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 60%),var(--card-bg);border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong))}
.card-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px} .card-h h3{margin:0;flex:1 1 160px;min-width:0}
/* свечение под пальцем / курсором: --mx/--my пишет ui-fx.js */
.card.tap::after,.tile2::after,.gtile::after,.item-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-3);background:radial-gradient(260px 160px at var(--mx,50%) var(--my,0%),var(--accent-wash),transparent 65%);z-index:-1}
.card.tap:active::after,.tile2:active::after{opacity:1} .row{display:flex;align-items:center;gap:12px} .row .grow{flex:1;min-width:0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2>*{min-width:0} .cols2{display:grid;gap:12px} .cols2>*{min-width:0} .sep{height:1px;background:var(--line);margin:12px 0} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tile{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--radius);padding:18px 14px;text-align:center;box-shadow:var(--hl),var(--shadow);cursor:pointer;transition:transform var(--dur-1) var(--ease-out)}
.tile:active{transform:scale(.97)} .tile .ico{position:relative;display:inline-block;font-size:26px;margin-bottom:6px} .tile .t{font-weight:600;font-size:14px}
.tile-badge{position:absolute;top:-6px;right:-18px;font-size:11px;padding:1px 6px;background:var(--crit);color:var(--crit-ink);border-color:transparent} .stars{display:flex;gap:6px}
.stars button{font-size:24px;background:none;border:0;cursor:pointer;filter:grayscale(1);opacity:.5;min-height:44px;min-width:44px;transition:transform var(--dur-1),opacity var(--dur-2)}
.stars button.on{filter:none;opacity:1} .stars button:active{transform:scale(.9)}

/* ================================ КНОПКИ ================================ */
/* .btn — вторичная; .primary · .tonal · .ghost · .danger; размеры .sm · .lg · .block · .icon; .is-busy — спиннер (setBusy) */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));box-shadow:var(--hl),var(--shadow-sm);color:var(--ink);font-weight:650;font-size:14.5px;line-height:1.2;letter-spacing:-.005em;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform var(--dur-1) var(--ease-out),filter var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2),opacity var(--dur-2)}
.btn:active{transform:scale(.97)} .btn[disabled],.btn:disabled,.btn.disabled{opacity:.45;pointer-events:none;box-shadow:none;filter:saturate(.5)}
.btn.primary,.cta{background:linear-gradient(180deg,var(--btn-top) 0%,var(--btn-mid) 55%,var(--btn-bot) 100%);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--btn-top) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -12px var(--accent-glow);font-weight:700}
.btn.secondary{background:linear-gradient(180deg,var(--surface-3),var(--surface-2));color:var(--ink)}
.btn.tonal{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent2);box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.danger{background:linear-gradient(180deg,color-mix(in srgb,var(--crit) 20%,var(--surface-2)),color-mix(in srgb,var(--crit) 8%,var(--surface)));border-color:color-mix(in srgb,var(--crit) 50%,transparent);color:var(--crit)}
.btn.sm{min-height:38px;padding:7px 12px;font-size:13px;border-radius:11px;gap:6px} .btn.lg{min-height:54px;padding:12px 22px;font-size:16px;border-radius:var(--r-lg)} .btn.block{width:100%}
.btn.icon{padding:0;width:46px;min-width:46px} .btns{display:flex;flex-wrap:wrap;gap:8px} .cta{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:58px;font-size:17px}
/* блик по primary: один раз при появлении и заново при наведении */
.btn.primary::before,.cta::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:sweep 1.1s .35s var(--ease-out) both;pointer-events:none}
@keyframes sweep{from{left:-60%}to{left:160%}} @keyframes sweep2{from{left:-60%}to{left:160%}} .btn .bl{display:contents} .btn.is-busy{pointer-events:none;color:transparent!important} .btn.is-busy:disabled{opacity:.9;filter:none}
.btn.is-busy .bl{visibility:hidden}
.btn.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);border-right-color:transparent;animation:spin .7s linear infinite}
.btn.primary.is-busy::after{border-color:var(--accent-ink);border-right-color:transparent} @keyframes spin{to{transform:rotate(360deg)}}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(0);animation:ripple .55s var(--ease-out) forwards}
:root[data-theme="light"] .ripple{background:rgba(15,21,28,.10)} @keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}} .tile2,.gtile,.tab,.chip,.nav button{position:relative;overflow:hidden}

/* ================================ ФОРМЫ ================================ */
.input,textarea.input,select.input{width:100%;min-height:46px;padding:11px 13px;border-radius:12px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--ground) 55%,var(--surface));box-shadow:inset 0 1px 2px rgba(0,0,0,.25);outline:none;font-size:16px;color:var(--ink);transition:border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2)}
:root[data-theme="light"] .input{background:var(--surface);box-shadow:inset 0 1px 2px rgba(15,21,28,.06)} .input::placeholder{color:var(--faint)}
.input:focus,.input:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-wash),0 0 18px -6px var(--accent-glow)}
.input.bad,.field.bad .input{border-color:var(--crit)!important;box-shadow:0 0 0 3px var(--crit-wash)} .input[disabled]{opacity:.55} textarea.input{min-height:90px;resize:vertical;line-height:1.45}
select.input{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.field{margin-bottom:14px} .field label{display:block;font-size:13px;font-weight:550;color:var(--ink-2);margin-bottom:6px} .field .hint{font-size:12px;color:var(--muted);margin-top:5px}
.code-input{font-family:var(--mono);font-size:24px;letter-spacing:.35em;text-align:center} input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
/* переключатель: строка .switch с чекбоксом или отдельный input.toggle */
.switch,.field label.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);min-height:48px;margin:0;cursor:pointer}
.switch:last-child{border-bottom:0}
.switch input[type=checkbox],input.toggle{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:46px;height:28px;margin:0;border-radius:var(--r-pill);background:var(--surface-4);border:1px solid var(--line-strong);box-shadow:inset 0 1px 3px rgba(0,0,0,.25);cursor:pointer;transition:background var(--dur-2),border-color var(--dur-2)}
.switch input[type=checkbox]::before,input.toggle::before{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--dur-3) var(--ease-spring)}
.switch input[type=checkbox]:checked,input.toggle:checked{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 70%,#000)}
.switch input[type=checkbox]:checked::before,input.toggle:checked::before{transform:translateX(18px)} .switch input[type=checkbox]:disabled,input.toggle:disabled{opacity:.5}

/* ================================ ТАБЫ · ЧИПЫ · БЕЙДЖИ ================================ */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--gutter);margin:0 calc(var(--gutter) * -1) 12px;padding:2px var(--gutter);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none} .tabs>*{flex:none}
.tab,.chip,.cat{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));box-shadow:var(--hl);white-space:nowrap;cursor:pointer;font-size:13.5px;font-weight:550;color:var(--ink-2);scroll-snap-align:start;transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2),transform var(--dur-1) var(--ease-out)}
.chip{font-size:13px;padding:6px 12px} .tab:active,.chip:active,.cat:active{transform:scale(.96)}
.tab.active,.chip.on,.chip.active,.cat.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 26%,var(--surface-2)),color-mix(in srgb,var(--accent) 12%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent2);font-weight:650;box-shadow:var(--hl),0 6px 18px -10px var(--accent-glow)}
.chips,.chip-row{display:flex;flex-wrap:wrap;gap:8px}
/* сегментный переключатель (segmented() в ui.js) */
.seg-ctl{display:flex;gap:4px;padding:4px;border-radius:var(--r-md);background:color-mix(in srgb,var(--ground) 50%,var(--surface));border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.seg-ctl>button{position:relative;overflow:hidden;flex:1;min-height:36px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--muted);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background var(--dur-2),color var(--dur-2),box-shadow var(--dur-2)}
.seg-ctl>button.on{background:linear-gradient(180deg,var(--surface-4),var(--surface-3));color:var(--ink);box-shadow:var(--hl),var(--shadow-sm)}
:root[data-theme="light"] .seg-ctl>button.on{background:var(--surface)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.35;border:1px solid var(--line-strong);color:var(--ink-2);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));white-space:nowrap;animation:fadeUp .4s var(--ease-out) both}
.badge.accent{background:var(--accent-wash);color:var(--accent2);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.badge.ok{color:var(--ok);background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.badge.warn{color:var(--warn);background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.badge.crit{color:var(--crit);background:var(--crit-wash);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.badge.info{color:var(--info);background:var(--info-wash);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.badge.gold{color:var(--r-legendary);background:var(--r-legendary-wash);border-color:color-mix(in srgb,var(--r-legendary) 35%,transparent)}
.dot{position:relative;width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--muted)}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)}
.dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
.delta,.kpi .d{display:inline-flex;align-items:center;gap:3px;width:max-content;padding:1px 7px;border-radius:var(--r-pill);font:600 11.5px/1.5 var(--mono);color:var(--muted);background:var(--surface-3)}
.delta.up,.kpi .d.up{color:var(--ok);background:var(--ok-wash)} .delta.down,.kpi .d.down{color:var(--crit);background:var(--crit-wash)}
.vip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--r-pill);background:var(--r-legendary-wash);color:var(--r-legendary);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.plat{font-size:12px;padding:3px 7px;border-radius:8px;background:linear-gradient(180deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-strong);font-family:var(--mono)}
.rar-common{--rc:var(--r-common);--rw:var(--r-common-wash)} .rar-rare{--rc:var(--r-rare);--rw:var(--r-rare-wash)} .rar-epic{--rc:var(--r-epic);--rw:var(--r-epic-wash)} .rar-legendary{--rc:var(--r-legendary);--rw:var(--r-legendary-wash)}

/* ================================ АВАТАРЫ · СПИСКИ · ТАБЛИЦЫ ================================ */
.ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-strong);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--ink-2);flex:none;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover;display:block} .ava.sm{width:32px;height:32px;font-size:12px}
.chat-ava{width:44px;height:44px;border-radius:14px;flex:none;display:inline-grid;place-items:center;font-size:20px;font-weight:700;background:linear-gradient(135deg,var(--accent-wash),var(--surface-2));border:1px solid var(--line-strong);overflow:hidden}
.chat-ava img{width:100%;height:100%;object-fit:cover;display:block} .chat-ava.lg{width:72px;height:72px;border-radius:20px;font-size:30px} .chat-ava.sm{width:28px;height:28px;border-radius:9px;font-size:13px}
.chat-pick{display:inline-flex;align-items:center;gap:8px;max-width:240px;min-height:40px;padding:5px 14px 5px 5px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));color:inherit;cursor:pointer;font:inherit;font-weight:550;transition:border-color var(--dur-2),background var(--dur-2)}
.chat-pick.active{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--accent-wash);color:var(--accent2)}
.list .item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .list .item:last-child{border-bottom:0}
.list .item.tap{cursor:pointer;margin:0 -8px;padding:12px 8px;border-radius:12px;transition:background var(--dur-2)} .item .name{font-weight:650;font-size:15px} .item .meta{font-size:12.5px;color:var(--muted)}
.md-list .item.sel{background:var(--accent-wash)} .msg{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.msg .bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:8px 11px;flex:1;min-width:0;word-break:break-word}
.msg .who{font-size:12px;color:var(--accent2);font-weight:650;display:flex;gap:8px} .msg .when{color:var(--muted);font-weight:400;font-family:var(--mono)} .msg .acts{display:flex;gap:6px;margin-top:6px}
.console{background:color-mix(in srgb,var(--ground) 60%,var(--surface));border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:120px;max-height:45dvh;overflow:auto;font-size:14px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.console .u{color:var(--accent2);font-family:var(--mono);margin-top:6px} .console .b{padding:6px 0 0 10px;border-left:2px solid var(--line-strong);margin:4px 0 8px;white-space:pre-wrap;word-break:break-word}
.console code{font-family:var(--mono);background:var(--surface-3);padding:1px 5px;border-radius:5px;font-size:.92em} .cmdline{display:flex;gap:8px;margin-top:10px} .cmdline .input{flex:1}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table th{text-align:left;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 8px;border-bottom:1px solid var(--line-strong);position:sticky;top:0;background:var(--surface);z-index:1}
.table td{padding:9px 8px;border-bottom:1px solid var(--line)} .table tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.table td.num,.table th.num,.table .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
/* горизонтальные полосы (топ участников): .bar > .track > .fill */
.bar{display:flex;align-items:center;gap:10px;font-size:13.5px;margin:8px 0}
.bar .track,.xp .track{position:relative;flex:1;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.bar .fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-deep),var(--accent) 60%,var(--accent2));box-shadow:0 0 12px -2px var(--accent-glow);transform-origin:left;animation:growX .8s var(--ease-out) both}
.bar:first-of-type .fill{background:linear-gradient(90deg,var(--accent),var(--accent2))} @keyframes growX{from{transform:scaleX(0)}to{transform:none}}

/* ================================ KPI · ГРАФИКИ ================================ */
/* телефон: 2 или 4 плитки — по две в ряд, иначе по три; числа подгоняет fitText (ui-fx.js) */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.kpis:has(>:last-child:nth-child(2)),.kpis:has(>:last-child:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))} .kpis:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.kpi,.stat2 .kpi{position:relative;min-width:0;padding:12px 12px 12px 16px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--hl),var(--shadow-sm);text-align:left;overflow:hidden;animation:fadeUp .45s var(--ease-out) both}
.kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent2),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow)}
.kpi .v{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(17px,4.6vw,22px);line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v.counting{color:var(--accent2)}
.kpi .l{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{margin-top:6px} .kpi .hint{font-size:11.5px;color:var(--muted);margin-top:4px} .kpi .ic{position:absolute;right:10px;top:10px;font-size:18px;line-height:1;opacity:.9} .kpi .ic+.v{padding-right:22px}
.kpi.accent{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),var(--card-bg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong))}
.stat2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .stat2 .kpi .v{font-size:22px} @keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
canvas.chart{display:block;width:100%;height:180px;touch-action:pan-y;-webkit-tap-highlight-color:transparent} canvas.chart.sm{height:120px} canvas.chart.lg{height:240px}
canvas.spark{display:block;width:100%;height:36px;margin-top:6px} canvas.donut{display:block;flex:none;width:168px;height:168px;touch-action:pan-y}
.donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .donut-row .chart-legend{flex:1;min-width:190px;max-width:440px} .chart-legend{display:grid;gap:2px;font-size:13px}
.chart-legend .cl-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;transition:background var(--dur-1)}
.chart-legend .cl-li.on{background:var(--surface-2)} .chart-legend .cl-sw{width:10px;height:10px;border-radius:3px}
.chart-legend .cl-lb{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chart-legend .cl-v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.chart-legend .cl-p{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:40px;text-align:right}
.chart-tip{position:fixed;left:0;top:0;z-index:80;min-width:96px;max-width:240px;padding:8px 10px;border-radius:12px;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line-strong);box-shadow:var(--hl),var(--shadow-lg);font-size:12px;pointer-events:none;opacity:0;transform:translateX(-50%) translateY(4px);transition:opacity var(--dur-1),transform var(--dur-2) var(--ease-out)}
.chart-tip.show{opacity:1;transform:translateX(-50%)} .chart-tip .ct-t{color:var(--muted);font-family:var(--mono);font-size:11px;margin-bottom:4px}
.chart-tip .ct-r{display:flex;align-items:center;gap:7px;line-height:1.5} .chart-tip .ct-r i{width:8px;height:8px;border-radius:2px;flex:none} .chart-tip .ct-r span{color:var(--ink-2);flex:1}
.chart-tip .ct-r b{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ================================ НАВИГАЦИЯ ================================ */
/* телефон / планшет: плавающая стеклянная панель; ПК: рейл слева */
.nav{position:fixed;z-index:20;left:calc(var(--rail-w) + 12px);right:12px;bottom:calc(10px + var(--safe-bottom));height:var(--nav-h);display:flex;justify-content:center;border-radius:22px;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--hl),var(--shadow-lg);overflow:hidden;overscroll-behavior:none}
.nav .in{display:flex;width:100%;max-width:520px;margin:0 auto}
.nav button{flex:1;min-height:48px;border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 0;font:600 11px/1.1 var(--sans);letter-spacing:.01em;cursor:pointer;transition:color var(--dur-2)}
.nav button .i{position:relative;display:grid;place-items:center;width:52px;height:30px;border-radius:12px;font-size:19px;transition:background var(--dur-2),transform var(--dur-3) var(--ease-spring)}
.nav button.active{color:var(--accent2)}
.nav button.active .i{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);transform:translateY(-1px)}
.nav button:active .i{transform:scale(.9)}
.rail{display:none;position:fixed;left:0;top:0;bottom:0;z-index:21;width:var(--rail-w);flex-direction:column;gap:2px;padding:calc(18px + var(--safe-top)) 12px calc(14px + var(--safe-bottom));background:color-mix(in srgb,var(--surface) 90%,transparent);border-right:1px solid var(--line);box-shadow:inset -1px 0 0 rgba(255,255,255,.02);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.rail-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 16px;color:var(--ink)}
.rail-brand .logo{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--accent-ink);background:linear-gradient(145deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px var(--accent-glow);font-size:18px}
.rail-brand .logo svg{width:22px;height:22px} .rail-brand .bn{display:grid;line-height:1.15;min-width:0} .rail-brand .bn b{font:800 17px var(--display);letter-spacing:-.02em}
.rail-brand .bn small{font-size:11px;color:var(--muted);letter-spacing:.04em} .rail-sec{padding:14px 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--ink-2);font-weight:600;font-size:14px;text-align:left;cursor:pointer;transition:background var(--dur-2),color var(--dur-2)}
.rail-item .i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;font-size:16px;background:var(--surface-2);border:1px solid var(--line);transition:background var(--dur-2),border-color var(--dur-2)}
.rail-item .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-item.active{background:linear-gradient(90deg,var(--accent-wash),transparent 95%);color:var(--ink)}
.rail-item.active .i{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.rail-item.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.nb,.rail-item .nb,.tile2 .nb{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--crit);color:var(--crit-ink);font:700 11px/20px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--surface)}
.rail-item .nb{margin-left:auto} .rail-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px}

/* ================================ ТОСТЫ · ЛИСТЫ ================================ */
.toast{position:fixed;z-index:70;left:calc(50% + var(--rail-w) / 2);bottom:calc(var(--nav-h) + 26px + var(--safe-bottom));display:flex;align-items:center;gap:10px;width:max-content;max-width:min(92vw,460px);padding:10px 16px 10px 10px;border-radius:16px;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line-strong);box-shadow:var(--hl),var(--shadow-lg);color:var(--ink);font-size:14px;font-weight:550;line-height:1.35;opacity:0;transform:translateX(-50%) translateY(14px) scale(.97);transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-spring);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
/* открыт лист/диалог — тост сверху, чтобы не закрывать его кнопки */
body:has(>.modal:not(.hidden)) .toast{bottom:auto;top:calc(12px + var(--safe-top));transform:translateX(-50%) translateY(-14px) scale(.97)} body:has(>.modal:not(.hidden)) .toast.show{transform:translateX(-50%)}
.toast::before{content:"✓";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-wash);color:var(--ok);font-size:13px;font-weight:800}
.toast.crit{border-color:color-mix(in srgb,var(--crit) 45%,var(--line-strong))} .toast.crit::before{content:"!";background:var(--crit-wash);color:var(--crit)}
.toast.warn::before{content:"!";background:var(--warn-wash);color:var(--warn)} .toast.info::before{content:"i";background:var(--info-wash);color:var(--info);font-family:var(--display)}
.modal{position:fixed;inset:0 0 0 var(--rail-w);z-index:40;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overscroll-behavior:contain;animation:scrimIn var(--dur-2) ease}
html.fx-lite .modal{backdrop-filter:none;-webkit-backdrop-filter:none} .modal.closing{animation:scrimOut .2s ease forwards;pointer-events:none}
.modal .sheet{position:relative;width:100%;max-width:560px;max-height:88dvh;overflow:auto;padding:10px 18px calc(20px + var(--safe-bottom));border-radius:26px 26px 0 0;background:linear-gradient(180deg,var(--surface-2),var(--surface) 140px);border:1px solid var(--card-line);border-bottom:0;box-shadow:var(--hl),var(--shadow-xl);animation:sheetUp .36s var(--ease-out);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;will-change:transform}
.modal.closing .sheet{animation:sheetDown .2s var(--ease-in) forwards} .modal .sheet.dragging{transition:none} .modal .sheet.settle{transition:transform .22s var(--ease-out)}
.modal .grab{width:42px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto 10px;touch-action:none;cursor:grab}
.modal .sheet>.row{position:sticky;top:-10px;z-index:2;margin:0 -18px 10px;padding:6px 18px 10px;background:linear-gradient(180deg,var(--surface-2) 70%,transparent);touch-action:pan-x}
.modal h3{margin:0 0 12px;font:800 19px/1.25 var(--display);letter-spacing:-.02em} .modal .sheet>.row h3{margin:0} @keyframes scrimIn{from{opacity:0}} @keyframes scrimOut{to{opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}} @keyframes sheetDown{to{transform:translateY(100%)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes dialogOut{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* ================================ СКЕЛЕТОНЫ · ПУСТЫЕ СОСТОЯНИЯ · ПОЯВЛЕНИЕ ================================ */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:8px;min-height:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 7%,transparent),transparent);animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--hl),var(--shadow)}
.skel-line{height:12px;margin:0 0 10px} .skel-line:last-child{margin-bottom:0} .skel-line.w30{width:30%} .skel-line.w50{width:50%} .skel-line.w70{width:70%} .skel-line.h18{height:18px}
.skel-row{display:flex;gap:12px;align-items:center;margin-bottom:12px} .skel-ava{width:44px;height:44px;border-radius:50%;flex:none}
.skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .skel-tile{height:118px;border-radius:var(--radius)}
.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:14px;line-height:1.45} .empty-ill{padding:26px 12px 20px;text-align:center}
.empty-ill .em{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 14px;border-radius:28px;font-size:40px;line-height:1;background:radial-gradient(circle at 50% 30%,var(--accent-wash),transparent 70%),var(--surface-2);border:1px solid var(--card-line);box-shadow:var(--hl),0 18px 40px -22px var(--accent-glow);animation:emIn .6s var(--ease-spring) both}
@keyframes emIn{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}} .empty-ill .t{font:700 17px/1.25 var(--display);letter-spacing:-.01em}
.empty-ill .d{color:var(--muted);font-size:13.5px;margin:6px auto 0;line-height:1.45;max-width:38ch} .empty-ill .btn{margin-top:16px} .stagger>*{animation:rise var(--dur-3) var(--ease-out) both}
.stagger>*:nth-child(2){animation-delay:40ms} .stagger>*:nth-child(3){animation-delay:80ms} .stagger>*:nth-child(4){animation-delay:120ms}
.stagger>*:nth-child(5){animation-delay:160ms} .stagger>*:nth-child(6){animation-delay:200ms} .stagger>*:nth-child(7){animation-delay:240ms}
.stagger>*:nth-child(8){animation-delay:280ms} .stagger>*:nth-child(n+9){animation-delay:300ms} @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tiles.stagger>*{animation:tileIn .5s var(--ease-out) both;transform-origin:50% 100%} @keyframes tileIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.w{display:inline-block;animation:wordIn .5s var(--ease-out) both} @keyframes wordIn{from{opacity:0;transform:translateY(.5em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes subIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================================ ХАБ: игрок · разделы ================================ */
.pcard{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 60%),var(--card-bg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong))}
.pcard::before{content:"";position:absolute;top:-120px;right:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 65%);filter:blur(22px);opacity:.8;pointer-events:none}
.pcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 70%,transparent),transparent 35%,transparent 70%,color-mix(in srgb,var(--blue) 45%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0}
.pcard>*{position:relative} .pcard .avawrap{position:relative;flex:none}
.pcard .ava{width:58px;height:58px;font-size:18px;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent),0 0 24px var(--accent-glow)}
.pcard .lvl{position:absolute;right:-6px;bottom:-4px;min-width:24px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--accent-ink);font:700 11px/22px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--surface),0 4px 12px -4px var(--accent-glow);animation:lvlPop .6s .35s var(--ease-spring) both}
@keyframes lvlPop{from{transform:scale(0) rotate(-30deg)}to{transform:none}} .pcard .name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:800 18px/1.2 var(--display);letter-spacing:-.02em}
.pcard .sub{font-size:13px;color:var(--muted);margin-top:2px} .pcard .bal{display:flex;gap:8px;margin-top:12px}
.pcard .cur{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-3) 80%,transparent),color-mix(in srgb,var(--surface) 80%,transparent));border:1px solid var(--line-strong);box-shadow:var(--hl)}
.pcard .cur>div,.pcard .cur>span:not(.ic){flex:1;min-width:0} .pcard .cur .ic{font-size:24px;line-height:1;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.pcard .cur .v{display:block;font:700 19px/1.15 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .cur .l{font-size:11px;color:var(--muted)} .xp{margin-top:12px} .xp .track{flex:none;display:block}
.xp .fill{position:relative;overflow:hidden;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent2));box-shadow:0 0 12px -2px var(--accent-glow);transition:width .6s var(--ease-out)}
.xp .fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-100%);animation:shimmer 1.6s .6s ease-in-out 2}
.xp .lbl{display:flex;justify-content:space-between;margin-top:5px;font:500 11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile2{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;min-height:132px;padding:16px 14px;border-radius:var(--radius);background:linear-gradient(150deg,var(--tile-b,transparent) 0%,var(--surface) 55%,var(--surface) 100%);border:1px solid color-mix(in srgb,var(--tile-a,var(--line-strong)) 45%,var(--line-strong));box-shadow:var(--hl),var(--shadow);cursor:pointer;color:inherit;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-3)}
.tile2:active{transform:scale(.97)}
.tile2::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--tile-a,transparent),transparent 65%);opacity:.5;filter:blur(10px);pointer-events:none;z-index:-1}
.tile2 .ico{width:54px;height:54px;display:grid;place-items:center;font-size:30px;line-height:1;border-radius:16px;background:linear-gradient(145deg,var(--tile-a,var(--surface-3)),color-mix(in srgb,var(--tile-a,var(--surface-2)) 40%,var(--surface)));border:1px solid color-mix(in srgb,var(--tile-a,var(--line-strong)) 70%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -10px var(--tile-a,transparent);transition:transform var(--dur-3) var(--ease-spring)}
.tile2:hover .ico,.tile2:active .ico{transform:translateY(-2px) scale(1.06)} .tile2.hot .ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px var(--accent-wash),0 10px 22px -10px var(--accent-glow)}
.tile2 .t{margin-top:2px;font:700 16px/1.2 var(--display);letter-spacing:-.01em}
.tile2 .hint{max-width:100%;font-size:12.5px;color:var(--ink-2);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tile2 .hint.ok{color:var(--ok)}
.tile2 .nb{position:absolute;top:10px;right:10px}
.tile2[data-sec="casino"]{--tile-a:rgba(217,169,58,.6);--tile-b:rgba(217,169,58,.13)} .tile2[data-sec="cases"]{--tile-a:rgba(168,85,247,.6);--tile-b:rgba(168,85,247,.13)}
.tile2[data-sec="mine"]{--tile-a:rgba(242,140,40,.6);--tile-b:rgba(242,140,40,.13)} .tile2[data-sec="home"]{--tile-a:rgba(34,197,94,.6);--tile-b:rgba(34,197,94,.13)}
.tile2[data-sec="shop"]{--tile-a:rgba(96,165,250,.6);--tile-b:rgba(96,165,250,.13)} .tile2[data-sec="work"]{--tile-a:rgba(45,212,191,.6);--tile-b:rgba(45,212,191,.13)}
.tile2[data-sec="sms"]{--tile-a:rgba(244,114,182,.6);--tile-b:rgba(244,114,182,.13)} .tile2[data-sec="support"]{--tile-a:rgba(251,191,36,.6);--tile-b:rgba(251,191,36,.13)} .tile2[data-sec="race"]{--tile-a:rgba(239,68,68,.6);--tile-b:rgba(239,68,68,.13)} .tile2[data-sec="arena"]{--tile-a:rgba(59,130,246,.6);--tile-b:rgba(59,130,246,.13)}
:root[data-theme="light"] .tile2{background:linear-gradient(150deg,var(--tile-b,transparent) 0%,var(--surface) 60%)} .home{display:grid;gap:0} .home .chats-col .sec-h:first-child{margin-top:4px}
.md{display:grid;gap:12px} .md-detail{min-width:0} .md-detail .card{margin-bottom:12px} .md-detail,.desk-only{display:none} .pg .btn{min-height:46px} .pg .btn.sm{padding:8px 12px;font-size:13px;min-height:40px}
.pg .card h3{font-size:16px} details.set-sec>summary{cursor:pointer;list-style:none;padding:2px 0;display:flex;align-items:center;gap:4px} details.set-sec>summary::-webkit-details-marker{display:none}
details.set-sec>summary::after{content:'▾';margin-left:auto;color:var(--muted);transition:transform var(--dur-2)} details.set-sec:not([open])>summary::after{transform:rotate(-90deg)}
details.set-sec .list{margin-top:8px} details.set-sec .item{gap:8px;flex-wrap:wrap}

/* ================================ ФОН · ВХОД · ПРЕЛОАДЕР ================================ */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .aurora i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(64px);opacity:.6;will-change:transform}
.aurora i:nth-child(1){left:-18vmax;top:-22vmax;background:radial-gradient(circle,var(--accent-glow),transparent 60%);animation:drift1 26s ease-in-out infinite}
.aurora i:nth-child(2){right:-20vmax;top:10vmax;background:radial-gradient(circle,var(--blue-wash),transparent 60%);animation:drift2 32s ease-in-out infinite}
.aurora i:nth-child(3){left:20vmax;bottom:-26vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%);animation:drift3 38s ease-in-out infinite}
:root[data-theme="light"] .aurora i{opacity:.35} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12vmax,8vmax) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14vmax,10vmax) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vmax,-12vmax) scale(1.1)}} canvas.particles{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
html.fx-lite .aurora i{animation:none} html.fx-lite canvas.particles{display:none} html[data-fx="off"] .aurora{display:none} .brand-hero{display:grid;place-items:center;padding:22px 0 10px;position:relative}
.brand-hero .mark{position:relative;z-index:1;width:84px;height:84px;display:grid;place-items:center;border-radius:26px;font-size:42px;background:linear-gradient(145deg,var(--btn-top),var(--btn-bot));box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.25);animation:markFloat 5s ease-in-out infinite}
.brand-hero .ring{position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);animation:ringOut 2.8s ease-out infinite}
.brand-hero .ring:nth-child(2){animation-delay:.9s} .brand-hero .ring:nth-child(3){animation-delay:1.8s} @keyframes ringOut{from{transform:scale(.6);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .brand-hero h2{margin:16px 0 4px;font:800 26px/1.15 var(--display);letter-spacing:-.03em}
.brand-hero p{color:var(--muted);margin:0;font-size:14px;text-align:center}
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(70% 55% at 50% 42%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--ground);transition:opacity .5s ease,visibility .5s,transform .5s ease}
.splash.quick{background:var(--ground);transition:opacity .3s ease,visibility .3s} .splash.hide{opacity:0;visibility:hidden;pointer-events:none} .splash.hide:not(.quick){transform:scale(1.04)}
.splash .in{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative} .splash .orb{position:relative;width:150px;height:150px;display:grid;place-items:center}
.splash .orb::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 62%);filter:blur(12px)}
.splash .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);animation:spinSlow 14s linear infinite}
.splash .ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.splash .ring.r2{inset:16px;border-style:solid;border-color:color-mix(in srgb,var(--accent) 22%,transparent);animation-direction:reverse;animation-duration:9s}
.splash .ring.r2::after{width:6px;height:6px;margin-left:-3px;top:-3px} @keyframes spinSlow{to{transform:rotate(360deg)}}
.splash svg{width:78px;height:78px;position:relative;filter:drop-shadow(0 10px 24px var(--accent-glow))} .splash stop:first-child{stop-color:var(--btn-top)} .splash stop:last-child{stop-color:var(--btn-bot)}
.splash .sh{fill:none;stroke:var(--accent2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1s cubic-bezier(.4,0,.2,1) forwards}
.splash .fill{fill:url(#splashGrad);opacity:0;animation:fillIn .45s .7s ease forwards}
.splash .bolt{fill:none;stroke:var(--accent-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .45s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}} @keyframes fillIn{to{opacity:1}}
.splash .name{font:800 30px var(--display);letter-spacing:.32em;text-indent:.32em;color:var(--ink);animation:nameIn .9s .3s var(--ease-out) both}
@keyframes nameIn{from{opacity:0;letter-spacing:.9em;filter:blur(6px)}to{opacity:1;letter-spacing:.32em;filter:none}}
.splash .tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:-10px;animation:subIn .6s .6s both}
.splash .bar{width:200px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.splash .bar i{display:block;width:100%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent2));box-shadow:0 0 12px var(--accent);transform:scaleX(0);transform-origin:left}
.splash .pct{font-family:var(--mono);font-size:12px;color:var(--accent2);font-variant-numeric:tabular-nums}
.splash .pw{position:absolute;bottom:calc(28px + var(--safe-bottom));font-size:11px;color:var(--muted);letter-spacing:.06em} .splash .pw b{color:var(--ink-2)}

/* ================================ НАВЕДЕНИЕ (только мышь) ================================ */
@media (hover:hover){
  .card.tap:hover,.tile2:hover{transform:translateY(-2px);box-shadow:var(--hl),var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 42%,var(--line-strong))}
  .card.tap:hover::after,.tile2:hover::after,.gtile:hover::after,.item-card:hover::after{opacity:1}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.07);border-color:color-mix(in srgb,var(--accent) 35%,var(--line-strong))}
  .btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 36px -12px var(--accent-glow);border-color:color-mix(in srgb,var(--btn-top) 70%,transparent)}
  .btn.primary:hover::before,.cta:hover::before{animation:sweep2 .9s var(--ease-out)} .btn.ghost:hover{background:var(--surface-2);filter:none}
  .btn.danger:hover{background:var(--crit);color:var(--crit-ink);border-color:var(--crit);filter:none}
  .iconbtn:hover,.tab:hover,.chip:hover,.cat:hover,.chat-pick:hover,.page-head .back:hover,.top .back:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line-strong));color:var(--ink)}
  .tab.active:hover,.chip.on:hover,.cat.on:hover{color:var(--accent2)} .seg-ctl>button:not(.on):hover{color:var(--ink);background:color-mix(in srgb,var(--surface-3) 60%,transparent)}
  .nav button:hover{color:var(--ink)} .nav button.active:hover{color:var(--accent2)} .rail-item:hover{background:var(--surface-2);color:var(--ink)} .rail-item:hover .i{border-color:var(--line-strong)}
  .rail-item.active:hover{background:linear-gradient(90deg,var(--accent-wash),transparent 95%)} .list .item.tap:hover{background:linear-gradient(90deg,var(--accent-wash),transparent)}
  .table tbody tr:hover td{background:var(--accent-wash)} .stars button:hover{filter:none;opacity:.85}
}

/* ================================ ЭКРАНЫ ================================ */
/* телефон: цели для пальца ≥46px */
@media (max-width:599px){
  .btn,.pg .btn.sm,.tab,.chip,.cat,.page-head .back,.top .back,.stars button{min-height:46px} .btn.sm{min-height:42px;padding:8px 12px} .iconbtn,.top .back.iconbtn{width:46px;height:46px}
  .stars button{min-width:46px} .input,textarea.input,select.input{min-height:48px} .list .item{min-height:52px} .tile2{min-height:128px}
  /* 360 px: подписи KPI, вкладки и подсказки плиток не режем многоточием («УЧАСТНИ…», «Кварталы», «24 стола · дабл, ск…») */
  .kpi .l{white-space:normal;letter-spacing:.04em} .seg-ctl>button{min-height:40px;padding:0 8px}   /* сегменты 36 px — мимо пальца */
  .tile2 .hint{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .modal{padding-bottom:var(--kb,0px)} .modal .sheet{max-height:calc(88dvh - var(--kb,0px))}   /* шторка над клавиатурой (--kb из ui.js) */
}
@media (max-width:400px){ .kpis:has(>:last-child:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))} /* 6 плиток по 3 в ряд на 360 резали «УЧАСТНИКОВ» — по 2 */
}
/* планшет ≥600 */
@media (min-width:600px){
  :root{--app-max:720px;--gutter:20px}
  .tiles{grid-template-columns:repeat(3,1fr)} .kpis,.kpis:has(>:last-child:nth-child(2)),.kpis:has(>:last-child:nth-child(4)){grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .modal{align-items:center;padding:24px}
  .modal .sheet{border-radius:22px;border-bottom:1px solid var(--card-line);max-width:560px;max-height:86dvh;padding:18px 22px 22px;animation:dialogIn .28s var(--ease-out)}
  .modal.closing .sheet{animation:dialogOut .18s var(--ease-in) forwards} .modal .sheet>.row{top:-18px;margin:-4px -22px 10px;padding:6px 22px 10px} .modal .grab{display:none}
  .cols2{grid-template-columns:1fr 1fr;align-items:start} .skel-grid{grid-template-columns:repeat(3,1fr)} canvas.chart{height:200px}
}
/* ПК ≥900: рейл, без нижней панели, шапка без стекла */
@media (min-width:900px){
  :root{--app-max:1120px;--gutter:24px}
  html.has-rail{--rail-w:232px} .rail{display:flex} .nav{display:none} .app{padding-bottom:40px;padding-top:20px}
  .top{position:static;margin:0 0 20px;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0} .top::after{display:none} .top h1,.page-head h1{font-size:28px}
  .top .sub{font-size:13.5px} .tiles{grid-template-columns:repeat(4,1fr)}
  .home{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"pc chats" "tiles chats";column-gap:24px;align-items:start}
  .home .pc{grid-area:pc;min-height:100%} .home .chats-col{grid-area:chats} .home .tiles-col{grid-area:tiles} .home .tiles-col .sec-h{margin-top:18px} .home .tiles{grid-template-columns:repeat(2,1fr)}
  .md{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;column-gap:24px} .md-detail,.desk-only{display:block} .md-detail{position:sticky;top:24px}
  .skel-grid{grid-template-columns:repeat(4,1fr)} .toast{bottom:28px} canvas.chart{height:220px}
}

/* ================================ МЕНЬШЕ ДВИЖЕНИЯ ================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .aurora,canvas.particles,.splash{display:none} .skel::after{animation:none}
}