/* ZARDO VPN — satin graphite, restrained silver. Loaded after page styles. */
:root,
.compact-shell {
  color-scheme: dark;
  --bg: #111214;
  --panel: #1b1d20;
  --soft: #23262a;
  --text: #e9e8e5;
  --muted: #aaaeb5;
  --line: #35383e;
  --border: #35383e;
  --blue: #d4d7dd;
  --accent: #c4c8d0;
  --primary: #d4d7dd;
  --blue-bg: #2c3036;
  --on-blue: #202226;
  --green: #a5c3b4;
  --green-bg: #24342e;
  --danger: #e9a4a8;
  --danger-bg: #39272b;
  --red: #e9a4a8;
  --amber: #d6bd91;
  --amber-bg: #352f24;
  --sidebar-bg: #151619;
  --sidebar-fg: #e9e8e5;
  --sidebar-muted: #aaaeb5;
  --panel-soft: #272a30;
}
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-color: #5a5e66 #1b1d20;
}
body {
  background: radial-gradient(ellipse at 68% 0, #25272b 0, transparent 620px), var(--bg);
  color: var(--text);
  min-width: 280px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #686d78; color: #fff; }
a { color: var(--blue); text-underline-offset: .22em; }
a:hover { color: #f1f0ed; }
p { text-wrap: pretty; }
h1, h2, h3 { color: var(--text); text-wrap: balance; }
h1 { font-weight: 600; letter-spacing: -.035em; }
h2 { font-weight: 600; letter-spacing: -.02em; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #c6cbd6;
  outline-offset: 4px;
}
.small, .compact-shell .small { font-size: .8125rem; line-height: 1.65; }
.eyebrow, .sidebar-caption { color: #a9adb5; font-size: .75rem; font-weight: 600; letter-spacing: .15em; }
.button, .compact-shell .button, .contact-button {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 11px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button-primary {
  background: linear-gradient(125deg, #e0e0dc, #b9bec7);
  border-color: #d1d3d8;
  box-shadow: inset 0 1px 0 #ffffff66, 0 3px 10px #0002;
  color: #24262a;
}
.button-primary:hover:not(:disabled) { background: linear-gradient(125deg, #eeede9, #cdd1d8); color: #181a1e; border-color: #e5e5e2; }
.button-secondary { background: #24262b; border-color: #43464e; color: #dfe0e3; box-shadow: inset 0 1px 0 #ffffff05; }
.button-secondary:hover:not(:disabled) { background: #2e3137; border-color: #626771; color: #f1f0ed; }
.button-quiet { color: #b2b6bd; }
.button-quiet:hover:not(:disabled) { background: #292c32; color: #e9e8e5; }
.button-danger { color: #261b1e; background: #d9a0a4; border-color: #d9a0a4; }
.button-danger-outline { background: #272025; color: var(--danger); border-color: #6b474e; }
.button-danger-outline:hover:not(:disabled) { background: var(--danger-bg); }
.text-button, .compact-shell .text-button { min-height: 44px; font-size: .875rem; }
.icon-button { background: #30333a; color: #c4c8d0; border: 1px solid #42464f; }
input[type="checkbox"], input[type="radio"] { accent-color: #bfc5d0; }
.field { gap: 8px; font-size: .875rem; color: #c7cad0; }
.field input, .field select, .field textarea, .compact-shell .field input, .compact-shell .field select,
.billing-page input[type="search"], .billing-page select, .billing-page textarea, .transfer-toolbar input,
.resource-url {
  background: #141619;
  border: 1px solid #464a52;
  border-radius: 10px;
  color: var(--text);
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: inset 0 2px 4px #0002;
}
.field input:hover, .field select:hover { border-color: #656b75; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #b8bec9; }
input::placeholder, textarea::placeholder { color: #9197a2; opacity: 1; }
input[readonly] { color: #d4d7dd; }
.field-help { font-size: .8125rem; line-height: 1.6; }
.panel, .auth-card, .release-card, .modal {
  background: linear-gradient(130deg, #222428 0, #1b1d20 65%);
  border: 1px solid #393c43;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #ffffff05, 0 12px 32px #00000015;
}
.notice { font-size: .875rem; line-height: 1.65; border-radius: 12px; background: var(--soft); }
.notice-info { background: #292d33; border-color: #515661; color: #dce0e6; }
.notice-error { background: var(--danger-bg); color: var(--danger); border-color: #614149; }
.notice-success { background: var(--green-bg); color: var(--green); border-color: #3f574b; }
.modal { max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain; }
.modal::backdrop, .billing-page dialog::backdrop { background: #08090bbd; backdrop-filter: blur(5px); }
.modal .field + .field, #payment-form > .field { margin-top: 16px; }
#payment-form > .small { margin-top: 18px; }
#payment-form > .notice { margin-top: 14px; }
#payment-form > .button-primary { margin-top: 18px; }

/* Use the approved emblem unchanged; the wordmark stays sharp at small sizes. */
.brand.brand-logo-link { display: inline-flex; gap: 10px; align-items: center; min-height: 52px; width: auto; }
.brand-emblem { width: 52px; height: 52px; display: block; flex: 0 0 auto; border-radius: 14px; }
.brand-wordmark { display: flex; align-items: baseline; gap: 6px; font-size: 1.0625rem; line-height: 1; font-weight: 650; letter-spacing: .11em; color: #e0e0de; }
.brand-wordmark > span { color: #a4a9b2; font-size: .6875rem; letter-spacing: .1em; font-weight: 500; }
.brand-logo-link.auth-brand { margin-bottom: 28px; }
.auth-brand .brand-emblem { width: 64px; height: 64px; border-radius: 18px; }
.auth-brand .brand-wordmark { font-size: 1.3125rem; }
.auth-brand .brand-wordmark > span { font-size: .8125rem; }
.native-connect-heading > img { border-radius: 12px; }

/* Public introduction: a quiet product composition, followed by the actions. */
.vpn-public-page { max-width: 1180px; padding: 28px 32px 32px; }
.vpn-public-header { padding-bottom: 20px; border-bottom: 1px solid #ffffff12; }
.vpn-public-header .auth-brand { margin: 0; }
.vpn-public-header .brand-emblem { width: 54px; height: 54px; }
.vpn-public-header .brand-wordmark { font-size: 1.125rem; }
.vpn-public-nav { display: flex; align-items: center; gap: 28px; font-size: .875rem; }
.vpn-public-nav > a:not(.button) { color: #aeb3bc; }
.vpn-public-nav > a:not(.button):hover { color: #e9e8e5; }
.vpn-public-hero {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 66px 0 62px;
}
.vpn-hero-copy { min-width: 0; }
.vpn-public-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.15rem); line-height: 1.08; color: #e5e5e2; margin: 18px 0 24px; font-weight: 550; letter-spacing: -.045em; }
.vpn-hero-copy > p:not(.eyebrow) { max-width: 540px; color: #aeb2ba; font-size: 1.0625rem; line-height: 1.8; }
.vpn-hero-copy > p.small { font-size: .8125rem; line-height: 1.65; margin-top: 17px; }
.vpn-public-actions { gap: 10px; margin-top: 28px; }
.vpn-public-actions .button { min-height: 52px; padding-inline: 20px; }
.vpn-hero-art { margin: 0; display: grid; place-items: center; position: relative; min-width: 0; }
.vpn-hero-art img { display: block; width: min(100%, 408px); height: auto; aspect-ratio: 1; border-radius: 23%; filter: drop-shadow(0 20px 25px #0005); }
.vpn-public-features { gap: 0; margin-bottom: 42px; border-block: 1px solid #393c43; }
.vpn-public-features article { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 27px 26px; }
.vpn-public-features article:first-child { padding-left: 0; }
.vpn-public-features article:last-child { padding-right: 0; }
.vpn-public-features article + article { border-left: 1px solid #393c43; }
.vpn-public-features h2 { color: #d7d9dd; font-size: 1.125rem; margin-bottom: 9px; }
.vpn-public-features p { font-size: .875rem; line-height: 1.75; }
.vpn-feature-number { display: block; color: #949aa5; font-size: .75rem; letter-spacing: .12em; margin-bottom: 13px; }
.vpn-public-section { padding: 32px; margin: 24px 0; scroll-margin-top: 24px; }
.vpn-public-section > .eyebrow { margin-bottom: 10px; }
.vpn-public-section h2 { font-size: 1.75rem; font-weight: 550; }
.vpn-public-section > .muted { margin-bottom: 20px; }
.vpn-public-section > p { font-size: .9375rem; line-height: 1.8; }
.vpn-public-section > p.small { font-size: .8125rem; }
.vpn-public-footer { border-top: 1px solid #35383e; margin-top: 34px; padding-top: 24px; gap: 10px; }
.vpn-public-footer .small { line-height: 1.9; }
.vpn-public-footer .premium-about-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.premium-about-links a { color: #aeb2ba; }

/* Sign-in, registration and installer pages share the same materials. */
.auth-shell { width: min(100%, 510px); padding: 46px 20px 60px; }
.auth-card { padding: 32px; }
.auth-card h1 { font-size: 1.875rem; margin-bottom: 15px; }
.auth-card > .muted { font-size: .9375rem; line-height: 1.75; }
.form-stack { gap: 19px; margin-top: 26px; }
.auth-footnote { font-size: .875rem; line-height: 1.75; }
.auth-bottom { color: #858b96; font-size: .8125rem; }
.auth-card > .button { margin-top: 14px; }
.auth-card > .small:last-child { margin-top: 18px; }
.release-page { max-width: 790px; padding: 32px 22px 64px; }
.release-card { padding: 34px; }
.release-card h1 { font-size: clamp(1.75rem, 4vw, 2.2rem); margin: 12px 0 18px; }
.release-card h2 { margin: 28px 0 12px; font-size: 1.125rem; }
.release-note { font-size: .9375rem; line-height: 1.75; }
.release-card > .release-note { margin: 14px 0; }
.release-meta { gap: 10px; font-size: .8125rem; margin: 21px 0 10px; }
.release-current { border: 1px solid #516359; background: #29382f; color: #b7cbbd; font-size: .75rem; }
.release-version { font-variant-numeric: tabular-nums; }
.release-page .button-full { min-height: 52px; }
.release-changes, .release-help { font-size: .9375rem; line-height: 1.8; }
.release-changes li, .release-help li { margin: 9px 0; padding-left: 3px; }
.release-details { padding-top: 12px; margin-top: 22px; }
.release-details > summary { min-height: 48px; font-size: .9375rem; gap: 12px; }
.release-details .release-note { font-size: .875rem; }
.release-downloads { font-size: .875rem; gap: 10px 22px; }
.native-smart-mode { background: #262a2e; border: 1px solid #484e55; border-radius: 12px; padding: 18px; margin: 20px 0; }
.native-smart-mode strong { color: #d0d6d1; font-size: .9375rem; }
.native-smart-mode p { color: #acb3b7; font-size: .875rem; line-height: 1.7; }
.native-download-grid { gap: 14px; }
.native-download-card { background: #25282d; border: 1px solid #454a53; border-radius: 14px; padding: 23px; gap: 9px; transition: background .18s, border-color .18s; }
.native-download-card:hover { border-color: #8d949f; background: #2e3239; color: var(--text); }
.native-download-card strong { font-size: 1.125rem; font-weight: 600; }
.native-download-card span { font-size: .875rem; }
.native-download-card small { font-size: .8125rem; }
.native-download-card b { color: #d6dae2; font-size: .875rem; margin-top: 14px; }
.native-download-card svg { color: #b8bec8; }
.native-connect-steps li::before { color: #d4d8e0; background: #353a43; border: 1px solid #505865; }
.native-connect-steps span { font-size: .8125rem; }
.native-install-help summary { font-size: .875rem; min-height: 44px; }
.contact-button.telegram, .contact-button.whatsapp { color: #d8dce2; background: #2b2f35; border-color: #515760; }
.contact-button:hover { background: #383d45; color: #f0efec; }

/* Account navigation and dense working surfaces. */
.compact-shell { grid-template-columns: 232px minmax(0, 1fr); }
.compact-shell .sidebar { background: #151619; border-color: #32353c; padding: 26px 18px; }
.compact-shell .sidebar .brand-logo-link { max-width: none; }
.compact-shell .sidebar-caption { margin: 36px 10px 14px; font-size: .6875rem; letter-spacing: .12em; }
.compact-shell .navigation { gap: 7px; }
.compact-shell .nav-item { font-size: .875rem; min-height: 48px; padding: 12px; color: #a8adb7; border: 1px solid transparent; }
.compact-shell .nav-item:hover { background: #25282e; color: #e2e4e8; }
.compact-shell .sidebar .nav-item.is-current { background: linear-gradient(100deg, #34383f, #26292f); border-color: #4a505b; color: #eceeF1; box-shadow: inset 2px 0 #bbc1ca; }
.compact-shell .main { max-width: 1160px; margin: 0 auto; padding: 36px 34px 52px; }
.compact-shell .page-heading { margin-bottom: 26px; }
.compact-shell .page-heading h1 { font-size: 1.875rem; font-weight: 550; letter-spacing: -.035em; }
.compact-shell .page-heading .muted { font-size: .875rem; line-height: 1.7; margin-top: 8px; }
.compact-shell .section-heading h2 { font-size: 1.125rem; }
.compact-shell .access-panel, .compact-shell .settings-panel, .compact-shell .catalog-panel,
.native-connect-intro { padding: 24px; }
.compact-shell .metric { background: #202328; padding: 17px 20px; }
.compact-shell .metric strong { font-size: 1.875rem; font-variant-numeric: tabular-nums; }
.compact-shell .metric > span { font-size: .8125rem; }
.server-card { background: #21242a; border-color: #3d424b; }
.server-dot { background: #a8bfad; }
.account { gap: 9px; flex-wrap: wrap; padding-top: 21px; }
.compact-shell .account-identity { max-width: none; }
.account-identity .text-button { min-height: 34px; padding: 5px 0; font-size: .8125rem; }
.avatar { background: #343943; color: #d8dce4; }
.logout-button { font-size: .8125rem; }
.access-term { background: linear-gradient(110deg, #292d33, #202328); border-color: #555d69; padding: 19px 22px; gap: 14px; margin-bottom: 20px; }
.access-term strong { font-size: 1.375rem; font-weight: 600; }
.access-term .small { font-size: .8125rem; }
.devices-summary { padding: 22px; margin-bottom: 20px; }
.devices-meter { height: 6px; background: #333a3b; }
.devices-meter span { background: #a7b1bf; }
.devices-list li { padding: 15px 0; }
.device-meta { font-size: .8125rem; }
.device-activity { font-size: .8125rem; }
.compact-shell .access-list { gap: 10px; }
.compact-shell .access-card { background: #202328; border: 1px solid #3d434c; border-radius: 12px; }
.compact-shell .access-card:hover { border-color: #757e8d; }
.compact-shell .access-card[data-selected="true"] { background: #2e333b; border-color: #9ca6b7; box-shadow: inset 3px 0 #b4bdcb; }
.compact-shell .access-select { padding: 15px; }
.compact-shell .access-name { font-size: .9375rem; }
.compact-shell .access-code, .compact-shell .access-subline { font-size: .75rem; line-height: 1.65; }
.compact-shell .access-open { font-size: .8125rem; padding: 12px 16px; border-color: #454c57; color: #ced5e1; }
.compact-shell .status-badge, .compact-shell .connection-badge { font-size: .75rem; padding: 3px 6px; }
.status-badge[data-state="unissued"] { color: #c7ccd6; background: #333944; border: 1px solid #515c6e; }
.status-badge[data-state="pending"] { color: #d6c5a3; background: #383229; }
.compact-shell .device-settings { border-radius: 16px; padding: 24px; }
.compact-shell .rule-check { min-height: 72px; }
.compact-shell .rule-title { font-size: .9375rem; }
.compact-shell .rule-description, .compact-shell .route-label { font-size: .8125rem; line-height: 1.55; }
.routing-modes small, .app-options small, .compact-shell .app-options small { font-size: .8125rem; }
.routing-modes input:checked + span, .app-options input:checked + span { background: #303640; border-color: #a4afc0; box-shadow: inset 0 0 0 1px #7c8799; }
.compact-shell .policy-footer { background: #1c1f24; border-color: #4b535f; }
.smart-routing-summary { background: #262b32; border-color: #485362; }
.native-connect-intro > p { margin-top: 22px; }
.native-connect-heading { gap: 16px; }

/* Duration plans and card-transfer states. */
.payments-page { max-width: 1000px; padding: 30px 28px 70px; }
.payments-heading { border-bottom: 1px solid #35383e; padding-bottom: 22px; margin-bottom: 36px; }
.payments-heading .auth-brand { margin: 0; max-width: none; }
.payments-heading .brand-emblem { width: 54px; height: 54px; }
.payments-heading .brand-wordmark { font-size: 1.125rem; }
.payments-page h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 550; margin: 10px 0 18px; }
.payments-page > .muted { max-width: 700px; line-height: 1.8; font-size: .9375rem; }
.payment-term { background: linear-gradient(110deg, #2c3037, #202329); border-color: #535c69; padding: 20px 24px; margin-block: 27px; }
.payment-term strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tariff-grid { gap: 16px; margin-block: 26px; }
.tariff-card { padding: 25px; border: 1px solid #464c55; border-radius: 16px; background: linear-gradient(145deg, #292d33, #1e2126); gap: 14px; }
.tariff-icon { color: #aab3c1; font-size: .75rem; letter-spacing: .14em; }
.tariff-card h3 { color: #dce0e6; font-size: 1.0625rem; font-weight: 500; }
.tariff-card p { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; line-height: 1.3; }
.tariff-card p strong { font-size: 2.4rem; color: #e5e7ea; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tariff-card p span, .tariff-card small { font-size: .8125rem; color: #a9b0ba; }
.tariff-featured { border-color: #8a95a6; box-shadow: inset 0 2px #c4cad4, 0 14px 30px #0002; background: linear-gradient(145deg, #353b45, #242a32); }
.tariff-card .button { margin-top: auto; }
.tariff-card small + .button { margin-top: 10px; }
.payment-duration label { background: #24282e; border-color: #444d59; }
.payment-duration label:has(input:checked) { background: #363e49; border-color: #a1adbe; }
.payment-duration legend { font-size: .9375rem; }
.payment-help, .payment-history, .payment-owner-panel { padding: 26px; }
.payment-history > .small { margin-bottom: 18px; }
.payment-invoice { border-color: #3c434e; padding: 20px 0; }
.payment-invoice p { font-size: .875rem; line-height: 1.7; }
.payment-status { color: #bfc9d7; }
.transfer-receiver { background: #20262f; border-color: #505b6c; padding: 20px; }
.transfer-receiver > strong { font-size: 1.125rem; }
.transfer-receiver > p { color: #b6bfcd; margin: 5px 0 17px; }
.transfer-receiver .button { margin-top: 12px; }
.transfer-receiver input { font-size: 1.0625rem; }
.payment-help > .muted { font-size: .875rem; margin: 9px 0 16px; }
.billing-chart-svg rect:hover { fill: #e7ebf2; }
.owner-console-bar { background: #1e2126; border-color: #454d58; padding: 10px 20px; }
.owner-console-bar strong { background: #4d5665; color: #f0f2f5; }
.owner-console-bar .owner-queue-link { background: #303741; }
.owner-console-bar .has-requests { background: #b56e79; color: #191417; }
.queue-metric[aria-pressed="true"] { border-color: #9caabc; box-shadow: inset 0 3px #c1c9d6; }

@media (max-width: 1080px) {
  .compact-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .compact-shell .main { padding-inline: 24px; }
  .compact-shell .sidebar { padding-inline: 14px; }
  .compact-shell .brand-wordmark { font-size: 1rem; gap: 4px; }
  .compact-shell .brand-emblem { width: 46px; height: 46px; }
}
@media (max-width: 980px) {
  .compact-shell { display: block; }
  .compact-shell .sidebar { padding: 14px 22px; background: #181a1e; }
  .compact-shell .sidebar .brand-logo-link { max-width: none; }
  .compact-shell .main { padding: 26px 24px calc(115px + env(safe-area-inset-bottom)); }
  .compact-shell .account { padding: 0; flex-wrap: nowrap; }
  .compact-shell .account-identity { max-width: 180px; }
  .compact-shell .account-identity .text-button { display: inline-flex; min-height: 30px; }
  .compact-shell .mobile-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); gap: 9px; background: #191c21f5; border-top: 1px solid #424953; backdrop-filter: blur(18px); box-shadow: 0 -10px 28px #0003; }
  .compact-shell .mobile-navigation a { min-height: 60px; border: 1px solid transparent; border-radius: 12px; color: #9fa8b5; }
  .compact-shell .mobile-navigation a.is-current { background: #333b47; color: #e0e5ed; border-color: #566174; }
  .compact-shell .mobile-navigation small { font-size: .75rem; }
}
@media (max-width: 760px) {
  .vpn-public-page { padding: 20px 22px; }
  .vpn-public-nav { gap: 18px; }
  .vpn-public-nav > a:not(.button) { display: none; }
  .vpn-public-hero { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); gap: 8px; padding: 48px 0; }
  .vpn-public-hero h1 { font-size: clamp(2.25rem, 6.5vw, 3rem); }
  .vpn-hero-copy > p:not(.eyebrow) { font-size: .9375rem; }
  .vpn-public-actions { display: grid; }
  .vpn-public-features article { padding: 23px 16px; }
  .vpn-public-section { padding: 25px; }
  .tariff-card { padding: 20px; }
  .tariff-card p strong { font-size: 2rem; }
}
@media (max-width: 600px) {
  body { background: radial-gradient(ellipse at top right, #292c31 0, transparent 420px), #111214; }
  .vpn-public-page { padding: 16px 18px 24px; }
  .vpn-public-header { gap: 12px; padding-bottom: 16px; }
  .vpn-public-header .brand-emblem { width: 46px; height: 46px; }
  .vpn-public-header .brand-wordmark { font-size: 1rem; }
  .vpn-public-header .brand-wordmark > span { font-size: .625rem; }
  .vpn-public-header .auth-brand { max-width: none; }
  .vpn-public-header .button { min-height: 44px; padding: 11px 17px; }
  .vpn-public-hero { grid-template-columns: 1fr; position: relative; padding: 30px 0 34px; gap: 0; }
  .vpn-hero-art { grid-row: 1; justify-content: start; margin: 0 0 22px; }
  .vpn-hero-art img { width: 124px; filter: drop-shadow(0 8px 14px #0004); }
  .vpn-public-hero h1 { font-size: clamp(2.35rem, 10.5vw, 3.15rem); max-width: 420px; margin: 14px 0 21px; }
  .vpn-hero-copy > .eyebrow { font-size: .6875rem; letter-spacing: .09em; }
  .vpn-hero-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; }
  .vpn-hero-copy > p.small { font-size: .8125rem; }
  .vpn-public-actions { margin-top: 25px; gap: 10px; }
  .vpn-public-actions .button { width: 100%; min-height: 50px; }
  .vpn-public-features { grid-template-columns: 1fr; margin-bottom: 27px; }
  .vpn-public-features article, .vpn-public-features article:first-child, .vpn-public-features article:last-child { padding: 22px 0; }
  .vpn-public-features article + article { border-left: 0; border-top: 1px solid #35383e; }
  .vpn-feature-number { margin-bottom: 9px; }
  .vpn-public-features h2 { font-size: 1.125rem; }
  .vpn-public-features p { font-size: .9375rem; }
  .vpn-public-section { padding: 23px 19px; margin-block: 18px; border-radius: 16px; }
  .vpn-public-section h2 { font-size: 1.5rem; }
  .native-download-grid, .vpn-public-section .native-download-grid { grid-template-columns: 1fr; }
  .native-download-card { padding: 21px; }
  .native-download-card strong { font-size: 1.125rem; }
  .native-download-card b { font-size: .875rem; }
  .auth-shell { padding: 26px 16px 48px; }
  .auth-card { padding: 28px 22px; }
  .auth-brand .brand-emblem { width: 58px; height: 58px; }
  .auth-brand .brand-wordmark { font-size: 1.2rem; }
  .auth-card h1 { font-size: 1.75rem; }
  .release-page { padding: 25px 16px 45px; }
  .release-card { padding: 25px 22px; border-radius: 17px; }
  .release-card h1 { font-size: 1.8rem; }
  .release-details > summary { font-size: .875rem; }
  .release-note, .release-changes, .release-help { font-size: .9375rem; }
  .payments-page { padding: 18px 16px 48px; }
  .payments-heading { gap: 12px; padding-bottom: 18px; margin-bottom: 27px; }
  .payments-heading .brand-emblem { width: 45px; height: 45px; }
  .payments-heading .brand-wordmark { font-size: .9375rem; }
  .payments-heading .brand-wordmark > span { font-size: .625rem; }
  .payments-heading > .button { padding-inline: 13px; min-height: 44px; }
  .payment-term { padding: 18px; margin-block: 22px; }
  .tariff-grid { grid-template-columns: 1fr; gap: 12px; margin-block: 22px; }
  .tariff-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 21px; gap: 9px 14px; }
  .tariff-card .tariff-icon { grid-column: 1; }
  .tariff-card h3 { grid-column: 1; font-size: 1rem; }
  .tariff-card p { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-direction: column; gap: 5px; align-items: flex-end; }
  .tariff-card p strong { font-size: 2rem; }
  .tariff-card small, .tariff-card .button { grid-column: 1 / -1; }
  .tariff-card small + .button { margin-top: 10px; }
  .payment-history, .payment-help, .payment-owner-panel { padding: 21px; }
  .compact-shell .sidebar { padding: 12px 16px; gap: 12px; align-items: center; }
  .compact-shell .brand-logo-link { gap: 7px; }
  .compact-shell .brand-emblem { width: 42px; height: 42px; }
  .compact-shell .brand-wordmark { display: grid; gap: 6px; font-size: .9375rem; }
  .compact-shell .brand-wordmark > span { font-size: .625rem; }
  .compact-shell .account { gap: 10px; }
  .compact-shell .account-identity { max-width: 112px; font-size: .75rem; }
  .compact-shell .account-identity strong { font-size: .8125rem; }
  .compact-shell .account-identity .text-button { font-size: .75rem; min-height: 28px; padding: 3px 0; }
  .compact-shell .logout-button { font-size: .75rem; }
  .compact-shell .main { padding: 24px 16px calc(110px + env(safe-area-inset-bottom)); }
  .compact-shell .page-heading { margin-bottom: 22px; }
  .compact-shell .page-heading h1 { font-size: 1.625rem; }
  .compact-shell .page-heading .muted { font-size: .8125rem; }
  .compact-shell .access-panel, .compact-shell .settings-panel, .compact-shell .catalog-panel,
  .compact-shell .device-settings, .native-connect-intro, .devices-summary { padding: 19px; }
  .compact-shell .access-filters { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .compact-shell .field input, .compact-shell .field select { font-size: 1rem; padding: 12px; }
  .compact-shell .access-card { grid-template-columns: minmax(0, 1fr) 85px; }
  .compact-shell .access-select { padding: 13px 11px; }
  .compact-shell .access-open { font-size: .75rem; padding: 10px; }
  .compact-shell .access-name { font-size: .875rem; }
  .compact-shell .access-code, .compact-shell .access-subline { font-size: .75rem; }
  .compact-shell .metric { padding: 13px; }
  .compact-shell .metric strong { font-size: 1.625rem; }
  .compact-shell .metric > span { font-size: .75rem; }
  .access-term { padding: 18px; }
  .access-term .small { font-size: .8125rem; }
  .access-term .button { max-width: none; }
  .compact-shell .rules-list { grid-template-columns: 1fr; }
  .compact-shell .rule-description { font-size: .8125rem; }
  .native-connect-heading h2 { font-size: 1.125rem; }
  .compact-shell .mobile-navigation { padding-inline: 12px; gap: 8px; }
  .compact-shell .mobile-navigation small { font-size: .75rem; }
  .contact-buttons { gap: 9px; }
  .contact-button { flex: 1; min-width: 125px; padding-inline: 14px; }
  .owner-console-bar { padding: 9px 12px; gap: 5px; }
  .owner-console-bar a { padding: 9px; min-height: 44px; font-size: .75rem; }
  .owner-console-bar [role="status"] { width: 100%; margin-left: 9px; font-size: .75rem; }
}
@media (max-width: 360px) {
  .brand-wordmark { gap: 4px; }
  .vpn-public-header .brand-wordmark { display: grid; gap: 5px; }
  .vpn-public-page { padding-inline: 14px; }
  .vpn-public-section { padding-inline: 17px; }
  .compact-shell .main { padding-inline: 12px; }
  .compact-shell .sidebar { padding-inline: 12px; }
  .compact-shell .brand-wordmark { font-size: .8125rem; }
  .compact-shell .brand-emblem { width: 36px; height: 36px; }
  .compact-shell .account-identity { max-width: 96px; }
  .compact-shell .account { gap: 7px; }
  .compact-shell .access-panel, .compact-shell .settings-panel, .compact-shell .catalog-panel,
  .compact-shell .device-settings, .native-connect-intro, .devices-summary { padding: 16px; }
  .tariff-card { padding: 18px; }
  .tariff-card p strong { font-size: 1.875rem; }
  .auth-card, .release-card { padding: 25px 18px; }
  .payments-heading .brand-wordmark { display: grid; gap: 5px; }
}
/* Native Android already supplies the navigation; keep that contract. */
body.native-app .compact-shell .sidebar, body.native-app .compact-shell .mobile-navigation { display: none; }
body.native-app .compact-shell .main { padding: 16px 14px 24px; }
body.native-app .auth-brand { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}