/* MARKTUN unified product interface — 2026 */
:root {
  --bg: var(--mt-color-bg-canvas);
  --bg-elevated: var(--mt-color-primitive-ink-900);
  --surface: var(--mt-color-bg-surface);
  --surface-soft: var(--mt-color-bg-surface-soft);
  --surface-raised: var(--mt-color-bg-surface-raised);
  --text: var(--mt-color-text-primary);
  --text-soft: var(--mt-color-text-secondary-strong);
  --muted: var(--mt-color-text-secondary);
  --primary: var(--mt-color-action-primary);
  --primary-strong: var(--mt-color-action-primary-strong);
  --primary-soft: var(--mt-color-action-primary-soft);
  --success: var(--mt-color-status-success);
  --warning: var(--mt-color-status-warning);
  --danger: var(--mt-color-status-error);
  --border: var(--mt-color-border-subtle);
  --border-strong: var(--mt-color-border-strong);
  --focus: var(--mt-color-focus-soft);
  --shadow: var(--mt-shadow-overlay);
  --radius: var(--mt-radius-panel);
  --radius-sm: var(--mt-radius-control);
  --shell: 1220px;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.modal-open { overflow: hidden; }
body::before { display: none !important; }
a { color: inherit; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); letter-spacing: -.035em; line-height: 1.1; }
h1 { margin-bottom: 20px; font-size: clamp(2.45rem, 5.6vw, 5rem); font-weight: 700; }
h2 { margin-bottom: 14px; font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 650; }
h3 { margin-bottom: 9px; font-size: 1.12rem; font-weight: 650; }
p { color: var(--muted); }
::selection { background: rgba(102,120,255,.4); color: white; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hidden { display: none !important; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; translate: 0 -150%; padding: 10px 14px; border-radius: 10px; color: white; background: var(--primary); }
.skip-link:focus { translate: 0; }
.site-backdrop { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 77% 17%, rgba(82,78,255,.12), transparent 31%), radial-gradient(circle at 11% 42%, rgba(35,87,255,.06), transparent 28%); }
.app-shell { width: min(100%, calc(var(--shell) + 48px)); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 0 24px; }

/* Header and footer */
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; min-height: var(--header-height); margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background: rgba(2,8,20,.84); box-shadow:none!important; backdrop-filter: blur(20px); }
.site-header::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--header-height); z-index: -1; border-bottom: 1px solid var(--border); background: rgba(2,8,20,.86); backdrop-filter: blur(20px); }
.site-header__bar { display: flex; align-items: center; }
.site-header__panel { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 32px; margin-left: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; }
.brand__mark { width: 28px; height: 28px; color: #7888ff; }
.brand__text { font-size: 1.02rem; font-weight: 700; letter-spacing: .07em; }
.site-nav, .header-actions { display: flex; align-items: center; gap: 8px; }
.site-nav a { padding: 10px 13px; border-radius: 10px; color: #b3bdcc; font-size: .92rem; font-weight: 500; text-decoration: none; transition: color .18s, background .18s; }
.site-nav a:hover, .site-nav a.is-active { color: white; background: rgba(255,255,255,.055); }
.site-nav-toggle { display: none; width: 44px; height: 44px; place-content: center; gap: 5px; border: 0; color: white; background: transparent; }
.site-nav-toggle span { width: 22px; height: 2px; background: currentColor; }
.account-menu { position: relative; }
.account-menu summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 11px 5px 6px; cursor: pointer; list-style: none; border: 1px solid var(--border); border-radius: 14px; color: white; font-weight: 600; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg,var(--primary),var(--primary-strong)); }
.account-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; display: grid; min-width: 220px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: #0b1525; box-shadow: var(--shadow); }
.account-menu__panel a, .account-menu__panel button { padding: 10px 12px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu__panel a:hover, .account-menu__panel button:hover { color: white; background: rgba(255,255,255,.06); }
.site-footer { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; margin-top: 110px; padding: 54px 0 max(46px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.site-footer__brand p { max-width: 300px; margin: 16px 0 0; }
.site-footer__links { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.site-footer__group { display: grid; align-content: start; gap: 10px; }
.site-footer__group span { margin-bottom: 4px; color: white; font-size: .86rem; font-weight: 650; }
.site-footer__group a { color: var(--muted); font-size: .88rem; text-decoration: none; }
.site-footer__group a:hover { color: white; }

/* Shared controls */
.page { display: grid; gap: 24px; min-height: 50vh; padding-top: 56px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid transparent; border-radius: 13px; font-size: .92rem; font-weight: 650; line-height: 1; text-align: center; text-decoration: none; cursor: pointer; transition: translate .18s, border-color .18s, background .18s, box-shadow .18s; }
.button:hover:not(:disabled) { translate: 0 -1px; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button--primary { color: white; background: linear-gradient(135deg,var(--primary),var(--primary-strong)); box-shadow: 0 10px 30px rgba(85,92,255,.2); }
.button--primary:hover:not(:disabled) { box-shadow: 0 13px 35px rgba(85,92,255,.3); }
.button--secondary { border-color: rgba(117,126,255,.38); color: #eef0ff; background: rgba(102,120,255,.1); }
.button--ghost { border-color: var(--border); color: var(--text-soft); background: rgba(255,255,255,.025); }
.button--danger { border-color: rgba(255,100,116,.35); color: #ffdfe3; background: rgba(255,100,116,.1); }
.button--block { width: 100%; }
.panel, .profile-card, .legal-section, .auth-card { padding: clamp(22px,3vw,34px); border: 1px solid var(--border); border-radius: var(--radius); background: rgba(9,19,33,.88); box-shadow: 0 18px 55px rgba(0,0,0,.16); }
.panel--soft { background: rgba(9,19,33,.56); }
.panel--hero { padding: clamp(28px,4.5vw,54px); }
.panel__head, .section-heading { display: grid; gap: 6px; }
.panel__head p, .section-heading p { max-width: 66ch; margin-bottom: 0; }
.section-heading--center { justify-items: center; text-align: center; }
.section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.page-lead { max-width: 680px; color: #aab4c6; font-size: clamp(1.02rem,1.4vw,1.2rem); }
.eyebrow { margin-bottom: 6px; color: #96a3ba; font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.form-stack, .stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; color: var(--text-soft); font-size: .88rem; font-weight: 550; }
.field input, .field select, .field textarea, .form-inline input, .modal-card input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; outline: 0; color: white; background: #050d1a; transition: border-color .18s, box-shadow .18s; }
.field textarea { min-height: 120px; padding-block: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .form-inline input:focus, .modal-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.field input::placeholder, textarea::placeholder { color: #667287; }
.field-hint { margin: -8px 0 2px; color: #7f8a9d; font-size: .8rem; }
.field-hint[data-tone="good"] { color: var(--success); }
.field-meta { display: flex; justify-content: flex-end; margin-top: -5px; }
.field-meta a, .auth-footnote a, .auth-legal a, .text-link, .back-link { color: #a8b2ff; }
.password-field-wrap { position: relative; display: block; }
.password-field-wrap input { padding-right: 96px; }
.password-toggle { position: absolute; top: 7px; right: 7px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; color: #aeb7c8; background: rgba(255,255,255,.06); cursor: pointer; }
.form-feedback { margin: 0; padding: 11px 13px; border: 1px solid rgba(255,100,116,.22); border-radius: 10px; color: #ffc5cc; background: rgba(255,100,116,.08); font-size: .86rem; }
.inline-note, .callout, .empty-card { padding: 15px 17px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-soft); background: rgba(255,255,255,.035); }
.callout--warning { border-color: rgba(245,184,75,.26); color: #ffe0a3; background: rgba(245,184,75,.07); }
.status-badge { display: inline-flex; width: fit-content; min-height: 30px; align-items: center; padding: 4px 10px; border-radius: 99px; color: #c5ccda; background: rgba(255,255,255,.07); font-size: .76rem; font-weight: 650; }
.status-badge--success, .status-badge--active { color: #a9f3cf; background: rgba(57,201,138,.13); }
.status-badge--warning, .status-badge--pending { color: #ffe0a3; background: rgba(245,184,75,.13); }
.status-badge--danger, .status-badge--error { color: #ffc0c8; background: rgba(255,100,116,.13); }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(390px,calc(100vw - 32px)); padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: 13px; color: white; background: #101b2c; box-shadow: var(--shadow); }
.modal-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,4,12,.78); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 1; width: min(440px,100%); padding: 28px; border: 1px solid var(--border-strong); border-radius: 20px; background: #0a1525; box-shadow: var(--shadow); }
.modal-card h2 { padding-right: 30px; font-size: 1.45rem; }
.modal-card input { margin: 8px 0 18px; }
.modal-close { position: absolute; top: 12px; right: 12px; display:grid; width: 44px; height: 44px; place-items:center; border: 0; border-radius: 11px; color: white; background: rgba(255,255,255,.06); cursor: pointer; }
.modal-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.details-list { display: grid; gap: 8px; }
.detail-row { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 14px; border-radius: 11px; background: rgba(255,255,255,.035); }
.detail-row span { color: var(--muted); }
.form-inline { display: flex; gap: 10px; }
.form-inline input { flex: 1; }
.help-tip { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.08); font-size: .7rem; }
.help-tip__content { display: none; }

/* Landing */
.page--landing, .page--home { padding-top: 0; }
.home-hero { display: grid; min-height: min(760px,calc(100dvh - var(--header-height))); grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(40px,7vw,100px); padding: 76px 0 56px; }
.home-hero__copy h1 { max-width: 720px; }
.home-hero__copy .page-lead { max-width: 600px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.home-hero .hero-actions .button { flex:0 0 auto; width:auto; }
.home-trust { display: flex; flex-wrap: wrap; gap: 26px; margin: 28px 0 0; padding: 0; list-style: none; }
.home-trust li { display: flex; align-items: center; gap: 9px; color: #9ca8ba; font-size: .86rem; }
.home-trust svg { width: 20px; height: 20px; fill: none; stroke: #7e8eff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-hero__visual { position: relative; display: grid; place-items: center; min-height: 580px; }
.home-hero__visual::before { content:""; position:absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(84,76,255,.24),rgba(45,73,255,.08) 42%,transparent 72%); filter: blur(15px); }
.app-preview { position: relative; width: min(350px,75vw); aspect-ratio: .58; padding: 34px 24px 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 44px; background: linear-gradient(160deg,#081426,#050b17 64%); box-shadow: 0 34px 90px rgba(0,0,0,.55), inset 0 0 0 5px rgba(255,255,255,.025); transform: rotate(2deg); }
.app-preview::before { content:""; position:absolute; top: 11px; left: 50%; width: 82px; height: 20px; border-radius: 20px; background: #020711; translate:-50% 0; }
.app-preview__top { display:flex; align-items:center; justify-content:space-between; }
.app-preview__brand { font-size:.83rem; font-weight:700; letter-spacing:.08em; }
.app-preview__account { display:grid; width:30px; height:30px; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); }
.app-preview__state { display:grid; gap:5px; margin-top:56px; text-align:center; }
.app-preview__state strong { font-size:1.15rem; }
.app-preview__state span { color:var(--muted); font-size:.72rem; line-height:1.4; }
.vpn-control { display:grid; width:146px; height:146px; place-items:center; margin:32px auto; border-radius:50%; background:radial-gradient(circle at 50% 42%,rgba(110,105,255,.3),rgba(79,71,246,.09) 56%,transparent 58%); box-shadow:0 0 50px rgba(96,86,255,.27); }
.vpn-control span { display:grid; width:104px; height:104px; place-items:center; border:1px solid rgba(137,143,255,.45); border-radius:50%; background:linear-gradient(145deg,#596eff,#7166ff); box-shadow:0 16px 40px rgba(74,63,255,.35); }
.vpn-control svg { width:37px; fill:none; stroke:white; stroke-width:1.8; stroke-linecap:round; }
.app-preview__row { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.035); }
.app-preview__row div { display:grid; flex:1; }
.app-preview__row strong { font-size:.78rem; }
.app-preview__row small { color:var(--muted); font-size:.67rem; }
.app-preview__icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--primary-soft); }
.app-preview__icon svg { width:18px; fill:none; stroke:#8998ff; stroke-width:1.6; }
.app-preview__chevron { width:16px; fill:none; stroke:var(--muted); }
.app-preview__stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.app-preview__stats div { display:grid; grid-template-columns:auto 1fr; gap:0 6px; padding:11px; border-radius:12px; background:rgba(255,255,255,.025); }
.app-preview__stats span { grid-row:1/3; }
.app-preview__stats strong { font-size:.75rem; }
.app-preview__stats small { color:var(--muted); font-size:.62rem; }
.stat-down { color:#65dca4; } .stat-up { color:#8a97ff; }
.home-section { padding: clamp(76px,10vw,128px) 0; border-top: 1px solid var(--border); }
.home-section .section-heading { max-width: 720px; margin-bottom: 44px; }
.home-section .section-heading--center { margin-inline:auto; }
.feature-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; border:1px solid var(--border); border-radius:22px; background:var(--border); }
.feature-item { min-height:245px; padding:30px 26px; background:var(--bg-elevated); }
.feature-icon { display:grid; width:46px; height:46px; place-items:center; margin-bottom:42px; border-radius:13px; color:#8996ff; background:var(--primary-soft); }
.feature-icon svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feature-item p { margin:0; font-size:.92rem; }
.step-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0; list-style:none; }
.step-list li { display:grid; grid-template-columns:auto 1fr; gap:19px; padding:26px 0; border-top:1px solid var(--border-strong); }
.step-list li>span { color:#7687ff; font-size:.8rem; font-weight:650; }
.step-list p { margin:0; }
.pricing-card { max-width:960px; padding:clamp(26px,4vw,42px); border:1px solid rgba(113,107,255,.28); border-radius:24px; background:linear-gradient(145deg,rgba(102,120,255,.1),rgba(9,19,33,.8) 52%); box-shadow:0 30px 80px rgba(0,0,0,.22); }
.pricing-card__main, .pricing-card__action { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.pricing-price { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.pricing-price strong { font-size:2.25rem; letter-spacing:-.06em; }
.pricing-price span { color:var(--muted); }
.pricing-features { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; margin:34px 0; padding:25px 0; border-block:1px solid var(--border); list-style:none; }
.pricing-features li::before { content:"✓"; margin-right:10px; color:var(--success); }
.pricing-card__action>div { display:grid; }
.pricing-card__action span { color:var(--muted); font-size:.85rem; }
.home-trust-section { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.home-trust-section .section-heading { margin-bottom:0; }

/* Authentication */
.page--login, .page--register { width:100%!important; max-width:none!important; margin-inline:0!important; padding-top:32px; }
.auth-page { display:grid; width:100%!important; max-width:none!important; min-height:690px; grid-template-columns:1.1fr minmax(390px,500px); margin:0!important; overflow:hidden; border:1px solid var(--border); border-radius:28px; background:#050d1b; box-shadow:var(--shadow); }
.auth-visual { position:relative; display:flex; min-height:690px; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(34px,5vw,64px); background:radial-gradient(circle at 60% 60%,rgba(89,82,255,.23),transparent 36%),linear-gradient(150deg,#061127,#030916 72%); }
.auth-visual::after { content:""; position:absolute; right:-100px; bottom:-180px; width:480px; height:480px; border:1px solid rgba(126,136,255,.18); border-radius:50%; box-shadow:0 0 0 70px rgba(117,124,255,.025),0 0 0 140px rgba(117,124,255,.02); }
.auth-visual__copy { position:relative; z-index:1; max-width:520px; }
.auth-visual__brand { display:block; margin-bottom:90px; color:#8c99ff; font-size:.82rem; font-weight:700; letter-spacing:.12em; }
.auth-visual h1 { margin-bottom:18px; font-size:clamp(2.6rem,5vw,4.5rem); }
.auth-visual p { max-width:460px; font-size:1.05rem; }
.auth-card { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,56px); border:0; border-left:1px solid var(--border); border-radius:0; background:#081321; box-shadow:none; }
.auth-card__head { margin-bottom:24px; }
.auth-card__head h2 { margin-bottom:9px; font-size:2rem; }
.auth-card__head p { margin:0; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:22px; padding:5px; border-radius:12px; background:rgba(255,255,255,.045); }
.auth-tabs button { min-height:40px; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }
.auth-tabs button.is-active { color:white; background:#162239; box-shadow:0 3px 12px rgba(0,0,0,.2); }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#687489; font-size:.75rem; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.telegram-slot { display:grid; justify-items:center; }
.auth-footnote { margin:25px 0 0; text-align:center; font-size:.88rem; }
.auth-legal { margin:18px 0 0; font-size:.76rem; line-height:1.55; text-align:center; }
.auth-device { position:relative; z-index:1; align-self:center; width:270px; min-height:345px; margin-bottom:-145px; padding:24px 20px; border:1px solid rgba(255,255,255,.14); border-radius:34px 34px 0 0; background:#071120; box-shadow:0 25px 65px rgba(0,0,0,.4); }
.auth-device__top { display:flex; justify-content:space-between; font-size:.75rem; }
.auth-device__state { display:grid; justify-items:center; gap:5px; margin-top:60px; }
.auth-device__state>span { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px rgba(57,201,138,.1); }
.auth-device__state small { color:var(--muted); }
.auth-device__button { display:grid; width:94px; height:94px; place-items:center; margin:28px auto; border-radius:50%; background:linear-gradient(145deg,var(--primary),var(--primary-strong)); box-shadow:0 15px 40px rgba(81,74,255,.32); }
.auth-device__button svg { width:32px; fill:none; stroke:white; stroke-width:1.7; }
.auth-steps { position:relative; z-index:1; display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.auth-steps li { display:flex; align-items:center; gap:12px; color:var(--text-soft); }
.auth-steps span { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(121,132,255,.32); border-radius:9px; color:#aeb5ff; background:rgba(102,120,255,.1); font-size:.78rem; }

/* Dashboard, account and operational pages */
.dashboard-hero { display:grid; grid-template-columns:1fr auto; gap:24px; background:linear-gradient(145deg,rgba(102,120,255,.08),rgba(9,19,33,.9) 50%); }
.dashboard-hero__main { display:grid; gap:30px; }
.dashboard-hero__facts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hero-stat { display:grid; gap:3px; padding:16px; border:1px solid var(--border); border-radius:13px; background:rgba(2,8,20,.35); }
.hero-stat span,.hero-stat small { color:var(--muted); font-size:.76rem; }
.dashboard-hero__actions { display:grid; align-content:start; justify-items:end; gap:12px; }
.quick-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.dashboard-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:22px; }
.dashboard-layout__main,.dashboard-layout__side { display:grid; align-content:start; gap:22px; }
.collapsible-panel>summary,.security-action-panel>summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; }
.collapsible-panel>summary::-webkit-details-marker,.security-action-panel>summary::-webkit-details-marker { display:none; }
.collapsible-panel[open]>summary { margin-bottom:24px; }
.dashboard-connect-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.dashboard-connect-guide article { padding:16px; border-radius:13px; background:rgba(255,255,255,.035); }
.dashboard-connect-guide span { color:#8795ff; font-size:.8rem; }
.dashboard-connect-guide p { margin:5px 0 0; font-size:.82rem; }
.profile-list,.news-stack,.history-list { display:grid; gap:10px; }
.profile-card__head,.profile-card__actions,.security-list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.profile-card__actions { flex-wrap:wrap; margin-top:18px; }
.security-hero--modern { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; }
.security-health-badge { display:flex; align-items:center; gap:12px; padding:15px 17px; border:1px solid rgba(57,201,138,.23); border-radius:14px; background:rgba(57,201,138,.07); }
.security-health-badge>span { width:10px; height:10px; border-radius:50%; background:var(--success); }
.security-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.security-overview-card { display:flex; align-items:center; gap:12px; min-width:0; padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.security-overview-card__icon { display:grid; flex:0 0 37px; height:37px; place-items:center; border-radius:10px; color:#9aa7ff; background:var(--primary-soft); }
.security-overview-card div { display:grid; min-width:0; }
.security-overview-card small { color:var(--muted); }
.security-overview-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.security-modern-grid,.security-activity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.security-action-panel>summary { min-height:34px; }
.security-action-panel[open]>summary { margin-bottom:20px; padding-bottom:17px; border-bottom:1px solid var(--border); }
.summary-action { color:#aab3ff; font-size:.86rem; }
.security-password-grid,.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.security-password-current { grid-column:1/-1; }
.password-tools { display:flex; align-items:center; justify-content:space-between; }
.field--checkbox { display:flex; grid-auto-flow:column; align-items:center; justify-content:start; }
.field--checkbox input { width:18px; min-height:18px; }
.security-count { display:grid; min-width:32px; height:32px; place-items:center; border-radius:9px; color:#aeb6ff; background:var(--primary-soft); }

/* Checkout and payment */
.payment-hero { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.payment-hero-card { padding:22px; border:1px solid var(--border); border-radius:18px; background:rgba(2,8,20,.38); }
.payment-hero-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; }
.payment-flow-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.payment-flow-mini div { padding:13px; border-radius:11px; background:rgba(255,255,255,.035); }
.payment-flow-mini span { color:#8b99ff; font-size:.74rem; }
.payment-flow-mini p { margin:4px 0 0; font-size:.72rem; }
.payment-hero-card__grid { display:grid; gap:8px; margin-top:13px; }
.payment-hero-card__grid article { display:grid; grid-template-columns:120px 1fr; padding:9px 0; border-top:1px solid var(--border); }
.payment-hero-card__grid span,.payment-hero-card__grid small { color:var(--muted); font-size:.76rem; }
.payment-hero-card__grid small { grid-column:2; }
.payment-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:22px; }
.payment-layout__main,.payment-layout__side { display:grid; align-content:start; gap:22px; }
.payment-methods-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.payment-method-current { display:grid; text-align:right; }
.payment-method-current small { color:var(--muted); }
.selector-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.selector-card,.payment-method-card,.tariff-card { position:relative; display:grid; gap:7px; min-height:130px; padding:18px; border:1px solid var(--border); border-radius:15px; color:var(--text); background:rgba(255,255,255,.025); cursor:pointer; }
.selector-card:hover,.selector-card.is-selected,.payment-method-card.is-selected,.tariff-card.is-selected { border-color:rgba(112,121,255,.55); background:rgba(102,120,255,.09); }
.buy-guest-gate { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border:1px solid rgba(102,120,255,.22); border-radius:16px; background:rgba(102,120,255,.06); }
.buy-guest-gate>div { display:flex; align-items:center; gap:14px; }
.buy-guest-gate p { margin:2px 0 0; }
.payment-status-page { max-width:760px; margin:0 auto; }
.payment-status-card { margin-top:24px; background:rgba(255,255,255,.025); }

/* Content, download, legal and support */
.page-intro { display:grid; gap:7px; max-width:800px; padding:24px 0; }
.page-intro h1 { font-size:clamp(2.3rem,5vw,4rem); }
.narrow-page,.subscription-compact { width:min(680px,100%); margin:35px auto 0; }
.recovery-card { display:grid; justify-items:center; text-align:center; }
.recovery-card .back-link { justify-self:start; margin-bottom:25px; }
.state-icon { display:grid; width:62px; height:62px; place-items:center; margin-bottom:20px; border-radius:18px; font-size:1.6rem; font-weight:700; }
.state-icon--info { color:#bbc2ff; background:var(--primary-soft); }
.error-card { display:grid; justify-items:center; gap:16px; padding-block:55px; text-align:center; }
.error-code { color:#808eff; font-size:clamp(4rem,14vw,8rem); font-weight:700; letter-spacing:-.08em; line-height:1; opacity:.75; }
.support-grid,.download-grid,.news-grid,.document-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.download-hero { display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; }
.download-pill-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.download-pill-row span { padding:7px 10px; border-radius:9px; color:var(--muted); background:rgba(255,255,255,.04); font-size:.78rem; }
.download-install-visual { display:grid; place-items:center; min-height:390px; }
.download-phone { width:230px; min-height:430px; padding:12px; border:1px solid var(--border-strong); border-radius:34px; background:#030916; box-shadow:var(--shadow); }
.download-phone__screen { min-height:404px; padding:25px 17px; border-radius:25px; background:linear-gradient(160deg,#09162a,#050c19); }
.download-phone__top { display:flex; align-items:center; justify-content:space-between; font-size:.75rem; }
.download-phone__ring { display:grid; width:122px; height:122px; place-items:center; margin:76px auto 28px; border-radius:50%; background:linear-gradient(145deg,var(--primary),var(--primary-strong)); box-shadow:0 15px 45px rgba(80,73,255,.34); }
.download-phone__ring span { width:38px; height:38px; border:2px solid white; border-top-color:transparent; border-radius:50%; }
.download-phone__status { display:grid; justify-items:center; gap:5px; }
.download-phone__status span { color:var(--muted); font-size:.7rem; }
.download-steps-grid,.download-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.download-step-card { display:flex; gap:13px; }
.download-step-card__number { color:#8f9cff; font-size:.8rem; }
.download-step-card h2 { font-size:1rem; }
.download-step-card p { margin:0; font-size:.83rem; }
.download-update-list { display:grid; gap:8px; margin-top:18px; }
.download-update-item { display:flex; gap:10px; }
.download-update-item>span { flex:0 0 7px; height:7px; margin-top:9px; border-radius:50%; background:var(--primary); }
.landing-cta-band { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:32px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.legal-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.legal-summary-card { display:grid; align-content:start; gap:10px; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.legal-summary-card>span { color:#8594ff; font-size:.78rem; }
.legal-summary-card p { margin:0 0 12px; }
.legal-summary-card .button { margin-top:auto; }
.deletion-hero { padding:clamp(28px,4.5vw,54px); border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,rgba(255,100,116,.055),var(--surface)); }
.deletion-actions { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0 34px; }
.legal-stack { display:grid; gap:14px; }
.legal-highlight-list,.deletion-steps { color:var(--muted); }
.legal-highlight-list li,.deletion-steps li { margin-block:7px; }
.faq-list { display:grid; gap:8px; }
.faq-list details { padding:17px 18px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.025); }
.faq-list summary { cursor:pointer; color:var(--text-soft); font-weight:600; }
.faq-list p { margin:13px 0 0; }
.legal-hero { background:linear-gradient(145deg,rgba(102,120,255,.06),rgba(9,19,33,.85)); }
.legal-meta-row { display:flex; flex-wrap:wrap; gap:10px 20px; color:var(--muted); font-size:.84rem; }
.legal-meta-row a { color:#a9b2ff; }
.legal-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; align-items:start; }
.legal-toc { position:sticky; top:calc(var(--header-height) + 20px); display:grid; gap:9px; padding:20px; }
.legal-toc strong { margin-bottom:7px; }
.legal-toc a { color:var(--muted); font-size:.82rem; text-decoration:none; }
.legal-toc a:hover { color:white; }
.legal-sections { display:grid; gap:14px; }
.legal-section { scroll-margin-top:calc(var(--header-height) + 20px); }
.legal-section h2 { font-size:1.5rem; }
.legal-section p:last-child { margin-bottom:0; }
.legal-card-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.legal-card-list article { padding:16px; border-radius:12px; background:rgba(255,255,255,.03); }
.retention-table { display:grid; gap:1px; overflow:hidden; margin:18px 0; border:1px solid var(--border); border-radius:13px; background:var(--border); }
.retention-table>div { display:grid; grid-template-columns:180px 1fr; gap:16px; padding:12px 14px; background:var(--surface-soft); }
.subscription-qr { display:grid; place-items:center; margin:24px 0; }
.subscription-qr img { width:min(280px,100%); padding:12px; border-radius:16px; background:white; }
.subscription-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.subscription-link-stack { display:grid; gap:10px; margin-top:20px; }
.link-line { display:grid; gap:5px; }
.link-line span { color:var(--muted); font-size:.78rem; }
.link-line code { overflow-wrap:anywhere; padding:12px; border-radius:10px; color:#cbd1ff; background:#040b16; }

/* Existing admin UI inherits the same product language */
.admin-command-panel--modern { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.7fr); gap:22px; }
.admin-section-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; grid-column:1/-1; }
.admin-section-tabs a,.admin-rail a { min-height:48px; padding:11px 13px; border:1px solid var(--border); border-radius:11px; color:var(--text-soft); background:rgba(255,255,255,.025); text-decoration:none; }
.admin-stats-grid { grid-column:1/-1; }
.admin-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; }
.admin-rail { position:sticky; top:calc(var(--header-height) + 18px); display:grid; align-self:start; gap:7px; }
.admin-user-panel,.admin-tool-panel { border:1px solid var(--border)!important; border-radius:14px!important; background:var(--surface)!important; }

@media (max-width: 1050px) {
  .home-hero { grid-template-columns:1fr .8fr; }
  .feature-list { grid-template-columns:repeat(2,1fr); }
  .dashboard-layout,.payment-layout { grid-template-columns:1fr; }
  .dashboard-layout__side,.payment-layout__side { grid-template-columns:repeat(2,1fr); }
  .security-overview { grid-template-columns:repeat(2,1fr); }
  .auth-page { grid-template-columns:.9fr minmax(390px,470px); }
}

@media (max-width: 860px) {
  :root { --header-height:68px; }
  .app-shell { padding-inline:18px; }
  .site-header { justify-content:space-between; }
  .site-header__bar { width:100%; justify-content:space-between; }
  .site-nav-toggle { display:grid; }
  .site-header__panel { position:absolute; top:calc(100% + 1px); left:-18px; right:-18px; display:none; margin:0; padding:16px 18px 20px; border-bottom:1px solid var(--border); background:#050d1a; box-shadow:0 20px 40px rgba(0,0,0,.3); }
  .site-header.is-open .site-header__panel,.site-header__panel.is-open { display:grid; gap:15px; }
  .site-nav,.header-actions { display:grid; width:100%; }
  .site-nav a { padding:12px; }
  .header-actions { grid-template-columns:1fr 1fr; }
  .account-menu { grid-column:1/-1; }
  .account-menu summary { justify-content:center; }
  .account-menu__panel { position:static; margin-top:8px; }
  .home-hero { grid-template-columns:1fr; min-height:auto; padding-top:68px; text-align:center; }
  .home-hero__copy { display:grid; justify-items:center; }
  .home-hero__visual { min-height:520px; }
  .step-list { grid-template-columns:1fr; gap:0; }
  .auth-page { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .auth-visual { min-height:300px; padding:34px; }
  .auth-visual__brand { margin-bottom:55px; }
  .auth-device { display:none; }
  .auth-card { border-left:0; border-top:1px solid var(--border); }
  .payment-hero { grid-template-columns:1fr; }
  .download-hero { grid-template-columns:1fr; }
  .dashboard-hero { grid-template-columns:1fr; }
  .dashboard-hero__actions { justify-items:start; }
  .quick-actions { justify-content:flex-start; }
  .dashboard-hero__facts { grid-template-columns:repeat(2,1fr); }
  .legal-layout { grid-template-columns:1fr; }
  .legal-toc { position:static; grid-template-columns:repeat(2,1fr); }
  .legal-toc strong { grid-column:1/-1; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-rail { position:static; grid-template-columns:repeat(2,1fr); }
  .site-footer { grid-template-columns:1fr; gap:36px; }
}

@media (max-width: 640px) {
  .app-shell { padding-inline:14px; }
  .page { gap:14px; padding-top:26px; }
  h1 { font-size:clamp(2.25rem,12vw,3.2rem); }
  .panel,.profile-card,.legal-section { padding:20px; border-radius:16px; }
  .home-hero { padding-top:48px; }
  .home-hero__visual { min-height:470px; }
  .home-hero__visual::before { width:390px; height:390px; }
  .app-preview { width:275px; padding:30px 18px 20px; border-radius:36px; }
  .app-preview__state { margin-top:38px; }
  .vpn-control { width:118px; height:118px; margin:22px auto; }
  .vpn-control span { width:84px; height:84px; }
  .home-section { padding:72px 0; }
  .feature-list { grid-template-columns:1fr; }
  .feature-item { min-height:0; }
  .feature-icon { margin-bottom:25px; }
  .pricing-card__main,.pricing-card__action,.home-trust-section { align-items:flex-start; flex-direction:column; }
  .pricing-features { grid-template-columns:1fr; }
  .pricing-card__action .button { width:100%; }
  .auth-page { min-height:0; border-radius:18px; }
  .auth-visual { min-height:230px; padding:27px 24px; }
  .auth-visual__brand { margin-bottom:34px; }
  .auth-visual h1 { font-size:2.55rem; }
  .auth-card { padding:28px 20px; }
  .dashboard-hero__facts,.dashboard-layout__side,.payment-layout__side,.security-overview,.security-modern-grid,.security-activity-grid,.support-grid,.download-grid,.news-grid,.document-grid,.legal-card-list,.selector-grid,.subscription-actions-grid,.legal-summary-grid,.download-steps-grid,.download-info-grid { grid-template-columns:1fr; }
  .dashboard-connect-guide,.payment-flow-mini { grid-template-columns:1fr; }
  .payment-methods-heading { align-items:flex-start; flex-direction:column; }
  .payment-method-current { text-align:left; }
  .buy-guest-gate { align-items:stretch; flex-direction:column; }
  .landing-cta-band { align-items:stretch; flex-direction:column; }
  .payment-hero-card__grid article { grid-template-columns:1fr; }
  .payment-hero-card__grid small { grid-column:1; }
  .security-hero--modern { align-items:stretch; flex-direction:column; }
  .security-password-grid,.field-grid { grid-template-columns:1fr; }
  .security-password-current { grid-column:auto; }
  .form-inline,.profile-card__head,.section-heading--split { align-items:stretch; flex-direction:column; }
  .legal-toc { grid-template-columns:1fr; }
  .legal-toc strong { grid-column:auto; }
  .retention-table>div { grid-template-columns:1fr; gap:4px; }
  .site-footer { margin-top:75px; }
  .site-footer__links { grid-template-columns:1fr 1fr; }
  .toast { right:16px; bottom:16px; }
  .admin-section-tabs { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 420px) {
  .header-actions { grid-template-columns:1fr; }
  .hero-actions { width:100%; }
  .hero-actions .button { width:100%; }
  .home-trust { justify-content:center; }
  .site-footer__links { grid-template-columns:1fr; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Mobile integrity layer: keep every public and account screen usable on phones. */
@media (max-width: 860px) {
  .app-shell {
    width: 100%;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .site-header {
    min-height: var(--header-height);
  }

  .site-header__bar {
    min-width: 0;
  }

  .site-nav-toggle {
    position: relative;
    z-index: 72;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 14px;
    touch-action: manipulation;
  }

  .site-nav-toggle span {
    position: absolute;
    left: 13px;
    width: 22px;
    transition: transform .2s ease, opacity .16s ease;
  }

  .site-nav-toggle span:nth-child(1) { transform: translateY(-7px); }
  .site-nav-toggle span:nth-child(3) { transform: translateY(7px); }
  body.nav-open .site-nav-toggle {
    border-color: rgba(112,121,255,.38);
    background: rgba(102,120,255,.1);
  }
  body.nav-open .site-nav-toggle span:nth-child(1) { transform: rotate(45deg); }
  body.nav-open .site-nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .site-nav-toggle span:nth-child(3) { transform: rotate(-45deg); }

  .site-header__panel {
    position: fixed;
    z-index: 70;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    margin: 0;
    padding: 14px max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    border-bottom: 1px solid var(--border-strong);
    background: rgba(5,13,26,.98);
    box-shadow: 0 24px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(20px);
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .site-header__panel,
  .site-header.is-open .site-header__panel,
  .site-header__panel.is-open {
    display: grid;
    gap: 14px;
  }

  .site-nav,
  .header-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .site-nav a,
  .header-actions > .button,
  .account-menu summary,
  .account-menu__panel a,
  .account-menu__panel button {
    min-height: 48px;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid transparent;
  }

  .site-nav a.is-active {
    border-color: var(--border);
  }

  .account-menu {
    grid-column: auto;
  }

  .account-menu summary {
    justify-content: flex-start;
  }

  .account-menu__panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .page,
  .page > *,
  .panel,
  .profile-card,
  .legal-section,
  .auth-card,
  .section-heading,
  .section-heading > *,
  .form-stack,
  .field,
  .password-field-wrap,
  .dashboard-layout > *,
  .payment-layout > *,
  .legal-layout > *,
  .admin-layout > * {
    min-width: 0;
    max-width: 100%;
  }

  .page {
    width: 100%;
    padding-top: 22px;
  }

  body:not([data-page="landing"]) h1 {
    max-width: 100%;
    font-size: clamp(2rem, 9.5vw, 2.65rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  h2,
  h3,
  p,
  li,
  a,
  button,
  strong,
  small,
  span,
  code {
    overflow-wrap: anywhere;
  }

  .button,
  button,
  a,
  summary {
    touch-action: manipulation;
  }

  .brand {
    min-height: 44px;
  }

  .button {
    max-width: 100%;
    min-height: 50px;
    padding-inline: 16px;
    white-space: normal;
  }

  .panel,
  .profile-card,
  .legal-section {
    width: 100%;
    padding: 18px;
  }

  .hero-actions,
  .button-row,
  .deletion-actions,
  .profile-card__actions,
  .quick-actions,
  .form-inline--actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .hero-actions .button,
  .button-row .button,
  .deletion-actions .button,
  .profile-card__actions .button,
  .quick-actions .button,
  .form-inline--actions .button {
    width: 100%;
    min-width: 0;
  }

  .detail-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .detail-row > * {
    max-width: 100%;
  }

  .field input,
  .field select,
  .field textarea,
  .form-inline input,
  .modal-card input {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  .password-field-wrap {
    position: relative;
    display: block;
    width: 100%;
  }

  .password-field-wrap input {
    width: 100%;
    padding-right: 96px;
  }

  .password-toggle {
    position: absolute;
    top: 3px;
    right: 7px;
    bottom: auto;
    left: auto;
    display: inline-flex;
    width: auto !important;
    min-width: 78px !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    transform: none;
  }

  body[data-page="login"] .page,
  body[data-page="register"] .page,
  body[data-page="forgot-password"] .page,
  body[data-page="error"] .page {
    padding-top: 16px;
  }

  body[data-page="login"] .auth-page,
  body[data-page="register"] .auth-page {
    display: block;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="login"] .auth-visual,
  body[data-page="register"] .auth-visual {
    display: none;
  }

  body[data-page="login"] .auth-card,
  body[data-page="register"] .auth-card {
    width: 100%;
    padding: 24px 18px;
    border: 0;
    border-radius: 18px;
  }

  .auth-card__head {
    margin-bottom: 20px;
  }

  .auth-card__head h2 {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  .auth-tabs button {
    min-height: 46px;
  }

  .telegram-slot iframe {
    max-width: 100%;
  }

  body[data-page="forgot-password"] .narrow-page {
    width: 100%;
    margin-top: 0;
  }

  body[data-page="forgot-password"] .recovery-card {
    width: 100%;
    padding: 24px 18px;
  }

  body[data-page="forgot-password"] .recovery-card > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="forgot-password"] .recovery-card .back-link {
    width: auto;
    justify-self: start;
  }

  body[data-page="forgot-password"] .state-icon {
    width: 60px;
  }

  .payment-promo-form,
  .admin-search,
  .admin-command-search,
  .admin-search--wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .payment-promo-form .button,
  .admin-search .button,
  .admin-command-search .button,
  .admin-search--wide .button {
    width: 100%;
  }

  .payment-hero-card__grid article,
  .retention-table > div {
    min-width: 0;
  }

  .collapsible-panel > summary,
  .security-action-panel > summary,
  .admin-section-toggle {
    min-height: 48px;
    gap: 12px;
  }

  .site-footer {
    gap: 30px;
    margin-top: 64px;
    padding-top: 38px;
  }

  .site-footer__group a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .brand__text {
    font-size: .94rem;
  }

  body:not([data-page="landing"]) h1 {
    font-size: clamp(1.9rem, 9vw, 2.25rem);
  }

  .home-hero {
    padding-top: 38px;
  }

  .home-hero__visual {
    min-height: 430px;
    overflow: clip;
  }

  .home-hero__visual::before {
    width: min(360px, 100vw);
    height: min(360px, 100vw);
  }

  .app-preview {
    width: min(260px, 86vw);
  }

  .home-trust {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  .modal-layer {
    padding: 12px;
  }

  .modal-card {
    padding: 24px 16px 18px;
  }

  .site-footer__links {
    gap: 24px;
  }
}

@media (max-width: 860px) and (max-height: 600px) and (orientation: landscape) {
  body[data-page="login"] .page,
  body[data-page="register"] .page {
    padding-top: 12px;
  }

  body[data-page="login"] .auth-page,
  body[data-page="register"] .auth-page {
    display: block;
    min-height: 0;
    overflow: visible;
    border-radius: 18px;
  }

  body[data-page="login"] .auth-visual,
  body[data-page="register"] .auth-visual {
    display: none;
  }

  body[data-page="login"] .auth-card,
  body[data-page="register"] .auth-card {
    width: min(560px, 100%);
    min-height: 0;
    margin-inline: auto;
    padding: 24px;
    border: 0;
    border-radius: 18px;
  }
}