/* Личный кабинет Nasim Link — макет по docs/cabiten-task/cabinet-design.md.
   Структура как у ориентира (тёмный, спокойный, «приложение, а не сайт»), акцент свой — бирюза «ветерок».
   Акцент меняется в одном месте: --accent (+ --accent-hover, --accent-ink, --accent-soft). */
@font-face{font-family:"Vazirmatn";src:url("fonts/vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}

:root, :root[data-theme="dark"]{
  --bg:#07080C; --surface:#0E1016; --surface-2:#14161E; --border:#1C1F29; --active:#161F37; --hero:#0F1A33;
  --accent:#22B8A8; --accent-hover:#1FA597; --accent-ink:#3FD0BF; --on-accent:#04201D; --accent-soft:rgba(34,184,168,.15);
  --track:#222C43; --text:#F3F5FA; --muted:#8A90A2; --faint:#5E6475;
  --success:#3DDC97; --success-soft:rgba(61,220,151,.13); --warning:#F0A43A; --warning-soft:rgba(240,164,58,.13);
  --danger:#E5484D; --danger-soft:rgba(229,72,77,.13); --overlay:rgba(3,4,8,.66); color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#F0F2F7; --border:#E3E7EF; --active:#E6F5F3; --hero:#EBF7F5;
  --accent:#22B8A8; --accent-hover:#1FA597; --accent-ink:#0B7A6E; --on-accent:#04201D; --accent-soft:rgba(34,184,168,.14);
  --track:#E1E6EE; --text:#12151E; --muted:#5D6477; --faint:#8A90A2;
  --success:#138A5A; --success-soft:rgba(19,138,90,.10); --warning:#A8620A; --warning-soft:rgba(214,130,0,.12);
  --danger:#C9363B; --danger-soft:rgba(201,54,59,.09); --overlay:rgba(18,21,30,.35); color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Vazirmatn",Tahoma,sans-serif;-webkit-text-size-adjust:100%;min-height:100vh}
html[lang="fa"] body{font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,sans-serif;line-height:1.7}
a{color:var(--accent-ink);text-decoration:none}
button,input{font:inherit;color:inherit}
.ltr{direction:ltr;unicode-bidi:isolate}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:12px}
[dir="rtl"] .flip{transform:scaleX(-1)}
a,button,.card,.app-i,.plan{transition:background-color .15s,border-color .15s,color .15s}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---------- Каркас ---------- */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:8px 16px 104px;width:100%;max-width:1180px;flex:1}

/* Боковое меню: плавающая панель (ПК ≥1024); телефон и планшет — нижнее меню */
.side{display:none}
@media (min-width:1024px){
  .side{display:flex;flex-direction:column;gap:4px;flex:none;position:sticky;top:16px;height:calc(100vh - 32px);
    margin:16px;margin-inline-end:0;padding:20px 14px;background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:auto}
  .content{padding:8px 24px 32px}
}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--text)}
.logo{width:36px;height:36px;border-radius:11px;background:var(--accent);display:grid;place-items:center;flex:none}
.logo svg{width:22px;height:22px;stroke:var(--on-accent);fill:none;stroke-width:2.3;stroke-linecap:round}
.word{font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.word span{font-weight:800;color:var(--accent-ink)} .word i{font-style:normal;font-weight:600;color:var(--muted);margin-left:.3em}
.side .brand{padding:2px 6px 18px}
.who{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--surface-2);margin-bottom:14px}
.ava{width:40px;height:40px;border-radius:50%;background:var(--active);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;flex:none}
.who b{display:block;font-size:15px}
.who small{font-size:12.5px;color:var(--success);display:block}
.who small.warn{color:var(--warning)} .who small.bad{color:var(--danger)}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav a{display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:12px;color:var(--muted);font-weight:600;min-height:44px}
.nav a:hover{color:var(--text)}
.nav a .mk{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none;margin-inline:7px}
.nav a .i{display:none}
.nav a[aria-current="page"]{background:var(--active);color:var(--text)}
.nav a[aria-current="page"] .mk{background:var(--accent)}
.nav .sep{height:1px;background:var(--border);margin:auto 6px 8px}
.nav a.ic .i{display:block} .nav a.ic .mk{display:none}
.nav .logout{color:var(--danger)} .nav .logout:hover{color:var(--danger)}
.side{width:240px}

/* Шапка */
.top{display:flex;align-items:center;gap:10px;padding:12px 16px 4px}
.top .brand-m{flex:1}
.top .acts{display:flex;gap:8px;align-items:center;position:relative}
.head{display:flex;align-items:center;gap:12px;padding:8px 16px 16px}
.head .tt{flex:1;min-width:0}
.head .crumb{font-size:13px;color:var(--muted)}
.head h1{font-size:26px;line-height:1.2;margin:0;font-weight:800;letter-spacing:-.3px;overflow-wrap:anywhere}
.head .acts{display:none}
@media (min-width:1024px){
  .top{display:none}
  .head{padding:24px 24px 20px}
  .head h1{font-size:30px}
  .head .acts{display:flex;gap:8px;align-items:center;position:relative}
}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;position:relative}
.icon-btn:hover{color:var(--text)}
.icon-btn .nd{position:absolute;top:8px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.srv{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text);font-size:13.5px;white-space:nowrap}
.srv-dot{width:40px;height:40px;display:grid;place-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.dot.warn{background:var(--warning)} .dot.bad{background:var(--danger)}

/* Объявления (колокольчик) */
.bell-pnl{position:absolute;top:48px;inset-inline-end:0;z-index:15;width:min(360px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.bell-pnl h3{font-size:13px;margin:6px 10px 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.ann{display:flex;gap:10px;padding:10px;border-radius:12px}
.ann + .ann{border-top:1px solid var(--border);border-radius:0}
.ann .ud{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:8px}
.ann .ud.read{background:transparent}
.ann time{display:block;font-size:12.5px;color:var(--muted)}

/* Нижняя навигация (телефон и планшет) */
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border);
  padding:6px 4px max(6px,env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;min-height:54px;border-radius:12px;
  color:var(--muted);font-size:11px;font-weight:600;text-align:center;line-height:1.25}
.tabbar a[aria-current="page"]{color:var(--accent-ink)}
@media (min-width:1024px){ .tabbar{display:none} }

@media (min-width:600px) and (max-width:1023px){ .tabbar{padding-inline:max(4px,calc(50% - 300px))} }

/* Подвал */
.foot{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding:24px 16px 8px;margin-top:32px;border-top:1px solid var(--border);font-size:14px}
.foot a{color:var(--muted)} .foot a:hover{color:var(--text)}
.foot .c{flex-basis:100%;text-align:center;color:var(--faint);font-size:13px;margin-top:8px}

/* ---------- Элементы ---------- */
.grid{display:grid;gap:16px}
@media (min-width:1024px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px}
@media (min-width:1024px){ .card{padding:22px 24px} }
.card h2{font-size:17px;margin:0 0 14px;font-weight:750}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13.5px}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:14px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap;
  letter-spacing:.4px;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-ink)}
.badge.ok{background:var(--success-soft);color:var(--success)} .badge.warn{background:var(--warning-soft);color:var(--warning)}
.badge.bad{background:var(--danger-soft);color:var(--danger)} .badge.mute{background:var(--surface-2);color:var(--muted)}
.badge .dot{width:7px;height:7px;background:currentColor}
html[lang="fa"] .badge{letter-spacing:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:12px;
  border:1px solid transparent;font-weight:700;font-size:15px;cursor:pointer;text-align:center;line-height:1.3;background:none}
.btn.block{display:flex;width:100%}
.btn.primary{background:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{border-color:var(--border);color:var(--text);background:var(--surface)} .btn.ghost:hover{border-color:var(--accent)}
.btn.danger-o{border-color:var(--border);color:var(--danger);background:var(--surface)} .btn.danger-o:hover{border-color:var(--danger)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{min-height:40px;padding:8px 14px;font-size:14px}
.go{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--accent-ink)}
.go svg{width:16px;height:16px}
.hint{padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:13.5px;font-weight:600;margin:10px 0 0}
.warnbox{padding:12px 14px;border-radius:12px;background:var(--warning-soft);color:var(--warning);font-weight:650;display:flex;gap:10px;align-items:flex-start;font-size:14px}
.bar{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:5px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.seg button{border:0;background:none;padding:8px 6px;border-radius:12px;cursor:pointer;color:var(--muted);font-weight:650;min-height:42px;line-height:1.2}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg.sub button[aria-pressed="true"]{background:var(--active);color:var(--text)}
@media (max-width:480px){ .seg button{font-size:13.5px;padding:8px 2px} }
input.field{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:10px 14px}
input.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--danger);font-size:13.5px;font-weight:600}
.okt{color:var(--success);font-size:13.5px;font-weight:600}
.sk{background:var(--surface-2);border-radius:10px;animation:sk 1.2s ease-in-out infinite alternate}
@keyframes sk{from{opacity:.55}to{opacity:1}}

/* ---------- Кабинет (главная) ---------- */
.home-top{display:grid;gap:16px}
.home-row{display:grid;gap:16px}
@media (min-width:768px){ .home-top{grid-template-columns:2fr 1fr} }
@media (min-width:1024px){ .home-row{grid-template-columns:repeat(3,1fr)} }
@media (min-width:640px) and (max-width:1023px){ .home-row{grid-template-columns:repeat(3,1fr)} }
.hero{background:var(--hero);border-color:color-mix(in srgb,var(--accent) 30%,transparent);display:flex;flex-direction:column;gap:14px;min-height:196px}
.hero .lbl{font-size:16px;color:var(--muted)}
.days{display:flex;align-items:baseline;gap:12px;font-size:60px;font-weight:800;line-height:1;letter-spacing:-1.5px}
.days small{font-size:17px;font-weight:500;color:var(--muted);letter-spacing:0}
.hero .meta{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-top:auto}
.hero.expiring{border-color:color-mix(in srgb,var(--warning) 40%,transparent)}
.hero.expired{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--surface)}
.hero h2{font-size:24px;margin:0;font-weight:800}
.cta{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px 24px;border-radius:18px;background:var(--accent);color:var(--on-accent);min-height:196px}
.cta:hover{background:var(--accent-hover)}
.cta svg{width:28px;height:28px;margin-bottom:auto}
.cta b{font-size:23px;line-height:1.2;font-weight:800}
@media (max-width:767px){ .cta{min-height:0;gap:4px} .cta svg{margin-bottom:12px} .hero{min-height:0} .days{font-size:56px} }
.cta span{font-size:14px;opacity:.85}
.mini .lbl{color:var(--muted);font-size:14px}
.mini .val{font-size:22px;font-weight:800;margin:6px 0 10px}
.none{text-align:center;align-items:center}
.none .grid{width:100%;max-width:520px}

/* ---------- Подключение ---------- */
.sublink{display:flex;align-items:center;gap:14px;cursor:pointer;width:100%;text-align:start;padding:14px 14px 14px 16px}
.sublink:hover{border-color:var(--accent)}
.sublink .li{width:42px;height:42px;border-radius:12px;background:var(--active);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.sublink .t{flex:1;min-width:0} .sublink .t b{display:block}
.sublink .t small{color:var(--muted);font-size:13.5px}
.sublink .cp{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.apps{display:grid;gap:12px}
.app-i{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:start;width:100%;min-height:64px}
.app-i:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.app-i::after{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:none;box-sizing:border-box}
.app-i[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.app-i[aria-pressed="true"]::after{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' stroke='%2304201D' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.app-i:active{transform:scale(.99)}
.app-i .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:850;font-size:14px;color:#fff;flex:none}
.app-i .nm{flex:1;font-weight:700}
.steps{display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.step .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--active);color:var(--accent-ink);font-weight:850;flex:none}
.step.first .n{background:var(--accent);color:var(--on-accent)}
.step .b{flex:1;min-width:0}
.step .b b{display:block;margin:4px 0 0}
.step .b p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.step .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (min-width:1024px){
  .step{align-items:center}
  .step .b{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .step .b b{margin:0}
  .step .btns{margin:0;justify-content:flex-end}
  .step .b p,.step .b .hint{grid-column:1 / -1}
}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.bounce{animation:nudge 1.1s ease-in-out infinite}
.qrbox{display:flex;gap:16px;align-items:center}
.qrbox img{width:120px;height:120px;border-radius:12px;background:#fff;padding:6px;flex:none}
.qr-desk{display:none} @media (min-width:1024px){ .qr-desk{display:flex} .btn.qr-mob{display:none} }

/* ---------- Устройства ---------- */
.dev{display:flex;gap:14px;align-items:center}
.dev .di{width:44px;height:44px;border-radius:12px;background:var(--active);display:grid;place-items:center;color:var(--accent-ink);flex:none}
.dev .dt{flex:1;min-width:0} .dev .dt b{display:block}
.dev .dt div{font-size:13.5px;color:var(--muted)}
.trash{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:none;color:var(--danger);display:grid;place-items:center;cursor:pointer;flex:none}
.trash:hover{border-color:var(--danger);background:var(--danger-soft)}
.empty{text-align:center;padding:36px 20px}
.empty .ei{width:64px;height:64px;border-radius:18px;background:var(--active);color:var(--accent-ink);display:grid;place-items:center;margin:0 auto 14px}
.empty .ei svg{width:30px;height:30px}

/* ---------- Продление и оплата ---------- */
.plans{display:grid;gap:12px}
@media (min-width:640px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:18px;border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:start;width:100%}
.plan[aria-pressed="true"]{background:var(--active);border-color:color-mix(in srgb,var(--accent) 60%,var(--border))}
.plan.best{border-color:var(--accent)}
.plan .pt{font-size:20px;font-weight:800}
.plan .pp{font-size:30px;font-weight:800;line-height:1.15;margin-top:6px}
.plan .pp s{font-size:16px;color:var(--faint);font-weight:600;margin-inline-start:8px}
.plan .pp.disc{color:var(--accent-ink)}
.plan .pm{font-size:13.5px;color:var(--muted)}
.plan .badge{position:absolute;top:16px;inset-inline-end:16px}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.total b{font-size:26px}
.amount{font-size:40px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.copyline{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.copyline .v{flex:1;min-width:0;word-break:break-all}
.copyline button{border:0;background:var(--accent);color:var(--on-accent);height:38px;min-width:38px;padding:0 10px;border-radius:10px;cursor:pointer;display:grid;place-items:center;flex:none}
.timer{font-variant-numeric:tabular-nums;font-weight:800}
.paystat{display:flex;align-items:center;gap:12px;font-weight:700}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 0 var(--warning-soft);animation:pulse 1.4s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,164,58,.5)}100%{box-shadow:0 0 0 10px rgba(240,164,58,0)}}
.paystat.ok{color:var(--success)} .paystat.ok .pulse{background:var(--success);animation:none}

/* ---------- Платежи ---------- */
table.pay{width:100%;border-collapse:collapse;font-size:14.5px}
table.pay th{color:var(--muted);font-weight:600;text-align:start;padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border)}
table.pay td{padding:14px 12px;border-bottom:1px solid var(--border)}
table.pay tr:last-child td{border-bottom:0}
.paycards{display:grid;gap:12px}
@media (max-width:719px){ .pay-desk{display:none} }
@media (min-width:720px){ .paycards{display:none} }

/* ---------- Поддержка / FAQ ---------- */
details.faq{border-top:1px solid var(--border)}
details.faq:first-of-type{border-top:0}
details.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;display:flex;gap:10px;align-items:center;min-height:48px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);flex:none}
details.faq[open] summary::after{transform:rotate(225deg)}
details.faq p{margin:0 0 16px;color:var(--muted)}

/* ---------- Настройки ---------- */
.sets{display:grid;gap:16px;align-items:start}
@media (min-width:1024px){ .sets{grid-template-columns:repeat(3,1fr)} }
.sets .card{padding:0;overflow:hidden}
.sets h2{font-size:12.5px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:0;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
html[lang="fa"] .sets h2{letter-spacing:0}
.srow{display:flex;align-items:center;gap:12px;padding:16px 20px;width:100%;text-align:start;background:none;border:0}
.srow + .srow{border-top:1px solid var(--border)}
button.srow,a.srow{cursor:pointer;color:var(--text)} button.srow:hover,a.srow:hover{background:var(--surface-2)}
.srow .sv{flex:1;min-width:0}
.srow .sl{display:block;font-size:13px;color:var(--muted)}
.srow .sw{display:block;font-size:13px;color:var(--warning)}
.srow .sv b{font-weight:600}
.srow .act{color:var(--accent-ink);font-weight:650;font-size:14px}
.srow .seg{flex:1}
.sbody{padding:16px 20px 20px}
.sbody>*+*{margin-top:12px}

/* ---------- Вход ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:72px 16px 24px;position:relative}
.login .langs-tr{position:absolute;top:16px;inset-inline-end:16px}
.login .box{width:100%;max-width:420px;text-align:center}
.login .logo{width:56px;height:56px;border-radius:16px;margin:0 auto 4px}
.login .logo svg{width:32px;height:32px}
.cells{display:flex;gap:8px;justify-content:center;direction:ltr}
.cells input{width:46px;height:56px;text-align:center;font-size:24px;font-weight:800;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0}
.cells input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:360px){ .cells input{width:40px;height:50px} }
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.lang-sel{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.lang-sel button{border:0;background:none;padding:0 10px;height:38px;min-width:40px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:650}
.lang-sel button[aria-pressed="true"]{background:var(--active);color:var(--text)}

/* ---------- Окна, всплывашка ---------- */
.modal{position:fixed;inset:0;z-index:20;background:var(--overlay);display:grid;place-items:end center;padding:16px}
@media (min-width:640px){ .modal{place-items:center} }
.modal .card{width:100%;max-width:420px}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:30;background:var(--text);color:var(--bg);
  padding:10px 16px;border-radius:12px;font-size:14px;font-weight:650;opacity:0;transition:opacity .15s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1}
@media (min-width:1024px){ .toast{bottom:28px} }

/* Только для макета */
.demo{position:fixed;inset-inline-start:12px;bottom:84px;z-index:40;font-size:12px}
.demo summary{cursor:pointer;background:#6b4cff;color:#fff;padding:6px 10px;border-radius:10px;font-weight:700;list-style:none}
.demo .pnl{margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;display:grid;gap:6px;width:220px}
.demo select{width:100%;font:inherit;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:4px}
@media (min-width:768px){ .demo{bottom:12px} }
.shot .demo{display:none}

/* неактивная кнопка (нет способа оплаты, идёт запрос) */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
@media (min-width:768px) and (max-width:1023px){ .content{padding:8px 24px 104px} }
.steps{scroll-margin-top:16px}
@media (max-width:379px){ .top .srv-dot{display:none} }
@media (max-width:399px){ .top .word i{display:none} }

/* согласие с правилами под кнопками оплаты и теста */
.agree{margin:12px 0 0;text-align:center}
.agree a{color:var(--accent-ink)}

/* «Платите с биржи?» на экране оплаты */
.linkbtn{background:none;border:0;padding:4px 0;color:var(--accent-ink);font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.linkbtn svg{width:16px;height:16px;transform:rotate(90deg)} .linkbtn svg.up{transform:rotate(-90deg)}
.fees ul{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fees li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:14px}
.fees li:last-child{border-bottom:0}

/* способы оплаты: 4 кнопки — на телефоне сеткой 2×2 */
@media (max-width:560px){.seg.methods{grid-auto-flow:row;grid-template-columns:1fr 1fr}}