/* ═════════════════════════════════════════════════════════════
   LIQUID GLASS — минималистичное оформление сайта.
   Подключается последним и переопределяет токены и базовые компоненты:
   нейтральный тёмный (или светлый) фон с мягкими цветными пятнами, поверх — полупрозрачные
   «стеклянные» панели с размытием, тонкой светлой кромкой и бликом сверху. Один акцент — синий.
   ═════════════════════════════════════════════════════════════ */
:root{
  --sans:"Inter","SF Pro Display",-apple-system,"Segoe UI",system-ui,sans-serif;
  --display:var(--sans);
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --bg:#06070b; --bg-solid:#0d0f15;
  --surface:rgba(30,33,43,.58); --raise:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --text:#f4f5f8; --muted:rgba(232,235,244,.68); --dim:rgba(232,235,244,.44);
  --brass:#5b9bff; --brass2:#8bb8ff; --neon:#a78bfa; --neon2:#7dd3fc;
  --moss:#3ddc84; --clay:#ff6b6b; --sky:#64b5ff;
  --accent2:#a78bfa; --accent3:#3ddc84; --accent4:#ff6b6b;
  --gilt:var(--line);
  --r:14px; --r2:22px; --pill:999px;

  --glass:rgba(28,31,40,.55);
  --glass-strong:rgba(22,25,33,.82);
  --glass-edge:rgba(255,255,255,.13);
  --glass-hi:rgba(255,255,255,.10);
  --glass-blur:blur(24px) saturate(170%);
  --glass-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px rgba(255,255,255,.04),0 18px 40px -22px rgba(0,0,0,.7);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%);
  --blobs:radial-gradient(48vmax 40vmax at 8% -6%,rgba(91,155,255,.20),transparent 62%),
          radial-gradient(42vmax 38vmax at 104% 18%,rgba(167,139,250,.16),transparent 64%),
          radial-gradient(50vmax 44vmax at 62% 112%,rgba(45,212,191,.11),transparent 62%);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef1f7; --bg-solid:#ffffff;
  --surface:rgba(255,255,255,.62); --raise:rgba(15,23,42,.05);
  --line:rgba(15,23,42,.12); --line-soft:rgba(15,23,42,.07);
  --text:#0f172a; --muted:rgba(15,23,42,.66); --dim:rgba(15,23,42,.44);
  --brass:#0a6cff; --brass2:#0050c8; --neon:#7c3aed; --neon2:#0284c7;
  --moss:#16a34a; --clay:#e11d48; --sky:#0284c7;
  --accent2:#7c3aed; --accent3:#16a34a; --accent4:#e11d48;
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.86);
  --glass-edge:rgba(255,255,255,.75);
  --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px rgba(15,23,42,.06),0 18px 40px -24px rgba(15,23,42,.35);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%);
  --blobs:radial-gradient(48vmax 40vmax at 8% -6%,rgba(10,108,255,.16),transparent 62%),
          radial-gradient(42vmax 38vmax at 104% 18%,rgba(124,58,237,.12),transparent 64%),
          radial-gradient(50vmax 44vmax at 62% 112%,rgba(20,184,166,.12),transparent 62%);
  color-scheme:light;
}

/* ───────── основа ───────── */
body{font:400 15px/1.55 var(--sans);letter-spacing:-.006em;font-feature-settings:"cv11" 1,"ss01" 1;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:650;letter-spacing:-.022em;font-feature-settings:normal}
h1{font-size:28px} h2{font-size:21px} h3{font-size:16.5px}
::selection{background:color-mix(in srgb,var(--brass) 35%,transparent);color:var(--text)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--brass) 70%,transparent);outline-offset:2px;border-radius:10px}
html{scrollbar-color:color-mix(in srgb,var(--text) 18%,transparent) transparent}
*::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 18%,transparent);background-clip:padding-box;border:3px solid transparent;border-radius:10px}

/* фон: мягкие цветные пятна под стеклом */
.main,.landing{background:var(--blobs),var(--bg);background-attachment:fixed,fixed;background-repeat:no-repeat}
#boot{background:var(--bg)!important}

/* стекло — общий рецепт */
.panel,.list,.doc,.side .box,.stats,.skeleton,.picks,.shop-top,.gcard,.shop-card,.award-card,.ach-card,.town-card,.rel-card,
.profile-stats,.empty,.cfg-card,.st-row,.wall-item,.pollopt,.ib-secs,.ap-chat{
  background:var(--sheen),var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);border-radius:var(--r2)}
.list,.picks,.stats,.profile-stats{overflow:hidden}
.list>*{background:transparent}
.picks,.stats{gap:0}
.pick,.stat,.profile-stat{background:transparent;border-color:var(--line-soft)}
.pick:hover,.stat:hover,.stats .stat:hover{background:var(--raise)}
.empty{border-style:solid}
.empty::before{content:"";display:none}
.list>.empty{box-shadow:none;backdrop-filter:none;background:none;border:none}
.empty b{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text)}

/* ───────── каркас: плавающая боковая панель и верхняя строка ───────── */
.rail{background:var(--sheen),var(--glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
@media (min-width:821px){
  .app{grid-template-columns:252px 1fr}
  .rail{margin:12px 0 12px 12px;border-radius:24px;height:calc(100% - 24px);overflow:hidden}
}
.brand{padding:20px 18px 14px}
.brand b{font:700 18px/1.1 var(--sans);letter-spacing:-.02em}
.brand span{font:500 11.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--dim)}
.mark{width:26px;height:26px;border-radius:9px;background:linear-gradient(145deg,var(--brass2),var(--brass) 60%,var(--neon));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -6px color-mix(in srgb,var(--brass) 80%,transparent)}
.mark::before{display:none}
.mark i{display:none}
.nav h4{font:600 11px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--dim);margin:18px 10px 6px}
.nav h4::before,.nav h4::after{display:none}
.nav button{border-radius:12px;padding:8px 10px;font-size:14.5px;color:var(--muted)}
.nav button:hover:not([aria-current=true]){padding-left:10px;background:var(--raise);color:var(--text)}
.nav button[aria-current=true]{color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent);box-shadow:inset 0 1px 0 var(--glass-hi)}
.nav button[aria-current=true]::before{display:none}
.nav button[aria-current=true] svg{stroke:var(--brass)}
.nav .count{font:600 11px var(--sans);letter-spacing:0;border:none;background:var(--brass);color:#fff;padding:0 7px;line-height:18px}
.me{border-top:1px solid var(--line-soft);background:none}
.me .who span{font:500 11.5px var(--sans);letter-spacing:0;text-transform:none}

.topbar{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line-soft);box-shadow:none}
.topbar h2{font:650 22px/1.15 var(--sans);letter-spacing:-.025em;background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.topbar .sub{font:500 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--dim);margin-top:1px}
.wrap{max-width:1040px}

/* нижняя панель на телефоне — парящая стеклянная капсула */
@media (max-width:820px){
  .tabbar{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:24px;
    background:var(--sheen),var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),0 12px 30px -10px rgba(0,0,0,.5)}
  .tabbar button{font:500 10.5px var(--sans);letter-spacing:0;text-transform:none;border-radius:18px}
  .tabbar button.on{color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent)}
  .tabbar button.on svg{stroke:var(--brass)}
  .tb-badge{font:700 10px var(--sans)}
  .main{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .rail{border-radius:0 24px 24px 0}
}

/* ───────── кнопки ───────── */
.btn{border-radius:var(--pill);border:1px solid var(--glass-edge);background:var(--sheen),color-mix(in srgb,var(--text) 8%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi);color:var(--text);font-weight:550;letter-spacing:-.01em;padding:8px 16px}
.btn:hover{border-color:color-mix(in srgb,var(--text) 22%,transparent);background:var(--sheen),color-mix(in srgb,var(--text) 13%,transparent);box-shadow:inset 0 1px 0 var(--glass-hi)}
.btn.primary{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--brass);border-color:color-mix(in srgb,var(--brass) 80%,#fff 20%);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px -10px color-mix(in srgb,var(--brass) 90%,transparent)}
:root[data-theme="light"] .btn.primary{color:#fff}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -10px color-mix(in srgb,var(--brass) 90%,transparent)}
.btn.good{color:var(--moss);background:color-mix(in srgb,var(--moss) 14%,transparent);border-color:color-mix(in srgb,var(--moss) 35%,transparent)}
.btn.bad{color:var(--clay);background:color-mix(in srgb,var(--clay) 12%,transparent);border-color:color-mix(in srgb,var(--clay) 32%,transparent)}
.btn.good:hover{background:color-mix(in srgb,var(--moss) 22%,transparent)}
.btn.bad:hover{background:color-mix(in srgb,var(--clay) 20%,transparent)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
.btn.ghost:hover{background:var(--raise);border-color:transparent}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.lg{border-radius:var(--pill);text-transform:none;letter-spacing:-.01em;font-size:16px;padding:14px 30px}
.iconbtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--glass-edge);background:color-mix(in srgb,var(--text) 6%,transparent);box-shadow:inset 0 1px 0 var(--glass-hi)}
.iconbtn:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 22%,transparent);background:color-mix(in srgb,var(--text) 11%,transparent)}

/* ───────── метки, поля, переключатели ───────── */
.tag,.chip,.rar,.rank-chip,.pf-title,.nav .count,.bellcount,.cfg-tabs em,.award-chip{font-family:var(--sans);letter-spacing:0}
.tag,.rank-chip,.pf-title,.rar{text-transform:none;font-size:12px;font-weight:550}
.tag{padding:2px 9px;border-radius:var(--pill);border-color:transparent;background:color-mix(in srgb,var(--text) 8%,transparent)}
.tag.ok{background:color-mix(in srgb,var(--moss) 15%,transparent);border-color:transparent}
.tag.no{background:color-mix(in srgb,var(--clay) 15%,transparent);border-color:transparent}
.tag.wait{background:color-mix(in srgb,var(--brass) 16%,transparent);border-color:transparent}
.tag.info{background:color-mix(in srgb,var(--sky) 15%,transparent);border-color:transparent}
.chip{border-radius:var(--pill);font-size:12.5px;background:color-mix(in srgb,var(--text) 7%,transparent);border-color:var(--line-soft)}
.dot{border-radius:50%;transform:none;width:6px;height:6px}
.rank-chip{border-radius:var(--pill)}
.field label{font:550 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.field label .dim{font-family:var(--sans)}
.field input,.field textarea,.field select,.ap-filter input,.ap-filter select,.sk-add input,.sk-add select,.imgf-side input:not([type]){
  border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line);color:var(--text);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.field input:focus,.field textarea:focus,.field select:focus,.ap-filter input:focus{border-color:color-mix(in srgb,var(--brass) 70%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 18%,transparent)}
select option{background:var(--bg-solid);color:var(--text)}
.sw i{border-radius:var(--pill)!important}.sw i::after{border-radius:50%!important}
code,.md-code{font-family:var(--mono);border-radius:6px;background:color-mix(in srgb,var(--text) 8%,transparent);border:none}
blockquote{border-left:3px solid color-mix(in srgb,var(--text) 25%,transparent);background:color-mix(in srgb,var(--text) 4%,transparent);border-radius:0 10px 10px 0}
hr,.hr{background:var(--line-soft)}
.num{font-family:var(--sans);font-weight:500}
.num,.balance,.stat b,.shop-bal,.shop-stat b,.season-clock b,.st-val,.pf-lvl b,.sp-name,.crest,.st-place,.profile-stat b{font-family:var(--sans);font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.stamp{font-family:var(--sans);border-radius:10px;letter-spacing:.08em}
.annc{font:500 13.5px var(--sans);letter-spacing:0;text-transform:none;background:color-mix(in srgb,var(--brass) 14%,transparent);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line-soft)}
.topload{height:2px;background:linear-gradient(90deg,var(--brass),var(--neon))}
.cfg-tabs button{font:550 13px var(--sans);letter-spacing:0;text-transform:none;border-radius:var(--pill)}
.pf-tabs button{font:550 13.5px var(--sans);letter-spacing:0;text-transform:none}
.profile-stat span,.stat span{font:500 12px var(--sans);letter-spacing:0;text-transform:none}
.kicker{font:500 12.5px var(--sans);letter-spacing:.04em;text-transform:none}
.kicker::before,.kicker::after{background:linear-gradient(90deg,transparent,var(--line))}

/* строки списков */
.entry{border-bottom-color:var(--line-soft)}
.entry:hover,.list>.entry:hover,.list>.town:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.entry:not(.flat)::before{display:none}
.skel-bar,.skel-av{background:linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 25%,color-mix(in srgb,var(--text) 12%,transparent) 50%,color-mix(in srgb,var(--text) 6%,transparent) 75%);background-size:200% 100%}
.skel-av{border-radius:50%}
.av{border-radius:8px}

/* ───────── модальные окна, уведомления, меню ───────── */
.scrim{background:color-mix(in srgb,var(--bg) 45%,transparent);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.modal{background:var(--sheen),var(--glass-strong);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-edge);border-radius:26px;box-shadow:var(--glass-shadow),0 30px 80px -20px rgba(0,0,0,.6)}
.modal header,.modal footer{background:transparent;border-color:var(--line-soft)}
.modal header{padding:18px 20px}
.modal header h2{font-size:19px}
.modal .body{padding:20px}
.toast{border-radius:18px;background:var(--sheen),var(--glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);border-left-width:1px;box-shadow:var(--glass-shadow),0 16px 40px -14px rgba(0,0,0,.6)}
.toast::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--brass)}
.toast.bad::before{content:"";background:var(--clay)}
.toast.bot::before{content:"";background:var(--neon)}
.toast.mc::before{content:"";background:var(--moss)}
.tg-ctx,.md-bar,.ctx,.menu,.dropdown{background:var(--sheen),var(--glass-strong)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;
  border:1px solid var(--glass-edge)!important;border-radius:16px!important;box-shadow:var(--glass-shadow),0 18px 44px -14px rgba(0,0,0,.6)!important}
.md-bar button{border-radius:10px}
@media (max-width:640px){.modal{border-radius:26px 26px 0 0}}

/* заголовки секций без золотых черт */
.view-enter>h3::after,.wrap>div>h3::after{background:var(--line-soft)}
.land-section h2::before,.land-section h2::after{background:var(--line-soft)}

/* ───────── лендинг ───────── */
.compass,.c-out,.c-in{display:none}
.hero h1{font:750 84px/1 var(--sans);letter-spacing:-.05em;filter:none;
  background:linear-gradient(180deg,var(--text) 30%,color-mix(in srgb,var(--text) 45%,transparent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="light"] .hero h1{background:linear-gradient(180deg,#0f172a 30%,rgba(15,23,42,.55));-webkit-background-clip:text;background-clip:text}
.stat b{font:700 40px/1 var(--sans);letter-spacing:-.04em;background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.stat span{margin-top:6px;color:var(--dim)}
.feature{border-radius:var(--r2);background:var(--sheen),var(--glass);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.feature::after{display:none}
.feature h3{font-size:17px}
.feature svg{stroke:var(--brass)}
.land-foot{font-family:var(--sans);font-size:12.5px}
@media (max-width:820px){.hero h1{font-size:56px}}
@media (max-width:520px){.hero h1{font-size:44px}.stat b{font-size:32px}}

/* ───────── профиль, магазин, прочее ───────── */
.pf-cover,.cover{border-radius:var(--r2);box-shadow:var(--glass-shadow);border:1px solid var(--glass-edge)}
.pf-id h1{font:700 38px/1.05 var(--sans);letter-spacing:-.035em}
.pf-lvl{box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 60%,transparent),0 0 22px color-mix(in srgb,var(--pa) 45%,transparent)}
.ach-bar,.ach-bar i{border-radius:var(--pill)}
.shop-card:hover,.award-card:hover{border-color:color-mix(in srgb,var(--text) 25%,transparent)}
.town-card:hover,.gcard:hover,.rel-card:hover{box-shadow:var(--glass-shadow),0 20px 40px -18px rgba(0,0,0,.6)}
.pollopt::before{background:color-mix(in srgb,var(--brass) 20%,transparent)}
.pollopt{border-radius:14px}
.crest{border-radius:12px}

/* ───────── мессенджер на стекле ───────── */
.tg{background:transparent}
.tg-list{background:var(--sheen),var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--line-soft)}

/* ───────── обращения и заявки ───────── */
.ib-secs{padding:5px;border-radius:20px}
.ib-sec{border-radius:15px}
.ib-sec.on{background:color-mix(in srgb,var(--text) 10%,transparent);box-shadow:inset 0 1px 0 var(--glass-hi)}
.ib-sec i,.ap-tab i{background:var(--brass);color:#fff}
.ap-tab{border-radius:var(--pill);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--line-soft)}
.ap-tab.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.ap-tab.on i{background:var(--bg);color:var(--text)}
.ap-bub{border-radius:18px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.ap-msg.staff .ap-bub{background:color-mix(in srgb,var(--brass) 14%,transparent);border-color:color-mix(in srgb,var(--brass) 30%,transparent)}
.ap-role,.ap-chg{font-family:var(--sans);text-transform:none;letter-spacing:0}
.ap-step.ok i{background:var(--moss);border-color:var(--moss);color:#fff}
.ap-reason,.ap-dlv,.ap-note{border-radius:14px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.sk-badge{font-family:var(--sans);text-transform:none;border-radius:var(--pill);background:var(--moss);color:#fff}
.sk-card{border-radius:18px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.sk-card.on{border-color:var(--brass)}
.sk-3d{border-radius:18px;background:radial-gradient(240px 260px at 50% 40%,color-mix(in srgb,var(--brass) 20%,transparent),transparent),color-mix(in srgb,var(--text) 4%,transparent)}
.hero .mark{display:none}

/* логотип — капля стекла с буквой */
.mark{display:grid;place-items:center}
.mark::after{content:"F";font:800 14px/1 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.brand .mark{width:30px;height:30px;border-radius:10px}

/* телефоны: размытие легче, чтобы прокрутка оставалась плавной */
@media (max-width:820px){
  :root{--glass-blur:blur(16px) saturate(160%)}
  .main,.landing{background-attachment:scroll,scroll}
}
/* кто попросил систему убрать прозрачность — плотные панели без размытия */
@media (prefers-reduced-transparency:reduce){
  :root{--glass:var(--bg-solid);--glass-strong:var(--bg-solid);--glass-blur:none}
}

/* обои чата «Стекло» — по умолчанию, в цветах сайта */
.tg-chat[data-wall="glass"] .tg-body{background:var(--wall-dots) 0 0/24px 24px,radial-gradient(900px 560px at 6% 0%,color-mix(in srgb,var(--brass) 16%,transparent),transparent 70%),radial-gradient(820px 620px at 100% 100%,color-mix(in srgb,var(--neon) 14%,transparent),transparent 70%),var(--bg)}
.dr-wall[data-w="glass"] i{background:radial-gradient(60px 40px at 15% 10%,rgba(91,155,255,.7),transparent),radial-gradient(60px 50px at 95% 100%,rgba(167,139,250,.65),transparent),#0b0d14}
.tg-chat{background:var(--bg)}
.ap-late{color:var(--clay);font-weight:600}
.hero .btn.ghost,.land-wrap .btn.ghost.lg{background:var(--sheen),color-mix(in srgb,var(--text) 8%,transparent);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi);backdrop-filter:blur(14px)}