/* Zorka VPN — дизайн «Путь к звезде».
   Палитра бренда: #000D64 (ночь) → #008800 (трава) → #A9CF38 (лайм) → #FFFF0A (рассвет). Всё интерфейсное — вариации этого перехода. */
:root{
  --navy:#000D64; --green:#008800; --lime:#A9CF38; --yellow:#FFFF0A; --sky:#8A9BFF; --coral:#FF6B7A;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Unbounded","Manrope",ui-sans-serif,system-ui,sans-serif;
  --grad:linear-gradient(100deg,#A9CF38 0%,#FFFF0A 100%);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme=dark]{
  --bg:#00093F; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.1); --line:rgba(255,255,255,.1);
  --text:#F2F5FF; --muted:#9FAAE3; --ok:#A9CF38; --warn:#FFFF0A; --road:#fff; --glass:rgba(2,12,70,.72);
  --shadow:0 20px 50px -20px rgba(0,0,0,.6); --on-grad:#000D64; --field:rgba(255,255,255,.06);
}
[data-theme=light]{
  --bg:#F1F4FF; --surface:#fff; --surface-2:#E7ECFF; --line:rgba(0,13,100,.11);
  --text:#000D64; --muted:#56608F; --ok:#007A00; --warn:#8A7A00; --road:#fff; --glass:rgba(255,255,255,.82);
  --shadow:0 20px 40px -22px rgba(0,13,100,.35); --on-grad:#000D64; --field:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:500 15px/1.5 var(--font);min-height:100vh;overflow-x:hidden}
body.has-sheet{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:disabled{cursor:not-allowed;opacity:.55}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:8px}
::selection{background:var(--lime);color:var(--navy)}

/* фон: ночное небо и рассвет у горизонта */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none}
[data-theme=dark] .sky{background:
  radial-gradient(90% 50% at 12% -8%,rgba(0,13,100,.95),transparent 70%),
  radial-gradient(120% 55% at 50% 118%,rgba(169,207,56,.26),transparent 62%),
  radial-gradient(70% 45% at 0% 104%,rgba(0,136,0,.34),transparent 66%),
  radial-gradient(60% 40% at 100% 108%,rgba(255,255,10,.12),transparent 70%),var(--bg)}
[data-theme=light] .sky{background:
  radial-gradient(80% 40% at 100% -10%,rgba(169,207,56,.28),transparent 70%),
  radial-gradient(70% 40% at 0% 110%,rgba(0,136,0,.12),transparent 70%),var(--bg)}

/* типографика */
.display{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.12}
h1.display{font-size:clamp(24px,5.4vw,34px)}
.display.big{font-size:clamp(34px,9vw,58px);line-height:1.02}
.display.huge{font-size:clamp(40px,11vw,68px);line-height:1}
.sect{font:700 13px/1 var(--font);letter-spacing:.02em;color:var(--muted);margin:6px 0 2px}
.muted{color:var(--muted)} .small{font-size:13px} small{font-size:12.5px} .strong{font-weight:700}
.mono,.mono-in{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em}
.pos{color:var(--ok)} .neg{color:var(--coral)} .ok-text{color:var(--ok)}
.block{display:block}

/* раскладка */
.stack{display:flex;flex-direction:column} .row{display:flex;align-items:center}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:14px}
.stack.gap-3{gap:16px}
.wrap{flex-wrap:wrap}.between{justify-content:space-between}.end{justify-content:flex-end}.center{justify-content:center;text-align:center;align-items:center}
.grow{flex:1;min-width:0}.w100{width:100%}.right{text-align:right}.left{text-align:left}
.pad{padding:24px}.pad-s{padding:8px 4px}
.cols{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}}

/* каркас */
.shell{min-height:100vh}
.stage{max-width:1100px;margin:0 auto;padding-bottom:calc(104px + var(--safe-b))}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) 16px 10px;background:linear-gradient(var(--bg),transparent);backdrop-filter:blur(8px)}
.view{padding:6px 16px 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600}
.brand b{font-size:19px;letter-spacing:-.02em}.brand em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.14em;align-self:flex-end;margin-bottom:5px}
.brand.mini b{font-size:17px}
.chip-balance{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--surface-2);font-weight:700;font-size:14px}
.chip-balance .ic{color:var(--ok)}
.rail{display:none}
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:26px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);box-shadow:var(--shadow);max-width:560px;margin:0 auto}
.dock-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:20px;color:var(--muted);font-size:10.5px;font-weight:700;transition:color .2s,background .2s}
.dock-item.on{color:var(--on-grad);background:var(--grad)}
body.has-sheet .dock{opacity:0;pointer-events:none}
@media(min-width:900px){
  .shell{display:grid;grid-template-columns:280px minmax(0,1fr)}
  .rail{display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;padding:26px 18px;border-right:1px solid var(--line)}
  .rail-nav{display:flex;flex-direction:column;gap:4px}
  .rail-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;font-weight:700;color:var(--muted);transition:.2s}
  .rail-item:hover{background:var(--surface);color:var(--text)}
  .rail-item.on{background:var(--grad);color:var(--on-grad)}
  .rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
  .admin-link{border:1px dashed var(--line)}
  .rail-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--surface)}
  .rail-user div{display:flex;flex-direction:column;min-width:0}.rail-user b,.rail-user small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kbd-hint{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;color:var(--muted);font-size:13px;border:1px solid var(--line)}
  .kbd-hint kbd{margin-left:auto;font:600 11px var(--font);padding:2px 6px;border-radius:6px;background:var(--surface-2)}
  .dock,.topbar .brand.mini{display:none}
  .stage{padding:0 0 40px;width:100%}.topbar{padding:20px 36px 8px;justify-content:flex-end;background:none;backdrop-filter:none}
  .view{padding:12px 36px 36px}
}

/* логотип */
.logo{display:inline-block;line-height:0;flex:none}.logo svg{width:100%;height:100%;display:block}
.logo .road{fill:var(--road)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:800;font-size:15px;white-space:nowrap;transition:transform .15s var(--ease),filter .2s,box-shadow .2s;user-select:none}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.lg{height:56px;font-size:16px;padding:0 28px}.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn.primary{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 30px -10px rgba(255,255,10,.55)}
.btn.primary:hover:not(:disabled){filter:brightness(1.06)}
.btn.ghost{border:1px solid var(--line);background:var(--surface)}.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--coral);color:#fff}
.btn.danger-ghost{border:1px solid rgba(255,107,122,.4);color:var(--coral)}
.icon-btn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--surface);flex:none;transition:.2s}
.icon-btn:hover{background:var(--surface-2)}.icon-btn.danger{color:var(--coral)}
.link-btn{padding:6px 10px;border-radius:8px;color:var(--muted);font-weight:700}.link-btn.on{color:var(--text);background:var(--surface-2)}
.ic{display:inline-flex;line-height:0;flex:none}

/* поля */
.field{width:100%;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--field);color:var(--text);font:600 15px var(--font);transition:border-color .2s,box-shadow .2s}
textarea.field{height:auto;padding:12px 16px;resize:vertical;line-height:1.5}
.field.sm{width:96px}.field:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(169,207,56,.22)}
select.field{appearance:none}
.fld{display:flex;flex-direction:column;gap:6px}.fld>span{font-weight:700;font-size:13px}
.amount-wrap{position:relative}.amount-wrap .field{height:72px;font:600 32px var(--display);padding-right:48px}.amount-wrap span{position:absolute;right:20px;top:50%;transform:translateY(-50%);font:600 24px var(--display);color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px}.chip.on{background:var(--grad);color:var(--on-grad);border-color:transparent}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--grad);color:var(--on-grad)}.seg.wide{display:flex}.seg.wide button{flex:1;justify-content:center}
.switch{position:relative;width:50px;height:30px;border-radius:999px;background:var(--surface-2);flex:none;transition:background .25s}
.switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.switch.on{background:var(--green)}.switch.on i{transform:translateX(20px)}

/* поверхности */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px}
.panel.row,.panel.stack{display:flex}.panel.stack{flex-direction:column}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--surface-2);white-space:nowrap}
.pill.ok{background:rgba(0,136,0,.22);color:var(--ok)}.pill.warn{background:rgba(255,255,10,.16);color:var(--warn)}.pill.off{background:rgba(255,107,122,.16);color:var(--coral)}
[data-theme=light] .pill.ok{background:rgba(0,136,0,.12)}
.badge{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;background:var(--lime);color:var(--navy)}.badge.hot{background:var(--yellow)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted);flex:none}
.dot.ok{background:var(--lime);box-shadow:0 0 0 4px rgba(169,207,56,.2)}.dot.warn{background:var(--yellow);box-shadow:0 0 0 4px rgba(255,255,10,.18)}.dot.off{background:#6c76ab}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--navy),var(--green) 60%,var(--lime));color:#fff;font:600 16px var(--display);font-style:normal;flex:none}
.avatar.big{width:64px;height:64px;font-size:26px}
.ic-box{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--surface-2);flex:none;color:var(--ok);font-style:normal}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,255,10,.1);color:var(--text);font-size:13.5px}
.linkbox{display:block;padding:12px 14px;border-radius:14px;background:var(--field);border:1px dashed var(--line);font:600 12.5px ui-monospace,Menlo,monospace;word-break:break-all;cursor:pointer;color:var(--ok)}
.pre{margin:0;padding:12px;border-radius:12px;background:var(--field);font:12px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.list>li{padding:12px 4px;border-bottom:1px solid var(--line)}.list>li:last-child{border:0}
.row-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 8px;border-radius:16px;transition:background .2s;text-align:left}
button.row-item:hover,a.row-item:hover{background:var(--surface)}
.row-item.static{cursor:default}.row-item.person .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.list-tight{padding:6px}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 16px}
.empty-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ok);margin-bottom:6px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;display:inline-block;animation:spin .7s linear infinite}
.skel{display:block;background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);background-size:200% 100%;animation:shine 1.3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shine{to{background-position:-200% 0}}

/* герой главной — логотип как «планета» */
.hero{display:grid;gap:18px;justify-items:center;text-align:center;padding:8px 0 22px}
.orb{position:relative;width:min(70vw,250px);aspect-ratio:1}
.orb .logo{width:100%!important;height:100%!important;position:relative;z-index:1}
.orb-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(169,207,56,.4),rgba(0,136,0,.16) 55%,transparent 75%);animation:breathe 5s ease-in-out infinite}
.orb-star{position:absolute;z-index:2;left:25%;top:30%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,rgba(255,255,10,.9) 40%,transparent 70%);animation:twinkle 2.4s ease-in-out infinite}
.hero.off .orb-halo{background:radial-gradient(closest-side,rgba(138,155,255,.22),transparent 70%);animation:none}
.hero.off .orb .logo{filter:grayscale(.9) brightness(.65)}.hero.off .orb-star{opacity:.15;animation:none}
.hero-copy{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:520px}
.state-line{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--muted)}
.hero-copy .row{width:100%}
@media(min-width:900px){.hero{grid-template-columns:320px minmax(0,1fr);justify-items:start;text-align:left;gap:48px;padding:16px 0 32px;align-items:center}.orb{width:300px}.hero-copy{align-items:flex-start;max-width:none}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}@keyframes twinkle{50%{transform:scale(1.5);opacity:.55}}

/* «нить» — остаток времени */
.thread-bar{width:100%}.thread-bar svg{display:block;width:100%;height:auto;overflow:visible}
.tb-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.tb-fill,.tb-glow{fill:none;stroke-width:3.2;stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--ease)}
.tb-glow{stroke-width:7;opacity:.55}.tb-bead{fill:#fff;filter:drop-shadow(0 0 6px var(--yellow));opacity:0;transition:opacity .4s 1s}.tb-bead.in{opacity:1}
.tb-star{fill:var(--yellow);opacity:.9}.thread-bar.off .tb-star{fill:var(--muted);opacity:.4}.thread-bar.off .tb-bead{display:none}

/* плитки и списки на главной */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:16px;background:var(--surface);border:1px solid var(--line);transition:transform .2s var(--ease),background .2s}
.tile:nth-child(1){border-radius:26px 8px 26px 8px}.tile:nth-child(2){border-radius:8px 26px 8px 26px}.tile:nth-child(3){border-radius:8px 26px 8px 26px}.tile:nth-child(4){border-radius:26px 8px 26px 8px}
.tile:hover{background:var(--surface-2);transform:translateY(-2px)}.tile .ic{color:var(--ok);margin-bottom:6px}.tile small{color:var(--muted)}.tile b{font:700 17px var(--font)}
.view-in>.stack,.view-in>section{margin-bottom:0}.view-in>section+section{margin-top:22px}
.timeline{position:relative}
.timeline>li{position:relative;padding-left:28px}
.timeline>li::before{content:"";position:absolute;left:6px;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--surface-2);border:2px solid var(--bg);box-shadow:0 0 0 2px var(--line);z-index:1}
.timeline>li.on::before{background:var(--lime);box-shadow:0 0 0 2px rgba(169,207,56,.4),0 0 14px rgba(169,207,56,.6)}
.timeline>li::after{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line)}
.timeline>li:first-child::after{top:50%}.timeline>li:last-child::after{bottom:50%}.timeline>li:only-child::after{display:none}
.tl-row{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:16px;transition:background .2s}a.tl-row:hover{background:var(--surface)}

/* оформление заказа: путь из трёх станций */
.buy{display:flex;flex-direction:column;gap:20px}
.steps-rail{display:flex;flex-direction:column;gap:6px}
.step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;position:relative;padding-bottom:18px}
.step::before{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 9px)}
.step:last-child::before{display:none}.step.done::before{background:linear-gradient(var(--lime),var(--yellow))}
.node{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);font:600 12px var(--display);font-style:normal;z-index:1}
.step.done .node{background:var(--grad);color:var(--on-grad)}.step-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.opts{display:flex;flex-direction:column;gap:8px}.opts.row3{display:grid;grid-template-columns:repeat(3,1fr)}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line);transition:border-color .2s,background .2s,transform .15s var(--ease)}
.opt:hover:not(:disabled){background:var(--surface-2)}.opt:active:not(:disabled){transform:scale(.985)}
.opt.on{border-color:var(--lime);background:linear-gradient(120deg,rgba(0,136,0,.28),rgba(169,207,56,.1))}
[data-theme=light] .opt.on{background:linear-gradient(120deg,rgba(0,136,0,.1),rgba(169,207,56,.18))}
.opt.dis{opacity:.75}.opt .price{font:600 16px var(--display)}
.opt.dev{flex-direction:column;gap:2px;padding:16px 8px;text-align:center}.opt.dev .display{font-size:30px}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}.opt.on .radio{border-color:var(--lime)}.opt.on .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--lime)}
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px 16px calc(12px + var(--safe-b));background:var(--glass);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.paybar-in{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto}.paybar .total{font-size:22px;display:block}
@media(min-width:900px){.paybar{left:280px;padding:14px 36px}.paybar-in{max-width:none}}
.success{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:36px 0;max-width:460px;margin:0 auto}
.burst{position:relative;width:140px;height:140px;display:grid;place-items:center}
.star-big{width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(255,255,10,.8));animation:pop .7s var(--ease) both}.star-big svg{width:100%;height:100%;fill:var(--yellow)}
.burst i{position:absolute;left:50%;top:50%;width:4px;height:18px;margin:-9px -2px;border-radius:4px;background:var(--lime);transform:rotate(var(--a)) translateY(-56px);opacity:0;animation:ray .9s .2s var(--ease) both}
@keyframes pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none;opacity:1}}
@keyframes ray{0%{opacity:0;transform:rotate(var(--a)) translateY(-30px)}40%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-84px)}}
.pay-pulse{position:relative;width:84px;height:84px;display:grid;place-items:center;color:var(--on-grad);border-radius:50%;background:var(--grad)}
.pay-pulse i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ring 1.8s ease-out infinite}.pay-pulse i+i{animation-delay:.9s}
@keyframes ring{to{transform:scale(1.9);opacity:0}}

/* страница подписки, кошелёк, друзья, профиль */
.sub-main{display:flex;flex-direction:column;gap:16px;border-radius:30px 12px 30px 12px;padding:20px}
.wallet-hero{display:flex;flex-direction:column;gap:14px;padding:24px 20px;border-radius:34px 10px 34px 10px;background:linear-gradient(155deg,rgba(0,13,100,.9) 0%,rgba(0,136,0,.65) 62%,rgba(169,207,56,.55) 100%);border:1px solid var(--line);position:relative;overflow:hidden;color:#fff}
.wallet-hero .muted{color:rgba(255,255,255,.7)}.wallet-hero .btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.wallet-hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,10,.4),transparent 65%);pointer-events:none}
.tx .pos,.tx .neg{font-weight:800}
.friends-hero{display:flex;flex-direction:column;gap:12px;padding:22px 18px;border-radius:30px 10px 30px 10px;background:var(--surface);border:1px solid var(--line)}
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stats2>div{padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.stats2 b{font-size:22px}
.steps{display:flex;flex-direction:column;gap:14px;counter-reset:s;padding-left:0}
.steps li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;position:relative}.steps li::before{counter-increment:s;content:counter(s);grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font:600 12px var(--display)}
.steps li b{grid-column:2}.steps li span{grid-column:2;font-size:13.5px}
.profile-head{display:flex;align-items:center;gap:16px}
.admin-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px 8px 24px 8px;background:linear-gradient(120deg,rgba(0,13,100,.8),rgba(0,136,0,.5));border:1px solid var(--line);color:#fff}
.admin-card .muted{color:rgba(255,255,255,.7)}.admin-card .ic-box{background:rgba(255,255,255,.14);color:var(--yellow)}

/* QR */
.qr-box{display:inline-block;padding:8px;border-radius:18px;background:#fff;line-height:0}.qr-box svg{width:132px;height:132px}.qr-box.big svg{width:min(70vw,260px);height:min(70vw,260px)}
.qr-row{display:flex;gap:16px;align-items:center;padding:14px;border-radius:20px;background:var(--surface)}

/* шторки */
.backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,5,30,0);backdrop-filter:blur(0);transition:background .25s,backdrop-filter .25s}
.backdrop.in{background:rgba(0,5,30,.62);backdrop-filter:blur(6px)}
.sheet{width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:30px 30px 0 0;padding:10px 18px calc(22px + var(--safe-b));transform:translateY(100%);transition:transform .32s var(--ease);box-shadow:var(--shadow)}
.sheet.wide{max-width:680px}.backdrop.in .sheet{transform:none}
[data-theme=dark] .sheet{background:linear-gradient(180deg,#02104F,#00093F)}
.sheet-grip{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 10px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sheet-head h3{font:600 18px var(--display)}
.pal-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto}.pal-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;text-align:left}.pal-item span{flex:1;font-weight:700}.pal-item.on,.pal-item:hover{background:var(--surface-2)}
@media(min-width:700px){.backdrop{align-items:center}.sheet{border-radius:30px;padding-bottom:22px;transform:translateY(24px) scale(.96);opacity:0;transition:transform .3s var(--ease),opacity .25s}.backdrop.in .sheet{transform:none;opacity:1}.sheet-grip{display:none}}
#toasts{position:fixed;top:calc(12px + var(--safe-t));left:0;right:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:700;font-size:14px;opacity:0;transform:translateY(-14px);transition:.3s var(--ease);max-width:92vw}
.toast.in{opacity:1;transform:none}.toast.ok .ic{color:var(--lime)}.toast.err .ic{color:var(--coral)}

/* вход и экран подписки */
.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:520px;width:100%}
.login{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
.login-grid{display:grid;gap:18px;width:100%;justify-items:center}.login-qr{display:flex;flex-direction:column;gap:8px;align-items:center}.login-qr .qr-box svg{width:160px;height:160px}
.float{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px)}}

/* админка */
.admin{display:grid;gap:18px}
.admin-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.admin-nav a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13.5px;white-space:nowrap;color:var(--muted)}
.admin-nav a.on{background:var(--grad);color:var(--on-grad);border-color:transparent}
@media(min-width:900px){.admin{grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}.admin-nav{flex-direction:column;position:sticky;top:20px}.admin-nav a{border-radius:16px;border:0;background:none}.admin-nav a:hover{background:var(--surface)}.admin-nav a.on{background:var(--grad)}}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:700px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}.kpi .ic{color:var(--ok)}.kpi .display{font-size:22px}
.chart{height:150px;color:var(--text)}.chart svg{width:100%;height:100%}.chart rect:hover{filter:brightness(1.25)}
.bar{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .6s var(--ease)}

/* ---------- загрузочный экран: телефон → нить → звезда → логотип ---------- */
#splash{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:#00061F;color:#fff;overflow:hidden;transition:opacity .5s ease,transform .6s var(--ease)}
#splash.on{display:flex}#splash.out{opacity:0;transform:scale(1.06);pointer-events:none}
.splash-bg{position:absolute;inset:0;background:
  radial-gradient(80% 45% at 15% 0%,rgba(0,13,100,.9),transparent 70%),
  radial-gradient(130% 50% at 50% 120%,rgba(169,207,56,.4),transparent 62%),
  radial-gradient(70% 40% at 0% 105%,rgba(0,136,0,.5),transparent 68%),
  radial-gradient(60% 40% at 100% 110%,rgba(255,255,10,.2),transparent 70%),#00093F}
.splash-svg{position:relative;height:min(100vh,760px);width:min(100vw,430px);max-height:100%}
.splash-word{position:absolute;top:calc(34px + var(--safe-t));left:0;right:0;display:flex;gap:8px;align-items:baseline;justify-content:center;font-family:var(--display);opacity:0;animation:fadeup .9s .2s var(--ease) forwards}
.splash-word b{font-size:22px;letter-spacing:-.02em}.splash-word span{font-size:11px;letter-spacing:.2em;color:var(--lime)}
.splash-status{position:absolute;bottom:calc(26px + var(--safe-b));left:0;right:0;text-align:center;font-weight:600;font-size:13px;color:rgba(255,255,255,.7);min-height:20px}
.sp-stars circle{fill:#fff;opacity:.15;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.75}}@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sp-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.sp-line,.sp-line-glow{fill:none;stroke:url(#sp-thread);stroke-width:3.6;stroke-linecap:round}
.sp-line-glow{stroke-width:9;opacity:.6}
.sp-bead{fill:#fff;filter:drop-shadow(0 0 8px #FFFF0A) drop-shadow(0 0 16px #A9CF38)}
.sp-phone{opacity:0;animation:fadeup .8s .1s var(--ease) forwards}
.sp-phone-body{fill:#050E55;stroke:rgba(255,255,255,.55);stroke-width:2}
.sp-phone-screen{fill:#0A1A8E;transition:fill .6s}.sp-phone-notch{fill:rgba(255,255,255,.4)}
.sp-phone-mark{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linejoin:round;transition:stroke .6s,fill .6s}
.lit .sp-phone-screen{fill:#0B5A12}.lit .sp-phone-mark{stroke:#FFFF0A;fill:rgba(255,255,10,.18)}
.sp-star-shape{fill:#3A4BC9;stroke:rgba(255,255,255,.5);stroke-width:1.2;stroke-linejoin:round;transition:fill .5s}
.sp-halo{opacity:0;transition:opacity .6s}.sp-rays{opacity:0;transform-origin:112px 122px;transform:scale(.4);transition:opacity .5s,transform .7s var(--ease)}
.sp-star.lit .sp-star-shape{fill:#FFFF0A;stroke:#fff;animation:starpop .8s var(--ease)}
.sp-star.lit .sp-halo{opacity:.75}.sp-star.lit .sp-rays{opacity:1;transform:scale(1)}
@keyframes starpop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.sp-star-shape{transform-box:fill-box;transform-origin:center}
.sp-logo{transform-origin:0 0;transform:scale(.2);opacity:0;transition:transform .9s var(--ease),opacity .6s}
#splash.logo .sp-logo{transform:scale(.7);opacity:1}
#splash .splash-svg>*:not(.sp-logo-wrap){transition:opacity .5s}
#splash.logo .sp-track,#splash.logo .sp-line,#splash.logo .sp-line-glow,#splash.logo .sp-star,#splash.logo .sp-phone,#splash.logo .sp-bead,#splash.logo .sp-stars{opacity:0}
#splash.logo .splash-word{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
#app{opacity:0;transition:opacity .5s}#app.ready{opacity:1}
.view-in{animation:viewin .45s var(--ease)}@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#splash.logo .sp-phone,#splash.logo .sp-star,#splash.logo .sp-word{animation:none}
body[data-route=buy] .dock{display:none}
body[data-route=buy] .stage{padding-bottom:calc(110px + var(--safe-b))}

.right small{display:block}
.row.wrap>.btn.grow{min-width:150px}
.qr-row .stack{min-width:0}