@import url('assets/fonts/fonts.css');

:root, [data-theme='dark'] {
  color-scheme: dark;
  --bg:#050707;
  --grid:rgba(255,255,255,.085);
  --glow:rgba(255,255,255,.05);
  --panel:#111515; --panel-2:#171d1d; --panel-3:#101515; --panel-4:#1b2121;
  --line:#293131; --line-soft:#27302f; --line-2:#26302e;
  --muted:#84908e; --text:#edf2ed; --soft:#c3ceca; --slash:#45504e;
  --mint:#eef2ef; --mint-strong:#ffffff; --on-mint:#0a0d0c; --mint-dim:rgba(238,242,239,.1); --mint-faint:rgba(238,242,239,.06); --mint-line:rgba(238,242,239,.3); --mint-hover:#ffffff;
  --hover-border:#8a948f;
  --blue:#cfd8d3; --danger:#ff8b7c;
  --avatar-grad:linear-gradient(145deg,#f4f6f4,#d3d8d5); --avatar-text:#101312;
  --hero-grad:linear-gradient(125deg,#1d2222 0%,#171b1b 48%,#181c1c 100%); --hero-border:#333b3a; --hero-text:#aab5b1; --hero-ring:rgba(238,242,239,.14);
  --balance-grad:linear-gradient(135deg,#f4f6f4,#dce0de); --balance-text:#101312; --balance-label:#5a635f; --balance-muted:#4c5451; --balance-strong:#101312; --balance-border:rgba(16,19,18,.18); --balance-shadow:0 18px 45px rgba(0,0,0,.3);
  --plan-grad:linear-gradient(145deg,#181d1d,#111515); --plan-border:#395646;
  --featured-grad:linear-gradient(145deg,#1c2222,#111515); --featured-border:#7d8783; --featured-shadow:0 18px 50px rgba(0,0,0,.3);
  --checkout-grad:linear-gradient(100deg,#1b2121,#101414); --checkout-border:#4c5654; --checkout-label:#aeb8b4;
  --premium-bg:rgba(238,242,239,.05); --premium-border:#454d4b;
  --premium-icon:#eef2ef; --premium-icon-text:#0a0d0c;
  --code-text:#c9d4cf;
  --nav-bg:rgba(10,13,13,.94); --nav-border:rgba(92,111,103,.32);
  --sidebar-bg:rgba(15,19,19,.8); --sidebar-border:#242c2b;
  --toggle-track:#303a38; --toggle-knob:#a9b5b0; --toggle-knob-on:#0a0d0c;
  --progress-track:#303a37;
  --device-icon:#242c2b;
  --skel-bg:#1b2221; --skel-line:#293230; --skel-shine:rgba(238,242,239,.06);
  --toast-bg:#eef2ef; --toast-text:#101312;
  --modal-bg:#1a2120; --modal-border:#394741; --modal-icon-text:#0a0d0c;
  --backdrop:rgba(5,8,8,.7);
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --icon-soft:#cad3cf;
}
[data-theme='light'] {
  color-scheme: light;
  --bg:#f7f8f7;
  --grid:rgba(0,0,0,.1);
  --glow:rgba(0,0,0,.045);
  --panel:#ffffff; --panel-2:#f9faf9; --panel-3:#f0f2f0; --panel-4:#ffffff;
  --line:#39413d; --line-soft:#6b726e; --line-2:#39413d;
  --muted:#636b67; --text:#0e1210; --soft:#39413d; --slash:#a9b1ad;
  --mint:#0e1210; --mint-strong:#000000; --on-mint:#ffffff; --mint-dim:rgba(14,18,16,.07); --mint-faint:rgba(14,18,16,.05); --mint-line:rgba(14,18,16,.45); --mint-hover:#2a2f2d;
  --hover-border:#0e1210;
  --blue:#3d4541; --danger:#c4442f;
  --avatar-grad:linear-gradient(145deg,#1a1e1c,#333836); --avatar-text:#f4f6f4;
  --hero-grad:linear-gradient(125deg,#ecefee 0%,#f6f7f6 48%,#f2f4f2 100%); --hero-border:#39413d; --hero-text:#454d49; --hero-ring:rgba(14,18,16,.12);
  --balance-grad:linear-gradient(135deg,#151817,#2b302e); --balance-text:#f4f6f4; --balance-label:#9aa29e; --balance-muted:#8d958f; --balance-strong:#ffffff; --balance-border:rgba(255,255,255,.2); --balance-shadow:0 18px 45px rgba(14,18,16,.16);
  --plan-grad:linear-gradient(145deg,#f6f8f6,#ffffff); --plan-border:#1e4d33;
  --featured-grad:linear-gradient(145deg,#ecefee,#ffffff); --featured-border:#0e1210; --featured-shadow:0 18px 50px rgba(14,18,16,.08);
  --checkout-grad:linear-gradient(100deg,#ecefee,#f9faf9); --checkout-border:#0e1210; --checkout-label:#39413d;
  --premium-bg:rgba(14,18,16,.04); --premium-border:#39413d;
  --premium-icon:#0e1210; --premium-icon-text:#ffffff;
  --code-text:#2c3430;
  --nav-bg:rgba(250,251,250,.92); --nav-border:rgba(14,18,16,.55);
  --sidebar-bg:rgba(248,249,248,.85); --sidebar-border:#39413d;
  --toggle-track:#cfd4d1; --toggle-knob:#7d857f; --toggle-knob-on:#ffffff;
  --progress-track:#dde1de;
  --device-icon:#edf0ee;
  --skel-bg:#e9ecea; --skel-line:#b9bfbc; --skel-shine:rgba(255,255,255,.75);
  --toast-bg:#101312; --toast-text:#f4f6f4;
  --modal-bg:#ffffff; --modal-border:#0e1210; --modal-icon-text:#ffffff;
  --backdrop:rgba(23,28,26,.4);
  --shadow:0 24px 70px rgba(31,38,35,.14);
  --icon-soft:#4c544f;
}
* { box-sizing:border-box; }
:root { --workspace-max-width:1680px; --workspace-gutter:18px; }
html { background:var(--bg); }
body { margin:0; color:var(--text); font-family:Manrope, system-ui, sans-serif; font-size:15px; line-height:1.45; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(900px 480px at 18% -8%, var(--glow), transparent 65%);
  background-size:44px 44px, 44px 44px, auto;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.55) 100%);
}
button, a { font:inherit; }
button { border:0; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.app-shell { min-height:100dvh; }
.sidebar { display:none; }
.main-content { min-height:100dvh; width:100%; max-width:var(--workspace-max-width); padding:20px var(--workspace-gutter) 130px; margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; margin-bottom:4px; }
.topbar-user { display:flex; align-items:center; gap:10px; min-height:44px; padding:2px 12px 2px 2px; border-radius:30px; color:var(--text); background:var(--panel); border:1px solid var(--line); transition:.2s; }
.topbar-user:hover { border-color:var(--hover-border); }
.topbar-user .avatar { width:36px; height:36px; font-size:12px; }
.topbar-user-name { font-size:13px; font-weight:700; letter-spacing:-.01em; }
.avatar.big { width:56px; height:56px; font-size:17px; flex:0 0 auto; }
.profile-hero { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.profile-hero-copy { flex:1; min-width:0; }
.profile-hero-copy h3 { margin:0; font-size:20px; letter-spacing:-.03em; }
.profile-hero-copy p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.support-view { width:100%; max-width:none; display:flex; flex-direction:column; }
.support-start-view { max-width:720px; margin:0 auto; }
.support-topic-panel { padding:20px; }
.support-start-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.support-start-head h2 { margin:0; font-size:22px; }
.support-start-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.support-topic-list { display:grid; gap:8px; }
.support-topic { display:flex; align-items:center; gap:12px; width:100%; padding:13px; text-align:left; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel-2); }
.support-topic:hover { border-color:var(--hover-border); }
.support-topic > span:nth-child(2) { display:flex; flex-direction:column; min-width:0; flex:1; }
.support-topic small { color:var(--muted); font-size:11px; }
.support-topic b { color:var(--muted); font-size:20px; font-weight:400; }
.vpn-overview-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:12px; }
.vpn-key-card, .vpn-traffic-card { padding:16px; }
.vpn-traffic-value { display:block; margin:12px 0 8px; font-size:28px; letter-spacing:-.04em; }
.vpn-traffic-value small { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; }
.vpn-muted { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.panel-empty { display:grid; gap:5px; padding:22px 8px; color:var(--muted); text-align:center; }
.account-error-view { max-width:560px; margin:40px auto; }
.account-error { display:grid; justify-items:center; gap:10px; padding:28px; text-align:center; }
.account-error h2 { margin:0; font-size:20px; }
.account-error p { max-width:42ch; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.panel-empty strong { color:var(--text); font-size:13px; }
.panel-empty small { font-size:11px; }
.checkout-promo { display:grid; grid-template-columns:auto minmax(160px,1fr) auto; gap:8px; align-items:center; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.checkout-promo label { font-size:12px; font-weight:700; }
.checkout-promo input { min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--panel); }
.checkout-promo small { grid-column:1 / -1; color:var(--muted); font-size:11px; }
.custom-topup { display:grid; gap:7px; min-width:0; width:100%; max-width:100%; margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.custom-topup > div, .custom-topup label, .custom-topup small { min-width:0; max-width:100%; }
.custom-topup > div { display:flex; width:100%; gap:8px; }
.custom-topup label, .custom-topup small { overflow-wrap:anywhere; }
.custom-topup input { min-width:0; flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); }
.custom-topup small { color:var(--muted); font-size:11px; }
.locations-panel { width:100%; overflow:hidden; }
.locations-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px 10px; }
.location-tabs { display:flex; gap:7px; max-width:100%; overflow-x:auto; padding:0 20px 12px; scrollbar-width:none; }
.location-tabs::-webkit-scrollbar { display:none; }
.location-tab { flex:0 0 auto; white-space:nowrap; }
.location-groups { display:grid; gap:14px; padding:0 20px 20px; }
.location-group { min-width:0; }
.location-group h3 { margin:0 0 8px; font-size:13px; }
.server-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.server-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; min-width:0; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:11px; color:var(--text); background:var(--panel-2); }
.server-copy { min-width:0; }
.server-copy strong,.server-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-copy small { color:var(--muted); font-size:11px; }
.server-status { color:var(--muted); font-size:10px; white-space:nowrap; }
@media(max-width:520px){ .checkout-promo { grid-template-columns:1fr auto; } .checkout-promo label { grid-column:1 / -1; } .checkout-promo input { grid-column:1; } .locations-head { padding-inline:16px; } .location-tabs { padding-inline:16px; } .location-groups { padding-inline:16px; } .server-grid { grid-template-columns:1fr; } }
.document-list { display:grid; gap:8px; }
.notif-empty { padding:16px 10px; color:var(--muted); font-size:12px; text-align:center; }
.profile-view, .more-view { max-width:760px; margin:0 auto; }
.more-profile-card { display:flex; align-items:center; gap:12px; width:100%; margin-bottom:12px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--panel-2); text-align:left; }
.more-profile-card:hover { border-color:var(--hover-border); background:var(--panel-3); }
.more-profile-card > span:nth-child(2) { display:flex; flex-direction:column; flex:1; min-width:0; }
.more-profile-card strong { font-size:14px; }
.more-profile-card small { color:var(--muted); font-size:11px; }
.more-profile-card b { color:var(--muted); font-size:20px; font-weight:400; }
.profile-edit-card { padding:18px; margin-bottom:12px; }
.profile-form { display:grid; gap:11px; margin:4px 0 14px; text-align:left; }
.profile-form label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:700; }
.profile-form input { min-height:42px; padding:0 11px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--panel-3); font:inherit; font-size:13px; }
.profile-form input:focus-visible { outline:2px solid var(--mint); outline-offset:1px; }
.personal-data-view { max-width:760px; margin:0 auto; }
.personal-data-card, .gmail-card { padding:18px; margin-bottom:12px; }
.personal-data-heading { display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.personal-data-heading h3 { margin:0; font-size:18px; }
.personal-data-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.personal-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; }
.personal-field { display:grid; gap:4px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--panel-3); }
.personal-field span { color:var(--muted); font-size:10px; }
.personal-field strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.personal-edit-button { min-height:42px; }
.panel-subtitle { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.gmail-row { display:flex; align-items:center; gap:11px; margin-top:14px; }
.gmail-mark { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; color:#ea4335; background:var(--panel-3); font-size:18px; font-weight:800; }
.gmail-row > div { display:flex; flex-direction:column; flex:1; min-width:0; }
.gmail-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.gmail-row small, .form-note { color:var(--muted); font-size:10px; }
.form-note { display:block; line-height:1.4; }
@media (max-width:639px) { .personal-fields { grid-template-columns:1fr; } .personal-data-heading { align-items:flex-start; } .gmail-row .button { padding-inline:10px; } }
.profile-edit-card .profile-hero { margin:0; }
.chat-header { display:flex; align-items:center; gap:10px; }
.chat-head-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-head-copy strong { font-size:13px; }
.chat-head-copy small { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-date { text-align:center; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:150px; margin:auto 0; padding:20px; color:var(--muted); text-align:center; }
.chat-empty-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:4px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel-3); font-size:16px; }
.chat-empty strong { color:var(--text); font-size:13px; }
.chat-empty small { max-width:30ch; font-size:11px; line-height:1.35; }
.chat-typing { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; }
.chat-typing[hidden] { display:none; }
.chat-typing .dot { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing-dot 1.2s infinite ease-in-out; }
.chat-typing .dot:nth-child(2) { animation-delay:.15s; }
.chat-typing .dot:nth-child(3) { animation-delay:.3s; }
@keyframes typing-dot { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
.chat-panel { padding:12px; display:flex; flex-direction:column; gap:10px; }
.chat-list { display:flex; flex-direction:column; gap:8px; min-height:0; flex:1; overflow-y:auto; }
.msg { max-width:78%; padding:10px 13px; border-radius:14px; }
.msg p { margin:0; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.msg small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.msg-in { align-self:flex-start; background:var(--panel-4); border:1px solid var(--line-2); border-bottom-left-radius:4px; }
.msg-out { align-self:flex-end; background:var(--mint); color:var(--on-mint); border-bottom-right-radius:4px; }
.msg-out small { color:var(--on-mint); opacity:.7; }
.msg-system { align-self:center; max-width:90%; padding:7px 11px; color:var(--muted); background:var(--panel-3); border:1px solid var(--line); border-radius:10px; text-align:center; }
.msg-system p { font-size:11px; }
.chat-input-row { display:flex; gap:8px; }
.chat-input-row input { flex:1; min-width:0; min-height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel-3); color:var(--text); font:inherit; font-size:13px; }
.chat-input-row input:focus-visible { outline:2px solid var(--mint); outline-offset:1px; }
.chat-send { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:var(--mint); color:var(--on-mint); }
.chat-send svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.topbar-chevron { margin-left:2px; color:var(--muted); font-size:18px; line-height:1; }
.topbar-tools { display:flex; align-items:center; gap:10px; }
.notif-wrap { position:relative; }
.notif-btn { position:relative; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--soft); transition:.2s; }
.notif-btn:hover { border-color:var(--hover-border); color:var(--text); }
.notif-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.notif-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:10px; background:var(--text); color:var(--bg); font:700 10px Manrope,sans-serif; }
.notif-panel { position:absolute; top:52px; right:0; z-index:60; width:min(320px, 86vw); max-height:calc(100dvh - 120px); overflow-y:auto; padding:6px; background:var(--modal-bg); border:1px solid var(--modal-border); border-radius:14px; box-shadow:var(--shadow); }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 6px; border-bottom:1px solid var(--line); }
.notif-head strong { font-size:13px; }
.notif-item { padding:10px; border-radius:10px; }
.notif-item:hover { background:var(--panel-2); }
.notif-item p { margin:0; font-size:12.5px; line-height:1.4; }
.notif-item small { color:var(--muted); font-size:10px; }
.ticket-panel { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ticket-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { padding:8px 12px; border-radius:20px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--soft); font-size:12px; font-weight:600; transition:.2s; }
.chip:hover { border-color:var(--hover-border); }
.chip.selected { background:var(--mint); color:var(--on-mint); border-color:var(--mint); }
.ticket-panel textarea { width:100%; min-height:52px; resize:none; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel-3); color:var(--text); font:inherit; font-size:13px; }
.ticket-panel textarea:focus-visible { outline:2px solid var(--mint); outline-offset:1px; }
.attach-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mini-btn { min-height:44px; padding:0 12px; border-radius:9px; border:1px solid var(--line-2); background:var(--panel-4); color:var(--soft); font-size:12px; font-weight:600; transition:.2s; }
.mini-btn:hover { border-color:var(--hover-border); color:var(--text); }
.ticket-send { min-height:44px; margin-left:auto; padding:0 18px; }
.attach-list { display:flex; flex-wrap:wrap; gap:6px; }
.attach-item { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; background:var(--panel-4); border:1px solid var(--line-2); font-size:11px; color:var(--soft); }
.attach-item button { color:var(--muted); font-size:14px; line-height:1; }
.msg-files { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.msg-files img { width:96px; height:64px; object-fit:cover; border-radius:8px; display:block; }
.msg-files span { padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.18); font-size:11px; }
.support-view .chat-panel { flex:1; min-height:160px; }
.support-view .chat-list { flex:1; max-height:none; min-height:0; }
html, body { height:100%; overflow:hidden; }
.app-shell { height:100dvh; display:flex; flex-direction:column; }
.main-content { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:84px; }
#view-root { flex:1; min-height:0; overflow-y:auto; }
#view-root .support-view { min-height:100%; }
/* ТЗ v1 п. 1.2: поле ввода закреплено внизу — активный чат занимает ровно высоту области,
   скроллится только список сообщений (.chat-list), а не вся страница. */
#view-root .support-view.chat-active { height:100%; min-height:0; overflow:hidden; }
/* Чипы вложений внутри белых входящих пузырей светлой темы. */
[data-theme='light'] .msg-in .msg-files span { background:var(--mint-faint); border:1px solid var(--line-2); }
.dash-top { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.dash-top h2 { margin:0; font-size:clamp(21px, 4.5vw, 27px); letter-spacing:-.03em; line-height:1.05; }
.dash-date { margin:3px 0 0; color:var(--muted); font-size:12px; }
.breadcrumbs { color:var(--muted); display:flex; gap:10px; align-items:center; font-size:13px; }
.breadcrumbs strong { color:var(--text); font-weight:600; }
.slash { color:var(--slash); }
.top-actions { display:flex; align-items:center; gap:16px; }
.icon-button, .top-profile { color:var(--soft); background:transparent; min-height:44px; }
.icon-button { width:44px; position:relative; font-size:22px; color:var(--icon-soft); }
.theme-toggle { width:44px; min-height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--soft); background:var(--panel-2); transition:.2s ease; }
.theme-toggle:hover { border-color:var(--hover-border); color:var(--text); }
.theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
[data-theme='dark'] .theme-icon-sun { display:block; } [data-theme='dark'] .theme-icon-moon { display:none; }
[data-theme='light'] .theme-icon-sun { display:none; } [data-theme='light'] .theme-icon-moon { display:block; }
.bell-icon { font-size:28px; display:block; line-height:1; transform:rotate(-25deg); }
.notification-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--mint); right:8px; top:8px; box-shadow:0 0 0 3px var(--bg); }
.top-profile { display:flex; align-items:center; gap:9px; padding:2px 0; }
.top-profile-name { font-size:13px; color:var(--soft); }
.chevron { color:var(--muted); font-size:20px; line-height:1; }
.avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--avatar-text); background:var(--avatar-grad); font-size:12px; font-weight:800; letter-spacing:.02em; }
/* Аватар из Telegram кладётся поверх инициалов и обрезается по кругу аватара. */
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-small { width:32px; height:32px; font-size:10px; }
.mobile-heading { display:none; }

.mobile-heading h1 { margin:4px 0 0; font-size:clamp(25px, 7vw, 34px); line-height:1.08; letter-spacing:-.035em; }
.eyebrow, .sidebar-label { color:var(--muted); font:500 10px/1.2 'DM Mono', monospace; letter-spacing:.13em; text-transform:uppercase; margin:0; }
.view { animation:rise .35s ease both; }
.skeleton-view { display:grid; gap:14px; }
.skeleton-block { position:relative; overflow:hidden; background:var(--skel-bg); border:1px solid var(--skel-line); border-radius:14px; }
.skeleton-block:after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--skel-shine), transparent); animation:shimmer 1.25s ease-in-out infinite; }
.skeleton-head { height:84px; border:0; background:transparent; }
.skeleton-hero { min-height:188px; }
.skeleton-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; background:transparent; border:0; overflow:visible; }
.skeleton-stat { min-height:132px; }
.skeleton-content { min-height:225px; }
.skeleton-content-short { min-height:110px; }
.skeleton-list { grid-template-columns:1fr; }
.skeleton-list .skeleton-hero { min-height:120px; }
.skeleton-list .skeleton-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.skeleton-page .skeleton-stats { display:none; }
@media (max-width:639px) { .skeleton-list .skeleton-stats { grid-template-columns:1fr; } .skeleton-content-short { min-height:84px; } }
@keyframes shimmer { 100% { transform:translateX(100%); } }
@keyframes rise { from { opacity:0; } to { opacity:1; } }
.view-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.dash-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr); gap:14px; margin-bottom:14px; }
.mini-block { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.2s ease; }
.mini-block:hover { border-color:var(--hover-border); transform:translateY(-1px); }
.mini-block > span:nth-child(2) { flex:1; min-width:0; }
.mini-block strong, .mini-block small { display:block; }
.mini-block strong { font-size:13px; }
.mini-block small { color:var(--muted); font-size:11px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-block > b { color:var(--muted); font-weight:400; font-size:20px; }
.mini-icon { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; color:var(--text); background:var(--panel-4); border:1px solid var(--line-2); }
.mini-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.tile { position:relative; min-height:118px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:3px; padding:16px; color:var(--text); text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; transition:.2s ease; }
.tile:hover { border-color:var(--hover-border); background:var(--panel-2); transform:translateY(-2px); }
.tile-icon { position:absolute; top:14px; left:14px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--text); background:var(--panel-4); border:1px solid var(--line-2); }
.tile-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.tile strong { font-size:14px; }
.row-list { display:grid; gap:8px; margin-bottom:14px; }
.row-item { display:flex; align-items:center; gap:12px; min-height:54px; padding:8px 14px; color:var(--text); text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; transition:.2s ease; }
.row-item:hover { border-color:var(--hover-border); background:var(--panel-2); }
.locations-panel { max-width:1120px; margin:0 auto; padding:4px 20px 40px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.locations-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.locations-head h2 { margin:3px 0 2px; font-size:clamp(24px, 4vw, 38px); letter-spacing:-.05em; }
.locations-head p { margin:0; color:var(--muted); font-size:13px; }
.eyebrow { color:var(--mint); font:700 10px 'DM Mono',monospace; letter-spacing:.14em; }
.location-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; scrollbar-width:none; }
.location-tab { flex:0 0 auto; min-height:44px; padding:0 15px; border:1px solid var(--line); border-radius:20px; color:var(--soft); background:transparent; font-size:12px; }
.location-tab.active, .location-tab:hover { color:var(--on-mint); background:var(--mint); border-color:var(--mint); }
.location-groups { display:grid; gap:20px; }
.location-group h3 { margin:0 0 8px 4px; font-size:14px; }
.server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.server-row { display:flex; align-items:center; gap:11px; min-width:0; min-height:68px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel-2); text-align:left; }
.server-row:hover { border-color:var(--hover-border); background:var(--panel-3); }
.server-flag { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:var(--panel-4); font-size:21px; }
.server-copy { display:flex; flex-direction:column; min-width:0; flex:1; }
.server-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.server-copy small { color:var(--muted); font-size:10px; }
.server-status { display:flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--mint); font-size:10px; font-weight:700; }
.server-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.server-row.is-offline .server-status { color:var(--muted); }
.server-row.is-offline .server-copy strong { opacity:.6; }
.server-arrow { color:var(--muted); font-size:18px; }
@media (max-width:639px) {
  .locations-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .locations-head .online-badge { align-self:flex-start; }
  .server-grid { grid-template-columns:1fr; }
  .server-row { min-height:62px; }
}
.row-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; color:var(--text); background:var(--panel-4); border:1px solid var(--line-2); }
.row-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.row-item .row-copy { flex:1; min-width:0; }
.row-item strong, .row-item small { display:block; }
.row-item strong { font-size:13px; }
.row-item small { color:var(--muted); font-size:11px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-item > b { color:var(--muted); font-weight:400; font-size:18px; flex:0 0 auto; }
.tile small { color:var(--muted); font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile > b { position:absolute; top:16px; right:14px; color:var(--muted); font-weight:400; font-size:18px; }
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; min-height:42px; }
.page-head h2 { margin:0; font-size:clamp(21px, 4vw, 27px); letter-spacing:-.03em; flex:1; min-width:0; }
.icon-back { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); font-size:24px; line-height:1; transition:.2s; }
.icon-back:hover { border-color:var(--hover-border); }
.referral-card { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:14px; }
.referral-card .key-box { margin:14px 0 10px; }
.referral-card small { color:var(--muted); font-size:12px; }
.bank-card.static { cursor:default; }
.bank-card.static:hover { transform:none; }
.bank-card.static.wide { aspect-ratio:auto; min-height:0; margin-bottom:0; gap:14px; }
.card-balance { display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
.card-balance .label { color:#a9b2ae; }
.card-balance strong { font-size:clamp(30px, 4vw, 42px); font-weight:800; letter-spacing:-.05em; line-height:.95; }
.card-grid { display:flex; flex-wrap:wrap; gap:8px 22px; position:relative; z-index:1; }
.card-grid small { display:block; color:#a9b2ae; font:500 9px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.card-grid b { display:block; margin-top:3px; font-size:13px; font-weight:700; }
.ops-list .activity-item { padding:11px 0; }
.op-in .activity-time { color:var(--text); font-weight:800; }
.op-out .activity-time { color:var(--muted); }
@media (max-width: 639px) { .ops-list .activity-item:nth-child(n+6) { display:none; } }
.view-head h2 { margin:0; font-size:clamp(23px, 5vw, 32px); letter-spacing:-.035em; line-height:1.1; }
.view-head p { margin:7px 0 0; color:var(--muted); max-width:48ch; }
.label { color:var(--muted); font:500 10px 'DM Mono', monospace; letter-spacing:.1em; text-transform:uppercase; }
.overview-grid { display:grid; gap:14px; }
.hero-card { background:var(--hero-grad); border:1px solid var(--hero-border); border-radius:16px; padding:22px; min-height:188px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.hero-card:after { content:''; position:absolute; width:210px; height:210px; border:1px solid var(--hero-ring); border-radius:50%; right:-70px; bottom:-105px; box-shadow:0 0 0 18px rgba(238,242,239,.03),0 0 0 36px rgba(238,242,239,.02); }
.hero-top { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.online-badge { color:var(--mint); background:var(--mint-dim); border:1px solid var(--mint-line); padding:7px 10px; border-radius:30px; font-size:11px; font-weight:700; }
.hero-card h3 { margin:32px 0 5px; font-size:21px; letter-spacing:-.02em; position:relative; z-index:1; }
.hero-card p { color:var(--hero-text); margin:0; font-size:13px; position:relative; z-index:1; }
.balance-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr); gap:14px; }
.side-stack { display:grid; gap:14px; align-content:start; }
.stat-card.slim { min-height:0; gap:4px; }
.stat-card.slim strong { display:block; margin:4px 0 2px; }
.balance-card { min-height:220px; padding:28px; border-radius:16px; color:var(--balance-text); background:var(--balance-grad); box-shadow:var(--balance-shadow); }
.balance-card .label { color:var(--balance-label); }
.balance-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.balance-value { display:block; margin:42px 0 26px; font-size:clamp(42px,6vw,68px); letter-spacing:-.07em; line-height:.9; }
.balance-value small { font-size:25px; letter-spacing:-.03em; }
.balance-bottom { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--balance-border); padding-top:13px; color:var(--balance-muted); font-size:11px; }
.balance-bottom b { color:var(--balance-strong); }
.plan-summary { padding:24px; border:1px solid var(--plan-border); border-radius:16px; background:var(--plan-grad); }
.plan-summary h3 { font-size:26px; margin:35px 0 3px; letter-spacing:-.05em; }
.plan-summary p { color:var(--soft); margin:0 0 22px; font-size:13px; }
.vpn-metrics { display:grid; grid-template-columns:1.5fr .7fr; gap:14px; margin-bottom:14px; }
.vpn-stack { display:grid; gap:10px; }
.vpn-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.vpn-entry-card { min-height:104px; display:flex; align-items:center; gap:12px; padding:16px; color:var(--text); text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; transition:.2s ease; }
.vpn-entry-card:hover { border-color:var(--hover-border); background:var(--panel-2); transform:translateY(-2px); }
.vpn-entry-card > span:nth-child(2) { min-width:0; flex:1; }
.vpn-entry-card strong, .vpn-entry-card small { display:block; }
.vpn-entry-card strong { font-size:14px; }
.vpn-entry-card small { color:var(--muted); font-size:11px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpn-entry-card > b { color:var(--muted); font-size:23px; font-weight:400; }
.entry-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:var(--mint); background:var(--mint-dim); font-size:20px; }
.nested-view { animation:rise .25s ease both; }
.back-button { min-height:44px; padding:0 4px; color:var(--mint); background:transparent; font-size:13px; font-weight:700; }
.nested-view .view-head { margin-top:20px; }
.nested-content > .metric-wide, .nested-content > .panel, .nested-content > .server-panel { margin:0; }
.nested-content .vpn-metrics { grid-template-columns:1fr; margin-bottom:0; }
.fold-panel { border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.fold-panel > summary { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; cursor:pointer; list-style:none; }
.fold-panel > summary::-webkit-details-marker { display:none; }
.fold-panel > summary > span { display:flex; align-items:baseline; gap:11px; min-width:0; }
.fold-panel > summary strong { font-size:14px; }
.fold-panel > summary small { color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fold-panel > summary b { color:var(--muted); font-size:20px; transition:.2s; }
.fold-panel[open] > summary { border-bottom:1px solid var(--line); }
.fold-panel[open] > summary b { transform:rotate(180deg); color:var(--mint); }
.fold-panel > .metric-wide, .fold-panel > .panel, .fold-panel > .server-panel { border:0; border-radius:0; }
.fold-panel > .server-panel { margin:0; }
.metric-wide { padding:18px; min-height:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.metric-wide strong { display:block; font-size:32px; letter-spacing:-.06em; margin:20px 0 10px; }
.metric-wide strong small { color:var(--muted); font-size:13px; letter-spacing:0; }
.metric-wide > small { color:var(--muted); font-size:12px; }
.server-panel { margin-top:14px; }
.server-panel .panel-header p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.server-group { margin-top:24px; }
.server-group h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; }
.server-group h3 small { color:var(--muted); font-size:10px; font-weight:500; }
.server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.server-row { min-height:58px; display:flex; align-items:center; gap:10px; padding:9px 12px; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; text-align:left; transition:.2s; }
.server-row:hover { border-color:var(--hover-border); transform:translateY(-1px); }
.server-pin { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px var(--mint-faint); flex:0 0 auto; }
.server-flag { width:26px; font-size:20px; line-height:1; flex:0 0 auto; }
.server-copy { min-width:0; flex:1; }
.server-copy strong, .server-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-copy strong { font-size:12px; }
.server-copy small { color:var(--muted); font-size:10px; margin-top:2px; }
.server-status { color:var(--mint); font-size:10px; white-space:nowrap; }
.server-arrow { color:var(--muted); font-size:18px; }
.premium-group { padding-top:20px; border-top:1px solid var(--line); }
.premium-group .server-row { background:var(--premium-bg); border-color:var(--premium-border); }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.price-card { padding:26px; min-height:410px; border:1px solid var(--line); border-radius:16px; background:var(--panel); display:flex; flex-direction:column; }
.price-card.featured { border-color:var(--featured-border); background:var(--featured-grad); box-shadow:var(--featured-shadow); }
.price-card-top { display:flex; justify-content:space-between; align-items:center; }
.plan-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:var(--on-mint); background:var(--mint); font-weight:800; }
.price-card h3 { font-size:28px; letter-spacing:-.06em; margin:34px 0 5px; }
.price-card p { min-height:42px; color:var(--muted); font-size:13px; margin:0; }
.price { display:flex; align-items:flex-end; gap:7px; margin:24px 0; }
.price strong { font-size:48px; letter-spacing:-.08em; line-height:.8; }
.price span { color:var(--soft); font-size:15px; }
.price span small { color:var(--muted); font-size:11px; margin-left:3px; }
.price-card ul { display:grid; gap:10px; padding:0; margin:0 0 24px; list-style:none; color:var(--soft); font-size:12px; flex:1; }
.price-card li:before { content:'✓'; color:var(--mint); margin-right:8px; font-weight:800; }
.price-card .button { width:100%; }
.payment-view { width:100%; max-width:760px; margin:0 auto; }
.payment-intro { margin:0 0 14px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.payment-intro h2 { margin:4px 0 3px; font-size:22px; letter-spacing:-.04em; }
.payment-intro p { margin:0; color:var(--muted); font-size:12px; }
.plan-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.plan-choice-grid .bank-card { width:100%; max-width:none; aspect-ratio:auto; min-height:215px; }
.plan-choice-grid .bank-card[role="button"] { cursor:pointer; }
.plan-choice-grid .bank-card[role="button"]:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.payment-empty-plan { justify-content:flex-start; }
.payment-empty-plan .bank-card { width:100%; max-width:480px; aspect-ratio:auto; min-height:215px; }
.payment-view .payment-links { margin-top:12px; }
.payment-view .choose-hint { margin:10px 0 0; }
.payment-view .bank-card { flex-basis:min(480px,100%); }
/* Имя держателя и метка «выбранный тариф» держатся одной группой у правого края. */
.card-ownership { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; min-width:0; text-align:right; }
.card-ownership .card-holder { margin-left:0; }
/* Кнопка «Сменить тариф» на соседней карточке карусели оплаты. */
.tariff-card .card-switch-cta { margin-top:2px; position:relative; z-index:1; justify-content:center; gap:8px; }
.tariff-card .card-switch-cta:disabled { opacity:.55; cursor:not-allowed; }
/* В пустом состоянии сумма «загружается»: скелетон вместо цены, как при старте кабинета. */
.checkout-amount-loading { display:block; }
.skeleton-amount { display:block; width:96px; height:26px; border-radius:8px; }
@media (max-width:639px) { .skeleton-amount { width:78px; height:22px; } }
/* Экран-вопрос «Какой тариф вам подходит?» */
.plan-picker-lead { margin:0 0 14px; color:var(--muted); font-size:13px; max-width:56ch; }
.plan-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:8px; }
.plan-picker-grid .bank-card { flex:none; width:100%; aspect-ratio:auto; min-height:215px; }
.plan-picker-note { margin:8px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width: 767px) { .plan-picker-grid { grid-template-columns:1fr; gap:12px; } }
.view-head .head-actions { display:flex; align-items:center; gap:10px; }
.carousel { display:block; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; }
.carousel-controls #card-position { color:var(--muted); font:600 12px 'DM Mono',monospace; letter-spacing:.06em; min-width:0; }
.carousel-controls #carousel-pause { min-height:32px; }
.payment-card-switcher { display:flex; align-items:center; justify-content:center; gap:12px; }
/* Окно карусели = одна карточка: выбранная видна целиком, соседняя появляется по стрелке. */
.payment-card-switcher .card-track { flex:0 1 480px; min-width:0; justify-content:flex-start; }
.payment-card-switcher .bank-card.tariff-card { flex:0 0 100%; }
.payment-card-switcher .car-arrow { position:relative; z-index:2; }
/* ПК: обе тарифные карточки видны одновременно (ТЗ доработки v1, п. 2.2) — листать нечего, стрелки скрыты. */
@media (min-width: 1024px) {
  .payment-card-switcher .card-track { flex:1 1 auto; max-width:1000px; justify-content:center; overflow:visible; scroll-snap-type:none; }
  .payment-card-switcher .bank-card.tariff-card { flex:0 1 480px; }
  .payment-card-switcher .car-arrow { display:none; }
}
.car-arrow { width:46px; height:46px; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; background:var(--panel-2); color:var(--text); font-size:24px; line-height:1; transition:.2s; }
.car-arrow:hover { border-color:var(--hover-border); background:var(--panel); }
/* Тарифная карта всегда стоит по центру общей рабочей области. */
.card-track { display:flex; justify-content:center; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 6px; scrollbar-width:none; }
.card-track::-webkit-scrollbar { display:none; }
.bank-card { position:relative; overflow:hidden; flex:0 0 min(310px,100%); min-width:0; scroll-snap-align:center; aspect-ratio:auto; min-height:170px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:18px 20px; border-radius:16px; text-align:left; color:#eef2ef; background:linear-gradient(140deg,#1b2225 0%,#11161a 52%,#0d1113 100%); border:1px solid #2b3438; box-shadow:0 18px 44px rgba(0,0,0,.35); transition:.22s ease; }
.bank-card:before { content:''; position:absolute; inset:0; background:radial-gradient(130% 100% at 100% 0%,rgba(129,220,178,.13) 0%,transparent 52%); pointer-events:none; }
.bank-card:after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,transparent 30%,transparent 72%,rgba(255,255,255,.04) 100%); pointer-events:none; }
.bank-card:hover { border-color:#3b464b; }
.bank-card.gold:hover { border-color:rgba(233,200,113,.8); }
.bank-card.selected { border-color:rgba(129,220,178,.6); box-shadow:0 0 0 1px rgba(129,220,178,.45),0 18px 44px rgba(0,0,0,.35); }
.bank-card.gold { background:linear-gradient(140deg,#1d1f1b 0%,#141511 52%,#0f100d 100%); border-color:rgba(216,178,90,.55); color:#f3ecd9; box-shadow:0 18px 44px rgba(0,0,0,.35); }
.bank-card.gold:before { background:radial-gradient(130% 100% at 100% 0%,rgba(216,178,90,.16) 0%,transparent 52%); }
.bank-card.gold.selected { border-color:rgba(233,200,113,.85); box-shadow:0 0 0 1px rgba(233,200,113,.6),0 18px 44px rgba(0,0,0,.35); }
.bank-card.gold .card-sub, .bank-card.gold .card-price small { color:rgba(233,212,153,.62); }
.bank-card.gold .card-name { color:#eeda9f; }
.bank-card.gold .card-price { color:#f3ecd9; }
.bank-card.gold .card-valid { color:rgba(233,212,153,.7); }
.bank-card.gold .card-chip { background:linear-gradient(135deg,#efe0ac,#c2a052); }
.bank-card.gold .card-mark { background:rgba(233,200,113,.12); color:#eeda9f; border-color:rgba(233,200,113,.4); }
.bank-card.gold .card-check { border-color:rgba(233,200,113,.5); }
.bank-card.gold .card-check:after { background:#eeda9f; }
.card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.card-brand { font:600 10px 'DM Mono',monospace; letter-spacing:.34em; text-transform:uppercase; -webkit-text-stroke:1px rgba(5,7,7,.35); }
.card-brand i { font-style:normal; }
.card-brand .brand-fix { color:#fff; }
.card-brand .brand-error { color:#316dcc; }
.card-brand .brand-vpn { color:#d2464e; }
.bank-card.gold .card-brand { color:rgba(233,212,153,.45); }
.choose-hint { margin:10px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.access-notice { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; width:100%; margin-bottom:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.access-notice span { display:grid; min-width:0; gap:3px; }
.access-notice strong { color:var(--text); font-size:14px; }
.access-notice small { color:var(--muted); font-size:12px; line-height:1.4; }
.access-notice .button { flex-shrink:0; min-height:44px; }
.access-notice-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.access-notice-close { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; border:1px solid var(--line-2); border-radius:10px; color:var(--text); background:var(--panel); font-size:24px; line-height:1; cursor:pointer; }
.access-notice-close:hover { border-color:var(--hover-border); }
.plan-note { margin:10px 0 0; color:var(--soft); font:600 11px 'DM Mono',monospace; letter-spacing:.04em; text-align:center; }
.trial-notice { display:grid; gap:4px; margin:12px 0; padding:12px 14px; border:1px solid rgba(129,220,178,.32); border-radius:12px; background:rgba(129,220,178,.08); }
.trial-notice strong { color:var(--text); font-size:13px; }
.trial-notice small { color:var(--muted); font-size:12px; line-height:1.45; }
.bank-card.unset-card { background:linear-gradient(145deg,#fbfcfb 0%,#edf1ee 58%,#e3e8e4 100%); border-color:#cbd3ce; color:#15201a; box-shadow:0 18px 44px rgba(0,0,0,.24); }
.bank-card.unset-card:before { background:radial-gradient(100% 90% at 100% 0%,rgba(17,31,24,.07) 0%,transparent 58%); }
.bank-card.unset-card:after { background:linear-gradient(115deg,rgba(255,255,255,.64) 0%,transparent 30%,transparent 72%,rgba(17,31,24,.03) 100%); }
.bank-card.unset-card .label { color:#66736c; }
.bank-card.unset-card .card-balance strong { color:#15201a; }
.bank-card.unset-card .card-brand { color:rgba(21,32,26,.42); }
.blurred { filter:blur(5px); user-select:none; pointer-events:none; }
.unset-cta { width:100%; position:relative; z-index:1; min-height:44px; }
.unset-card .unset-cta { display:flex; align-items:center; justify-content:space-between; padding-inline:16px; background:#111714; color:#f5f7f5; box-shadow:none; }
.unset-card .unset-cta:hover { background:#202925; }
/* Единая банковская стилистика карт: подложка, чип, гравировка; содержимое масштабируется от ширины карты. */
.bank-card { container-type: inline-size; gap: clamp(4px, 2cqi, 10px); padding: clamp(12px, 4.2cqi, 20px); }
.card-chip { width: clamp(26px, 8cqi, 38px); height: clamp(19px, 6cqi, 28px); }
.card-name { font-size: clamp(15px, 4.6cqi, 20px); }
.card-sub { font-size: clamp(9px, 2.6cqi, 11px); }
.card-balance strong { font-size: clamp(24px, 8.6cqi, 42px); }
.card-price { font-size: clamp(20px, 6.4cqi, 28px); }
.card-price small { font-size: clamp(9px, 2.4cqi, 12px); }
.bank-card[role="button"] { cursor:pointer; }
.bank-card[role="button"]:hover { transform:translateY(-2px); }
.bank-card.unset-card[role="button"]:hover { border-color:#8b968f; }
.bank-card.gold[role="button"]:hover { border-color:rgba(233,200,113,.8); }
/* ТЗ v1 п. 7: в светлой теме белая карта обязана иметь контрастную тёмную обводку. */
[data-theme='light'] .bank-card.unset-card { border-color:#39413d; }
[data-theme='light'] .bank-card.unset-card[role="button"]:hover { border-color:#0e1210; }
[data-theme='light'] .trial-notice { border-color:rgba(23,121,78,.55); }
[data-theme='light'] .toggle { border:1px solid var(--line-2); }
[data-theme='light'] .toggle[aria-checked='true']:after { transform:translateX(18px); }
.unset-card .card-balance strong { font-size:clamp(22px, 7cqi, 36px); }
.unset-card .unset-cta { margin-top:2px; }
/* «Главная» (по ТЗ «Карта баланса на Главной»): карта баланса первым блоком на всю строку,
   ниже — bento-ряд из трёх карточек (Трафик / Выгода / Все операции), под ним — быстрые действия. */
/* Компактность: блоки не тянутся в высоту без нужды. */
.dash-stat-card { min-height:0; padding:14px 16px; gap:6px; }
.bento .dash-stat-card { height:auto; }
.card-chip { width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#d8dcd9,#9aa39e); position:relative; }
.card-chip:after { content:''; position:absolute; inset:6px 5px; border:1px solid rgba(16,19,18,.35); border-radius:3px; }
.card-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; font-weight:800; font-size:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.card-mark.premium { background:rgba(36,26,6,.14); border-color:rgba(36,26,6,.28); }
.card-name { display:block; position:relative; z-index:1; font-size:20px; font-weight:800; letter-spacing:-.03em; }
.card-sub { display:block; position:relative; z-index:1; color:#a9b2ae; font-size:11px; margin-top:3px; }
.card-info { display:flex; flex-direction:column; gap:clamp(8px, 2.2cqi, 14px); position:relative; z-index:1; }
.card-balance-block { display:flex; flex-direction:column; gap:2px; }
.card-balance-block small { color:#9fb0a8; font:500 9px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.card-balance-block strong { color:#f1f5f2; font-size:clamp(25px, 7cqi, 36px); letter-spacing:-.06em; line-height:1; }
.bank-card.gold .card-balance-block small { color:rgba(233,212,153,.7); }
.bank-card.gold .card-balance-block strong { color:#f3ecd9; }
.card-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.card-price { font-size:28px; font-weight:800; letter-spacing:-.05em; }
.card-price small { font-size:12px; font-weight:500; color:#a9b2ae; letter-spacing:0; margin-left:2px; }
.card-valid { position:relative; z-index:1; color:#9fb0a8; font:600 11px 'DM Mono',monospace; letter-spacing:.1em; }
.card-holder { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:auto; text-align:right; position:relative; z-index:1; min-width:0; max-width:62%; }
.card-holder small { font:600 8px 'DM Mono',monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.38); white-space:nowrap; }
.card-holder b { font:700 12px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#e9efeb; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bank-card.gold .card-holder small { color:rgba(233,212,153,.5); }
.bank-card.gold .card-holder b { color:#eeda9f; }
.card-check { position:relative; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.3); }
.card-check:after { content:''; width:9px; height:9px; border-radius:50%; background:#f2f4f2; opacity:0; transform:scale(.4); transition:.2s; }
.bank-card.selected .card-check:after { opacity:1; transform:none; }
.card-note { display:flex; align-items:center; gap:9px; margin-top:12px; color:var(--muted); font-size:12px; }
.card-note b { color:var(--text); }
.payment-step { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel-3); }
.step-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.step-heading > span { color:var(--on-mint); background:var(--mint); border-radius:7px; padding:5px 8px; font:700 10px 'DM Mono',monospace; }
.step-heading strong, .step-heading small { display:block; }
.step-heading strong { font-size:14px; }
.step-heading small { color:var(--muted); font-size:11px; margin-top:3px; }
.period-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.period-choice.custom-choice strong { font-size:20px; letter-spacing:-.03em; white-space:nowrap; }
.period-choice.custom-choice.selected small { color:var(--mint); }
.amount-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:8px; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); }
.amount-btn { width:44px; height:44px; font-size:20px; }
.amount-value { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.amount-value small { color:var(--muted); font-size:10px; text-align:center; }
.amount-input-wrap { display:inline-flex; align-items:center; gap:7px; }
.amount-input-wrap input { width:120px; padding:9px 12px; font:800 22px/1.1 inherit; letter-spacing:-.04em; font-variant-numeric:tabular-nums; text-align:center; color:var(--text); background:var(--panel); border:1px solid var(--line-2); border-radius:11px; appearance:textfield; -moz-appearance:textfield; transition:border-color .2s; }
.amount-input-wrap input:focus { outline:none; border-color:var(--text); }
.amount-input-wrap input::-webkit-outer-spin-button, .amount-input-wrap input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.amount-input-wrap b { font-size:18px; font-weight:700; color:var(--soft); }
.period-choice { position:relative; min-height:66px; padding:10px 8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; color:var(--soft); background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px; transition:.2s; }
.period-choice:hover { border-color:var(--hover-border); color:var(--text); }
.period-choice.selected { color:var(--text); border-color:var(--text); background:var(--mint-faint); box-shadow:0 0 0 1px var(--text); }
.period-choice strong { font-size:26px; letter-spacing:-.04em; }
.period-choice span { font-size:11px; }
.period-choice small { color:var(--muted); font-size:10px; }
.period-choice.selected small { color:var(--text); font-weight:700; }
.checkout-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; margin-top:10px; border:1px solid var(--checkout-border); border-radius:14px; background:var(--checkout-grad); flex-wrap:wrap; }
.checkout-bar .label, .checkout-bar strong, .checkout-bar small { display:block; }
.checkout-bar .label { color:var(--checkout-label); }
.checkout-bar strong { font-size:26px; letter-spacing:-.06em; margin:2px 0; }
.checkout-bar small { color:var(--muted); font-size:11px; }
.checkout-bar .button { min-width:0; padding:0 18px; white-space:nowrap; }
.payment-links { display:flex; justify-content:space-between; gap:16px; margin-top:8px; }
.payment-links .button { flex:1 1 0; min-height:44px; }
.payment-confirm { display:grid; gap:10px; text-align:left; }
.payment-confirm-line { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.payment-confirm-line span { color:var(--muted); font-size:12px; }
.payment-confirm-line strong { color:var(--text); font-size:13px; text-align:right; }
.payment-confirm-line.total { align-items:baseline; border-bottom:0; padding-top:14px; }
.payment-confirm-line.total strong { font-size:24px; letter-spacing:-.04em; }
.payment-methods { display:grid; gap:7px; margin:8px 0 0; padding:0; border:0; }
.payment-methods legend { margin-bottom:4px; color:var(--text); font-size:13px; font-weight:700; }
.payment-methods label { display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-3); cursor:pointer; }
.payment-methods label:has(input:checked) { border-color:var(--text); background:var(--mint-faint); }
.payment-methods input { accent-color:var(--mint); }
.payment-methods span, .payment-methods small { display:block; }
.payment-methods span { color:var(--text); font-size:12px; font-weight:700; }
.payment-methods small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:400; }
.upgrade-note { display:flex; align-items:center; gap:12px; padding:15px 18px; margin-top:14px; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel-2); }
.upgrade-note > span { color:var(--mint); font-size:23px; }
.upgrade-note p { flex:1; margin:0; color:var(--muted); font-size:12px; }
.upgrade-note p strong { display:block; color:var(--text); margin-bottom:2px; }
.stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.stat-card, .panel { border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 84%, transparent); border-radius:14px; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .stat-card, .panel { background:var(--panel); } }
.stat-card { padding:14px 16px; min-height:0; display:flex; flex-direction:column; gap:4px; }
.stat-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.balance-block { margin-bottom:12px; }
.balance-block .bank-card { flex-basis:min(480px,100%); }
.bank-card.unset-card .card-sub { color:rgba(35,48,41,.62); }
.bank-card.unset-card .card-holder b { color:#233029; }
.bento { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bento .dash-stat-card { height:100%; }
.bento .bank-card.static { margin-bottom:0; }
.bento .duo-card { min-height:0; }
.quick-panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:6px 4px; align-content:center; }
.quick-panel .quick-circle small { font-size:10px; }
@media (max-width: 639px) { .duo-card h3 { font-size:13px; flex-wrap:wrap; } .duo-card strong { font-size:18px; } .traffic-duo strong { font-size:17px; } .duo-chips i { width:26px; height:26px; font-size:12px; } .duo-badge { font-size:9px; padding:2px 6px; } .duo-card p { font-size:11px; } }
.duo-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; min-height:112px; display:flex; flex-direction:column; gap:2px; text-align:left; color:var(--text); transition:.2s ease; }
.duo-card:hover { border-color:var(--hover-border); }
.duo-card h3 { margin:0; font-size:15px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.duo-badge { font-style:normal; background:var(--mint); color:var(--on-mint); border-radius:20px; font-size:10px; padding:3px 8px; font-weight:800; }
.duo-card p { margin:0; color:var(--muted); font-size:12px; }
.duo-card strong { font-size:22px; letter-spacing:-.04em; margin-top:2px; }
.duo-progress { height:6px; border-radius:6px; background:var(--progress-track); margin-top:auto; overflow:hidden; display:block; }
.duo-progress i { display:block; height:100%; background:var(--mint); border-radius:inherit; }
.duo-chips { margin-top:auto; display:flex; gap:8px; }
.duo-chips i { width:30px; height:30px; border-radius:9px; background:var(--panel-4); border:1px solid var(--line-2); display:grid; place-items:center; font-style:normal; font-size:14px; }
.quick-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:0; }
.traffic-duo strong { font-size:20px; letter-spacing:-.04em; margin-top:2px; }
.traffic-duo strong small { font-size:12px; color:var(--muted); letter-spacing:0; font-weight:500; }
.duo-note { color:var(--muted); font-size:11px; margin-top:2px; }
.dash-quick { margin-top:8px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px 6px; }

.quick-circle { display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; color:var(--text); padding:0; min-height:44px; }
.qc-icon { width:46px; height:46px; border-radius:50%; background:var(--panel-4); border:1px solid var(--line-2); display:grid; place-items:center; transition:.2s; }
.quick-circle:hover .qc-icon { border-color:var(--hover-border); background:var(--panel-2); }
.qc-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quick-circle small { font-size:11px; color:var(--muted); text-align:center; line-height:1.25; }
.balance-widget { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:14px; }
.bw-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bw-coin { width:44px; height:44px; border-radius:50%; background:var(--mint); color:var(--on-mint); display:grid; place-items:center; flex:0 0 auto; }
.bw-coin svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bw-main { flex:1; min-width:0; }
.bw-main strong { display:block; font-size:24px; letter-spacing:-.04em; }
.bw-main small { color:var(--muted); font-size:11px; }
.bw-cards i { display:inline-grid; place-items:center; width:36px; height:24px; border-radius:5px; background:linear-gradient(130deg,#242b2e,#101415); color:#f2f4f2; font:700 10px 'DM Mono',monospace; border:1px solid #343c3e; font-style:normal; }
.bw-action { width:100%; display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; border-radius:12px; background:var(--mint-dim); color:var(--text); font-weight:700; font-size:14px; border:1px solid var(--mint-line); transition:.2s; }
.bw-action:hover { background:var(--mint-faint); }
.bw-action-icon { width:28px; height:28px; border-radius:50%; background:var(--mint); color:var(--on-mint); display:grid; place-items:center; font-weight:800; }
.bw-action b { margin-left:auto; color:var(--muted); font-weight:400; }
.stat-card strong { font-size:25px; letter-spacing:-.045em; }
.stat-card small { color:var(--muted); font-size:12px; }
.progress { height:5px; border-radius:5px; background:var(--progress-track); overflow:hidden; margin:14px 0 8px; }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--mint); }
.content-grid { display:grid; gap:14px; margin-top:14px; }
.panel { padding:16px; margin:0; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-title { font-weight:700; font-size:15px; }
.text-button { color:var(--mint); background:transparent; font-size:12px; font-weight:700; min-height:44px; padding:6px 0; }
.activity-item { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line-soft); }
.activity-item:first-child { padding-top:0; border-top:0; }
.activity-main { display:flex; gap:11px; min-width:0; }
.activity-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--blue); font-size:15px; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .activity-icon { background:var(--panel-4); } }
.activity-main strong, .activity-main small { display:block; }
.activity-main strong { font-size:13px; font-weight:600; }
.activity-main small, .activity-time { color:var(--muted); font-size:11px; }
.activity-time { white-space:nowrap; }
.quick-grid { display:grid; gap:8px; }
.quick-action { min-height:56px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-2); color:var(--text); background:var(--panel-4); border-radius:10px; text-align:left; transition:.2s ease; }
.quick-action:hover { border-color:var(--hover-border); background:var(--panel-2); transform:translateY(-1px); }
.quick-action b { color:var(--mint); font-size:18px; width:24px; text-align:center; }
.quick-action span { font-size:13px; }
.quick-action small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.button { min-height:46px; border-radius:9px; padding:0 16px; font-weight:700; font-size:13px; transition:.2s ease; }
.button-primary { background:var(--mint); color:var(--on-mint); box-shadow:0 7px 22px var(--mint-faint); }
.button-primary:hover { background:var(--mint-hover); transform:translateY(-1px); }
.button-quiet { color:var(--text); border:1px solid var(--line-2); background:var(--panel-2); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.button-quiet:hover { border-color:var(--hover-border); background:var(--panel-3); transform:translateY(-1px); }
.key-box { display:flex; gap:8px; align-items:center; padding:10px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:9px; margin:20px 0; }
.key-box code { min-width:0; overflow-wrap:anywhere; color:var(--code-text); font:12px 'DM Mono', monospace; flex:1; }
.key-box button { color:var(--mint); background:transparent; min-height:36px; padding:0 8px; font-size:12px; font-weight:700; }
.device-list { display:grid; gap:10px; }
.device-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft); }
.device-name { display:flex; gap:10px; align-items:center; min-width:0; }
.device-symbol { width:33px; height:33px; display:grid; place-items:center; color:var(--soft); background:var(--device-icon); border-radius:8px; }
.device-name strong, .device-name small { display:block; }
.device-name strong { font-size:13px; }
.device-name small { color:var(--muted); font-size:11px; }
.device-addon-box { display:grid; gap:12px; margin-top:16px; padding:16px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-3); }
.device-addon-copy { display:grid; gap:5px; min-width:0; }
.device-addon-copy strong { color:var(--text); font-size:14px; }
.device-addon-copy small, .device-addon-hint { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.device-addon-actions { display:flex; flex-wrap:wrap; gap:8px; }
.device-addon-actions .button { flex:1 1 145px; min-height:44px; }
.active-dot { width:7px; height:7px; background:var(--mint); border-radius:50%; display:inline-block; margin-right:6px; }
.settings-list { border-top:1px solid var(--line); }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.setting-row strong, .setting-row small { display:block; }
.setting-row strong { font-size:13px; }
.setting-row small { color:var(--muted); font-size:11px; margin-top:4px; }
.settings-view { max-width:760px; }
.settings-lead { margin:0 0 18px; color:var(--muted); max-width:56ch; }
.setting-action { width:100%; color:var(--text); text-align:left; background:transparent; }
.setting-action:hover { color:var(--text); background:var(--panel-2); }
.setting-action > span:first-child { flex:1; min-width:0; }
.setting-action > b { color:var(--muted); font-size:18px; font-weight:400; }
.setting-state { flex:0 0 auto; color:var(--muted); font-size:11px; }
.empty-state { display:grid; justify-items:center; gap:8px; padding:48px 20px; color:var(--muted); text-align:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.empty-state strong { color:var(--text); font-size:15px; }
.empty-state small { max-width:42ch; font-size:12px; }
.empty-state-icon { display:grid; place-items:center; width:42px; height:42px; color:var(--soft); border:1px solid var(--line); border-radius:12px; }
.empty-state-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.toggle { width:48px; height:28px; border-radius:18px; background:var(--toggle-track); padding:3px; flex:0 0 auto; transition:.2s; }
.toggle:after { content:''; display:block; width:22px; height:22px; border-radius:50%; background:var(--toggle-knob); transition:.2s; }
.toggle[aria-checked='true'] { background:var(--mint); }
.toggle[aria-checked='true']:after { transform:translateX(20px); background:var(--toggle-knob-on); }
/* На тач-устройствах область нажатия переключателя ≥44px без изменения его вида. */
@media (pointer: coarse) {
  .toggle { position:relative; }
  .toggle:before { content:''; position:absolute; inset:-8px -10px; }
}
.profile-card { display:flex; gap:16px; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
.profile-card .avatar { width:58px; height:58px; font-size:15px; }
.profile-card h3 { margin:0; font-size:18px; }
.profile-card p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.bottom-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; min-height:76px; padding:8px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--nav-bg); border-top:1px solid var(--nav-border); backdrop-filter:blur(22px); }
.nav-item { min-height:58px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; border-radius:10px; color:var(--muted); background:transparent; transition:.2s; }
.nav-item span:first-child { font-size:20px; height:23px; line-height:1; }
.nav-icon { width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto; }
.nav-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.nav-item span:last-child { font-size:10px; }
.nav-item.active { color:var(--mint); background:var(--mint-faint); }
.toast { position:fixed; z-index:40; right:18px; bottom:92px; max-width:calc(100% - 36px); padding:12px 15px; background:var(--toast-bg); color:var(--toast-text); border-radius:9px; font-size:13px; font-weight:700; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; }
.toast.visible { opacity:1; transform:none; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:var(--backdrop); backdrop-filter:blur(8px); }
.modal-backdrop[hidden] { display:none; }
.modal { position:relative; width:min(100%,390px); max-height:calc(100dvh - 32px); overflow:auto; padding:30px 24px 24px; background:var(--modal-bg); border:1px solid var(--modal-border); border-radius:16px; box-shadow:var(--shadow); text-align:center; }
.modal .profile-form select, .modal .profile-form input { min-height:44px; color:var(--text); background:var(--panel-3); border:1px solid var(--line-2); border-radius:10px; }
.modal .profile-form select { padding:0 10px; }
.modal-close { position:absolute; right:12px; top:12px; width:44px; height:44px; color:var(--muted); background:transparent; font-size:24px; }
.modal-icon { width:46px; height:46px; display:grid; place-items:center; margin:0 auto 14px; color:var(--modal-icon-text); background:var(--mint); border-radius:13px; font-size:22px; }
.modal h2 { margin:0 0 8px; font-size:20px; }
.modal p { color:var(--muted); font-size:13px; margin:0 0 22px; }
.qr-modal { width:min(100%, 300px); }
.qr-modal h2 { margin-bottom:4px; }
.qr-modal p { margin-bottom:14px; font-size:12px; }
#qr-canvas, #qr-video { display:block; width:230px; height:230px; margin:0 auto; border-radius:14px; background:#f4f6f4; object-fit:cover; }
#qr-canvas[hidden], #qr-video[hidden] { display:none; }
.qr-empty { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; border:1px dashed var(--line); border-radius:14px; background:var(--panel-3); }
.qr-empty[hidden], .qr-result[hidden] { display:none; }
.qr-empty > span { width:56px; height:56px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--panel-2); font:700 15px 'DM Mono',monospace; }
.qr-empty strong { font-size:13px; }
.qr-empty small { max-width:22ch; color:var(--muted); font-size:11px; line-height:1.4; }
.qr-result { display:grid; gap:14px; }
.qr-result code { max-height:150px; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:12px; color:var(--code-text); background:var(--panel-3); font:500 11px/1.45 'DM Mono',monospace; overflow-wrap:anywhere; white-space:pre-wrap; text-align:left; }

@media (max-width: 1023px) { .dash-hero { grid-template-columns:1fr; } }
@media (max-width: 900px) { .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 640px) { :root { --workspace-gutter:32px; } .overview-grid { grid-template-columns:1.2fr .8fr; } .hero-card { min-height:205px; } .content-grid { grid-template-columns:1.35fr .65fr; } .quick-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 639px) { .balance-layout, .vpn-metrics, .pricing-grid { grid-template-columns:1fr; } .balance-card { min-height:190px; padding:22px; } .balance-value { margin:30px 0 20px; font-size:48px; } .server-grid { grid-template-columns:1fr; } .upgrade-note { align-items:flex-start; flex-wrap:wrap; } .upgrade-note .text-button { margin-left:36px; } .bento { gap:8px; } .bento .dash-stat-card { padding:12px 8px; } .bento .dash-stat-card h4, .bento .dash-stat-label { font-size:11px; } .bento .dash-stat-card strong { font-size:17px; } .bento .dash-stat-card small { font-size:10px; } .bento .dash-stat-icon { font-size:24px; } }
@media (max-width: 639px) { .vpn-entry-grid { grid-template-columns:1fr; } }
@media (max-width: 767px) {
  .card-grid b { font-size:12px; }
  .duo-card { min-height:56px; padding:7px 12px; }
  .qc-icon { width:34px; height:34px; }
  .qc-icon svg { width:16px; height:16px; }
  .main-content { padding-bottom:96px; }
  .bank-card { min-height:128px; padding:14px 16px; }
  .card-sub { font-size:10px; }
  .period-choice { min-height:52px; }
  .period-choice strong { font-size:20px; }
  .checkout-bar { padding:8px 12px; margin-top:4px; }
  .checkout-bar strong { font-size:20px; }
  .payment-links { gap:4px; flex-wrap:wrap; } .payment-links .text-button { min-height:44px; }
  .payment-links .text-button { min-height:44px; padding:0 6px; }
  .page-head { margin-bottom:10px; }
  .card-track { padding-bottom:0; }
  .payment-step { margin-top:6px; }
  .quick-panel .quick-circle small { font-size:8px; }
  .ticket-panel { gap:6px; }
  .ticket-panel textarea { min-height:38px; }
  .chip { padding:6px 10px; font-size:11px; }
  .support-view .chat-panel { min-height:90px; }
  .mini-btn { min-height:44px; padding:0 10px; font-size:11px; }
}
@media (max-width: 639px) {
  .plan-choice-grid { grid-template-columns:1fr; }
  .plan-choice-grid .bank-card { width:100%; max-width:none; aspect-ratio:auto; min-height:215px; }
  .vpn-overview-grid { grid-template-columns:1fr; }
  .profile-edit-card .profile-hero { align-items:flex-start; flex-wrap:wrap; }
  .profile-edit-card .button { margin-left:auto; }
  .main-content { padding-top:12px; }
  .carousel { grid-template-columns:1fr; }
  .payment-card-switcher { gap:6px; }
  .payment-card-switcher .car-arrow { width:44px; height:44px; font-size:22px; }
  .bank-card { flex-basis:100%; min-height:170px; aspect-ratio:auto; }
  .bank-card.tariff-card.unset-card { aspect-ratio:auto; }
  /* На телефоне карта остаётся в банковских пропорциях: укрупнённые блоки скрываются. */
  .blurred .card-grid { display:none; }
  .card-bottom { gap:8px; }
  .period-grid { grid-template-columns:repeat(2,1fr); }
  .period-choice { min-height:62px; }
  .period-choice.custom-choice strong { font-size:18px; }
  .amount-row { gap:8px; padding:8px 10px; }
  .amount-btn { width:44px; height:44px; display:grid; place-items:center; }
  .amount-input-wrap input { width:min(120px,40vw); font-size:18px; padding:8px 10px; }
  .checkout-bar { align-items:center; flex-direction:row; }
  .checkout-bar strong { font-size:22px; }
  .payment-links { margin-top:8px; gap:8px; flex-wrap:wrap; }
  .quick-panel { grid-template-columns:repeat(4,1fr); padding:8px 4px; gap:2px 2px; }
  .quick-panel .quick-circle small { font-size:9px; }
  .bento { gap:6px; }
  .duo-card { min-height:80px; }
  .row-item { min-height:52px; }
  .support-view .chat-panel { min-height:84px; }
  .ticket-panel textarea { min-height:44px; }
}
.operations-history { display:grid; gap:8px; max-height:48vh; overflow:auto; }
.operations-view { width:100%; max-width:920px; margin:0 auto; }
.operations-panel { min-height:180px; }
/* ТЗ v1 п. 4.2: длинная история скроллится внутри списка, а не всей страницей. */
.operations-view .operations-history { max-height:min(60vh, 560px); overflow-y:auto; }
.operations-view .panel-empty { min-height:140px; align-content:center; }
.maintenance-banner { display:flex; align-items:center; gap:12px; min-width:0; margin:8px 0 14px; padding:12px 14px; border:1px solid var(--danger); border-radius:12px; background:color-mix(in srgb, var(--danger) 9%, var(--panel)); color:var(--text); }
.maintenance-banner[hidden] { display:none; }
.maintenance-banner > span:last-child { display:grid; gap:3px; min-width:0; }
.maintenance-banner strong { font-size:13px; }
.maintenance-banner small { color:var(--soft); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.service-checking .app-shell { visibility:hidden; }
.app-shell[hidden] { display:none!important; }
.maintenance-screen[hidden] { display:none!important; }
.maintenance-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:auto; padding:24px 16px; background:var(--bg); }
.maintenance-card { width:min(100%,520px); padding:clamp(24px,6vw,42px); border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); }
.maintenance-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:26px; border-radius:14px; background:var(--mint); color:var(--on-mint); font-size:14px; font-weight:800; letter-spacing:-.07em; }
.maintenance-kicker { color:var(--muted); font:700 10px/1.3 'DM Mono',monospace; letter-spacing:.14em; }
.maintenance-card h1 { margin:14px 0 12px; font-size:clamp(27px,6vw,42px); line-height:1.13; letter-spacing:-.055em; }
.maintenance-card p { margin:0 0 24px; color:var(--soft); font-size:14px; line-height:1.6; }
.maintenance-card button { min-height:48px; padding:0 18px; border:1px solid var(--mint); border-radius:11px; background:var(--mint); color:var(--on-mint); font-weight:800; }
.maintenance-card button:hover { opacity:.88; }
.maintenance-card small { display:block; margin-top:18px; color:var(--muted); font-size:11px; }
.maintenance-symbol { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid var(--danger); border-radius:50%; color:var(--danger); font-size:16px; font-weight:800; }
button[data-maintenance-original-disabled]:disabled { opacity:.5; cursor:not-allowed; }
.operation-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.operation-row strong,.operation-row small { display:block; }
.operation-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.operation-row b { white-space:nowrap; font-size:13px; }
.operation-credit { color:#8eddbb; }
[data-theme="light"] .operation-credit { color:#17794e; }
.operation-debit { color:var(--danger); }
@media (min-width: 640px) { .skeleton-view { grid-template-columns:1.2fr .8fr; } .skeleton-head, .skeleton-content { grid-column:1 / -1; } .skeleton-hero { min-height:205px; } }
@media (min-width: 1024px) { :root { --workspace-gutter:clamp(40px, 6vw, 90px); } .main-content { padding-top:44px; padding-bottom:130px; } .bottom-nav { bottom:22px; left:50%; right:auto; transform:translateX(-50%); display:flex; gap:6px; padding:8px 12px; border:1px solid var(--nav-border); border-radius:24px; box-shadow:var(--shadow); min-width:0; } .nav-item { flex:0 0 auto; flex-direction:row; gap:10px; min-height:48px; padding:0 18px; border-radius:16px; } .nav-item span:last-child { font-size:13px; font-weight:600; } .nav-item.active { background:var(--mint-dim); } }
@media (min-width: 1280px) { .overview-grid { grid-template-columns:1.25fr .75fr; } .hero-card { padding:28px; } .stat-card { padding:22px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width: 359px) {
  .period-choice { min-height:46px; }
  .period-choice strong { font-size:17px; }
  .period-choice.custom-choice strong { font-size:14px; }
  .amount-btn { width:44px; height:44px; font-size:17px; }
  .amount-input-wrap input { font-size:15px; }
  .checkout-bar { padding:8px 10px; }
  .checkout-bar strong { font-size:18px; }
  .checkout-bar .button { padding:0 12px; font-size:12px; }
  .bank-card { min-height:104px; padding:12px 14px; }
  .duo-card { min-height:72px; padding:10px 12px; }
  .quick-panel { padding:6px 2px; }
  .row-item { min-height:46px; }
  .support-view .chat-panel { min-height:56px; }
  .ticket-grid { grid-template-columns:1fr; gap:4px; }
  .ticket-panel { gap:5px; padding:10px; }
  .ticket-panel textarea { min-height:30px; }
  .chip { padding:5px 8px; font-size:10px; }
  .mini-btn { min-height:44px; padding:0 8px; font-size:10px; }
  .support-view .page-head { margin-bottom:8px; min-height:44px; }
  .icon-back { width:44px; height:44px; }
}

/* Новые стили для главной страницы */
.dash-plan-card { margin-bottom:12px; justify-content:flex-start; }
.dash-plan-card .bank-card { margin-bottom:0; flex-basis:min(480px,100%); }
.dash-plan-card .bank-card:not(.unset-card) { cursor:default; }
.dash-plan-card .bank-card:not(.unset-card):hover { transform:none; }

.dashboard-balance-card {
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  color:var(--text);
  text-align:left;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  transition:.2s ease;
}

.dashboard-balance-card:hover {
  background:var(--panel-2);
  border-color:var(--hover-border);
}

.dashboard-balance-card > span:first-child {
  min-width:0;
  display:grid;
  gap:2px;
}

.dashboard-balance-card small {
  color:var(--muted);
  font-size:10px;
}

.dashboard-balance-card strong {
  font-size:20px;
  letter-spacing:-.03em;
}

.dashboard-balance-action {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--soft);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.dashboard-balance-action svg {
  width:16px;
  height:16px;
}

.dash-noplan-card { 
  background:var(--panel); 
  border:2px dashed var(--line); 
  border-radius:16px; 
  padding:24px; 
  margin-bottom:12px;
  text-align:center;
  cursor:pointer;
  transition:.2s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.dash-noplan-card:hover { 
  border-color:var(--hover-border); 
  background:var(--panel-2);
  transform:translateY(-2px);
}
.dash-noplan-card .noplan-icon { font-size:42px; }
.dash-noplan-card h3 { 
  margin:0; 
  font-size:20px; 
  letter-spacing:-.02em; 
}
.dash-noplan-card p { 
  margin:0; 
  color:var(--muted); 
  font-size:13px; 
  max-width:32ch;
}
.dash-noplan-card .button { margin-top:6px; }

.dash-stats-row { 
  display:grid; 
  grid-template-columns:minmax(0,1fr); 
  grid-auto-rows:1fr;
  gap:12px; 
  margin-bottom:12px;
}
.dash-stats-row .dash-stat-card { min-height:132px; }

.dash-stat-card { 
  color:var(--text);
  min-width:0;
  overflow-wrap:anywhere;
  background:var(--panel); 
  border:1px solid var(--line); 
  border-radius:14px; 
  padding:16px; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  gap:8px;
  text-align:center;
  cursor:pointer;
  transition:.2s ease;
}
.dash-stat-card:hover { 
  border-color:var(--hover-border); 
  transform:translateY(-2px);
}
.dash-stat-card .dash-stat-icon { 
  font-size:32px; 
  margin-bottom:4px;
}
.dash-stat-card h4, .dash-stat-label { 
  margin:0; 
  font-size:13px; 
  font-weight:600;
  color:var(--muted);
}
.dash-stat-card > div, .dash-stat-card > span:first-child { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dash-stat-card .duo-progress { margin:6px 0; }
.dash-stat-card:not(button) { cursor:default; }
.dash-stat-card strong { 
  font-size:22px; 
  letter-spacing:-.03em;
  margin-top:2px;
}

/* Shared geometry for payment and dashboard tariff cards.
   Высота зависит от содержимого (карта-продукт с условиями и кнопкой не должна обрезаться),
   пропорция держится через min-height в единицах ширины карты. */
.bank-card.tariff-card { flex:0 0 min(480px,100%); aspect-ratio:auto; min-height:215px; }
/* Белая карта — та же стилистика, высота строго по содержимому: без пустой середины. */
.bank-card.tariff-card.unset-card { aspect-ratio:auto; min-height:215px; }
.unset-cta { margin-top:auto; }
.tariff-card .card-bottom { flex-wrap:wrap; }
.tariff-card .card-price { white-space:nowrap; }
.tariff-card .card-holder { overflow-wrap:anywhere; }
.tariff-card .card-valid { white-space:nowrap; }
@media (min-width: 640px) { .dash-stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 768px) { .dash-stats-row { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.dash-stat-card small { 
  color:var(--muted); 
  font-size:11px;
  margin-top:-4px;
}

@media (max-width: 767px) {
  .dash-stats-row { gap:8px; }
  .dash-stat-card { 
    padding:12px 8px; 
    gap:6px;
  }
  .dash-stat-card .dash-stat-icon { font-size:26px; }
  .dash-stat-card h4 { font-size:11px; }
  .dash-stat-card strong { font-size:18px; }
  .dash-stat-card small { font-size:10px; }
  .dash-noplan-card { padding:20px 16px; }
  .dash-noplan-card .noplan-icon { font-size:36px; }
  .dash-noplan-card h3 { font-size:18px; }
}

@media (max-width: 479px) {
  .dash-stats-row { 
    grid-template-columns:1fr; 
    gap:8px;
  }
  .dash-stat-card { 
    padding:14px; 
    flex-direction:row;
    text-align:left;
    align-items:center;
    justify-content:space-between;
  }
  .dash-stat-card .dash-stat-icon { 
    font-size:28px; 
    margin-bottom:0;
    order:2;
  }
  .dash-stat-card > div { 
    display:flex; 
    flex-direction:column; 
    gap:4px;
  }
  .dash-stat-card h4 { font-size:12px; }
  .dash-stat-card strong { font-size:20px; }
}

/* Мобильные карты: высота по содержимому, кнопка выбора умещается целиком. */
@media (max-width: 639px) { .bank-card.tariff-card, .bank-card.tariff-card.unset-card { aspect-ratio:auto; min-height:215px; } }

/* Компактный режим главной: минимум высоты и отступов у всех блоков. */
.bento { gap:10px; margin-bottom:10px; }
/* Высота карты-продукта — по содержимому: условия тарифа и кнопка не должны обрезаться. */
.bank-card.tariff-card { flex:0 0 min(480px,100%); aspect-ratio:auto; min-height:215px; }
.dash-stat-card { padding:12px 14px; gap:3px; }
.dash-stat-card strong { font-size:20px; }
.dash-stat-card h4, .dash-stat-label { font-size:12px; }
.dash-stat-card small { font-size:10px; }
.dash-stat-card .dash-stat-icon { font-size:18px; margin-top:0; }
.dash-quick { padding:4px; }
.quick-circle { min-height:44px; gap:3px; }
.qc-icon { width:34px; height:34px; }
.qc-icon svg { width:15px; height:15px; }
.quick-circle small { font-size:10px; }
@media (max-width: 639px) { .bank-card.tariff-card { aspect-ratio:auto; min-height:215px; } }

/* Мобильные блоки «Главной»: ровные ряды, без переносов текста и плавающих иконок. */
@media (max-width: 639px) {
  .bento { align-items:stretch; }
  .bento .dash-stat-card { height:100%; text-align:left; align-items:stretch; justify-content:flex-start; padding:10px 12px; gap:2px; }
  .dash-stat-card .dash-stat-icon { display:none; }
  .dash-stat-card h4, .dash-stat-label { font-size:10px; white-space:nowrap; }
  .dash-stat-card strong { font-size:16px; white-space:nowrap; }
  .dash-stat-card strong small { font-size:9px; white-space:nowrap; }
  .dash-stat-card small { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .dash-stat-card .duo-progress { height:4px; margin:4px 0 2px; }
  .quick-row { gap:4px; }
  .quick-circle { min-height:44px; }
  .quick-circle small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width: 639px) {
  .main-content { padding-bottom:132px; }
  #view-root { padding-bottom:24px; }
  .app-shell:has(#view-root[data-page='dashboard']) .main-content { padding-bottom:112px; }
}

/* Общая рабочая область: один ритм для всех маршрутов, без растягивания на широких экранах. */
:root {
  --workspace-max-width:1280px;
  --workspace-gutter:16px;
}

.main-content {
  max-width:var(--workspace-max-width);
  padding-left:var(--workspace-gutter);
  padding-right:var(--workspace-gutter);
}

#view-root {
  scrollbar-gutter:auto;
}

.view,
.payment-view,
.support-view {
  width:100%;
  max-width:none;
}

/* Профиль — компактная центрированная колонка: поздний сброс max-width выше
   не должен растягивать карточки профиля на весь рабочий стол. */
.view.profile-view {
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* Контактная информация: 4 поля ложатся сеткой 2×2 без висящих одиночных плиток. */
.profile-view .personal-fields {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Tablet и шире: единые отступы и крупнее быстрые действия. */
@media (min-width: 640px) {
  :root { --workspace-gutter:32px; }

  .bento {
    gap:14px;
    margin-bottom:14px;
  }

  .dash-quick {
    padding:10px;
  }

  .quick-row {
    gap:10px;
  }

  .quick-circle {
    min-height:64px;
    gap:6px;
  }

  .qc-icon {
    width:42px;
    height:42px;
  }
}

/* Keep the account header inside narrow Telegram/WebApp viewports. */
@media (max-width: 639px) {
  .topbar {
    min-width: 0;
  }

  .topbar-user {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .topbar-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-tools {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* Desktop: карта баланса первым блоком (~480 px), под ней ровный bento-ряд из трёх карточек. */
@media (min-width: 1024px) {
  :root { --workspace-gutter:48px; }

  .main-content {
    padding-top:32px;
    padding-bottom:122px;
  }

  .topbar {
    margin-bottom:18px;
  }

  .dash-stat-card {
    position:relative;
    min-height:0;
    padding:20px;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
  }

  .dash-stat-card > div,
  .dash-stat-card > span:first-child {
    gap:6px;
    max-width:calc(100% - 42px);
  }

  .dash-stat-card .dash-stat-icon {
    position:absolute;
    top:18px;
    right:18px;
    margin:0;
    font-size:24px;
    opacity:.72;
  }

  .dash-stat-card strong {
    font-size:24px;
  }

  .dash-stat-card h4,
  .dash-stat-label {
    font-size:13px;
  }

  .dash-stat-card small {
    font-size:11px;
  }

  .dash-stat-card .duo-progress {
    width:100%;
    margin:8px 0 4px;
  }

  .dash-quick {
    margin-top:0;
    padding:12px;
    border-radius:14px;
  }

  .quick-row {
    gap:12px;
  }

  .quick-circle {
    min-height:72px;
    gap:7px;
  }

  .qc-icon {
    width:44px;
    height:44px;
  }

  .quick-circle small {
    font-size:11px;
  }
}

@media (min-width: 1280px) {
  :root { --workspace-gutter:56px; }

  .main-content {
    padding-top:38px;
  }

  .dash-stat-card {
    padding:22px;
  }

  .dash-stat-card .dash-stat-icon {
    top:20px;
    right:20px;
  }

  .dash-quick {
    padding:14px;
  }
}

/* Карта кошелька до подключения тарифа: без псевдономера и скрытых реквизитов. */
.unset-card .unset-card-body {
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(7px, 2.2cqi, 12px);
}

.unset-card .unset-status {
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  color:#3f4d45;
  font-size:clamp(10px, 2.8cqi, 12px);
  font-weight:700;
}

.unset-card .unset-status i {
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#59685f;
  box-shadow:0 0 0 4px rgba(89,104,95,.12);
}

.unset-card .card-balance {
  gap:3px;
}

.unset-card .card-sub {
  max-width:32ch;
  margin:0;
  color:#607068;
  line-height:1.35;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .app-shell:has(#view-root[data-page='dashboard']) {
    height:100dvh;
    min-height:0;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .main-content {
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }

  .app-shell:has(#view-root[data-page='dashboard']) #view-root {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    margin:0;
    transform:none;
  }
}

/* Desktop navigation stays anchored to the viewport on every route. */
@media (min-width: 1024px) {
  .app-shell:has(#view-root[data-page='dashboard']) {
    height:100dvh;
    min-height:100dvh;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .main-content {
    flex:1;
    min-height:0;
    overflow:hidden;
    padding-bottom:130px;
  }

  .app-shell:has(#view-root[data-page='dashboard']) #view-root {
    flex:1;
    overflow-y:auto;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav {
    position:fixed;
    width:auto;
    margin:0;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
  }
}

/* Mobile dashboard: страница не скроллится — скролл внутренний, внутри #view-root (ТЗ v1, п. 4.2). */
@media (max-width: 639px) {
  .app-shell:has(#view-root[data-page='dashboard']) {
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .main-content {
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }

  .app-shell:has(#view-root[data-page='dashboard']) #view-root {
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .view,
  .app-shell:has(#view-root[data-page='dashboard']) .bento,
  .app-shell:has(#view-root[data-page='dashboard']) .dash-quick {
    min-width:0;
    max-width:100%;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav {
    position:fixed;
    z-index:20;
    left:0;
    right:0;
    bottom:0;
    flex:0 0 auto;
    width:calc(100% - (var(--workspace-gutter) * 2));
    min-height:68px;
    margin:10px auto max(10px, env(safe-area-inset-bottom));
    padding:5px 4px;
    border:1px solid var(--nav-border);
    border-radius:14px;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .nav-item {
    min-width:0;
    min-height:56px;
  }

  .bento {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bento .dash-stat-card,
  .bento .dash-stat-card > div,
  .bento .dash-stat-card > span:first-child {
    min-width:0;
  }

  .bento .dash-stat-card h4,
  .bento .dash-stat-label,
  .bento .dash-stat-card small,
  .bento .dash-stat-card strong,
  .bento .dash-stat-card strong small {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
    hyphens:auto;
  }

  .bento .dash-stat-card h4,
  .bento .dash-stat-label {
    min-height:2.4em;
    line-height:1.2;
  }

  .bento .dash-stat-card > div > small,
  .bento .dash-stat-card > span:first-child > small {
    min-height:2.4em;
    line-height:1.2;
  }

  .quick-row {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .quick-circle {
    min-width:0;
    padding:2px;
  }

  .quick-circle small {
    display:block;
    min-height:2.4em;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    line-height:1.2;
    text-align:center;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .main-content {
    padding-bottom:96px;
  }
}

/* Telegram's mobile controls are overlaid above the WebApp viewport. Keep the
   account header below them while still honoring iOS and Telegram safe areas. */
@media (max-width: 639px) {
  html.telegram-webapp .main-content {
    padding-top:calc(12px + max(88px, env(safe-area-inset-top, 0px), var(--tg-viewport-content-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--tg-viewport-safe-area-inset-top, 0px)));
  }
}

@media (max-width: 359px) {
  :root { --workspace-gutter:10px; }

  .topbar {
    gap:6px;
  }

  .topbar-user {
    min-width:0;
    gap:7px;
    padding-right:8px;
  }

  .topbar-user-name {
    white-space:normal;
    line-height:1.15;
  }

  .topbar-tools {
    flex:0 0 auto;
    gap:6px;
  }

  .bento {
    gap:5px;
  }

  .bento .dash-stat-card {
    padding:9px 7px;
  }

  .bento .dash-stat-card strong {
    font-size:15px;
  }

  .bento .dash-stat-card strong small,
  .bento .dash-stat-card small {
    font-size:8px;
  }

  .dash-quick {
    padding:5px 2px;
  }

  .quick-row {
    gap:2px;
  }

  .quick-circle small {
    font-size:8px;
  }
}

/* Главная: тарифная карта сохраняет банковские пропорции в обоих состояниях. */
.app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card {
  flex:0 0 auto;
  width:100%;
  align-self:start;
}

.app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card .bank-card {
  flex-basis:min(480px,100%);
  aspect-ratio:auto;
  height:auto !important;
  align-self:start;
}
/* Пропорция карты на «Главной» задаётся общими правилами .bank-card.tariff-card ниже. */

@media (max-width: 639px) {
  .app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card .bank-card {
    aspect-ratio:auto;
    padding:16px;
  }

  .app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card .unset-card {
    min-height:0;
  }
}

.plan-change-control { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.plan-change-control > div { display:grid; gap:2px; min-width:0; }
.plan-change-control strong { font-size:12px; }
.plan-change-control small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-change-control .button { flex:0 0 auto; min-height:44px; padding:0 12px; font-size:11px; }
.plan-change-control .button:disabled { cursor:not-allowed; opacity:.55; }
.key-box { display:flex; align-items:center; gap:8px; min-width:0; }
.key-box code { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:anywhere; color:var(--code-text); }
.key-box button { min-height:44px; padding:0 11px; flex:0 0 auto; border:1px solid var(--line-2); border-radius:9px; background:var(--panel-3); color:var(--text); font-size:11px; font-weight:700; }
.key-box button:hover { border-color:var(--hover-border); }
.key-box button:disabled { opacity:.5; cursor:not-allowed; }
.profile-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.profile-stats-grid > div { min-width:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-3); }
.profile-stats-grid span, .profile-stats-grid strong { display:block; }
.profile-stats-grid span { color:var(--muted); font-size:10px; }
.profile-stats-grid strong { margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
@media (max-width: 767px) { .profile-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 479px) { .plan-change-control { align-items:flex-start; flex-direction:column; } .plan-change-control .button { width:100%; } .key-box { flex-wrap:wrap; } .key-box code { flex-basis:100%; } .key-box button { flex:1 1 auto; } }
@media (max-width: 479px) { .access-notice-actions { width:100%; } .access-notice-actions .button { flex:1; } }

.vpn-traffic-actions { display:flex; margin-top:14px; }
.vpn-traffic-actions .button { min-height:44px; width:100%; white-space:normal; }
.traffic-package-list { display:grid; gap:8px; margin:4px 0 12px; }
.traffic-package-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:60px; padding:10px 14px; border:1px solid var(--line-2); border-radius:12px; color:var(--text); background:var(--panel-3); text-align:left; cursor:pointer; }
.traffic-package-option:hover, .traffic-package-option:focus-visible { border-color:var(--hover-border); background:var(--panel-2); }
.traffic-package-option:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.traffic-package-option span { display:grid; gap:2px; min-width:0; }
.traffic-package-option strong { font-size:15px; }
.traffic-package-option small, .traffic-package-note { color:var(--muted); font-size:11px; }
.traffic-package-option b { flex:0 0 auto; font-size:16px; }
.modal .traffic-package-note { margin:4px 0 14px; text-align:left; }
.plan-server-info { display:grid; gap:12px; margin-top:14px; }
.plan-server-details { min-width:0; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.plan-server-details summary { min-height:48px; display:flex; align-items:center; cursor:pointer; color:var(--text); font-size:13px; font-weight:700; }
.plan-server-details summary::after { content:'+'; margin-left:auto; font-size:20px; font-weight:400; }
.plan-server-details[open] summary::after { content:'−'; }
.plan-server-details summary:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.plan-server-details p { margin:0 0 8px; color:var(--muted); font-size:12px; }
.plan-server-details ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; margin:0 0 14px; padding:0; list-style:none; }
.plan-server-details li { min-width:0; overflow-wrap:anywhere; color:var(--soft); font-size:12px; }
@media (min-width:768px) { .plan-server-info { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }

/* Профиль: собственный ритм секций и значения без обрезания. */
.view.profile-view { display:grid; align-content:start; gap:16px; }
.profile-view > .page-head,
.profile-view > .panel,
.profile-view > .row-list { min-width:0; margin:0; }
.profile-view .profile-edit-card,
.profile-view .gmail-card,
.profile-view .personal-data-card { padding:clamp(16px,2vw,24px); }
.profile-view .profile-hero { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px; }
.profile-view .profile-hero-copy h3,
.profile-view .profile-hero-copy p { overflow-wrap:anywhere; }
.profile-view .profile-hero-copy h3 { font-size:clamp(18px,2vw,22px); line-height:1.25; }
.profile-view .profile-hero .button { grid-column:1 / -1; min-height:44px; width:100%; margin:0; }
.profile-view .profile-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; padding-top:20px; }
.profile-view .profile-stats-grid > div { display:grid; align-content:start; gap:6px; min-height:78px; padding:12px; }
.profile-view .profile-stats-grid span { font-size:11px; line-height:1.3; }
.profile-view .profile-stats-grid strong { margin:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; font-size:13px; line-height:1.35; }
.profile-view .personal-fields { grid-template-columns:1fr; gap:10px; margin:16px 0 0; }
.profile-view .personal-field { min-height:62px; padding:11px 13px; }
.profile-view .personal-field strong,
.profile-view .gmail-row strong { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.profile-view .gmail-row { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px 12px; }
.profile-view .gmail-row .button { grid-column:1 / -1; min-height:44px; width:100%; }
.profile-view .gmail-mark { width:40px; height:40px; color:var(--text); font-size:21px; }
@media (min-width:480px) {
  .profile-view .gmail-row { grid-template-columns:40px minmax(0,1fr) auto; }
  .profile-view .gmail-row .button { grid-column:auto; width:auto; }
}
@media (min-width:640px) {
  .profile-view .profile-hero { grid-template-columns:56px minmax(0,1fr) auto; }
  .profile-view .profile-hero .button { grid-column:auto; width:auto; }
  .profile-view .profile-stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-view .personal-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Выбор тарифа: сравнение видно до раскрытия полного списка серверов. */
.view.plan-picker-view { max-width:1080px; margin-inline:auto; }
.plan-picker-view .plan-change-control { margin:0 0 16px; }
.plan-picker-intro { display:grid; gap:7px; margin:0 0 18px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.plan-picker-intro p { margin:0; }
.plan-picker-lead { max-width:none; color:var(--text); font-size:15px; font-weight:700; line-height:1.45; }
.plan-picker-trial { color:var(--soft); font-size:12px; }
.plan-picker-grid { gap:16px; margin:0; }
.plan-option { display:grid; align-content:start; gap:16px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.plan-option-premium { border-color:var(--premium-border); background:var(--featured-grad); }
.plan-option-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; min-width:0; }
.plan-option-heading > div { min-width:0; }
.plan-option-type { display:block; margin-bottom:5px; color:var(--muted); font:600 10px 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.plan-option-heading h3 { margin:0; font-size:clamp(22px,2.8vw,28px); letter-spacing:-.04em; line-height:1.15; }
.plan-option-heading p { margin:5px 0 0; color:var(--soft); font-size:12px; line-height:1.45; }
.plan-option-heading > strong { flex:0 0 auto; white-space:nowrap; font-size:21px; letter-spacing:-.04em; }
.plan-option-heading > strong small { margin-left:2px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; }
.plan-option-benefits { display:grid; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.plan-option-benefits > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; }
.plan-option-benefits > div + div { border-top:1px solid var(--line-soft); }
.plan-option-benefits span { min-width:0; color:var(--soft); font-size:12px; }
.plan-option-benefits strong { flex:0 0 auto; color:var(--text); font-size:15px; }
.plan-option-detail { margin:0; color:var(--soft); font-size:12px; line-height:1.5; }
.plan-option-flags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:32px; }
.plan-option-flags .tgs-flag { width:28px; height:28px; font-size:24px; }
.plan-picker-grid .plan-option .bank-card { width:100%; max-width:none; margin:0; aspect-ratio:auto; min-height:215px; outline-offset:4px; }
.plan-picker-grid .plan-option .bank-card:focus-visible { outline:2px solid var(--mint); }
.plan-option-action { margin:-5px 0 0; color:var(--text); font-size:12px; font-weight:700; text-align:center; }
.plan-option-action span { margin-left:3px; }
.plan-server-info { gap:16px; margin-top:16px; }
.plan-server-details { padding-inline:16px; background:var(--panel); }
.plan-server-details summary { gap:8px; }
.plan-server-details summary::marker { content:''; }
.plan-server-details ul { grid-template-columns:1fr; gap:0; margin-bottom:16px; }
.plan-server-details li { display:flex; align-items:center; gap:9px; min-height:38px; padding:6px 0; border-top:1px solid var(--line-soft); }
.server-label-flag { display:grid; place-items:center; flex:0 0 26px; }
.tgs-flag { display:inline-grid; place-items:center; width:26px; height:26px; flex:0 0 auto; overflow:hidden; font-size:22px; line-height:1; }
.tgs-flag-ready { font-size:0; }
.tgs-flag svg { display:block; width:100% !important; height:100% !important; }
.server-flag { width:36px; height:36px; background:var(--panel-4); }
.server-flag .tgs-flag { width:28px; height:28px; }
@media (min-width:640px) { .plan-server-details ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; } }
@media (min-width:768px) { .plan-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:359px) { .plan-option-heading { flex-wrap:wrap; } }

/* Низкие вьюпорты (проверка по ТЗ v1 п. 4.4, 600–1080px): каркас уплотняется,
   экраны не обрываются на половине высоты, скролл остаётся внутренним. */
@media (max-height: 700px) {
  .main-content { padding-top:12px; padding-bottom:96px; }
  .topbar { min-height:36px; }
  .bank-card.tariff-card { min-height:150px; }
  .dash-stat-card { padding:10px 12px; }
  .bottom-nav { min-height:60px; }
  .period-choice { min-height:56px; }
}
@media (max-height: 600px) {
  .main-content { padding-top:8px; padding-bottom:84px; }
  .bank-card.tariff-card { min-height:132px; }
  .period-choice { min-height:48px; }
}

/* ===== Юридические документы (doc-* маршруты) ===== */
.doc-view { max-width:760px; margin:0 auto; }
.doc-article { display:grid; gap:16px; overflow-wrap:break-word; }
.doc-hero { display:grid; justify-items:center; gap:12px; text-align:center; padding:24px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.doc-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:var(--panel-4); font-size:22px; }
.doc-eyebrow { margin:0; color:var(--mint); font:700 10px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.doc-title { margin:0; font-size:clamp(21px,3.6vw,27px); letter-spacing:-.02em; color:var(--text); }
.doc-lead { margin:0; max-width:56ch; color:var(--text); font-size:14px; line-height:1.6; }
.doc-meta { display:grid; gap:8px; width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); font-size:13px; line-height:1.5; text-align:left; }
.doc-content { display:grid; gap:14px; }
.doc-section { padding:18px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.doc-section h3 { margin:0 0 10px; font-size:16px; letter-spacing:-.01em; color:var(--text); }
.doc-section p { margin:0 0 12px; color:var(--text); font-size:14px; line-height:1.68; }
.doc-section p:last-child { margin-bottom:0; }
.doc-section ul, .doc-section ol { margin:10px 0 0; padding-left:20px; color:var(--text); font-size:14px; line-height:1.65; }
.doc-section li + li { margin-top:8px; }
.doc-section strong { color:var(--text); }
.doc-note { margin-top:12px; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-3); color:var(--text); font-size:13px; line-height:1.6; }
.doc-article a { color:var(--text); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.doc-article a:hover { color:var(--mint-strong); }
.doc-footer { padding:4px 6px 0; text-align:center; color:var(--muted); font-size:13px; line-height:1.55; }
@media (min-width:640px) {
  .doc-section { padding:20px 22px; }
  .doc-section p, .doc-section ul, .doc-section ol { font-size:14.5px; }
  .doc-hero { padding:26px 24px; }
}
@media (max-width:639px) {
  .doc-hero { padding:18px 14px; }
  .doc-section { padding:16px 14px; }
}

/* ===== Главная: компактный банковский блок (карта + действия рядом с ней) ===== */
/* Боковая панель «Подписка активна» удалена по прямому указанию владельца.
   Её данные (тариф, срок, остаток дней, баланс) уже показаны на самой карте. */
.dash-hint { margin:8px 0 10px; color:var(--muted); font-size:12px; line-height:1.45; }
.card-top-left { display:flex; align-items:center; gap:8px; }
.card-contactless { display:inline-flex; width:18px; height:18px; color:rgba(255,255,255,.62); }
.card-contactless svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.bank-card.gold .card-contactless { color:rgba(233,212,153,.6); }
.bank-card.unset-card .card-contactless { color:rgba(21,32,26,.42); }
.card-status { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:3px 9px; border-radius:20px; border:1px solid rgba(129,220,178,.45); background:rgba(129,220,178,.12); color:#dff3e8; font:700 9px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.card-status i { width:5px; height:5px; border-radius:50%; background:#81dcb2; }
.bank-card.gold .card-status { border-color:rgba(233,200,113,.45); background:rgba(233,200,113,.12); color:#f0e0b4; }
.bank-card.gold .card-status i { background:#e9c871; }
.card-product { display:grid; gap:3px; }
.card-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:2px; }
.card-features > span { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding-top:6px; border-top:1px solid rgba(255,255,255,.12); }
.bank-card.gold .card-features > span { border-color:rgba(233,200,113,.18); }
.card-features small { color:rgba(255,255,255,.55); font-size:clamp(9px, 2.4cqi, 11px); }
.bank-card.gold .card-features small { color:rgba(233,212,153,.6); }
.card-features b { font-size:clamp(11px, 3cqi, 14px); font-weight:700; }
.card-note-line { color:rgba(255,255,255,.5); font-size:clamp(9px, 2.2cqi, 10px); letter-spacing:.02em; }
.bank-card.gold .card-note-line { color:rgba(233,212,153,.55); }
/* Белая карта «тариф не выбран» — светлые разделители и текст условий. */
.bank-card.unset-card .card-features > span { border-color:rgba(21,32,26,.16); }
.bank-card.unset-card .card-features small { color:rgba(21,32,26,.55); }
.bank-card.unset-card .card-features b { color:#15201a; }
/* Единственная главная кнопка — в панели «К оплате»; действие на карте вторичное. */
.card-switch-cta { align-self:stretch; min-height:40px; margin-top:2px; background:rgba(255,255,255,.08); color:#eef2ef; border:1px solid rgba(255,255,255,.32); box-shadow:none; font-size:12px; }
.card-switch-cta:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.card-switch-cta:disabled { opacity:.55; cursor:not-allowed; }
.bank-card.gold .card-switch-cta { background:rgba(233,200,113,.1); border-color:rgba(233,200,113,.42); color:#f2e5c2; }
.bank-card.gold .card-switch-cta:hover { background:rgba(233,200,113,.18); }
/* Точки-индикаторы кошелька: подсказывают, что карточек несколько, листает пользователь.
   Сама точка мелкая, но зона нажатия — 44×44 px по требованию ТЗ п. 6.2. */
.card-dots { display:flex; justify-content:center; gap:0; margin-top:2px; }
.card-dot { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; }
.card-dot::before { content:''; position:absolute; inset:18px; border-radius:50%; background:var(--line-2); transition:.2s; }
.card-dot.active::before { background:var(--text); transform:scale(1.2); }
.card-dot:focus-visible { outline:2px solid var(--mint); outline-offset:-4px; border-radius:10px; }
@media (min-width: 1024px) { .card-dots { display:none; } }
/* «Главная»: карта и блок из четырёх круглых кнопок стоят в одной строке (как в банковском приложении),
   ниже — горизонтальный ряд плиток. Никаких пустых панелей и «висящих» блоков. */
.quick-row.dash-quick { margin-bottom:0; margin-top:10px; }
.dash-quick { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:8px 6px; }
.dash-quick .quick-circle { min-height:56px; }
@media (min-width: 768px) {
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block {
    display:grid;
    grid-template-columns:minmax(0,480px) minmax(0,1fr);
    gap:12px;
    align-items:stretch;
  }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .dash-plan-card { width:100%; justify-content:flex-start; margin-bottom:0; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .dash-plan-card .bank-card { flex-basis:100%; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .dash-quick {
    grid-template-columns:1fr;
    grid-auto-rows:minmax(0,1fr);
    align-content:stretch;
    gap:6px;
    padding:8px;
    margin-top:0;
  }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .quick-circle {
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:0;
    padding:0 12px;
    text-align:left;
  }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .quick-circle small { font-size:12px; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .qc-icon { width:42px; height:42px; flex:0 0 auto; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .qc-icon svg { width:19px; height:19px; }
}
/* На широких экранах панель кнопок широкая — раскладываем действия в 2×2, чтобы не тянуть строки. */
@media (min-width: 1200px) {
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .dash-quick {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(0,1fr);
  }
}
/* Плитки «Главной»: текст слева, значок в углу — ровные горизонтальные блоки на всех ширинах. */
.bento .dash-stat-card { position:relative; text-align:left; align-items:stretch; justify-content:flex-start; padding:14px 46px 14px 16px; gap:4px; }
.bento .dash-stat-card .dash-stat-icon { position:absolute; top:12px; right:14px; margin:0; }
.bento .dash-stat-card h4, .bento .dash-stat-label,
.bento .dash-stat-card strong, .bento .dash-stat-card small,
.bento .dash-stat-card strong small { white-space:normal; overflow:visible; text-overflow:clip; }
/* Мобильная компактная сетка: два горизонтальных блока в ряд (реферальный блок убран с «Главной»). */
@media (max-width: 639px) {
  .bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento .dash-stat-card { text-align:left; align-items:stretch; }
  .bento .dash-stat-card h4, .bento .dash-stat-label,
  .bento .dash-stat-card strong, .bento .dash-stat-card small,
  .bento .dash-stat-card strong small { white-space:normal; overflow:visible; text-overflow:clip; }
  .bento .dash-stat-card strong { font-size:18px; }
  .bento .dash-stat-card h4, .bento .dash-stat-label { font-size:11px; }
  .bento .dash-stat-card small { font-size:10px; }
}
@media (max-width: 359px) {
  .bento { grid-template-columns:1fr; }
}
/* Компактные условия тарифа: одна строка из трёх колонок, кнопка не меньше 44 px на тач-устройствах. */
@media (max-width: 639px) {
  .card-features small { font-size:9px; }
  .card-switch-cta { min-height:44px; }
}
/* ===== Пропорции банковской карты (1.586) для карт баланса и тарифов =====
   cqi здесь не годится: контейнером оказывается не сама карта, а страница.
   Поэтому высота задаётся по брейкпоинтам под реальную ширину карты. */
.bank-card.tariff-card, .bank-card.tariff-card.unset-card { min-height:215px; }
.plan-picker-grid .plan-option .bank-card { min-height:205px; }
@media (min-width: 640px) {
  .bank-card.tariff-card, .bank-card.tariff-card.unset-card { min-height:280px; }
  .plan-picker-grid .plan-option .bank-card { min-height:200px; }
}
@media (min-width: 768px) {
  .bank-card.tariff-card, .bank-card.tariff-card.unset-card { min-height:300px; }
  .plan-picker-grid .plan-option .bank-card { min-height:220px; }
}
@media (min-width: 1024px) {
  .plan-picker-grid .plan-option .bank-card { min-height:270px; }
}
@media (min-width: 1280px) {
  .plan-picker-grid .plan-option .bank-card { min-height:315px; }
}

/* Desktop workspace and fixed navigation share the same 680 px visual width. */
@media (min-width: 1024px) {
  html[data-design='onyx'][data-theme] { --desktop-workspace-width:680px; }
  html[data-design='onyx'][data-theme] body .app-shell:has(#view-root[data-page]) .main-content {
    max-width:calc(var(--desktop-workspace-width) + var(--workspace-gutter) * 2);
  }
  html[data-design='onyx'][data-theme] body .app-shell #view-root[data-page] > .view[class] {
    width:100%; max-width:var(--desktop-workspace-width); margin-inline:auto;
  }
  html[data-design='onyx'][data-theme] body .app-shell #mobile-nav.bottom-nav {
    width:min(var(--desktop-workspace-width),calc(100vw - 64px));
  }
}