:root {
  /* PROVISIONAL WEB COLOR TOKENS. Not final official brand values. */
  --navy-950: #050d16;
  --navy-900: #071421;
  --navy-800: #0b1c2b;
  --navy-700: #10283a;
  --cyan: #55e7f4;
  --cyan-deep: #15b9cc;
  --gold: #e7b85c;
  --orange: #df6a34;
  --green: #78e69b;
  --white: #f4f7f8;
  --muted: #8ba0ad;
  --line: rgba(139, 194, 207, .18);
  --danger: #ed7d7d;
  /* Preferred families remain provisional until approved local font assets exist. */
  --font-display: 'Golos Display', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-ui: 'Golos Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --display: var(--font-display);
  --ui: var(--font-ui);
  --focus: #a1f7fc;
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, .18);
  --radius-sm: 6px;
  --radius-md: 14px;
  --instruction-step-title: 19px;
  --instruction-body: 17px;
  --instruction-meta: 13px;
  --instruction-cta: 17px;
  --instruction-download: 16px;
  --instruction-helper: 16px;
  --instruction-small-label: 12px;
  --instruction-line: 1.58;
  --instruction-card-padding: 18px;
  --instruction-card-gap: 12px;
  --instruction-list-gap: 8px;
  --instruction-content-offset: 69px;
  --instruction-card-background: linear-gradient(145deg, rgba(11, 31, 47, .92), rgba(5, 17, 28, .72));
  --landing-header-height: 82px;
  --landing-anchor-gap: 32px;
  --landing-anchor-offset: calc(var(--landing-header-height) + var(--landing-anchor-gap));
}

/* Support page polish: keep help copy compact and clear above the fixed cabinet nav. */
body.cabinet-mode #help-view .support-page-intro {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

body.cabinet-mode #help-view .help-warning {
  align-items: center;
  flex-wrap: wrap;
}

body.cabinet-mode #help-view .help-warning-action {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 8px 0;
  font: 600 12px/1.3 var(--ui);
  cursor: pointer;
}

body.cabinet-mode #help-view .help-warning-action:hover,
body.cabinet-mode #help-view .help-warning-action:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

@media (max-width: 900px) {
  body.cabinet-mode.cabinet-nested #help-view.view.active {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--navy-950); color: var(--white); font-family: var(--ui); line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .03; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.container { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { height: 82px; display: flex; align-items: center; gap: 42px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(5, 13, 22, .88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: .12em; line-height: .9; }
.brand-logo-small { width: 64px; height: 64px; display: block; object-fit: contain; object-position: center; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 1px rgba(231, 184, 92, .42), 0 0 24px rgba(85, 231, 244, .12); }
.brand-lockup strong { display: block; font-size: 16px; }
.brand-lockup small { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .3em; margin-top: 5px; }
.public-nav { display: flex; gap: 4px; margin-right: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
.public-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid transparent; border-radius: 999px; }
.public-nav a:hover, .public-nav a:focus-visible { color: var(--white); border-color: rgba(85, 231, 244, .26); background: rgba(85, 231, 244, .07); }
.public-nav a.is-current { color: var(--white); border-color: rgba(231, 184, 92, .48); background: rgba(231, 184, 92, .08); }
.button { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 19px; color: var(--white); background: transparent; font-weight: 700; font-size: 13px; letter-spacing: .01em; transition: .2s ease; }
.button span { margin-left: 18px; font-size: 16px; }
.button-primary { color: var(--navy-950); background: var(--cyan); box-shadow: 0 8px 24px rgba(85,231,244,.18); }
.button-primary:hover { background: #a1f7fc; transform: translateY(-2px); box-shadow: 0 0 34px rgba(85,231,244,.32); }
.button-ghost, .button-outline { border-color: var(--line); background: rgba(13, 34, 49, .62); }
.button-ghost:hover, .button-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.button-text { padding-left: 0; color: var(--muted); }
.full { width: 100%; }
.menu-trigger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--white); background: rgba(13, 34, 49, .62); }
.menu-trigger span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(2, 8, 14, .68); backdrop-filter: blur(4px); }
.drawer-backdrop[hidden] { display: none; }
.public-drawer { position: fixed; inset: 0 0 0 auto; z-index: 50; display: flex; width: min(360px, calc(100% - 28px)); flex-direction: column; padding: 24px; background: var(--navy-900); border-left: 1px solid var(--line); box-shadow: var(--shadow-panel); transform: translateX(105%); transition: transform .25s ease; }
.public-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--cyan); font: 700 11px var(--display); letter-spacing: .2em; }
.drawer-close { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--white); background: transparent; border-radius: var(--radius-sm); font-size: 26px; line-height: 1; }
.drawer-nav { display: grid; gap: 4px; padding: 24px 0; }
.drawer-nav a { min-height: 48px; display: flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 700; }
.drawer-nav a:hover, .drawer-nav a:focus-visible { color: var(--white); background: rgba(85, 231, 244, .08); }
.drawer-actions { display: grid; gap: 10px; margin-top: auto; }
.view { display: none; min-height: calc(100vh - 132px); animation: reveal .4s ease both; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding-top: 46px; }
.hero-copy { padding: 30px 0 55px; }
.eyebrow { color: var(--cyan); font: 600 10px/1.2 var(--display); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 20px; }
.signal-dot, .status-dot, .active-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--green); box-shadow: 0 0 12px var(--green); margin-right: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -.04em; }
.hero h1 { font-size: clamp(58px, 7.4vw, 104px); font-weight: 900; line-height: .86; letter-spacing: -.07em; text-shadow: 0 8px 0 rgba(7, 20, 33, .8), 0 14px 30px rgba(0, 0, 0, .24); margin: 0 0 32px; max-width: 650px; }
.hero h1 span { display: block; color: var(--white); }
.hero h1 em { display: block; color: var(--gold); font-style: normal; font-size: .82em; margin-left: 42px; margin-top: 13px; text-shadow: 0 2px 0 rgba(255, 240, 190, .24), 0 12px 28px rgba(231, 184, 92, .18); }
.hero-lead { max-width: 450px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; gap: 24px; align-items: center; margin: 30px 0 50px; }
.hero-proof { color: var(--muted); font: 10px var(--display); letter-spacing: .08em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-proof span { color: var(--gold); }
.hero-proof i { width: 22px; height: 1px; background: var(--line); }
.logo-stage { min-height: 500px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 52% 47%, rgba(21,185,204,.14), transparent 35%), linear-gradient(145deg, transparent, rgba(16,40,58,.28)); border-radius: 50%; }
.logo-stage:after { content: ''; position: absolute; inset: 13%; border: 1px solid rgba(85,231,244,.15); border-radius: 50%; }
.orbit { position: absolute; border: 1px solid rgba(231,184,92,.28); border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { inset: 8% 17%; }
.orbit-two { inset: 17% 8%; transform: rotate(55deg); border-color: rgba(85,231,244,.15); }
.logo-slot { width: min(60%, 290px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; padding: 0; }
.approved-master-logo { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.logo-slot strong { font: 700 12px/1.5 var(--display); letter-spacing: .1em; color: var(--gold); }
.logo-slot small { display: block; color: var(--muted); font-size: 10px; margin-top: 15px; }
.slot-kicker { color: var(--cyan); font: 9px var(--display); letter-spacing: .16em; margin-bottom: 15px; }
.stage-chip { position: absolute; z-index: 2; background: var(--navy-800); border: 1px solid var(--line); padding: 8px 11px; font: 9px var(--display); letter-spacing: .14em; color: var(--muted); }
.chip-top { top: 18%; right: 2%; color: var(--gold); }.chip-bottom { bottom: 18%; left: 3%; }.stage-chip .status-dot { width: 5px; height: 5px; margin-right: 5px; }
.section { padding: 100px 0; }.section-heading { display: flex; align-items: end; gap: 50px; margin-bottom: 42px; }.section-heading h2 { font-size: clamp(34px, 5vw, 58px); line-height: .98; margin-bottom: 0; }.section-heading h2 span { color: var(--cyan); }.section-heading > p:last-child { color: var(--muted); max-width: 270px; margin: 0 0 4px auto; font-size: 14px; }.section-heading.compact { align-items: center; margin-bottom: 30px; }.section-heading.compact .eyebrow { margin: 0 auto 0 0; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.step-card { min-height: 245px; padding: 24px; border-right: 1px solid var(--line); position: relative; }.step-card:last-child { border-right: 0; }.step-card.featured { background: linear-gradient(145deg, rgba(21,185,204,.15), rgba(7,20,33,.2)); }.step-number { color: var(--gold); font: 11px var(--display); letter-spacing: .16em; }.line-icon { color: var(--cyan); font: 34px var(--display); margin: 38px 0 20px; }.step-card h3 { font: 600 18px var(--display); margin-bottom: 8px; }.step-card p { color: var(--muted); font-size: 13px; max-width: 180px; }.card-arrow { position: absolute; right: 24px; bottom: 21px; color: var(--cyan); font-size: 21px; }
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.tariff-card { border: 1px solid var(--line); background: rgba(11,28,43,.72); padding: 25px; min-height: 275px; position: relative; }.tariff-card.recommended { border-color: rgba(231,184,92,.6); background: linear-gradient(140deg, rgba(231,184,92,.11), rgba(11,28,43,.72) 45%); }.tariff-card > span { color: var(--muted); font: 10px var(--display); letter-spacing: .16em; }.tariff-card strong { display: block; font: 700 55px var(--display); letter-spacing: -.08em; margin-top: 32px; }.tariff-card strong small { color: var(--muted); font: 400 15px var(--ui); letter-spacing: 0; }.price { color: var(--gold); font: 600 23px var(--display); margin: 3px 0 5px; }.tariff-card p { color: var(--muted); font-size: 13px; }.tariff-card .button { margin-top: 23px; }.gold-tag { position: absolute; right: 17px; top: 17px; color: var(--gold); font: 9px var(--display); letter-spacing: .12em; }
.mascot-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-bottom: 130px; }.mascot-section h2 { font-size: clamp(35px, 5vw, 62px); line-height: .98; }.mascot-section h2 span { color: var(--gold); }.mascot-section p:not(.eyebrow) { color: var(--muted); max-width: 410px; }.mascot-slot { min-height: 310px; border: 1px dashed rgba(231,184,92,.52); display: grid; place-items: center; align-content: center; text-align: center; color: var(--gold); font: 600 14px var(--display); letter-spacing: .1em; background: radial-gradient(circle at 50% 50%, rgba(231,184,92,.1), transparent 45%); }.mascot-slot small { display: block; color: var(--muted); font: 11px var(--ui); letter-spacing: 0; margin-top: 13px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font: 9px var(--display); letter-spacing: .13em; padding: 22px 0; }.site-footer .container { display: flex; justify-content: space-between; }.site-footer a { color: var(--cyan); }
.auth-shell { min-height: 670px; display: grid; grid-template-columns: 1fr 430px; gap: 90px; align-items: center; }.auth-intro h1, .simple-shell h1 { font-size: clamp(52px, 7vw, 86px); line-height: .92; margin-bottom: 25px; }.auth-intro h1 span, .simple-shell h1 span { color: var(--gold); }.auth-intro > p:not(.eyebrow) { color: var(--muted); max-width: 350px; }.auth-note { display: flex; gap: 13px; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 45px; max-width: 370px; }.auth-note > span { color: var(--gold); font-size: 20px; }.auth-note strong, .auth-note small { display: block; }.auth-note small { color: var(--muted); font-size: 11px; margin-top: 4px; }.auth-card { border: 1px solid var(--line); padding: 28px; background: rgba(11,28,43,.75); }.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 30px; }.tab { color: var(--muted); background: none; border: 0; padding: 0 0 13px; margin-right: 25px; position: relative; }.tab.active { color: var(--white); }.tab.active:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--cyan); }.auth-panel { display: none; }.auth-panel.active { display: block; }.auth-panel label { color: var(--muted); font-size: 12px; display: block; margin-bottom: 8px; }.auth-panel input, .wizard input { width: 100%; background: var(--navy-950); border: 1px solid var(--line); padding: 14px; color: var(--white); outline: none; border-radius: 4px; margin-bottom: 16px; }.auth-panel input:focus, .wizard input:focus { border-color: var(--cyan); }.form-hint { color: var(--muted); font-size: 11px; margin-top: 13px; }.demo-code { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; }.code-inputs { display: flex; gap: 8px; margin-bottom: 18px; }.code-inputs input { text-align: center; padding: 12px 0; margin: 0; }.telegram-box { text-align: center; padding: 25px 5px 8px; }.telegram-glyph { width: 54px; height: 54px; margin: 0 auto 20px; border: 1px solid var(--cyan); color: var(--cyan); display: grid; place-items: center; border-radius: 50%; font-size: 23px; }.telegram-box h3 { font: 600 20px var(--display); }.telegram-box p { color: var(--muted); font-size: 13px; margin-bottom: 25px; }.hidden { display: none !important; }
.dashboard-shell { display: grid; grid-template-columns: 210px 1fr; min-height: calc(100vh - 82px); }.sidebar { border-right: 1px solid var(--line); padding: 32px 20px 25px 0; display: flex; flex-direction: column; }.side-label { color: var(--muted); font: 9px var(--display); letter-spacing: .18em; margin: 58px 0 15px 12px; }.side-link { width: 100%; border: 0; background: none; color: var(--muted); padding: 13px 12px; text-align: left; display: flex; gap: 12px; align-items: center; font-size: 13px; border-left: 2px solid transparent; }.side-link:hover, .side-link.active { color: var(--white); border-left-color: var(--cyan); background: rgba(85,231,244,.06); }.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; }.dashboard-content { padding: 54px 0 80px 60px; min-width: 0; }.dashboard-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }.dashboard-top h1 { font-size: 40px; margin: 0; }.dashboard-top h1 span { color: var(--gold); }.demo-select { border: 1px solid rgba(231,184,92,.4); padding: 9px 12px; background: rgba(231,184,92,.06); }.demo-select label { display: block; color: var(--gold); font: 9px var(--display); letter-spacing: .13em; margin-bottom: 4px; }.demo-select select { color: var(--white); background: transparent; border: 0; outline: 0; font-size: 12px; max-width: 190px; }.demo-select option { background: var(--navy-900); }.mobile-cabinet { display: none; }.dash-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 15px; }.dash-card { border: 1px solid var(--line); background: rgba(11,28,43,.7); padding: 25px; }.dash-card.large { min-height: 250px; }.dash-card h2 { font-size: 25px; margin-bottom: 5px; }.dash-card h3 { font: 600 16px var(--display); }.dash-card p, .dash-card small { color: var(--muted); }.status-hero { display: flex; justify-content: space-between; gap: 20px; align-items: start; }.status-label { color: var(--green); font: 600 12px var(--display); }.status-title { font: 600 28px var(--display); margin: 30px 0 7px; }.status-sub { color: var(--muted); font-size: 13px; }.dash-card .button { margin-top: 25px; }.subscription-card { display: flex; flex-direction: column; justify-content: space-between; }.subscription-card .expiry { font: 600 22px var(--display); color: var(--white); }.subscription-card .gold { color: var(--gold); }.device-strip { display: flex; align-items: center; gap: 16px; }.device-glyph { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); }.device-strip strong, .device-strip small { display: block; }.traffic-bars { display: flex; align-items: end; gap: 8px; height: 100px; padding-top: 15px; }.traffic-bars i { flex: 1; background: linear-gradient(var(--cyan), rgba(85,231,244,.12)); min-height: 20%; }.traffic-bars i:nth-child(2) { height: 48%; }.traffic-bars i:nth-child(3) { height: 68%; }.traffic-bars i:nth-child(4) { height: 42%; }.traffic-bars i:nth-child(5) { height: 85%; }.traffic-bars i:nth-child(6) { height: 60%; }.dash-card .mini-label { color: var(--muted); font: 10px var(--display); letter-spacing: .12em; }.empty-state, .state-banner { border: 1px solid var(--line); background: rgba(11,28,43,.7); padding: 30px; }.state-banner { margin-bottom: 16px; }.state-banner h2 { font-size: 28px; margin-bottom: 8px; }.state-banner p { color: var(--muted); }.state-banner.warning { border-color: rgba(237,125,125,.4); }.state-banner.warning h2 { color: var(--danger); }.state-banner.gold { border-color: rgba(231,184,92,.48); }.state-banner.gold h2 { color: var(--gold); }.state-banner .state-action { margin-top: 18px; }.sub-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.sub-card { border: 1px solid var(--line); padding: 28px; background: rgba(11,28,43,.7); }.sub-card h2 { font-size: 28px; }.sub-card p, .sub-card li { color: var(--muted); }.sub-card ul { padding-left: 18px; }.active-pill { color: var(--green); font-size: 12px; }.active-pill i { width: 6px; height: 6px; }.page-title-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 35px; }.page-title-row h1 { margin-bottom: 0; }.device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.device-card { border: 1px solid var(--line); padding: 24px; background: rgba(11,28,43,.7); }.device-card-head { display: flex; justify-content: space-between; gap: 20px; }.device-card h2 { font-size: 24px; margin: 0 0 4px; }.device-card p, .device-card small { color: var(--muted); }.device-card .device-glyph { margin-bottom: 30px; }.device-card .button { margin-top: 20px; }.simple-shell { padding: 65px 0 100px; }.simple-shell.narrow { width: min(680px, calc(100% - 64px)); }.back-link { background: none; border: 0; color: var(--muted); padding: 0; margin-bottom: 45px; font-size: 13px; }.back-link:hover { color: var(--cyan); }.wizard-step { display: none; border: 1px solid var(--line); padding: 32px; background: rgba(11,28,43,.7); }.wizard-step.active { display: block; }.step-count { color: var(--gold); font: 10px var(--display); letter-spacing: .2em; }.wizard-step h2 { font-size: 30px; margin: 22px 0 8px; }.wizard-step p { color: var(--muted); }.platform-picker { display: grid; gap: 10px; margin-top: 28px; }.platform-picker button { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--navy-950); color: var(--white); padding: 17px; text-align: left; }.platform-picker button:hover { border-color: var(--cyan); color: var(--cyan); }.platform-picker button:first-letter { color: var(--cyan); }.setup-card { border: 1px solid var(--line); background: rgba(11,28,43,.72); padding: 30px; }.setup-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }.fake-qr { width: min(290px, 80vw); aspect-ratio: 1; margin: 38px auto; background: repeating-linear-gradient(45deg, #f4f7f8 0 4px, #d9eff0 4px 8px, #071421 8px 12px); display: grid; place-items: center; position: relative; border: 9px solid white; box-shadow: 0 0 35px rgba(85,231,244,.12); }.fake-qr:after { content: 'DEMO ONLY'; position: absolute; background: var(--gold); color: var(--navy-950); padding: 6px 12px; transform: rotate(-8deg); font: 700 11px var(--display); letter-spacing: .1em; }.fake-qr span { background: var(--navy-950); color: var(--cyan); padding: 13px; text-align: center; font: 700 18px var(--display); z-index: 1; }.security-note { border-left: 2px solid var(--gold); padding: 10px 14px; color: var(--muted); font-size: 12px; }.setup-actions { display: flex; gap: 10px; margin-top: 24px; }.setup-secondary { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }.setup-secondary button { border: 0; background: none; color: var(--muted); font-size: 11px; }.setup-secondary button:hover { color: var(--cyan); }.setup-secondary .danger-link:hover { color: var(--danger); }.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }.help-card { border: 1px solid var(--line); background: rgba(11,28,43,.7); padding: 25px; min-height: 190px; }.help-card > span { color: var(--cyan); font-size: 25px; }.help-card h3 { font: 600 20px var(--display); margin: 24px 0 8px; }.help-card p { color: var(--muted); font-size: 13px; }.help-card button { border: 0; background: none; color: var(--cyan); padding: 0; font-size: 12px; }.support-card { border-color: rgba(231,184,92,.4); }.support-card strong { display: block; color: var(--gold); font-size: 12px; margin-bottom: 15px; }.help-warning { display: flex; gap: 22px; margin-top: 25px; border: 1px solid rgba(231,184,92,.35); padding: 18px; font-size: 12px; }.help-warning strong { color: var(--gold); }.help-warning span { color: var(--muted); }.identity-card, .session-card { border: 1px solid var(--line); background: rgba(11,28,43,.7); padding: 10px 25px; }.identity-row { display: flex; align-items: center; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }.identity-row:last-child { border-bottom: 0; }.identity-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); }.identity-row small, .identity-row strong { display: block; }.identity-row small { color: var(--muted); font-size: 11px; }.identity-row strong { font-size: 14px; }.verified { color: var(--green); font: 9px var(--display); letter-spacing: .1em; margin-left: auto; }.mini-button { margin-left: auto; color: var(--cyan); background: none; border: 0; font-size: 12px; }.session-card { margin-top: 16px; padding: 25px; }.session-card h2 { font-size: 25px; }.session-row { display: flex; align-items: center; gap: 12px; margin: 26px 0; }.session-row .status-dot { flex: 0 0 auto; }.session-row strong, .session-row small { display: block; }.session-row small { color: var(--muted); font-size: 11px; }.session-current { color: var(--green); font: 9px var(--display); letter-spacing: .12em; margin-left: auto; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--cyan); color: var(--navy-950); padding: 12px 18px; font-size: 13px; font-weight: 700; transition: .25s ease; z-index: 30; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .public-nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 35px; }.logo-stage { min-height: 400px; max-width: 580px; width: 100%; margin: 0 auto; }.section-heading { display: block; }.section-heading > p:last-child { margin: 20px 0 0; }.steps-grid { grid-template-columns: repeat(2, 1fr); }.step-card:nth-child(2) { border-right: 0; }.step-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.mascot-section { gap: 35px; }.auth-shell { grid-template-columns: 1fr; gap: 25px; padding-top: 50px; padding-bottom: 70px; }.auth-card { max-width: 500px; }.dashboard-shell { grid-template-columns: 1fr; }.sidebar { display: none; }.dashboard-content { padding: 28px 0 70px; }.mobile-cabinet { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--display); letter-spacing: .14em; margin-bottom: 35px; }.mobile-cabinet button { background: none; border: 0; color: var(--cyan); font-size: 20px; }.dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .container, .simple-shell.narrow { width: min(100% - 36px, 1180px); }.site-header { padding: 0 18px; height: 70px; }.header-login { padding: 10px 0; border: 0; background: none; }.hero { min-height: auto; }.hero h1 { font-size: 62px; }.hero h1 em { margin-left: 18px; }.hero-lead { font-size: 15px; }.hero-proof { line-height: 2; }.logo-stage { min-height: 330px; }.logo-slot { width: 70%; }.chip-top { right: -4px; }.chip-bottom { left: -4px; }.section { padding: 70px 0; }.section-heading h2 { font-size: 38px; }.steps-grid, .tariff-grid, .mascot-section, .help-grid, .sub-layout, .device-grid { grid-template-columns: 1fr; }.step-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 190px; }.step-card:last-child { border-bottom: 0; }.tariff-card { min-height: 250px; }.site-footer .container { display: block; }.site-footer span { display: block; margin: 8px 0; }.dashboard-top { display: block; }.dashboard-top h1 { font-size: 32px; margin-bottom: 20px; }.demo-select { display: inline-block; }.simple-shell { padding-top: 35px; }.page-title-row { display: block; }.page-title-row .button { margin-top: 20px; }.setup-actions { flex-direction: column; }.help-warning { display: block; }.help-warning span { display: block; margin-top: 8px; }.identity-row { flex-wrap: wrap; }.verified { margin-left: 50px; }.session-current { font-size: 8px; }.hero-actions { margin-bottom: 30px; } }

/* Phase 1 public UI additions. Tokens above remain provisional. */
.hero-artwork { min-height: 500px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(85, 231, 244, .24); border-radius: 28px; background: radial-gradient(circle at 72% 28%, rgba(85, 231, 244, .2), transparent 30%), linear-gradient(150deg, #10283a 0%, #071421 55%, #050d16 100%); box-shadow: var(--shadow-panel); }
.hero-artwork::before { content: ''; position: absolute; inset: 10% 8%; border: 1px solid rgba(231, 184, 92, .2); border-radius: 50%; transform: rotate(-14deg); z-index: -1; }
.hero-artwork::after { content: ''; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(85, 231, 244, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(85, 231, 244, .14) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, black, transparent 78%); z-index: -1; }
.artwork-glow { position: absolute; width: 280px; height: 280px; right: 13%; top: 16%; border-radius: 50%; background: rgba(85, 231, 244, .18); filter: blur(55px); }
.artwork-mountain { position: absolute; bottom: 26%; width: 78%; height: 48%; clip-path: polygon(0 100%, 24% 37%, 38% 56%, 56% 0, 76% 53%, 100% 22%, 100% 100%); }
.mountain-back { right: -12%; background: linear-gradient(140deg, rgba(120, 230, 155, .48), rgba(16, 40, 58, .18)); opacity: .7; }
.mountain-front { left: -18%; bottom: 20%; background: linear-gradient(140deg, #284b4a, #0b1c2b 70%); }
.artwork-lake { position: absolute; left: 10%; right: 4%; bottom: 0; height: 28%; background: linear-gradient(180deg, rgba(21, 185, 204, .32), rgba(7, 20, 33, .9)); clip-path: polygon(0 36%, 18% 18%, 35% 42%, 56% 12%, 72% 37%, 100% 0, 100% 100%, 0 100%); }
.artwork-laptop { position: absolute; right: 14%; bottom: 15%; width: 41%; aspect-ratio: 1.45; border: 7px solid #dceff0; border-bottom-width: 16px; border-radius: 10px 10px 3px 3px; background: linear-gradient(145deg, rgba(85, 231, 244, .42), rgba(7, 20, 33, .9)); box-shadow: 0 0 30px rgba(85, 231, 244, .24); transform: rotate(-4deg); }
.artwork-laptop::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -24px; height: 12px; border-radius: 50%; background: #dceff0; }
.artwork-laptop span { position: absolute; inset: 18%; border: 1px solid rgba(231, 184, 92, .75); border-radius: 4px; }
.artwork-note { position: absolute; top: 28px; right: 28px; color: var(--muted); font: 10px var(--display); letter-spacing: .16em; }
.artwork-note .status-dot { margin-right: 8px; }
.platforms { border-top: 1px solid var(--line); }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.platform-card { min-height: 220px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); background: rgba(11, 28, 43, .65); transition: border-color .2s ease, transform .2s ease; }
.platform-card:hover { border-color: rgba(85, 231, 244, .55); transform: translateY(-3px); }
.platform-card > span { color: var(--cyan); font-size: 28px; }
.platform-card h3 { margin: 24px 0 8px; font: 600 21px var(--display); }
.platform-card p { color: var(--muted); font-size: 13px; }
.platform-card a { margin-top: auto; color: var(--cyan); font-size: 13px; font-weight: 700; }
.instruction-panel, .final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px; border: 1px solid rgba(231, 184, 92, .34); background: linear-gradient(120deg, rgba(16, 40, 58, .86), rgba(11, 28, 43, .55)); box-shadow: var(--shadow-panel); }
.instructions { padding-top: 0; }
.instruction-panel h2, .final-cta h2 { margin-bottom: 10px; font-size: 36px; }
.instruction-panel p:not(.eyebrow), .final-cta p:not(.eyebrow) { max-width: 620px; color: var(--muted); }
.instruction-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.mascot-slot { position: relative; display: grid; min-height: 310px; place-items: center; overflow: hidden; border: 1px solid rgba(85, 231, 244, .3); background: radial-gradient(circle at 50% 40%, rgba(85, 231, 244, .2), transparent 24%), linear-gradient(145deg, #10283a, #071421 65%); box-shadow: var(--shadow-panel); }
.mascot-slot::before, .mascot-slot::after { content: ''; position: absolute; border: 1px solid rgba(231, 184, 92, .35); border-radius: 50%; }
.mascot-slot::before { width: 70%; aspect-ratio: 1; }
.mascot-slot::after { width: 42%; aspect-ratio: 1; border-color: rgba(85, 231, 244, .36); }
.mascot-fallback-mark { position: relative; z-index: 1; display: grid; width: 86px; height: 86px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 700 48px var(--display); }
.mascot-slot > span { position: absolute; bottom: 24px; color: var(--muted); font: 10px var(--display); letter-spacing: .18em; }
.public-help { padding-top: 0; }
.tariff-card { transition: border-color .2s ease, transform .2s ease; }
.tariff-card:hover { border-color: rgba(85, 231, 244, .55); transform: translateY(-3px); }
.drawer-open { overflow: hidden; }

/* Iteration 2 approved visual assets. Fallback layers remain underneath. */
.hero-artwork.has-image { background-image: linear-gradient(90deg, rgba(5, 13, 22, .74) 0%, rgba(5, 13, 22, .12) 55%, rgba(5, 13, 22, .08) 100%), url("public/brand/fritz-vpn-hero-alps.jpg"); background-size: cover; background-position: center; }
.hero-artwork.has-image::before { border-color: rgba(255, 255, 255, .12); }
.hero-artwork.has-image::after { opacity: .06; }
.hero-artwork.has-image .artwork-mountain, .hero-artwork.has-image .artwork-lake, .hero-artwork.has-image .artwork-laptop { display: none; }
.hero-artwork.has-image .artwork-glow { width: 320px; height: 320px; right: 17%; top: 24%; background: rgba(85, 231, 244, .16); }
.hero-artwork.has-image .artwork-note { display: none; }
.header-start { min-width: 128px; }
.header-login { min-width: 108px; }
.hero-actions .button { min-height: 52px; padding-inline: 24px; }
.hero-actions .button-primary { min-width: 164px; }
.section-heading h2, .mascot-section h2 { font-weight: 850; text-shadow: 0 5px 18px rgba(0, 0, 0, .18); }
.tariff-card .button, .platform-card a { min-height: 44px; }

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

/* Manual payment UI uses a separate namespace from device-config QR flows. */
.payment-card { margin-top: 16px; }
.russia-card { margin-top: 16px; max-width: 760px; }
.russia-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.russia-card-heading h2 { min-width: 0; }
.russia-title { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; vertical-align: middle; }
.russia-flag { display: block; width: 1.5em; height: 1em; flex: 0 0 auto; border-radius: 3px; object-fit: cover; }
.russia-title > span { min-width: 0; overflow-wrap: anywhere; }
.russia-card h2 { margin-bottom: 10px; }
.russia-status { display: inline-flex; align-items: center; border: 1px solid currentColor; padding: 5px 9px; font: 10px var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.russia-status-active { color: var(--green); }
.russia-status-available { color: var(--gold); }
.russia-status-pending { color: var(--gold); }
.russia-status-muted { color: var(--gold); }
.russia-card .button { margin-top: 18px; }
.russia-copy, .russia-muted { color: var(--muted); max-width: 650px; line-height: 1.5; }
.russia-detail { color: var(--muted); }
.russia-detail strong, .russia-price-block strong { color: var(--white); }
.russia-dependency { margin: 10px 0 0; padding: 9px 12px; border-left: 2px solid var(--gold); background: rgba(231, 184, 92, .06); color: var(--muted); font-size: 13px; line-height: 1.4; }
.russia-dependency strong { color: var(--white); }
.russia-karing-hint { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 9px 12px; border-left: 2px solid var(--cyan); background: rgba(85, 231, 244, .05); }
.russia-karing-hint > span { flex: 0 0 auto; color: var(--cyan); font: 10px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.russia-karing-hint p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.russia-price-block { margin: 16px 0 4px; border-left: 2px solid var(--gold); padding-left: 14px; }
.russia-price-block p { margin: 7px 0; }
.russia-price-block span { color: var(--muted); }
.russia-price-block .russia-payable { color: var(--gold); font-size: 20px; }
.russia-price-block small { color: var(--muted); display: block; margin-top: 8px; }
.russia-quote-error { margin-top: 16px; }
.russia-quote-error p { color: var(--danger); }
.russia-combined-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 16px; color: var(--white); font-size: 13px; line-height: 1.4; }
.russia-combined-toggle input { accent-color: var(--gold); margin-top: 3px; }
.russia-combined-help { display: block; margin: -8px 0 14px 26px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.payment-component-summary { margin: 12px 0 14px; padding: 12px 14px; border-left: 2px solid var(--gold); background: rgba(231, 184, 92, .06); }
.payment-component-summary p { margin: 4px 0; }
.payment-component-summary small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.4; }
.payment-tariffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 14px; }
.payment-tariff { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); background: var(--navy-950); color: var(--white); text-align: left; cursor: pointer; }
.payment-tariff span { color: var(--gold); font-size: 18px; }
.payment-tariff.is-selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.payment-total { margin: 8px 0 18px; font-size: 18px; }
.payment-total strong { color: var(--gold); }
.payment-qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-qr-panel { display: grid; justify-items: center; gap: 12px; margin: 22px 0; padding: 18px; border: 1px solid rgba(85, 231, 244, .28); background: rgba(5, 13, 22, .7); }
.payment-qr-panel img { width: min(320px, 100%); height: auto; background: #fff; padding: 10px; }
.payment-instructions { display: grid; gap: 7px; margin: 22px 0; padding-left: 22px; }
.payment-current { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.payment-current strong { color: var(--gold); }
.payment-current label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: 13px; }
.payment-current input[type="file"] { display: block; width: 100%; margin-bottom: 12px; color: var(--muted); }
.payment-feedback { margin-top: 16px; color: var(--danger) !important; }
.payment-feedback-success { color: var(--gold) !important; }
.payment-muted { color: var(--muted); }
.payment-state-copy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0; }
.payment-state-copy .button { flex: 0 0 auto; margin-top: 0; }
.payment-request-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; padding: 14px; border: 1px solid rgba(85,231,244,.24); background: rgba(85,231,244,.05); }
.payment-request-summary p { margin: 0; }
.payment-request-summary strong { color: var(--white); }
.payment-bank-warning { color: var(--muted); font-size: 12px; margin: 10px 0 16px; }
.payment-qr-locked { margin: 16px 0; }
.payment-auth-gate { margin: 18px 0; padding: 16px; border: 1px solid rgba(231,184,92,.4); background: rgba(231,184,92,.06); }
.payment-auth-gate p { margin: 0 0 14px; }
.payment-auth-gate .button { margin-top: 0; }
.payment-file-hint { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; }

@media (max-width: 600px) {
  .payment-tariffs, .payment-qr-actions { grid-template-columns: 1fr; }
  .payment-card { padding: 20px; }
  .payment-request-summary { grid-template-columns: 1fr; gap: 6px; }
  .payment-state-copy { align-items: flex-start; flex-direction: column; }
}

/* Unified one-page landing rhythm: section anchors share the same space below
   the sticky header on every public landing surface. */
html { scroll-padding-top: var(--landing-anchor-offset); }
#home-view > #how,
#home-view > #tariffs-view > .tariff-preview,
#home-view > #instructions-view > .instructions,
#home-view > #public-help .support-panel .eyebrow,
#home-view > #tariffs-view .section-heading.compact,
#home-view > #instructions-view .instruction-section-heading { scroll-margin-top: var(--landing-anchor-offset); }

@media (max-width: 600px) {
  :root {
    --landing-header-height: calc(60px + env(safe-area-inset-top));
    --landing-anchor-gap: 28px;
  }
}

/* Phase 3.3C-3A: focused acquisition hierarchy without changing the flow. */
body.acquisition-mode .header-start { display: none; }

.acquisition-page {
  max-width: 1060px;
  padding: 42px 24px 84px;
}

.acquisition-page > .back-link {
  margin-bottom: 28px;
}

.acquisition-page > h1 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .98;
}

.acquisition-lead {
  max-width: 640px;
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 1.5;
}

.acquisition-steps {
  display: flex;
  width: min(100%, 610px);
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  background: linear-gradient(rgba(183, 199, 209, .23), rgba(183, 199, 209, .23)) center / calc(100% - 56px) 1px no-repeat;
}

.acquisition-steps > span {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: var(--navy-950);
  text-transform: uppercase;
}

.acquisition-steps > span > strong {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(183, 199, 209, .32);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}

.acquisition-steps > .is-current { color: var(--cyan); }
.acquisition-steps > .is-current > strong { border-color: var(--cyan); background: rgba(85, 231, 244, .11); color: var(--cyan); box-shadow: 0 0 16px rgba(85, 231, 244, .12); }
.acquisition-steps > .is-complete { color: var(--white); }
.acquisition-steps > .is-complete > strong { border-color: rgba(85, 231, 244, .52); color: var(--cyan); font-size: 0; }
.acquisition-steps > .is-complete > strong::after { content: '✓'; font-size: 12px; }

.acquisition-panel {
  width: 100%;
  max-width: 100%;
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 31, 44, .86), rgba(8, 17, 27, .82));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.acquisition-tariffs { gap: 14px; margin-bottom: 24px; }
.acquisition-tariff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: 148px;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(5, 13, 22, .48);
  text-align: left;
}
.acquisition-tariff:hover { background: rgba(85, 231, 244, .055); }
.acquisition-tariff:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.acquisition-tariff-label { color: var(--white) !important; font-size: 16px !important; font-weight: 650; }
.acquisition-tariff strong { margin-top: 22px; color: var(--white); font-size: clamp(27px, 3vw, 34px); letter-spacing: -.03em; }
.acquisition-tariff.is-selected { border-width: 1px; background: linear-gradient(145deg, rgba(85, 231, 244, .13), rgba(85, 231, 244, .035)); box-shadow: inset 0 0 0 1px rgba(85, 231, 244, .18), 0 0 28px rgba(85, 231, 244, .1); }
.acquisition-tariff.is-selected .acquisition-tariff-label { color: var(--cyan) !important; }
.acquisition-tariff-check { grid-column: 2; grid-row: 1; display: grid !important; width: 22px; height: 22px; place-items: center; border: 1px solid transparent; border-radius: 50%; color: transparent; font-size: 12px !important; }
.acquisition-tariff.is-selected .acquisition-tariff-check { border-color: rgba(85, 231, 244, .65); color: var(--cyan); background: rgba(85, 231, 244, .1); }
.acquisition-russia-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 13px 15px; border: 1px solid rgba(85, 231, 244, .22); border-radius: 12px; background: rgba(85, 231, 244, .035); color: var(--muted); text-align: left; }
.acquisition-russia-option:hover, .acquisition-russia-option.is-selected { border-color: rgba(85, 231, 244, .62); background: rgba(85, 231, 244, .09); }
.acquisition-russia-option:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.acquisition-russia-option strong, .acquisition-russia-option b { color: var(--white); }
.acquisition-russia-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.acquisition-russia-option b { white-space: nowrap; font-size: 13px; }
.acquisition-russia-mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(183, 199, 209, .42); border-radius: 7px; color: transparent; }
.acquisition-russia-option.is-selected .acquisition-russia-mark { border-color: var(--cyan); background: rgba(85, 231, 244, .16); color: var(--cyan); }
.acquisition-russia-option-locked { grid-template-columns: 28px minmax(0, 1fr) auto; cursor: default; border-color: rgba(231, 184, 92, .3); background: rgba(231, 184, 92, .045); }
.acquisition-russia-option-locked .acquisition-russia-mark { border-color: rgba(231, 184, 92, .45); color: var(--gold); }
.acquisition-russia-option-locked b { color: var(--gold); }
.acquisition-russia-summary-note { display: grid; gap: 4px; margin: 14px 0 18px; padding: 11px 13px; border-left: 2px solid var(--gold); background: rgba(231, 184, 92, .06); color: var(--muted); font-size: 13px; line-height: 1.4; }
.acquisition-russia-summary-note strong { color: var(--white); }

.acquisition-panel > .button.full { min-height: 50px; border-radius: 10px; font-size: 15px; }
.acquisition-feedback { margin-bottom: 0; padding: 11px 14px; border: 1px solid rgba(255, 181, 169, .2); border-radius: 10px; background: rgba(255, 107, 91, .06); }
.acquisition-payment-note { margin: 14px 0 0; }

.identity-panel, .acquisition-summary, .acquisition-panel.state-banner { max-width: 760px; }
.identity-panel h2, .acquisition-summary h2 { margin-bottom: 8px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1; }
.acquisition-identity-lead { max-width: 600px; margin-bottom: 26px; }
.acquisition-auth-tabs { gap: 8px; margin-bottom: 30px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 13, 22, .42); }
.acquisition-auth-tabs button { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--muted); font-weight: 650; }
.acquisition-auth-tabs button.is-active { border: 1px solid rgba(85, 231, 244, .55); background: rgba(85, 231, 244, .1); color: var(--white); }
.acquisition-auth-tabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.acquisition-auth-pane { max-width: 580px; margin: 0 auto; padding: 4px 8px 0; }
.acquisition-auth-pane h3 { margin: 16px 0 10px; font-size: 24px; }
.acquisition-auth-pane > p { max-width: 450px; margin: 0 auto 22px; }
.acquisition-auth-pane .button.full { min-height: 50px; }
.acquisition-telegram-glyph, .acquisition-email-glyph { width: 56px; height: 56px; background: rgba(85, 231, 244, .06); }
.acquisition-auth-pane input { min-height: 50px; border-radius: 10px; }
.acquisition-auth-pane .acquisition-helper { margin: 12px 0 0; }

.acquisition-summary-intro > p:last-child { max-width: 500px; margin: 0; color: var(--muted); }
.acquisition-summary-plan { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin: 28px 0 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acquisition-summary-plan span { display: block; color: var(--muted); font-size: 13px; }
.acquisition-summary-plan strong { display: block; margin-top: 5px; color: var(--white); font-family: var(--display); font-size: 24px; }
.acquisition-summary-total { text-align: right; }
.acquisition-summary-total strong { color: var(--cyan); font-size: 34px; }
.acquisition-summary-component { display: flex; justify-content: space-between; gap: 20px; margin-top: 8px; color: var(--white); }
.acquisition-summary-component span { color: var(--muted); }
.acquisition-summary-component strong { color: var(--white); font-size: 18px; }
.acquisition-summary-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0 0 18px; padding: 9px 15px; border: 1px solid rgba(183, 199, 209, .42); border-radius: 10px; background: rgba(183, 199, 209, .06); color: var(--white); font: inherit; font-weight: 650; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.acquisition-summary-toggle:hover { border-color: rgba(85, 231, 244, .72); background: rgba(85, 231, 244, .1); color: var(--cyan); }
.acquisition-summary-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.acquisition-summary-toggle:disabled { opacity: .55; cursor: wait; }
.acquisition-confirmed { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--white); }
.acquisition-confirmed > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(85, 231, 244, .14); color: var(--cyan); font-weight: 800; }
.acquisition-summary .acquisition-payment-note { text-align: left; }

@media (max-width: 700px) {
  body.acquisition-mode .site-header .header-login { border: 0; background: transparent; }
  .acquisition-page { padding: 28px 18px 58px; }
  .acquisition-page > .back-link { margin-bottom: 24px; }
  .acquisition-page > h1 { max-width: 520px; font-size: clamp(38px, 11vw, 52px); line-height: .98; }
  .acquisition-lead { max-width: 480px; margin-bottom: 24px; font-size: 16px; }
  .acquisition-steps { gap: 8px; margin-bottom: 24px; font-size: 10px; letter-spacing: .06em; }
  .acquisition-steps { background-size: calc(100% - 44px) 1px; }
  .acquisition-steps > span { gap: 6px; }
  .acquisition-steps > span > strong { width: 24px; height: 24px; }
  .acquisition-panel { padding: 22px 18px; border-radius: 15px; }
  .acquisition-tariffs { gap: 9px; margin-bottom: 18px; }
  .acquisition-tariff { min-height: 78px; padding: 14px 16px; }
  .acquisition-tariff-label { font-size: 15px !important; }
  .acquisition-tariff strong { margin-top: 6px; font-size: 25px; }
  .acquisition-russia-option { grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .acquisition-russia-option b { grid-column: 2; }
  .identity-panel h2, .acquisition-summary h2 { font-size: clamp(30px, 9vw, 42px); }
  .acquisition-identity-lead { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
  .acquisition-auth-tabs { margin-bottom: 24px; }
  .acquisition-auth-pane { padding-inline: 0; }
  .acquisition-auth-pane h3 { font-size: 21px; }
  .acquisition-auth-pane > p { font-size: 15px; }
  .acquisition-summary-plan { gap: 12px; margin-top: 22px; padding: 18px 0; }
  .acquisition-summary-plan strong { font-size: 21px; }
  .acquisition-summary-total strong { font-size: 29px; }
  .acquisition-summary-component { gap: 8px; font-size: 14px; }
  .acquisition-confirmed { margin-bottom: 20px; font-size: 15px; }
  .acquisition-summary .acquisition-payment-note { font-size: 12px; }
}

/* Final profile card: keep identity, connection state, and edit action in one column. */
body.cabinet-mode #dashboard-view .profile-unified-card {
  display: block;
  margin-bottom: 10px;
  padding: 16px 18px;
}

body.cabinet-mode #dashboard-view .profile-unified-column {
  min-width: 0;
}

body.cabinet-mode #dashboard-view .profile-unified-card h2 {
  margin: 7px 0 3px;
  font-size: 25px;
  line-height: 1.1;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
  margin-bottom: 9px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
  gap: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
  padding-top: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value {
  color: var(--green);
  font-weight: 600;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.warning {
  color: var(--danger);
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.gold {
  color: var(--gold);
}

body.cabinet-mode #dashboard-view .profile-unified-card .button {
  width: fit-content;
  min-height: 44px;
  margin-top: 10px;
  padding-block: 10px;
}

@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view .dashboard-top {
    margin-bottom: 12px;
  }

  body.cabinet-mode #dashboard-view .dashboard-top h1 {
    font-size: 38px;
    line-height: 1;
  }

  body.cabinet-mode #dashboard-view .profile-greeting {
    margin: 7px 0 2px;
  }

  body.cabinet-mode #dashboard-view .profile-top-note {
    margin: 0;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 9px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 10px 13px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 15px 16px;
  }

  body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: auto;
    padding-block: 10px;
  }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view .profile-unified-card {
    padding: 14px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .button {
    width: 100%;
    min-height: 46px;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 8px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 10px 11px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    padding: 12px;
  }

body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: 10px;
  }
}

/* Approved Earnings mockup: a single responsive grid built from cabinet tokens. */
body.cabinet-mode .earnings-page-grid {
  display: grid;
  gap: 16px;
}

body.cabinet-mode .earnings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: stretch;
  gap: 22px;
}

body.cabinet-mode .earnings-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

body.cabinet-mode .earnings-hero-copy h1 {
  margin: 8px 0 8px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .98;
}

body.cabinet-mode .earnings-hero-copy .eyebrow { margin: 0; }
body.cabinet-mode .earnings-lead { margin: 0 0 4px; font-size: 20px; }
body.cabinet-mode .earnings-subtitle { margin: 0; max-width: 590px; }

body.cabinet-mode .earnings-promo-banner {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 22px;
  border: 1px solid rgba(85, 231, 244, .30);
  border-radius: var(--radius-md);
  background: url('/public/brand/fritz-vpn-earnings-hero-foxes-campfire.jpg') center/cover;
  box-shadow: 0 0 32px rgba(85, 231, 244, .07);
}

body.cabinet-mode .earnings-promo-banner strong { max-width: 220px; font: 700 18px/1.15 var(--display); }
body.cabinet-mode .earnings-promo-banner span { color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-summary--full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
body.cabinet-mode .earnings-stat { min-height: 116px; align-items: flex-start; justify-content: center; padding: 17px 18px; }
body.cabinet-mode .earnings-stat > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
body.cabinet-mode .earnings-stat > strong { margin-top: 7px; color: var(--cyan); font-size: 30px; }
body.cabinet-mode .earnings-stat > small { margin-top: 7px; color: var(--muted); font-size: 12px; }

body.cabinet-mode .earnings-middle-grid,
body.cabinet-mode .earnings-lower-grid { display: grid; gap: 16px; }
body.cabinet-mode .earnings-middle-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .96fr); align-items: stretch; }
body.cabinet-mode .earnings-lower-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
body.cabinet-mode .earnings-card { min-width: 0; padding: 20px; border-color: rgba(139, 194, 207, .24); background: linear-gradient(145deg, rgba(11, 31, 47, .90), rgba(5, 17, 28, .72)); }
body.cabinet-mode .earnings-card-heading,
body.cabinet-mode .earnings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
body.cabinet-mode .earnings-card h2,
body.cabinet-mode .earnings-section-heading h2 { margin: 5px 0 0; font-size: 21px; line-height: 1.15; }
body.cabinet-mode .earnings-card-icon,
body.cabinet-mode .earnings-section-heading > span { color: var(--cyan); font-size: 22px; line-height: 1; }
body.cabinet-mode .earnings-card-description { margin: 14px 0 0; max-width: 650px; color: var(--muted); line-height: 1.45; }
body.cabinet-mode .earnings-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0 20px; }
body.cabinet-mode .earnings-rules span { display: flex; min-height: 72px; flex-direction: column; justify-content: center; padding: 10px; border: 1px solid rgba(85, 231, 244, .18); border-radius: 10px; background: rgba(85, 231, 244, .035); text-align: center; }
body.cabinet-mode .earnings-rules b { color: var(--cyan); font-size: 22px; line-height: 1; }
body.cabinet-mode .earnings-rules small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.2; }

body.cabinet-mode .earnings-link { margin-top: 4px; }
body.cabinet-mode .earnings-link label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.cabinet-mode .earnings-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.cabinet-mode .earnings-link input,
body.cabinet-mode .payout-form input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(139, 194, 207, .26);
  border-radius: 10px;
  background: rgba(5, 13, 22, .76);
  color: var(--white);
  font-size: 13px;
  padding: 10px 12px;
}
body.cabinet-mode .earnings-link input:focus,
body.cabinet-mode .payout-form input:focus { border-color: var(--cyan); outline: 2px solid rgba(85, 231, 244, .35); outline-offset: 1px; }
body.cabinet-mode .earnings-link-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
body.cabinet-mode .earnings-link-actions .button { width: 100%; }
body.cabinet-mode .earnings-link > small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
body.cabinet-mode .earnings-embedded-history { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
body.cabinet-mode .earnings-embedded-history .earnings-section-heading h3 { margin: 0; color: var(--white); font-size: 14px; line-height: 1.2; }
body.cabinet-mode .earnings-embedded-history .earnings-section-heading > span { color: var(--cyan); font-size: 18px; line-height: 1; }
body.cabinet-mode .earnings-embedded-history .earnings-history { margin-top: 7px; }

body.cabinet-mode .earnings-promo-card h2 { max-width: 480px; font-size: clamp(23px, 2.2vw, 31px); }
body.cabinet-mode .earnings-promo-card h3 { margin: 17px 0 5px; color: var(--cyan); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
body.cabinet-mode .earnings-promo-card > p:not(.mini-label) { margin: 10px 0 0; color: var(--muted); line-height: 1.4; }
body.cabinet-mode .earnings-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
body.cabinet-mode .earnings-example-grid > * { display: flex; min-height: 47px; flex-direction: column; justify-content: center; padding: 9px 11px; border: 1px solid rgba(85, 231, 244, .14); border-radius: 10px; background: rgba(85, 231, 244, .055); color: var(--white); font-size: 13px; }
body.cabinet-mode .earnings-example-grid small { margin-top: 3px; color: var(--muted); font-size: 11px; }
body.cabinet-mode .earnings-example-grid strong { color: var(--cyan); font-size: 15px; }
body.cabinet-mode .earnings-example-grid > :last-child { grid-column: 1 / -1; color: var(--muted); }
body.cabinet-mode .earnings-example-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
body.cabinet-mode .earnings-example-result b { color: var(--cyan); font-size: 22px; }
body.cabinet-mode .earnings-example-result p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-muted { color: var(--muted); font-size: 12px; }

body.cabinet-mode .earnings-cross-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 14px 18px; border: 1px solid rgba(85, 231, 244, .18); border-radius: var(--radius-md); background: rgba(85, 231, 244, .045); }
body.cabinet-mode .earnings-cross-link div { display: grid; gap: 2px; }
body.cabinet-mode .earnings-cross-link strong { font-size: 14px; }
body.cabinet-mode .earnings-cross-link span { color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-cross-link .button { white-space: nowrap; }
body.cabinet-mode .earnings-history,
body.cabinet-mode .payout-history { display: grid; gap: 0; padding: 0; margin: 16px 0 0; list-style: none; }
body.cabinet-mode .earnings-history li,
body.cabinet-mode .payout-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
body.cabinet-mode .earnings-history li:last-child,
body.cabinet-mode .payout-history li:last-child { border-bottom: 0; }
body.cabinet-mode .earnings-history small,
body.cabinet-mode .payout-history small,
body.cabinet-mode .earnings-history .is-empty small,
body.cabinet-mode .payout-history .is-empty small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
body.cabinet-mode .earnings-history b { color: var(--cyan); white-space: nowrap; }
body.cabinet-mode .earnings-history .is-empty,
body.cabinet-mode .payout-history .is-empty { display: block; color: var(--muted); }
body.cabinet-mode .earnings-section-heading { align-items: center; }
body.cabinet-mode .earnings-balance-value { margin: 16px 0 4px; color: var(--muted); }
body.cabinet-mode .earnings-balance-value strong { color: var(--cyan); font: 700 23px/1 var(--display); }
body.cabinet-mode .earnings-spend-actions { display: grid; gap: 7px; margin: 15px 0; padding: 11px; border: 1px solid rgba(85, 231, 244, .15); border-radius: 10px; }
body.cabinet-mode .earnings-spend-actions p { margin: 0; color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-spend-actions .button { width: 100%; }
body.cabinet-mode .payout-form { display: grid; gap: 10px; margin-top: 16px; }
body.cabinet-mode .payout-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
body.cabinet-mode .payout-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
body.cabinet-mode .payout-form .button { width: 100%; margin-top: 2px; }
body.cabinet-mode .payout-form .button:disabled,
body.cabinet-mode .earnings-donation-actions .button:disabled { border-color: rgba(139, 160, 173, .25); background: rgba(139, 160, 173, .08); color: var(--muted); opacity: .72; cursor: not-allowed; transform: none; box-shadow: none; }

body.cabinet-mode .earnings-donation-block--cyan { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 350px); align-items: center; gap: 18px; margin: 0; padding: 19px 22px; border: 1px solid rgba(85, 231, 244, .34); border-radius: var(--radius-md); background: linear-gradient(100deg, rgba(85, 231, 244, .10), rgba(5, 13, 22, .74)); }
body.cabinet-mode .earnings-donation-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(85, 231, 244, .35); border-radius: 50%; color: var(--cyan); font-size: 25px; }
body.cabinet-mode .earnings-donation-block--cyan h2 { margin: 4px 0; font-size: 22px; }
body.cabinet-mode .earnings-donation-block--cyan p:not(.mini-label) { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
body.cabinet-mode .earnings-donation-actions { display: grid; gap: 7px; }
body.cabinet-mode .earnings-donation-actions .button { width: 100%; }
body.cabinet-mode .earnings-donation-actions small { color: var(--muted); text-align: center; font-size: 11px; }

@media (max-width: 900px) {
  body.cabinet-mode .earnings-hero { grid-template-columns: 1fr; gap: 0; }
  body.cabinet-mode .earnings-promo-banner { display: flex; min-height: 190px; margin-top: 12px; }
  body.cabinet-mode .earnings-hero-copy h1 { font-size: clamp(42px, 12vw, 58px); }
  body.cabinet-mode .earnings-summary--full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  body.cabinet-mode .earnings-stat { min-height: 100px; padding: 14px; }
  body.cabinet-mode .earnings-stat > strong { font-size: 25px; }
  body.cabinet-mode .earnings-middle-grid,
  body.cabinet-mode .earnings-lower-grid { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  body.cabinet-mode .earnings-card { padding: 16px; }
  body.cabinet-mode .earnings-donation-block--cyan { grid-template-columns: auto minmax(0, 1fr); }
  body.cabinet-mode .earnings-donation-actions { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body.cabinet-mode .earnings-page-grid { gap: 12px; }
  body.cabinet-mode .earnings-lead { font-size: 18px; }
  body.cabinet-mode .earnings-subtitle { font-size: 13px; }
  body.cabinet-mode .earnings-stat { min-height: 91px; padding: 12px; }
  body.cabinet-mode .earnings-stat > span { font-size: 10px; }
  body.cabinet-mode .earnings-stat > strong { margin-top: 5px; font-size: 22px; }
  body.cabinet-mode .earnings-stat > small { margin-top: 5px; font-size: 10px; line-height: 1.25; }
  body.cabinet-mode .earnings-card { padding: 14px; }
  body.cabinet-mode .earnings-card h2,
  body.cabinet-mode .earnings-section-heading h2 { font-size: 19px; }
  body.cabinet-mode .earnings-rules { gap: 6px; margin: 14px 0 16px; }
  body.cabinet-mode .earnings-rules span { min-height: 68px; padding: 8px 5px; }
  body.cabinet-mode .earnings-rules b { font-size: 20px; }
  body.cabinet-mode .earnings-rules small { font-size: 10px; }
  body.cabinet-mode .earnings-link-row,
  body.cabinet-mode .earnings-link-actions { grid-template-columns: 1fr; }
  body.cabinet-mode .earnings-link-row .button { width: 100%; }
  body.cabinet-mode .earnings-example-grid { gap: 6px; }
  body.cabinet-mode .earnings-example-grid > * { padding: 8px; font-size: 12px; }
  body.cabinet-mode .earnings-cross-link { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px 14px; }
  body.cabinet-mode .earnings-cross-link .button { width: 100%; }
  body.cabinet-mode .payout-form-grid { grid-template-columns: 1fr; }
  body.cabinet-mode .earnings-donation-block--cyan { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  body.cabinet-mode .earnings-donation-actions { grid-column: auto; }
}

/* Partner earnings uses the existing cabinet surfaces and button tokens. */
body.cabinet-mode .earnings-shell { max-width: var(--cabinet-content-max, 1120px); }
body.cabinet-mode .earnings-lead { margin: 18px 0 4px; color: var(--white); font-size: 22px; font-weight: 700; }
body.cabinet-mode .earnings-subtitle { margin: 0 0 18px; color: var(--muted); }
body.cabinet-mode .earnings-summary--full { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
body.cabinet-mode .earnings-stat { display: flex; min-height: 112px; flex-direction: column; justify-content: center; padding: 18px; }
body.cabinet-mode .earnings-stat > span { color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: .08em; }
body.cabinet-mode .earnings-stat > strong { margin-top: 8px; color: var(--cyan); font-size: 30px; line-height: 1; }
body.cabinet-mode .earnings-stat > small { margin-top: 8px; color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-program { padding: 22px; }
body.cabinet-mode .earnings-program > h2 { margin: 8px 0 6px; }
body.cabinet-mode .earnings-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
body.cabinet-mode .earnings-rules span { padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
body.cabinet-mode .earnings-rules b { display: block; margin-bottom: 3px; color: var(--cyan); font-size: 20px; }
body.cabinet-mode .earnings-link { margin: 18px 0; }
body.cabinet-mode .earnings-link label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
body.cabinet-mode .earnings-link > div { display: flex; gap: 8px; }
body.cabinet-mode .earnings-link input { min-width: 0; flex: 1; }
body.cabinet-mode .earnings-link small, body.cabinet-mode .earnings-muted { color: var(--muted); }
body.cabinet-mode .earnings-cross-link { margin: 16px 0; }
body.cabinet-mode .earnings-sections { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; margin-top: 22px; }
body.cabinet-mode .earnings-sections h3 { margin: 0 0 10px; font-size: 17px; }
body.cabinet-mode .earnings-history, body.cabinet-mode .payout-history { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
body.cabinet-mode .earnings-history li, body.cabinet-mode .payout-history li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
body.cabinet-mode .earnings-history small, body.cabinet-mode .payout-history small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
body.cabinet-mode .earnings-history b { color: var(--cyan); white-space: nowrap; }
body.cabinet-mode .earnings-history .is-empty, body.cabinet-mode .payout-history .is-empty { color: var(--muted); }
body.cabinet-mode .payout-form { display: grid; gap: 9px; margin: 14px 0 22px; }
body.cabinet-mode .payout-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
body.cabinet-mode .payout-form .button { margin-top: 4px; }
body.cabinet-mode .earnings-program-actions { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  body.cabinet-mode .earnings-lead { margin-top: 12px; font-size: 19px; }
  body.cabinet-mode .earnings-summary--full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.cabinet-mode .earnings-stat { min-height: 94px; padding: 13px; }
  body.cabinet-mode .earnings-stat > strong { font-size: 24px; }
  body.cabinet-mode .earnings-program { padding: 15px; }
  body.cabinet-mode .earnings-rules, body.cabinet-mode .earnings-sections { grid-template-columns: 1fr; gap: 14px; }
  body.cabinet-mode .earnings-link > div { display: grid; grid-template-columns: 1fr; }
  body.cabinet-mode .earnings-link .button { width: 100%; }
}

/* Unified cabinet surfaces for profile and the earnings shell. */
.cabinet-card,
body.cabinet-mode .profile-card,
body.cabinet-mode .profile-stat,
body.cabinet-mode .bonus-overview article,
body.cabinet-mode .bonus-card,
body.cabinet-mode .bonus-wide-card,
body.cabinet-mode .sub-card,
body.cabinet-mode .device-card,
body.cabinet-mode .help-card,
body.cabinet-mode .identity-card,
body.cabinet-mode .session-card,
body.cabinet-mode .state-banner,
body.cabinet-mode .empty-state {
  border-radius: 16px;
}

.profile-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.profile-top-card {
  min-width: 0;
  min-height: 190px;
  padding: 16px;
  background: rgba(11, 28, 43, .72);
}

.profile-top-card h2 {
  margin: 8px 0 4px;
  font: 600 24px/1.08 var(--display);
  overflow-wrap: anywhere;
}

.profile-top-card .profile-username {
  margin: 0 0 10px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.profile-top-card .profile-facts {
  display: grid;
  gap: 5px;
  margin: 0;
}

.profile-top-card .profile-facts div,
.traffic-summary div,
.earnings-card-summary div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.profile-top-card .profile-facts dt,
.traffic-summary dt,
.earnings-card-summary dt,
.earnings-stat span {
  color: var(--muted);
  font-size: 11px;
}

.profile-top-card .profile-facts dd,
.traffic-summary dd,
.earnings-card-summary dd {
  margin: 0;
  color: var(--white);
  font-size: 12px;
  text-align: right;
}

.profile-top-card .button {
  margin-top: auto;
  padding-block: 9px;
}

.profile-top-card--identity,
.profile-top-card--traffic,
.profile-top-card--earnings {
  display: flex;
  flex-direction: column;
}

.traffic-summary,
.earnings-card-summary {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
}

.traffic-summary dd,
.earnings-card-summary dd,
.earnings-stat strong {
  color: var(--cyan);
  font: 600 18px/1 var(--display);
}

.earnings-shell .simple-shell,
.earnings-shell {
  max-width: 1180px;
}

.earnings-shell > h1 {
  margin-bottom: 20px;
}

.earnings-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.earnings-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.earnings-stat strong {
  font-size: 25px;
}

.earnings-program {
  padding: 20px;
}

.earnings-program h2 {
  margin: 8px 0;
  font-size: 26px;
}

.earnings-program > p:not(.mini-label) {
  max-width: 650px;
  color: var(--muted);
  line-height: 1.55;
}

.earnings-future-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.earnings-future-grid span {
  padding: 10px;
  border: 1px solid rgba(85, 231, 244, .16);
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 900px) {
  .profile-top-grid {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, .78fr));
  }

  .profile-top-card {
    min-height: 170px;
    padding: 14px;
  }

  .profile-top-card h2 {
    font-size: 21px;
  }

  .traffic-summary,
  .earnings-card-summary {
    gap: 7px;
    margin-top: 13px;
  }

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

  .traffic-summary div,
  .earnings-card-summary div {
    display: block;
  }

  .traffic-summary dd,
  .earnings-card-summary dd {
    margin-top: 3px;
    text-align: left;
  }

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

@media (max-width: 600px) {
  .profile-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-top-card--identity {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .profile-top-card--traffic,
  .profile-top-card--earnings {
    min-height: 160px;
  }

  .profile-top-card .button {
    width: 100%;
    font-size: 12px;
  }

  .earnings-summary {
    grid-template-columns: 1fr;
  }

  .earnings-stat {
    padding: 14px 16px;
  }

  .earnings-program {
    padding: 16px;
  }
}

/* Cabinet data audit: use the existing cabinet scale while keeping canonical data dense. */
body.cabinet-mode .simple-shell > h1,
body.cabinet-mode .dashboard-top h1,
body.cabinet-mode .page-title-row h1 {
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.05;
  margin-bottom: 16px;
}

body.cabinet-mode .simple-shell {
  padding-top: 24px;
  padding-bottom: 28px;
}

body.cabinet-mode .profile-status-card {
  padding: 20px 22px;
  margin-bottom: 12px;
}

body.cabinet-mode .profile-status-copy h2 {
  margin: 8px 0 4px;
}

body.cabinet-mode .profile-status-copy p:last-child {
  margin-bottom: 0;
}

.profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.profile-stat {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.profile-stat .mini-label {
  margin-bottom: 10px;
}

.profile-stat strong,
.profile-stat small {
  display: block;
}

.profile-stat strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.profile-stat small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

body.cabinet-mode .profile-grid {
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.cabinet-mode .profile-card {
  padding: 18px;
}

body.cabinet-mode .profile-card h2 {
  margin: 10px 0 8px;
}

body.cabinet-mode .profile-card .button {
  margin-top: 14px;
}

.profile-facts {
  margin: 14px 0 0;
}

.profile-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}

.profile-facts dt,
.profile-facts dd {
  margin: 0;
}

.profile-facts dt {
  color: var(--muted);
}

.profile-facts dd {
  color: var(--ink);
  text-align: right;
}

.profile-device-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.profile-device-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}

.profile-device-list span {
  color: var(--muted);
  text-align: right;
}

.profile-more-devices {
  margin: 10px 0 0;
  color: var(--muted);
}

body.cabinet-mode #referral-view .bonuses-shell {
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px;
}

body.cabinet-mode .bonus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.cabinet-mode .bonus-card,
body.cabinet-mode .bonus-wide-card {
  min-height: 0;
  padding: 18px;
}

body.cabinet-mode .bonus-wide-card,
body.cabinet-mode .bonus-history-card {
  grid-column: 1 / -1;
}

.bonus-wide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.35fr);
  align-items: center;
  gap: 24px;
}

.bonus-wide-card h2 {
  margin: 8px 0;
}

.bonus-wide-card p:last-child {
  margin-bottom: 0;
}

.bonus-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.bonus-stat-strip div {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(16, 40, 58, .72);
}

.bonus-stat-strip dt,
.bonus-stat-strip dd {
  margin: 0;
}

.bonus-stat-strip dt {
  color: var(--muted);
  font-size: 12px;
}

.bonus-stat-strip dd {
  margin-top: 5px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
}

body.cabinet-mode #help-view .simple-shell {
  padding-top: 24px;
}

body.cabinet-mode #help-view .help-card,
body.cabinet-mode #help-view .support-card {
  min-height: 0;
  padding: 18px;
}

body.cabinet-mode #help-view .help-warning,
body.cabinet-mode #help-view .support-warning {
  padding: 12px 14px;
}

@media (max-width: 900px) {
  body.cabinet-mode .simple-shell,
  body.cabinet-mode #referral-view .bonuses-shell {
    width: calc(100% - 32px);
    padding-top: 18px;
    padding-bottom: 22px;
  }

  body.cabinet-mode .simple-shell > h1,
  body.cabinet-mode .dashboard-top h1,
  body.cabinet-mode .page-title-row h1 {
    font-size: clamp(32px, 9vw, 42px);
    margin-bottom: 12px;
  }

  body.cabinet-mode .profile-status-card {
    padding: 16px;
  }

  .profile-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .profile-stat {
    padding: 14px;
  }

  .profile-stat strong {
    font-size: 19px;
  }

  body.cabinet-mode .profile-grid,
  body.cabinet-mode .bonus-grid {
    grid-template-columns: 1fr;
  }

  .bonus-wide-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

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

/* Cabinet campaign and identity views reuse the existing Fritz surfaces. */
.account-link-panel { margin-top: 14px; border: 1px solid rgba(85, 231, 244, .28); background: rgba(85, 231, 244, .06); padding: 14px 16px; }
.account-link-panel p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.account-link-actions, .bonus-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-link-actions .button, .bonus-actions .button { min-height: 44px; }
.bonus-grid { display: grid; gap: 14px; }
.bonus-card { border: 1px solid var(--line); background: rgba(11, 28, 43, .7); padding: 22px; }
.bonus-card h2 { margin: 8px 0; font-size: 26px; }
.bonus-card p { color: var(--muted); }
.bonus-link-value { overflow-wrap: anywhere; color: var(--white) !important; font-size: 14px; }
.bonus-stats dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
.bonus-stats dl div { border-top: 1px solid var(--line); padding-top: 10px; }
.bonus-stats dt { color: var(--muted); font-size: 12px; }
.bonus-stats dd { margin: 4px 0 0; font-size: 20px; }
.bonus-history { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.bonus-history li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.bonus-history strong { color: var(--cyan); white-space: nowrap; }
@media (min-width: 701px) {
  .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus-card:first-child, .bonus-stats { grid-column: span 1; }
}
@media (max-width: 700px) {
  .bonus-card { padding: 16px; }
  .bonus-stats dl { grid-template-columns: 1fr 1fr; gap: 10px; }
  .account-link-actions .button, .bonus-actions .button { flex: 1 1 150px; }
}

/* Approved campaign projection: keep the cabinet useful without a long card stack. */
body.cabinet-mode #referral-view .bonuses-shell {
  padding-top: 28px;
  padding-bottom: 48px;
}

.bonus-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.bonus-overview article {
  border: 1px solid var(--line);
  background: rgba(11, 28, 43, .7);
  padding: 14px 16px;
}

.bonus-overview span,
.bonus-overview strong {
  display: block;
}

.bonus-overview span {
  color: var(--muted);
  font-size: 12px;
}

.bonus-overview strong {
  margin-top: 6px;
  color: var(--white);
  font: 600 22px/1.1 var(--display);
}

body.cabinet-mode .bonus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.cabinet-mode .bonus-card,
body.cabinet-mode .bonus-wide-card {
  padding: 18px;
}

body.cabinet-mode .bonus-card h2,
body.cabinet-mode .bonus-wide-card h2 {
  margin: 7px 0 8px;
  font-size: 22px;
  line-height: 1.12;
}

body.cabinet-mode .bonus-card p,
body.cabinet-mode .bonus-wide-card p {
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.45;
}

body.cabinet-mode .bonus-wide-card {
  grid-column: 1 / -1;
}

.bonus-status,
.bonus-renewal-state {
  display: block;
  color: var(--cyan);
  font-size: 13px;
}

.bonus-renewal.is-eligible {
  border-color: rgba(85, 231, 244, .55);
}

.bonus-renewal .button {
  margin-top: 14px;
}

.bonus-referral {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.15fr);
  align-items: center;
}

.bonus-referral .bonus-link-actions {
  margin-top: 14px;
}

.bonus-referral .bonus-link-value {
  margin-top: 10px;
  color: var(--muted) !important;
  font-size: 12px;
}

.bonus-loyalty {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.15fr);
}

.bonus-loyalty-progress {
  min-width: 0;
}

.bonus-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.bonus-progress-label strong {
  color: var(--cyan);
  white-space: nowrap;
}

.bonus-progress-track {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(183, 199, 209, .16);
}

.bonus-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.bonus-history {
  gap: 0;
}

.bonus-history li {
  align-items: center;
  padding: 10px 0;
}

.bonus-history li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.bonus-history li div span,
.bonus-history li div small {
  display: block;
}

.bonus-history li div small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.bonus-history-empty {
  color: var(--muted);
}

@media (max-width: 700px) {
  .bonus-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bonus-overview article {
    padding: 11px 10px;
  }

  .bonus-overview span {
    font-size: 10px;
    line-height: 1.25;
  }

  .bonus-overview strong {
    font-size: 17px;
  }

  body.cabinet-mode .bonus-grid {
    grid-template-columns: 1fr;
  }

  .bonus-referral,
  .bonus-loyalty {
    grid-template-columns: 1fr;
  }

  .bonus-referral .bonus-stat-strip {
    margin-top: 12px;
  }

  .bonus-referral .bonus-link-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bonus-referral .bonus-link-actions .button {
    width: 100%;
  }
}

/* Website free trial uses the existing campaign entry point, not a tariff. */
body.acquisition-mode .acquisition-free-trial {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(183, 199, 209, .18);
}
body.acquisition-mode .acquisition-free-trial .button {
  min-height: 46px;
}
body.acquisition-mode .acquisition-free-trial p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
body.acquisition-mode .trial-result p {
  margin: 0 0 20px;
  color: var(--muted);
}
body.acquisition-mode .trial-result {
  max-width: 760px;
  padding: 26px 28px;
}
body.acquisition-mode .acquisition-steps[hidden] {
  display: none;
}
body.acquisition-mode .trial-result p + p {
  margin-top: -4px;
}
body.acquisition-mode .trial-result .button.full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  padding-inline: 12px;
  white-space: nowrap;
}
body.acquisition-mode .trial-result .button.full span { margin-left: 0; }

@media (max-width: 700px) {
  body.acquisition-mode .acquisition-free-trial { margin-top: 10px; padding-top: 12px; }
  body.acquisition-mode .acquisition-free-trial .button { min-height: 46px; }
  body.acquisition-mode .trial-result { padding: 20px 18px; }
}

/* Website support is a public entry point; keep its form readable on both account states. */
.support-page { max-width: 760px; }
.support-lede { max-width: 560px; color: var(--muted); font-size: 17px; }
.support-identity { display: flex; justify-content: space-between; gap: 18px; margin: 26px 0 16px; padding: 15px 18px; border: 1px solid rgba(85,231,244,.24); border-left: 2px solid var(--cyan); background: rgba(11,28,43,.62); }
.support-identity strong { font-size: 15px; }
.support-identity span { color: var(--muted); }
.support-form-public { margin-top: 0; padding: 24px; border: 1px solid var(--line); background: rgba(11,28,43,.7); }
.support-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.support-form input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,14,23,.78); color: var(--white); padding: 12px 14px; }
.support-form input:focus { outline: 2px solid rgba(85,231,244,.55); outline-offset: 2px; border-color: var(--cyan); }
.support-telegram-link { display: inline-block; margin-top: 18px; color: var(--muted); font-size: 14px; }
.support-telegram-link:hover { color: var(--cyan); }
.support-form .form-feedback { min-height: 22px; }
@media (max-width: 600px) {
  .support-page { padding-top: 34px; }
  .support-identity { display: grid; gap: 4px; }
  .support-form-public { padding: 16px; }
  .support-field-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Phase 3.4C: keep the website support flow compact and on the shared site scale. */
.support-page { max-width: 760px; padding-top: 30px; padding-bottom: 42px; }
.support-page > .back-link { margin-bottom: 18px; }
.support-page > .eyebrow { margin-bottom: 8px; }
.support-page > h1 { margin-bottom: 8px; }
.support-lede { margin-bottom: 18px; font-size: 16px; line-height: 1.45; }
.support-identity { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; }
.support-form-public { gap: 9px; padding: 20px; border-radius: 16px; }
.support-form label { gap: 5px; font-size: 12px; }
.support-form input, .support-form select { min-height: 44px; padding: 10px 12px; }
.support-form textarea { min-height: 104px; padding: 10px 12px; }
.support-form .button { margin-top: 2px; min-height: 48px; }
.support-guest-note { margin: -2px 0 0; color: var(--muted); font-size: 12px; }
.support-attachment-field { display: grid; gap: 7px; }
.support-file-label { display: inline-flex !important; width: fit-content; min-height: 42px; align-items: center; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--white) !important; cursor: pointer; }
.support-file-label:hover, .support-file-label:focus-within { border-color: var(--cyan); color: var(--cyan) !important; }
.support-attachment-field input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.support-attachment-list { display: flex; flex-wrap: wrap; gap: 6px; }
.support-attachment-item { display: inline-flex; max-width: 100%; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(85,231,244,.2); border-radius: 8px; color: var(--muted); font-size: 12px; }
.support-attachment-item button { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font: inherit; }
.support-success { padding: 28px; border: 1px solid rgba(85,231,244,.25); border-radius: 16px; background: rgba(11,28,43,.7); }
.support-success h2 { margin: 4px 0 12px; font-size: clamp(28px, 4vw, 42px); }
.support-success p { margin: 0 0 8px; color: var(--muted); }
.support-success p strong { color: var(--white); }
.support-success .button { margin-top: 14px; }
@media (max-width: 600px) {
  .support-page { padding-top: 24px; padding-bottom: 30px; }
  .support-page > .back-link { margin-bottom: 14px; }
  .support-form-public { padding: 16px; }
  .support-success { padding: 20px 16px; }
}

@media (min-width: 701px) {
  .support-page { padding-top: 0; padding-bottom: 16px; }
  .support-page > .back-link { margin-bottom: 6px; }
  .support-page > h1 { margin-bottom: 4px; font-size: clamp(48px, 5.5vw, 56px); }
  .support-lede { margin-bottom: 8px; }
  .support-identity { margin-bottom: 6px; padding: 6px 12px; }
  .support-form-public { gap: 4px; padding: 10px; }
  .support-form textarea { min-height: 96px; }
}

/* Phase 3.4D: final support spacing and shared accent/footer treatment. */
.support-identity {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--cyan);
  border-left-width: 3px;
  background: var(--cyan);
  color: var(--navy-950);
}
.support-identity strong { color: var(--navy-950); }
.support-identity span { color: rgba(5, 13, 22, .72); }
.support-form-public { gap: 7px; padding: 14px; }
.support-field-grid { gap: 10px; }
.support-form label { gap: 4px; }
.support-form textarea { min-height: 88px; }
.support-attachment-field { gap: 5px; }
.support-form .button { margin-top: 1px; }
.site-footer {
  padding: 12px 0;
  color: var(--muted);
  font: 12px/1.4 var(--ui);
  letter-spacing: .02em;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer-copyright { color: var(--muted); }
.site-footer-telegram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 0;
  color: var(--cyan);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
.site-footer-telegram:hover { color: var(--focus); }
.site-footer-telegram svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 600px) {
  .support-page { padding-top: 14px; padding-bottom: 22px; }
  .support-page > .back-link { margin-bottom: 8px; }
  .support-page > .eyebrow { margin-bottom: 6px; }
  .support-page > h1 { margin-bottom: 6px; font-size: 44px; line-height: .95; }
  .support-lede { margin-bottom: 12px; font-size: 16px; line-height: 1.4; }
  .support-identity { margin-bottom: 8px; padding: 8px 12px; }
  .support-form-public { gap: 6px; padding: 12px; }
  .support-field-grid { gap: 8px; }
  .support-form textarea { min-height: 82px; }
  .site-footer { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .site-footer .container { flex-direction: column; justify-content: center; gap: 2px; }
  .site-footer-telegram { min-height: 40px; }
}

/* Public support has no cabinet bottom navigation; do not reserve its space. */
@media (max-width: 900px) {
  body.cabinet-nested #support-view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Phase 3.3C: keep Safari's stable and dynamic viewport anchors deterministic. */
html.acquisition-mode { scroll-behavior: auto; }
body.acquisition-mode .view.active {
  min-height: calc(100svh - 150px);
  min-height: calc(100dvh - 150px);
}
body.acquisition-mode .acquisition-page {
  scroll-margin-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
body.acquisition-mode .site-footer {
  padding-bottom: max(22px, calc(22px + env(safe-area-inset-bottom)));
}

@media (min-width: 701px) {
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-auth-pane { padding-top: 0; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin: 8px 0 6px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 48px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 12px; }
}

@media (max-width: 700px) {
  body.acquisition-mode .acquisition-page {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  body.acquisition-mode .acquisition-panel { padding: 16px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 10px; line-height: 1.4; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 12px; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin: 6px 0 5px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; line-height: 1.4; }
  body.acquisition-mode .acquisition-telegram-glyph,
  body.acquisition-mode .acquisition-email-glyph { width: 44px; height: 44px; }
  body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 48px; }
  body.acquisition-mode .acquisition-auth-pane input { min-height: 46px; margin: 4px 0 8px; }
  body.acquisition-mode .acquisition-auth-pane .acquisition-helper { margin-top: 6px; }
  body.acquisition-mode .acquisition-back { margin-top: 10px; }
}

@media (max-width: 380px) {
  .acquisition-steps { font-size: 9px; }
  .acquisition-steps > span { gap: 4px; }
  .acquisition-page > h1 { font-size: 36px; }
}

/* Phase 3.3C-3B: keep the acquisition journey compact without clipping content. */
body.acquisition-mode .view.active { min-height: calc(100dvh - 150px); }
body.acquisition-mode .acquisition-page { padding: 22px 24px 28px; }
body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 14px; }
body.acquisition-mode .acquisition-page > .eyebrow { margin-bottom: 8px; }
body.acquisition-mode .acquisition-page > h1 { margin-bottom: 8px; font-size: clamp(40px, 4.5vw, 60px); }
body.acquisition-mode .acquisition-lead { margin-bottom: 18px; font-size: 16px; line-height: 1.45; }
body.acquisition-mode .acquisition-steps { margin-bottom: 18px; }
body.acquisition-mode .acquisition-panel { padding: 22px; }
body.acquisition-mode .acquisition-tariffs { gap: 12px; margin-bottom: 16px; }
body.acquisition-mode .acquisition-tariff { min-height: 112px; padding: 16px 18px; }
body.acquisition-mode .acquisition-tariff strong { margin-top: 14px; }

/* Launch correction: keep partner controls on the canonical dark surfaces. */
body.cabinet-mode .earnings-link-row,
body.cabinet-mode .earnings-link-actions,
body.cabinet-mode .earnings-spend-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.cabinet-mode .earnings-link input,
body.cabinet-mode .payout-form input,
body.cabinet-mode .payout-form select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--navy-950);
  color: var(--white);
  font: inherit;
  padding: 10px 12px;
}
body.cabinet-mode .earnings-link input:focus,
body.cabinet-mode .payout-form input:focus,
body.cabinet-mode .payout-form select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
body.cabinet-mode .earnings-link-row input { flex: 1 1 260px; }
body.cabinet-mode .earnings-link-actions .button,
body.cabinet-mode .earnings-spend-actions .button { flex: 1 1 180px; }
body.cabinet-mode .earnings-promo,
body.cabinet-mode .earnings-donation-block { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 13, 22, .42); }
body.cabinet-mode .earnings-promo h2 { margin: 0 0 7px; font-size: clamp(22px, 3vw, 32px); }
body.cabinet-mode .earnings-promo h3 { margin: 15px 0 6px; }
body.cabinet-mode .earnings-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
body.cabinet-mode .earnings-example-grid > * { padding: 10px; border-radius: 10px; background: rgba(85, 231, 244, .07); color: var(--muted); }
body.cabinet-mode .earnings-example-grid strong { color: var(--cyan); }
body.cabinet-mode .earnings-example-result { margin-bottom: 0; color: var(--white); }
body.cabinet-mode .earnings-donation-block { border-color: rgba(231, 184, 92, .35); }
body.cabinet-mode .button-gold {
  border-color: rgba(231, 184, 92, .52);
  background: rgba(231, 184, 92, .10);
  color: var(--gold);
}
body.cabinet-mode .button-gold:hover,
body.cabinet-mode .button-gold:focus-visible {
  border-color: var(--gold);
  background: rgba(231, 184, 92, .18);
  color: var(--white);
}

/* Payment tariffs are always a centered vertical term/price pair. */
body.cabinet-mode #subscription-view .payment-tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.cabinet-mode #subscription-view .payment-tariff {
  display: flex !important;
  min-height: 92px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  text-align: center !important;
}
body.cabinet-mode #subscription-view .payment-tariff strong,
body.cabinet-mode #subscription-view .payment-tariff span { white-space: nowrap; }
body.cabinet-mode #subscription-view .payment-tariff strong { font-size: 16px; }
body.cabinet-mode #subscription-view .payment-tariff span { font-size: 18px; }

@media (max-width: 700px) {
  body.cabinet-mode .earnings-example-grid { grid-template-columns: 1fr; }
  body.cabinet-mode .earnings-link-row,
  body.cabinet-mode .earnings-link-actions,
  body.cabinet-mode .earnings-spend-actions { display: grid; grid-template-columns: 1fr; }
  body.cabinet-mode .earnings-link-row input,
  body.cabinet-mode .earnings-link-row .button,
  body.cabinet-mode .earnings-link-actions .button,
  body.cabinet-mode .earnings-spend-actions .button { width: 100%; }
  body.cabinet-mode #subscription-view .payment-tariff { min-height: 86px !important; padding-inline: 4px !important; }
}
body.acquisition-mode .acquisition-panel > .button.full { min-height: 48px; }
body.acquisition-mode .acquisition-identity-lead { margin-bottom: 16px; line-height: 1.45; }
body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 18px; }
body.acquisition-mode .acquisition-auth-pane { padding-top: 0; }
body.acquisition-mode .acquisition-auth-pane h3 { margin: 10px 0 6px; font-size: 20px; }
body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 14px; line-height: 1.45; }
body.acquisition-mode .acquisition-telegram-glyph,
body.acquisition-mode .acquisition-email-glyph { width: 48px; height: 48px; }
body.acquisition-mode .acquisition-telegram-glyph svg,
body.acquisition-mode .acquisition-email-glyph svg { width: 23px; height: 23px; }
body.acquisition-mode .acquisition-auth-pane input { min-height: 46px; margin: 6px 0 10px; }
body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 48px; }
body.acquisition-mode .acquisition-auth-pane .acquisition-helper { margin-top: 8px; }
body.acquisition-mode .acquisition-back { margin-top: 14px; }
body.acquisition-mode .acquisition-summary-intro > .eyebrow { margin-bottom: 0; }
body.acquisition-mode .acquisition-summary-plan { gap: 16px; margin: 18px 0 12px; padding: 16px 0; }
body.acquisition-mode .acquisition-summary-plan strong { font-size: 22px; }
body.acquisition-mode .acquisition-summary-total strong { font-size: 32px; }
body.acquisition-mode .acquisition-confirmed { margin-bottom: 18px; }
body.acquisition-mode .acquisition-summary .acquisition-payment-note { margin-top: 10px; }
body.acquisition-mode .trial-result {
  width: min(100%, 640px);
  max-width: 640px;
  margin-inline: auto;
}

@media (min-width: 701px) and (max-height: 800px) {
  body.acquisition-mode .acquisition-page { padding-top: 16px; padding-bottom: 0; }
  body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-page > h1 { font-size: clamp(38px, 4vw, 52px); }
  body.acquisition-mode .acquisition-lead { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-steps { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-panel { padding: 18px 22px; }
  body.acquisition-mode .acquisition-tariff { min-height: 104px; padding: 14px 16px; }
  body.acquisition-mode .acquisition-tariff strong { margin-top: 10px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 12px; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin-top: 7px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-summary-plan { margin-top: 14px; padding: 12px 0; }
  body.acquisition-mode .acquisition-confirmed { margin-bottom: 14px; }
}

@media (max-width: 700px) {
  body.acquisition-mode .view.active { min-height: calc(100dvh - 128px); }
  body.acquisition-mode .acquisition-page { padding: 18px 18px 24px; }
  body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-page > h1 { font-size: clamp(36px, 10vw, 48px); }
  body.acquisition-mode .acquisition-lead { margin-bottom: 16px; font-size: 15px; }
  body.acquisition-mode .acquisition-steps { margin-bottom: 16px; }
  body.acquisition-mode .acquisition-panel { padding: 18px; }
  body.acquisition-mode .acquisition-tariffs { gap: 8px; margin-bottom: 14px; }
  body.acquisition-mode .acquisition-tariff { min-height: 76px; padding: 12px 14px; }
  body.acquisition-mode .acquisition-tariff strong { margin-top: 5px; font-size: 24px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 14px; font-size: 14px; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 16px; }
  body.acquisition-mode .acquisition-auth-pane h3 { font-size: 19px; }
  body.acquisition-mode .acquisition-auth-pane > p { font-size: 14px; }
  body.acquisition-mode .acquisition-summary-plan { margin-top: 14px; padding: 14px 0; }
  body.acquisition-mode .acquisition-summary-plan strong { font-size: 20px; }
  body.acquisition-mode .acquisition-summary-total strong { font-size: 28px; }
  body.acquisition-mode .acquisition-confirmed { margin-bottom: 16px; }
}

/* Final cascade guard for the single-column profile card. */
/* Final bonuses mobile density override must follow the cabinet cascade. */
@media (max-width: 700px) {
  body.cabinet-mode #referral-view .bonuses-shell { padding-top: 11px; padding-bottom: 18px; }
  body.cabinet-mode #referral-view .bonuses-shell > .eyebrow { margin-bottom: 4px; }
  body.cabinet-mode #referral-view .bonuses-shell > h1 {
    margin-bottom: 9px;
    font-size: clamp(30px, 7.5vw, 34px);
    line-height: 1.04;
    white-space: nowrap;
  }
  body.cabinet-mode #referral-view .bonus-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
  }
  body.cabinet-mode #referral-view .bonus-overview article:last-child { grid-column: auto; }
  body.cabinet-mode #referral-view .bonus-overview article { min-width: 0; padding: 9px 8px; }
  body.cabinet-mode #referral-view .bonus-overview span { font-size: 10px; line-height: 1.2; }
  body.cabinet-mode #referral-view .bonus-overview strong { margin-top: 4px; font-size: 17px; }
  body.cabinet-mode #referral-view .bonus-grid { gap: 8px; }
  body.cabinet-mode #referral-view .bonus-card,
  body.cabinet-mode #referral-view .bonus-wide-card { padding: 12px; }
  body.cabinet-mode #referral-view .bonus-card h2,
  body.cabinet-mode #referral-view .bonus-wide-card h2 { margin-top: 5px; margin-bottom: 6px; }
  body.cabinet-mode #referral-view .bonus-card p,
  body.cabinet-mode #referral-view .bonus-wide-card p { margin-top: 6px; line-height: 1.38; }
  body.cabinet-mode #referral-view .bonus-loyalty .bonus-loyalty-progress { margin-top: 9px; }
  body.cabinet-mode #referral-view .bonus-progress-track { margin-top: 7px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions { display: flex; flex-direction: row; gap: 7px; margin-top: 10px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions .button { min-width: 0; flex: 1 1 0; padding-inline: 8px; font-size: 13px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-stat-strip { gap: 6px; margin-top: 9px; }
  body.cabinet-mode #referral-view .bonus-stat-strip div { padding: 8px; }
  body.cabinet-mode #referral-view .bonus-stat-strip dd { margin-top: 3px; font-size: 21px; }
  body.cabinet-mode #referral-view .bonus-history li { padding-block: 8px; }
  body.cabinet-mode #referral-view .bonus-history-empty { padding-block: 2px; }
}

body.cabinet-mode #dashboard-view .profile-unified-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-bottom: 10px;
  padding: 16px 18px;
}

body.cabinet-mode #dashboard-view .profile-unified-card h2 {
  margin: 7px 0 3px;
  font-size: 25px;
  line-height: 1.1;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
  margin-bottom: 9px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
  gap: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
  padding-top: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value {
  color: var(--green);
  font-weight: 600;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.warning {
  color: var(--danger);
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.gold {
  color: var(--gold);
}

body.cabinet-mode #dashboard-view .profile-unified-card .button {
  width: fit-content;
  min-height: 44px;
  margin-top: 10px;
  padding-block: 10px;
}

@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view > .dashboard-shell > .dashboard-content {
    padding-bottom: 0 !important;
  }

  body.cabinet-mode #dashboard-view .dashboard-top { margin-bottom: 12px; }
  body.cabinet-mode #dashboard-view .dashboard-top h1 { font-size: 38px; line-height: 1; }
  body.cabinet-mode #dashboard-view .profile-greeting { margin: 7px 0 2px; }
  body.cabinet-mode #dashboard-view .profile-top-note { margin: 0; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 9px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 13px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  body.cabinet-mode #dashboard-view .profile-card { display: flex; min-height: 0; flex-direction: column; padding: 15px 16px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: auto; padding-block: 10px; }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view .profile-unified-card { padding: 14px; }
  body.cabinet-mode #dashboard-view .profile-unified-card .button { width: 100%; min-height: 46px; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 8px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 11px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: 1fr; gap: 8px; }
  body.cabinet-mode #dashboard-view .profile-card { padding: 12px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: 10px; }
}

/* Keep the approved donation strip cyan after legacy cabinet cascades. */
body.cabinet-mode .earnings-donation-block--cyan {
  margin: 0;
  border-color: rgba(85, 231, 244, .58) !important;
  background: linear-gradient(100deg, rgba(85, 231, 244, .16), rgba(9, 29, 43, .88) 56%, rgba(5, 13, 22, .82)) !important;
  box-shadow: 0 0 28px rgba(85, 231, 244, .10), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Owner-directed Earnings emphasis: keep both project-support actions cyan. */
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-icon {
  border-color: rgba(85, 231, 244, .78);
  background: rgba(85, 231, 244, .12);
}
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-heart {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-primary,
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-outline {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--navy-950);
  box-shadow: 0 8px 22px rgba(85, 231, 244, .18);
}
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-primary:hover,
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-primary:focus-visible,
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-outline:hover,
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button-outline:focus-visible {
  border-color: #a1f7fc;
  background: #a1f7fc;
  color: var(--navy-950);
  box-shadow: 0 0 30px rgba(85, 231, 244, .30);
}
body.cabinet-mode .earnings-donation-block--cyan .earnings-donation-actions .button:disabled {
  border-color: rgba(85, 231, 244, .46);
  background: rgba(85, 231, 244, .13);
  color: rgba(185, 249, 252, .72);
  opacity: .9;
  box-shadow: inset 0 0 0 1px rgba(85, 231, 244, .08);
}

/* Launch final cascade: partner controls and tariff cards use canonical surfaces. */
body.cabinet-mode .button-gold {
  border-color: rgba(231, 184, 92, .52);
  background: rgba(231, 184, 92, .10);
  color: var(--gold);
}
body.cabinet-mode .button-gold:hover,
body.cabinet-mode .button-gold:focus-visible {
  border-color: var(--gold);
  background: rgba(231, 184, 92, .18);
  color: var(--white);
}
body.cabinet-mode #dashboard-view .profile-top-card--traffic,
body.cabinet-mode #dashboard-view .profile-top-card--earnings {
  height: 100%;
  box-sizing: border-box;
}
body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary,
body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary {
  margin-top: 14px;
}
body.cabinet-mode #dashboard-view .profile-top-actions {
  margin-top: 18px;
}
body.cabinet-mode #dashboard-view .profile-top-actions .button,
body.cabinet-mode #dashboard-view .earnings-top-actions .button {
  width: 100%;
  min-width: 0;
  min-height: var(--cabinet-mobile-button-height, 44px);
  box-sizing: border-box;
  margin: 0;
}
body.cabinet-mode #dashboard-view .earnings-top-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

body.cabinet-mode #subscription-view .payment-tariffs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
body.cabinet-mode #subscription-view .payment-tariff {
  display: flex !important;
  min-height: 92px !important;
  box-sizing: border-box;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  text-align: center !important;
}
body.cabinet-mode #subscription-view .payment-tariff strong,
body.cabinet-mode #subscription-view .payment-tariff span {
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 700px) {
  body.cabinet-mode #dashboard-view .profile-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  body.cabinet-mode #dashboard-view .profile-top-card--identity { grid-column: 1 / -1; }
  body.cabinet-mode #dashboard-view .profile-top-card--traffic,
  body.cabinet-mode #dashboard-view .profile-top-card--earnings {
    min-height: 246px;
    padding: 14px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary > div,
  body.cabinet-mode #dashboard-view .earnings-card-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  body.cabinet-mode #dashboard-view .earnings-card-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary dt,
  body.cabinet-mode #dashboard-view .traffic-summary dd,
  body.cabinet-mode #dashboard-view .earnings-card-summary dt,
  body.cabinet-mode #dashboard-view .earnings-card-summary dd { white-space: nowrap; }
  body.cabinet-mode #dashboard-view .earnings-top-actions { margin-top: auto; }
  body.cabinet-mode #subscription-view .payment-tariff {
    min-height: 92px !important;
    padding-inline: 6px !important;
  }
}

/* Launch final cascade: keep the new partner UI above older page-specific rules. */
body.cabinet-mode .button-gold {
  border-color: rgba(231, 184, 92, .52);
  background: rgba(231, 184, 92, .10);
  color: var(--gold);
}
body.cabinet-mode .button-gold:hover,
body.cabinet-mode .button-gold:focus-visible {
  border-color: var(--gold);
  background: rgba(231, 184, 92, .18);
  color: var(--white);
}

body.cabinet-mode #dashboard-view .profile-top-grid {
  align-items: stretch;
}
body.cabinet-mode #dashboard-view .profile-top-card--traffic,
body.cabinet-mode #dashboard-view .profile-top-card--earnings {
  height: 100%;
  box-sizing: border-box;
}
body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary,
body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary {
  margin-top: 14px;
}
body.cabinet-mode #dashboard-view .profile-top-actions {
  margin-top: 18px;
}
body.cabinet-mode #dashboard-view .profile-top-actions .button {
  width: 100%;
  min-width: 0;
  min-height: var(--cabinet-mobile-button-height, 44px);
  box-sizing: border-box;
}
body.cabinet-mode #dashboard-view .earnings-top-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
body.cabinet-mode #dashboard-view .earnings-top-actions .button {
  width: 100%;
  min-width: 0;
  min-height: var(--cabinet-mobile-button-height, 44px);
  box-sizing: border-box;
  margin: 0;
}

body.cabinet-mode #subscription-view .payment-tariffs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
body.cabinet-mode #subscription-view .payment-tariff {
  display: flex !important;
  min-height: 92px !important;
  box-sizing: border-box;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  text-align: center !important;
}
body.cabinet-mode #subscription-view .payment-tariff strong,
body.cabinet-mode #subscription-view .payment-tariff span {
  margin: 0;
  white-space: nowrap;
  text-align: center;
}
body.cabinet-mode #subscription-view .payment-tariff strong { font-size: 16px; }
body.cabinet-mode #subscription-view .payment-tariff span { font-size: 18px; }

@media (max-width: 700px) {
  body.cabinet-mode #dashboard-view .profile-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  body.cabinet-mode #dashboard-view .profile-top-card--identity {
    grid-column: 1 / -1;
  }
  body.cabinet-mode #dashboard-view .profile-top-card--traffic,
  body.cabinet-mode #dashboard-view .profile-top-card--earnings {
    min-height: 246px;
    padding: 14px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary > div,
  body.cabinet-mode #dashboard-view .earnings-card-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  body.cabinet-mode #dashboard-view .traffic-summary dt,
  body.cabinet-mode #dashboard-view .traffic-summary dd,
  body.cabinet-mode #dashboard-view .earnings-card-summary dt,
  body.cabinet-mode #dashboard-view .earnings-card-summary dd {
    white-space: nowrap;
  }
  body.cabinet-mode #dashboard-view .earnings-card-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.cabinet-mode #dashboard-view .earnings-top-actions {
    margin-top: auto;
  }
  body.cabinet-mode #subscription-view .payment-tariff {
    min-height: 92px !important;
    padding-inline: 6px !important;
  }
}

/* Latest correction cascade: final Profile row and CTA geometry. */
body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary,
body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary {
  margin-top: 14px !important;
}

body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary > div,
body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary > div {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
}

body.cabinet-mode #dashboard-view .profile-top-card--identity .profile-top-actions {
  margin-top: 12px !important;
}

body.cabinet-mode #dashboard-view .profile-top-card--identity .profile-top-actions .button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--cabinet-mobile-button-height, 44px) !important;
  box-sizing: border-box;
  flex: 1 1 100% !important;
  padding-block: 8px;
}

body.cabinet-mode #dashboard-view .earnings-top-actions {
  margin-top: 14px !important;
}

@media (max-width: 600px) {
  body.cabinet-mode #dashboard-view .profile-top-grid {
    align-items: stretch;
  }

  body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary > div,
  body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary > div {
    min-width: 0;
  }

  body.cabinet-mode #dashboard-view .profile-top-card--traffic .traffic-summary dd,
  body.cabinet-mode #dashboard-view .profile-top-card--earnings .earnings-card-summary dd {
    margin-top: 0;
    text-align: right;
  }
}

/* Final override: root cabinet headers use the same Profile vertical baseline. */
@media (min-width: 901px) {
  body.cabinet-mode main > .view.active > .simple-shell,
  body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content,
  body.cabinet-mode #referral-view .bonuses-shell,
  body.cabinet-mode #subscription-view .simple-shell,
  body.cabinet-mode #earnings-view .simple-shell,
  body.cabinet-mode #account-view .simple-shell,
  body.cabinet-mode #devices-view .simple-shell,
  body.cabinet-mode #help-view .simple-shell {
    padding-top: var(--cabinet-page-top) !important;
  }
}

@media (max-width: 900px) {
  body.cabinet-mode main > .view.active > .simple-shell,
  body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content,
  body.cabinet-mode #referral-view .bonuses-shell,
  body.cabinet-mode #subscription-view .simple-shell,
  body.cabinet-mode #earnings-view .simple-shell,
  body.cabinet-mode #account-view .simple-shell,
  body.cabinet-mode #devices-view .simple-shell,
  body.cabinet-mode #help-view .simple-shell {
    padding-top: 24px !important;
  }
}

/* Final type rhythm: keep eyebrow, title, and first content block aligned. */
body.cabinet-mode main > .view.active > .simple-shell > .eyebrow,
body.cabinet-mode main > .view.active > .simple-shell .page-title-row .eyebrow,
body.cabinet-mode #dashboard-view .dashboard-top .eyebrow {
  margin-bottom: var(--cabinet-eyebrow-title-gap) !important;
}

body.cabinet-mode main > .view.active > .simple-shell > h1,
body.cabinet-mode main > .view.active > .simple-shell .page-title-row h1,
body.cabinet-mode #dashboard-view .dashboard-top h1 {
  margin-bottom: var(--cabinet-title-content-gap) !important;
}

/* Final residual polish: one compact mobile rhythm without changing content. */
:root {
  --cabinet-mobile-page-gap: 20px;
  --cabinet-mobile-card-padding: 13px;
  --cabinet-mobile-card-gap: 8px;
  --cabinet-mobile-section-gap: 10px;
  --cabinet-mobile-button-height: 44px;
}

@media (max-width: 600px) {
  body.cabinet-mode .profile-top-grid {
    align-items: start;
  }

  body.cabinet-mode main > .view.active > .simple-shell,
  body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content,
  body.cabinet-mode #referral-view .bonuses-shell,
  body.cabinet-mode #subscription-view .simple-shell,
  body.cabinet-mode #earnings-view .simple-shell,
  body.cabinet-mode #account-view .simple-shell,
  body.cabinet-mode #devices-view .simple-shell,
  body.cabinet-mode #help-view .simple-shell {
    padding-top: var(--cabinet-mobile-page-gap) !important;
  }

  body.cabinet-mode .profile-top-grid,
  body.cabinet-mode .profile-quick-stats,
  body.cabinet-mode .profile-grid,
  body.cabinet-mode .sub-layout,
  body.cabinet-mode .devices-grid,
  body.cabinet-mode .help-grid,
  body.cabinet-mode .earnings-summary {
    gap: var(--cabinet-mobile-card-gap);
  }

  body.cabinet-mode .profile-top-card,
  body.cabinet-mode .profile-card,
  body.cabinet-mode .sub-card,
  body.cabinet-mode .cabinet-device-card,
  body.cabinet-mode .device-detail-card,
  body.cabinet-mode .devices-empty,
  body.cabinet-mode .help-card,
  body.cabinet-mode .identity-card,
  body.cabinet-mode .earnings-stat,
  body.cabinet-mode .earnings-program {
    padding: var(--cabinet-mobile-card-padding);
  }

  body.cabinet-mode .profile-top-card--traffic,
  body.cabinet-mode .profile-top-card--earnings {
    min-height: 142px;
  }

  body.cabinet-mode #dashboard-view .profile-top-card--identity h2 {
    margin-top: 5px;
    margin-bottom: 2px;
  }

  body.cabinet-mode #dashboard-view .profile-top-card--identity .profile-username {
    margin-bottom: 7px;
  }

  body.cabinet-mode #dashboard-view .profile-top-card--identity .profile-facts {
    margin-top: 8px;
  }

  body.cabinet-mode .traffic-summary,
  body.cabinet-mode .earnings-card-summary {
    gap: 5px;
    margin-top: 9px;
  }

  body.cabinet-mode .profile-top-card .profile-facts {
    gap: 4px;
  }

  body.cabinet-mode .profile-top-actions,
  body.cabinet-mode .earnings-top-actions {
    gap: 6px;
  }

  body.cabinet-mode .profile-top-card .button,
  body.cabinet-mode .earnings-top-actions .button,
  body.cabinet-mode .profile-card .button,
  body.cabinet-mode .sub-card .button,
  body.cabinet-mode .cabinet-device-card .button,
  body.cabinet-mode .help-card .button {
    min-height: var(--cabinet-mobile-button-height);
    padding-block: 8px;
  }

  body.cabinet-mode .profile-stat {
    padding: 8px 10px;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    margin-bottom: 7px;
  }

  body.cabinet-mode #dashboard-view .profile-stat .mini-label {
    margin-bottom: 4px;
  }

  body.cabinet-mode .profile-stat strong {
    margin-top: 3px;
  }

  body.cabinet-mode .profile-stat small {
    margin-top: 2px;
  }

  body.cabinet-mode #dashboard-view .profile-grid .profile-card {
    padding: 11px;
  }

  body.cabinet-mode #dashboard-view .profile-grid .profile-card h2 {
    margin-top: 6px;
    margin-bottom: 4px;
  }

  body.cabinet-mode #dashboard-view .profile-grid .profile-card p {
    line-height: 1.35;
  }

  body.cabinet-mode #dashboard-view .profile-grid .profile-card .button {
    margin-top: 8px;
  }

  body.cabinet-mode #devices-view .page-title-row {
    margin-bottom: var(--cabinet-mobile-section-gap);
  }

  body.cabinet-mode #devices-view .page-title-row .button {
    margin-top: 8px;
  }

  body.cabinet-mode .devices-add-action {
    margin-top: 8px;
    gap: 4px;
  }

  body.cabinet-mode .device-limit-message {
    line-height: 1.3;
  }

  body.cabinet-mode .cabinet-device-card {
    padding: 12px;
  }

  body.cabinet-mode .device-card-head {
    gap: 8px;
  }

  body.cabinet-mode .device-icon-wrap {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body.cabinet-mode .device-card-head > div:first-child {
    gap: 9px;
  }

  body.cabinet-mode .device-card-head h2 {
    font-size: 20px;
  }

  body.cabinet-mode .device-card-head p {
    font-size: 14px;
  }

  body.cabinet-mode .cabinet-device-card > p.device-card-copy {
    margin: 7px 0;
  }

  body.cabinet-mode .device-card-actions {
    gap: 6px;
    margin-top: 8px;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card h2,
  body.cabinet-mode #subscription-view .payment-card > h2 {
    margin-bottom: 8px;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card ul {
    gap: 4px;
    margin: 8px 0 0;
  }

  body.cabinet-mode #subscription-view .subscription-device-summary {
    margin-top: 10px;
    padding-top: 9px;
  }

  body.cabinet-mode #subscription-view .payment-card {
    margin-top: var(--cabinet-mobile-section-gap);
  }

  body.cabinet-mode #subscription-view .payment-tariffs {
    gap: 6px;
    margin: 11px 0 7px;
  }

  body.cabinet-mode #subscription-view .payment-tariff {
    min-height: 58px;
    padding: 8px;
  }

  body.cabinet-mode .earnings-summary {
    margin-bottom: var(--cabinet-mobile-section-gap);
  }

  body.cabinet-mode .earnings-stat {
    padding-block: 11px;
  }

  body.cabinet-mode .earnings-program h2 {
    margin: 5px 0;
  }

  body.cabinet-mode .earnings-program > p:not(.mini-label) {
    line-height: 1.4;
  }

  body.cabinet-mode .earnings-future-grid {
    gap: 6px;
    margin-top: 12px;
  }

  body.cabinet-mode .earnings-future-grid span {
    padding: 8px 6px;
  }

  body.cabinet-mode #help-view .help-card {
    min-height: 0;
  }

  body.cabinet-mode #help-view .help-card > span {
    font-size: 21px;
  }

  body.cabinet-mode #help-view .help-card h3 {
    margin: 12px 0 5px;
    font-size: 18px;
  }

  body.cabinet-mode #help-view .help-card p {
    line-height: 1.35;
  }

  body.cabinet-mode #account-view .profile-edit-card {
    gap: 11px;
    margin-top: var(--cabinet-mobile-section-gap);
    padding: var(--cabinet-mobile-card-padding);
  }

  body.cabinet-mode #account-view .profile-edit-card .cabinet-lead {
    line-height: 1.4;
  }

  body.cabinet-mode #account-view .identity-card {
    margin-top: var(--cabinet-mobile-section-gap);
  }
}

/* Devices limit belongs to the header rhythm, not a detached right-side note. */
body.cabinet-mode .devices-add-action {
  align-items: end;
}

@media (min-width: 901px) {
  body.cabinet-mode #account-view .simple-shell {
    max-width: 1280px;
    margin-inline: auto;
  }

  body.cabinet-mode #devices-view .page-title-row {
    align-items: start;
    margin-bottom: 14px;
  }

  body.cabinet-mode #devices-view .devices-add-action {
    max-width: 300px;
    padding-top: 31px;
  }

  body.cabinet-mode #devices-view .device-limit-message {
    max-width: 300px;
    text-align: right;
  }
}

/* Cabinet final system: shared geometry, readable data labels, and donation shell. */
:root {
  --cabinet-page-top: 28px;
  --cabinet-eyebrow-title-gap: 8px;
  --cabinet-title-content-gap: 18px;
  --cabinet-section-gap: 14px;
}

/* Keep newly shared cabinet surfaces visually consistent with existing cards. */
body.cabinet-mode .cabinet-card {
  border: 1px solid var(--line);
  background: rgba(11, 28, 43, .72);
}

/* A closed public drawer must not contribute its off-canvas width to scrollWidth. */
.public-drawer:not(.is-open) {
  display: none;
}

.public-drawer.is-open {
  display: flex;
}

body.cabinet-mode main > .view.active > .simple-shell,
body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content {
  padding-top: var(--cabinet-page-top);
}

body.cabinet-mode main > .view.active > .simple-shell > .eyebrow,
body.cabinet-mode main > .view.active > .simple-shell .page-title-row .eyebrow {
  margin-bottom: var(--cabinet-eyebrow-title-gap);
}

body.cabinet-mode main > .view.active > .simple-shell > h1,
body.cabinet-mode main > .view.active > .simple-shell .page-title-row h1,
body.cabinet-mode #dashboard-view .dashboard-top h1 {
  margin-bottom: var(--cabinet-title-content-gap);
}

body.cabinet-mode .profile-top-card .profile-facts dt,
body.cabinet-mode .traffic-summary dt,
body.cabinet-mode .earnings-card-summary dt,
body.cabinet-mode .earnings-stat span {
  color: #b7c7d1;
  font-size: 14px;
  line-height: 1.3;
}

body.cabinet-mode .profile-top-card .profile-facts dd,
body.cabinet-mode .traffic-summary dd,
body.cabinet-mode .earnings-card-summary dd {
  font-size: 14px;
}

body.cabinet-mode .profile-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

body.cabinet-mode .profile-top-actions .button {
  flex: 1 1 150px;
  margin-top: 0;
}

body.cabinet-mode .profile-top-actions .button:only-child {
  flex: 0 1 auto;
}

body.cabinet-mode .earnings-top-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

body.cabinet-mode .earnings-top-actions .button {
  width: 100%;
  margin-top: 0;
}

.button-secondary {
  border-color: rgba(231, 184, 92, .42);
  background: rgba(231, 184, 92, .08);
  color: var(--gold);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--gold);
  background: rgba(231, 184, 92, .14);
  color: var(--white);
}

.earnings-program > .button-secondary { margin-top: 18px; }

.donation-shell { max-width: 760px; }
.donation-shell > h1 {
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -.04em;
}

.donation-card {
  padding: 24px;
}

.donation-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.donation-card > p {
  max-width: 650px;
  color: var(--muted);
  line-height: 1.55;
}

.donation-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid rgba(85, 231, 244, .24);
  border-radius: 14px;
  background: rgba(5, 13, 22, .62);
}

.donation-qr-wrap img {
  width: min(280px, 100%);
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}

.donation-qr-note,
.donation-safety {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.donation-comment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.donation-comment > span {
  color: var(--muted);
  font-size: 14px;
}

.donation-comment code {
  justify-self: end;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(85, 231, 244, .08);
  color: var(--cyan);
  font: 600 14px var(--ui);
}

.donation-comment .button { grid-column: 1 / -1; justify-self: start; }
.donation-safety { margin-top: 16px; }

@media (max-width: 600px) {
  .donation-shell > h1 {
    font-size: clamp(36px, 10vw, 48px);
  }

  body.cabinet-mode .profile-top-actions { display: grid; grid-template-columns: 1fr; }
  body.cabinet-mode .profile-top-actions .button { min-width: 0; padding-inline: 8px; font-size: 12px; }
  .donation-card { padding: 18px; }
  .donation-card h2 { font-size: 25px; }
  .donation-comment { grid-template-columns: 1fr; }
  .donation-comment code { justify-self: start; }
  .donation-comment .button { width: 100%; }
}

/* Final cabinet geometry: all primary pages share the Profile baseline. */
@media (min-width: 901px) {
  body.cabinet-mode main > .view.active > .simple-shell,
  body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content {
    padding-top: var(--cabinet-page-top);
  }

  body.cabinet-mode #referral-view .bonuses-shell {
    padding-top: var(--cabinet-page-top);
  }
}

@media (max-width: 900px) {
  body.cabinet-mode main > .view.active > .simple-shell,
  body.cabinet-mode main > .view.active > .dashboard-shell > .dashboard-content {
    padding-top: 24px;
  }

  body.cabinet-mode #referral-view .bonuses-shell {
    padding-top: 24px;
  }
}

/* Final bonuses mobile density: keep the approved structure, remove stacked air. */
@media (max-width: 700px) {
  body.cabinet-mode #referral-view .bonuses-shell {
    padding-top: 12px;
    padding-bottom: 20px;
  }

  body.cabinet-mode #referral-view .bonuses-shell > .eyebrow { margin-bottom: 4px; }

  body.cabinet-mode #referral-view .bonuses-shell > h1 {
    margin-bottom: 9px;
    font-size: clamp(30px, 7.5vw, 34px);
    line-height: 1.04;
    white-space: nowrap;
  }

  body.cabinet-mode #referral-view .bonus-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
  }

  body.cabinet-mode #referral-view .bonus-overview article:last-child {
    grid-column: auto;
  }

  body.cabinet-mode #referral-view .bonus-overview article {
    min-width: 0;
    padding: 9px 8px;
  }

  body.cabinet-mode #referral-view .bonus-overview span {
    font-size: 10px;
    line-height: 1.2;
  }

  body.cabinet-mode #referral-view .bonus-overview strong {
    margin-top: 4px;
    font-size: 17px;
  }

  body.cabinet-mode #referral-view .bonus-grid { gap: 8px; }

  body.cabinet-mode #referral-view .bonus-card,
  body.cabinet-mode #referral-view .bonus-wide-card {
    padding: 12px;
  }

  body.cabinet-mode #referral-view .bonus-card h2,
  body.cabinet-mode #referral-view .bonus-wide-card h2 {
    margin-top: 5px;
    margin-bottom: 6px;
  }

  body.cabinet-mode #referral-view .bonus-card p,
  body.cabinet-mode #referral-view .bonus-wide-card p {
    margin-top: 6px;
    line-height: 1.38;
  }

  body.cabinet-mode #referral-view .bonus-loyalty .bonus-loyalty-progress { margin-top: 9px; }
  body.cabinet-mode #referral-view .bonus-progress-track { margin-top: 7px; }

  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions {
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin-top: 10px;
  }

  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions .button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 8px;
    font-size: 13px;
  }

  body.cabinet-mode #referral-view .bonus-referral .bonus-stat-strip {
    gap: 6px;
    margin-top: 9px;
  }

  body.cabinet-mode #referral-view .bonus-stat-strip div { padding: 8px; }
  body.cabinet-mode #referral-view .bonus-stat-strip dd { margin-top: 3px; font-size: 21px; }
  body.cabinet-mode #referral-view .bonus-history li { padding-block: 8px; }
  body.cabinet-mode #referral-view .bonus-history-empty { padding-block: 2px; }
}

/* Keep the bonuses view compact without changing campaign or dashboard behavior. */
@media (min-width: 901px) {
  /* The cabinet sidebar replaces the mobile bottom navigation on desktop. */
  body.cabinet-mode #referral-view {
    padding-bottom: 0;
  }
}

body.cabinet-mode #referral-view .bonuses-shell {
  padding-top: 18px;
  padding-bottom: 28px;
}

body.cabinet-mode #referral-view .bonuses-shell > .eyebrow {
  margin-bottom: 7px;
}

body.cabinet-mode #referral-view .bonuses-shell > h1 {
  margin-bottom: 14px;
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1.05;
}

body.cabinet-mode #referral-view .bonus-overview,
body.cabinet-mode #referral-view .bonus-grid {
  gap: 12px;
}

body.cabinet-mode #referral-view .bonus-overview {
  margin-bottom: 12px;
}

body.cabinet-mode #referral-view .bonus-overview article,
body.cabinet-mode #referral-view .bonus-card,
body.cabinet-mode #referral-view .bonus-wide-card {
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(11, 28, 43, .7);
}

body.cabinet-mode #referral-view .bonus-overview article {
  padding: 12px 15px;
}

body.cabinet-mode #referral-view .bonus-card,
body.cabinet-mode #referral-view .bonus-wide-card {
  min-height: 0;
  padding: 16px;
}

body.cabinet-mode #referral-view .bonus-card h2,
body.cabinet-mode #referral-view .bonus-wide-card h2 {
  margin-top: 5px;
  margin-bottom: 8px;
}

body.cabinet-mode #referral-view .bonus-card > p:not(.mini-label),
body.cabinet-mode #referral-view .bonus-wide-card > div > p:not(.mini-label) {
  margin-top: 7px;
  margin-bottom: 0;
}

body.cabinet-mode #referral-view .bonus-loyalty {
  display: block;
}

body.cabinet-mode #referral-view .bonus-loyalty .bonus-loyalty-progress {
  margin-top: 13px;
}

body.cabinet-mode #referral-view .bonus-referral {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr);
  gap: 18px;
}

body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions {
  margin-top: 13px;
}

body.cabinet-mode #referral-view .bonus-renewal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

body.cabinet-mode #referral-view .bonus-renewal .button {
  white-space: nowrap;
}

body.cabinet-mode #referral-view .bonus-history-card {
  display: block;
}

body.cabinet-mode #referral-view .bonus-history {
  margin-top: 10px;
}

body.cabinet-mode #referral-view .bonus-history-empty {
  padding: 3px 0;
}

@media (max-width: 700px) {
  body.cabinet-mode #referral-view .bonuses-shell {
    padding-top: 14px;
    padding-bottom: 24px;
  }

  body.cabinet-mode #referral-view .bonuses-shell > .eyebrow {
    margin-bottom: 5px;
  }

  body.cabinet-mode #referral-view .bonuses-shell > h1 {
    margin-bottom: 12px;
    font-size: clamp(30px, 8vw, 38px);
  }

  body.cabinet-mode #referral-view .bonus-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  body.cabinet-mode #referral-view .bonus-overview article:last-child {
    grid-column: 1 / -1;
  }

  body.cabinet-mode #referral-view .bonus-overview article,
  body.cabinet-mode #referral-view .bonus-card,
  body.cabinet-mode #referral-view .bonus-wide-card {
    padding: 14px;
  }

  body.cabinet-mode #referral-view .bonus-grid {
    gap: 10px;
  }

  body.cabinet-mode #referral-view .bonus-referral,
  body.cabinet-mode #referral-view .bonus-renewal {
    display: block;
  }

  body.cabinet-mode #referral-view .bonus-referral .bonus-stat-strip {
    margin-top: 14px;
  }

  body.cabinet-mode #referral-view .bonus-renewal .button {
    margin-top: 14px;
  }
}

/* Final bonuses mobile density override follows the page-specific cascade. */
@media (min-width: 701px) {
  body.cabinet-mode #referral-view .bonuses-shell { padding-bottom: 24px; }
}

@media (max-width: 700px) {
  body.cabinet-mode #referral-view .bonuses-shell { padding-top: 11px; padding-bottom: 18px; }
  body.cabinet-mode #referral-view .bonuses-shell > .eyebrow { margin-bottom: 4px; }
  body.cabinet-mode #referral-view .bonuses-shell > h1 { margin-bottom: 8px; font-size: clamp(30px, 7.5vw, 34px); line-height: 1.04; white-space: nowrap; }
  body.cabinet-mode #referral-view .bonus-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 8px; }
  body.cabinet-mode #referral-view .bonus-overview article:last-child { grid-column: auto; }
  body.cabinet-mode #referral-view .bonus-overview article { min-width: 0; padding: 9px 8px; }
  body.cabinet-mode #referral-view .bonus-overview span { font-size: 10px; line-height: 1.2; }
  body.cabinet-mode #referral-view .bonus-overview strong { margin-top: 4px; font-size: 17px; }
  body.cabinet-mode #referral-view .bonus-grid { gap: 7px; }
  body.cabinet-mode #referral-view .bonus-card,
  body.cabinet-mode #referral-view .bonus-wide-card { padding: 10px; }
  body.cabinet-mode #referral-view .bonus-card h2,
  body.cabinet-mode #referral-view .bonus-wide-card h2 { margin-top: 4px; margin-bottom: 5px; }
  body.cabinet-mode #referral-view .bonus-card p,
  body.cabinet-mode #referral-view .bonus-wide-card p { margin-top: 5px; line-height: 1.34; }
  body.cabinet-mode #referral-view .bonus-loyalty .bonus-loyalty-progress { margin-top: 8px; }
  body.cabinet-mode #referral-view .bonus-progress-track { margin-top: 6px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions { display: flex; flex-direction: row; gap: 7px; margin-top: 8px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-link-actions .button { min-width: 0; flex: 1 1 0; padding-inline: 8px; font-size: 13px; }
  body.cabinet-mode #referral-view .bonus-referral .bonus-stat-strip { gap: 6px; margin-top: 8px; }
  body.cabinet-mode #referral-view .bonus-stat-strip div { padding: 7px; }
  body.cabinet-mode #referral-view .bonus-stat-strip dd { margin-top: 3px; font-size: 20px; }
  body.cabinet-mode #referral-view .bonus-history li { padding-block: 7px; }
  body.cabinet-mode #referral-view .bonus-history-empty { padding-block: 2px; }
}

/* Referral counters share the same compact rounded-card language as the cabinet. */
body.cabinet-mode #referral-view .bonus-stat-strip div {
  box-sizing: border-box;
  min-height: 66px;
  border: 1px solid rgba(85, 231, 244, .22);
  border-radius: var(--radius-sm);
  background: rgba(16, 40, 58, .72);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.cabinet-mode #referral-view .bonus-stat-strip dd {
  color: var(--cyan);
}

@media (max-width: 700px) {
  body.cabinet-mode #referral-view .bonus-stat-strip div {
    min-height: 58px;
    padding: 7px;
  }
}

body.cabinet-mode #subscription-view .payment-current .payment-file-picker { display: grid; }

/* Payment-created mobile compaction: preserve readable controls and one nav clearance source. */
@media (max-width: 600px) {
  body.cabinet-mode #subscription-view .simple-shell {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: 24px;
  }

  body.cabinet-mode #subscription-view .simple-shell > .eyebrow { margin-bottom: 12px; }
  body.cabinet-mode #subscription-view .simple-shell > h1 {
    margin-bottom: 8px;
    font-size: clamp(32px, 8.8vw, 38px);
    line-height: 1;
  }

  body.cabinet-mode #subscription-view .payment-created-card {
    margin-top: 10px;
    padding: 12px;
  }
  body.cabinet-mode #subscription-view .payment-created-card > .eyebrow { margin-bottom: 10px; }
  body.cabinet-mode #subscription-view .payment-created-card > h2 {
    margin: 4px 0 10px;
    font-size: 22px;
    line-height: 1.12;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-request-summary {
    gap: 4px;
    margin: 8px 0;
    padding: 8px 12px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-bank-warning {
    margin: 6px 0 8px;
    padding: 8px 10px;
  }

  body.cabinet-mode #subscription-view .payment-created-layout { gap: 8px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-qr-actions { gap: 6px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-qr-actions .button {
    min-height: 44px;
    padding-block: 8px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-qr-panel {
    margin-top: 8px;
    padding: 8px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-qr-panel img {
    width: min(210px, 100%);
    padding: 7px;
  }

  body.cabinet-mode #subscription-view .payment-created-card .payment-instructions {
    padding-top: 8px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-instructions h3,
  body.cabinet-mode #subscription-view .payment-created-card .payment-receipt h3 {
    margin-bottom: 6px;
    font-size: 17px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-instructions ol {
    gap: 3px;
    line-height: 1.4;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-current {
    margin-top: 10px;
    padding-top: 8px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-state-copy { margin-bottom: 8px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-state-flow { margin-top: 5px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-receipt { padding-top: 8px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-receipt p { line-height: 1.35; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-file-picker {
    display: grid;
    height: 44px;
    min-height: 44px;
    margin-top: 8px;
    padding-block: 7px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-file-hint { margin-top: 5px; }
  body.cabinet-mode #subscription-view .payment-created-card #payment-receipt-form > .button {
    min-height: 48px;
    margin-top: 10px;
  }
}

/* Payment-created state: keep the QR and confirmation work visible as one compact step. */
.payment-created-card .payment-request-summary { margin-bottom: 8px; }
.payment-created-card .payment-bank-warning {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--cyan);
  background: rgba(85, 231, 244, .06);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.payment-created-layout {
  display: grid;
  grid-template-columns: minmax(220px, .86fr) minmax(0, 1.14fr);
  gap: 20px;
  align-items: start;
}
.payment-qr-column,
.payment-details-column { min-width: 0; }
.payment-qr-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.payment-created-card .payment-qr-actions .button {
  min-height: 44px;
  padding: 9px 10px;
  font-size: 12px;
}
.payment-qr-panel {
  margin: 12px 0 0;
  padding: 10px;
  border-radius: var(--radius-md);
}
.payment-qr-panel img {
  width: min(240px, 100%);
  padding: 8px;
}
.payment-created-card .payment-instructions {
  margin: 0;
  padding: 0;
  border: 0;
}
.payment-created-card .payment-instructions h3,
.payment-created-card .payment-receipt h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.payment-created-card .payment-instructions ol {
  gap: 6px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.45;
}
.payment-created-card .payment-current {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.payment-created-card .payment-state-copy {
  display: block;
  margin: 0 0 12px;
}
.payment-created-card .payment-state-copy strong {
  display: block;
  margin-top: 3px;
}
.payment-state-flow {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.payment-state-flow span {
  padding: 0 3px;
  color: var(--cyan);
}
.payment-created-card .payment-receipt { padding-top: 12px; }
.payment-created-card .payment-receipt p { font-size: 13px; line-height: 1.4; }
.payment-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.payment-current input.payment-file-input {
  display: block;
  width: 1px;
  margin: -1px;
  color: transparent;
}

@media (min-width: 901px) and (max-height: 820px) {
  body.cabinet-mode.cabinet-root #subscription-view .simple-shell {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.cabinet-mode #subscription-view .payment-created-card { padding: 14px 14px 11px; }
  body.cabinet-mode #subscription-view .payment-created-layout { gap: 14px; }
  body.cabinet-mode #subscription-view .payment-created-card .payment-instructions ol {
    gap: 4px;
    line-height: 1.4;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-current {
    margin-top: 12px;
    padding-top: 10px;
  }
  body.cabinet-mode #subscription-view .payment-created-card .payment-receipt { padding-top: 10px; }
  body.cabinet-mode #subscription-view .payment-created-card #payment-receipt-form > .button { margin-top: 10px; }
}

@media (max-width: 900px) {
  /* One scoped clearance source for the fixed cabinet navigation. */
  body.cabinet-mode.cabinet-root #subscription-view {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  body.cabinet-mode #subscription-view .payment-created-card .payment-qr-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.payment-file-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(85, 231, 244, .28);
  border-radius: var(--radius-sm);
  background: rgba(5, 18, 29, .58);
  color: var(--white);
  cursor: pointer;
}
.payment-file-picker:hover { border-color: var(--cyan); }
.payment-receipt:focus-within .payment-file-picker { outline: 2px solid var(--cyan); outline-offset: 2px; }
.payment-file-picker-action {
  grid-column: 1;
  grid-row: 1;
  color: var(--cyan);
  font-weight: 700;
}
.payment-file-name {
  display: block;
  min-width: 0;
  width: auto;
  grid-column: 2;
  grid-row: 1;
  padding-left: 8px;
  border-left: 1px solid rgba(85, 231, 244, .2);
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-file-name.is-selected { color: var(--white); }
.payment-created-card .payment-file-hint { margin: 7px 0 0; font-size: 11px; }
.payment-created-card #payment-receipt-form > .button {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .payment-created-layout { grid-template-columns: 1fr; gap: 14px; }
  .payment-created-card .payment-request-summary { margin-bottom: 8px; }
  .payment-created-card .payment-bank-warning { margin-bottom: 12px; }
  .payment-created-card .payment-qr-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-created-card .payment-qr-panel { margin-top: 10px; }
  .payment-created-card .payment-instructions { padding-top: 12px; border-top: 1px solid var(--line); }
  .payment-created-card .payment-current { margin-top: 14px; padding-top: 12px; }
}

@media (max-width: 430px) {
  .payment-created-card .payment-qr-actions .button { padding-inline: 7px; font-size: 11px; }
  .payment-created-card .payment-qr-panel img { width: min(220px, 100%); }
}

/* Final profile mobile polish: reduce spacing without changing the approved layout. */
@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view > .dashboard-shell > .dashboard-content {
    padding-top: 24px;
  }

  body.cabinet-mode #dashboard-view .dashboard-top.profile-responsive-top {
    margin-bottom: 9px;
  }

  body.cabinet-mode #dashboard-view .dashboard-top.profile-responsive-top h1 {
    font-size: 30px;
    line-height: 1.05;
  }

  body.cabinet-mode #dashboard-view .dashboard-top.profile-responsive-top .profile-greeting {
    margin-bottom: 3px;
    font-size: 18px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.cabinet-mode #dashboard-view .dashboard-top.profile-responsive-top .profile-top-note {
    line-height: 1.35;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card {
    padding: 11px 14px 12px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card h2 {
    margin-top: 5px;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card .profile-username {
    margin-bottom: 7px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card .profile-facts {
    gap: 4px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card .profile-facts div {
    padding-top: 4px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-unified-card .button {
    margin-top: 8px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-quick-stats {
    gap: 7px;
    margin-bottom: 8px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-stat {
    padding: 9px 11px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-stat .mini-label {
    margin-bottom: 5px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-stat small {
    margin-top: 3px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-grid {
    gap: 7px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-card {
    padding: 11px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-card h2 {
    margin-top: 7px;
  }

  body.cabinet-mode #dashboard-view #dashboard-state .profile-card .button {
    margin-top: 8px;
  }
}

/* Final cascade guard for the single-column profile card. */
body.cabinet-mode #dashboard-view .profile-unified-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-bottom: 10px;
  padding: 16px 18px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-unified-column {
  min-width: 0;
}

body.cabinet-mode #dashboard-view .profile-unified-card h2 {
  margin: 7px 0 3px;
  font-size: 25px;
  line-height: 1.1;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
  margin-bottom: 9px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
  gap: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
  padding-top: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value {
  color: var(--green);
  font-weight: 600;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.warning {
  color: var(--danger);
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.gold {
  color: var(--gold);
}

body.cabinet-mode #dashboard-view .profile-unified-card .button {
  width: fit-content;
  min-height: 44px;
  margin-top: 10px;
  padding-block: 10px;
}

@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view .dashboard-top { margin-bottom: 12px; }
  body.cabinet-mode #dashboard-view .dashboard-top h1 { font-size: 38px; line-height: 1; }
  body.cabinet-mode #dashboard-view .profile-greeting { margin: 7px 0 2px; }
  body.cabinet-mode #dashboard-view .profile-top-note { margin: 0; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 9px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 13px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  body.cabinet-mode #dashboard-view .profile-card { display: flex; min-height: 0; flex-direction: column; padding: 15px 16px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: auto; padding-block: 10px; }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view .profile-unified-card { padding: 14px; }
  body.cabinet-mode #dashboard-view .profile-unified-card .button { width: 100%; min-height: 46px; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 8px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 11px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: 1fr; gap: 8px; }
  body.cabinet-mode #dashboard-view .profile-card { padding: 12px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: 10px; }
}

/* Keep the populated profile within the viewport without removing real page overflow. */
@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view {
    padding-bottom: 0;
  }

  body.cabinet-mode #dashboard-view > .dashboard-shell > .dashboard-content {
    padding-bottom: 0;
  }

  body.cabinet-mode #dashboard-view .dashboard-top {
    margin-bottom: 14px;
  }

  body.cabinet-mode #dashboard-view .dashboard-top h1 {
    font-size: 42px;
    line-height: 1;
  }

  body.cabinet-mode #dashboard-view .profile-status-card {
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  body.cabinet-mode #dashboard-view .profile-status-copy h2 {
    margin: 6px 0 3px;
  }

  body.cabinet-mode #dashboard-view .profile-status-copy p:last-child {
    line-height: 1.4;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 10px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 13px 15px;
  }

  body.cabinet-mode #dashboard-view .profile-stat .mini-label {
    margin-bottom: 7px;
  }

  body.cabinet-mode #dashboard-view .profile-stat small {
    margin-top: 4px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    align-items: start;
    gap: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    padding: 16px;
  }

  body.cabinet-mode #dashboard-view .profile-card h2 {
    margin-top: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-username {
    margin-bottom: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-facts {
    gap: 6px;
  }

  body.cabinet-mode #dashboard-view .profile-facts div {
    padding: 5px 0;
  }

  body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-device-list {
    gap: 6px;
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-device-list li {
    padding: 6px 0;
  }
}

/* Keep the profile hierarchy compact: one identity/access card and two lower cards. */
@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view .dashboard-top {
    margin-bottom: 14px;
  }

  body.cabinet-mode #dashboard-view .dashboard-top h1 {
    font-size: 38px;
    line-height: 1;
  }

  body.cabinet-mode #dashboard-view .profile-greeting {
    margin: 8px 0 2px;
    font-size: 18px;
    line-height: 1.25;
  }

  body.cabinet-mode #dashboard-view .profile-top-note {
    margin: 0;
    line-height: 1.35;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-identity,
  body.cabinet-mode #dashboard-view .profile-unified-access {
    min-width: 0;
  }

  body.cabinet-mode #dashboard-view .profile-unified-access {
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }

  body.cabinet-mode #dashboard-view .profile-unified-card h2 {
    margin: 7px 0 3px;
    font-size: 25px;
    line-height: 1.1;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
    gap: 5px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
    padding-top: 5px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-status-badge {
    margin-top: 5px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-expiry {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .button {
    min-width: 174px;
    min-height: 44px;
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 10px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 11px 14px;
  }

  body.cabinet-mode #dashboard-view .profile-stat .mini-label {
    margin-bottom: 6px;
  }

  body.cabinet-mode #dashboard-view .profile-stat small {
    margin-top: 3px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 15px 16px;
  }

  body.cabinet-mode #dashboard-view .profile-card h2 {
    margin-top: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: auto;
    padding-block: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-device-list {
    margin-top: 9px;
  }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view .dashboard-top {
    margin-bottom: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card {
    display: grid;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-access {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  body.cabinet-mode #dashboard-view .profile-unified-card h2 {
    margin: 7px 0 3px;
    font-size: 24px;
    line-height: 1.1;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
    margin-bottom: 9px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
    gap: 5px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
    padding-top: 5px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-expiry {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
  }

  body.cabinet-mode #dashboard-view .profile-unified-card .button {
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 8px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 10px 11px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: 10px;
  }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view {
    /* One clearance source: 64px nav + a 20px visual gap + device safe area. */
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body.cabinet-mode #dashboard-view > .dashboard-shell > .dashboard-content {
    padding-bottom: 0;
  }

  body.cabinet-mode #dashboard-view .dashboard-top {
    margin-bottom: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-greeting {
    margin-bottom: 5px;
    font-size: 19px !important;
  }

  body.cabinet-mode #dashboard-view .profile-top-note {
    line-height: 1.4;
  }

  body.cabinet-mode #dashboard-view .profile-status-card {
    padding: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-status-copy h2 {
    margin: 7px 0 3px;
  }

  body.cabinet-mode #dashboard-view .profile-status-action {
    margin-top: 11px;
  }

  body.cabinet-mode #dashboard-view .profile-quick-stats {
    gap: 8px;
    margin-bottom: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-stat {
    padding: 11px 12px;
  }

  body.cabinet-mode #dashboard-view .profile-stat .mini-label {
    margin-bottom: 6px;
  }

  body.cabinet-mode #dashboard-view .profile-stat small {
    margin-top: 4px;
  }

  body.cabinet-mode #dashboard-view .profile-grid {
    gap: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-card {
    padding: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-card h2 {
    margin-top: 8px;
  }

  body.cabinet-mode #dashboard-view .profile-username {
    margin-bottom: 12px;
  }

  body.cabinet-mode #dashboard-view .profile-facts {
    gap: 6px;
  }

  body.cabinet-mode #dashboard-view .profile-facts div {
    padding: 5px 0;
  }

  body.cabinet-mode #dashboard-view .profile-card .button {
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-device-list {
    gap: 6px;
    margin-top: 10px;
  }

  body.cabinet-mode #dashboard-view .profile-device-list li {
    padding: 6px 0;
  }
}

/* Phase 3.3C final overrides for the deployed cascade. */
@media (min-width: 701px) {
  html.acquisition-mode body.acquisition-mode .acquisition-back { margin-top: 10px; }
}

/* Phase 3.3C final cascade: iOS-safe viewport sizing and compact auth states. */
html.acquisition-mode { scroll-behavior: auto; }
body.acquisition-mode .view.active {
  min-height: calc(100svh - 150px);
  min-height: calc(100dvh - 150px);
}
body.acquisition-mode .acquisition-page {
  scroll-margin-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
body.acquisition-mode .site-footer {
  padding-bottom: max(22px, calc(22px + env(safe-area-inset-bottom)));
}

@media (min-width: 701px) {
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 12px; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-auth-pane { padding-top: 0; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin: 8px 0 6px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; line-height: 1.4; }
  body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 48px; }
  body.acquisition-mode .acquisition-back { margin-top: 10px; }
}

@media (max-width: 700px) {
  body.acquisition-mode .acquisition-page {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  body.acquisition-mode .acquisition-panel { padding: 16px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 10px; line-height: 1.4; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 12px; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin: 6px 0 5px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; line-height: 1.4; }
  body.acquisition-mode .acquisition-telegram-glyph,
  body.acquisition-mode .acquisition-email-glyph { width: 44px; height: 44px; }
  body.acquisition-mode .acquisition-auth-pane input { min-height: 46px; margin: 4px 0 8px; }
  body.acquisition-mode .acquisition-auth-pane .acquisition-helper { margin-top: 6px; }
  body.acquisition-mode .acquisition-back { margin-top: 10px; }
}

@media (max-width: 900px) {
  .public-nav { display: none; }
  .menu-trigger { display: flex; }
  .hero-artwork { min-height: 430px; }
  .platform-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Keep unpaid tariff changes explicit without competing with payment actions. */
.payment-change-tariff {
  margin-top: 12px;
  width: 100%;
}

.payment-tariff-change-confirmation {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.38);
}

.payment-tariff-change-confirmation p {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.payment-tariff-change-confirmation > div {
  display: flex;
  gap: 8px;
}

.payment-tariff-change-confirmation .button {
  flex: 1;
}

.payment-change-confirm {
  color: var(--accent);
  border-color: rgba(64, 211, 255, 0.45);
}

@media (max-width: 600px) {
  .hero-artwork { min-height: 340px; border-radius: 20px; }
  .artwork-laptop { right: 12%; bottom: 17%; width: 52%; }
  .artwork-note { top: 18px; right: 18px; font-size: 9px; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 170px; }
  .instruction-panel, .final-cta { display: block; padding: 26px; }
  .instruction-panel h2, .final-cta h2 { font-size: 32px; }
  .instruction-actions { display: grid; margin-top: 24px; }
  .mascot-slot { min-height: 260px; }
  .public-help .button { width: 100%; margin-top: 20px; }
}

/* Cabinet Part 1.1: keep authenticated mobile controls compact and readable. */
.cabinet-header-more { display: none; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--white); background: rgba(13, 34, 49, .62); cursor: pointer; }
.cabinet-header-more span { display: block; width: 18px; height: 2px; background: currentColor; }
.cabinet-mode .dashboard-top { margin-bottom: 20px; }
.cabinet-mode .dashboard-content > .demo-select { width: fit-content; margin: 0 0 16px; }
.profile-greeting { margin: 2px 0 8px; color: var(--white) !important; font-size: 21px !important; line-height: 1.3 !important; }
.profile-device-line { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.profile-device-copy { min-width: 0; }
.profile-device-copy strong, .profile-device-copy p { display: block; }
.profile-platform-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); }
svg.profile-platform-icon { padding: 9px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-platform-icon-empty { font-size: 25px; line-height: 1; }

@media (max-width: 900px) {
  body.cabinet-mode .cabinet-header-more { display: flex; }
  body.cabinet-mode.cabinet-root .cabinet-bottom-nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.cabinet-mode.cabinet-root .cabinet-more-trigger { display: none; }
  body.cabinet-mode .demo-select { width: fit-content; margin: 0 18px 14px; padding: 8px 10px; }
  body.cabinet-mode .demo-select label { font-size: 10px; }
  body.cabinet-mode .demo-select select { max-width: 205px; font-size: 14px; }
  body.cabinet-mode .profile-status-card { margin-bottom: 12px; padding: 18px; }
  body.cabinet-mode .profile-status-copy h2 { margin: 8px 0 5px; font-size: clamp(22px, 6vw, 28px); }
  body.cabinet-mode .profile-status-action { margin-top: 14px; }
  body.cabinet-mode .profile-card { padding: 16px; }
  body.cabinet-mode .profile-card h2 { margin: 12px 0 6px; }
  body.cabinet-mode .profile-card .button { margin-top: 10px; }
  body.cabinet-mode .profile-traffic .traffic-bars { height: 42px; margin-top: 6px; }
  body.cabinet-mode .profile-traffic h2 { font-size: 32px; }
  body.cabinet-mode .simple-shell.narrow { width: min(680px, calc(100% - 36px)); }
  body.cabinet-mode .setup-card { padding: 20px; }
  body.cabinet-mode .fake-qr { width: min(270px, calc(100vw - 54px)); margin: 24px auto; }
  body.cabinet-mode .security-note { font-size: 16px; line-height: 1.5; }
  body.cabinet-mode .setup-actions { display: grid; gap: 10px; }
  body.cabinet-mode .setup-actions .button { min-height: 52px; width: 100%; }
  body.cabinet-mode .setup-secondary { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; }
  body.cabinet-mode .setup-secondary button { min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(11, 28, 43, .72); color: var(--muted); font-size: 16px; text-align: left; }
  body.cabinet-mode .setup-secondary .danger-link { border-color: rgba(237, 125, 125, .42); color: var(--danger); }
}

@media (max-width: 600px) {
  .brand-logo-small { width: 54px; height: 54px; }
  .header-start { display: none; }
  .header-login { min-width: 0; }
  .hero h1 { font-size: clamp(54px, 15vw, 70px); letter-spacing: -.065em; }
  .hero h1 em { margin-left: 18px; }
  .hero-actions { display: grid; gap: 10px; }
  .hero-actions .button { width: 100%; }
  .hero-artwork.has-image { min-height: 300px; background-position: 62% center; }
}

/* Iteration 3: atmospheric hero, stronger contrast and clearer public actions. */
:root { --muted: #b7c7d1; --white: #f7fafb; }
body { font-size: 16px; }
.site-header { gap: 30px; }
.brand-lockup { cursor: pointer; }
.brand-lockup:hover .brand-logo-small, .brand-lockup:focus-visible .brand-logo-small { box-shadow: 0 0 0 2px rgba(231, 184, 92, .72), 0 0 30px rgba(85, 231, 244, .22); }
.public-nav a, .header-actions .button { font-size: 16px; }
.header-actions .button { min-height: 50px; }
.header-start { min-width: 176px; }
.header-login { min-width: 104px; }

#home-view > .hero { position: relative; display: block; width: 100%; max-width: none; min-height: 650px; margin: 0; padding: 0 max(32px, calc((100vw - 1180px) / 2)); overflow: hidden; border-bottom: 1px solid rgba(85, 231, 244, .16); }
#home-view > .hero .hero-copy { position: relative; z-index: 2; display: flex; width: min(620px, 100%); min-height: 650px; flex-direction: column; justify-content: center; padding: 52px 0 70px; }
#home-view > .hero .hero-artwork { position: absolute; inset: 0; z-index: 0; width: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
#home-view > .hero .hero-artwork.has-image::before { inset: 0; border: 0; border-radius: 0; transform: none; background: linear-gradient(90deg, rgba(5, 13, 22, .86) 0%, rgba(5, 13, 22, .64) 38%, rgba(5, 13, 22, .16) 78%, rgba(5, 13, 22, .08) 100%); }
#home-view > .hero .hero-artwork.has-image::after { display: none; }
#home-view > .hero::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 24%; pointer-events: none; background: linear-gradient(180deg, transparent, var(--navy-950)); }
#home-view > .hero .eyebrow { font-size: 13px; letter-spacing: .16em; }
#home-view > .hero h1 { max-width: 700px; font-size: clamp(64px, 8.2vw, 112px); line-height: .84; letter-spacing: -.075em; text-shadow: 0 7px 0 rgba(7, 20, 33, .82), 0 18px 38px rgba(0, 0, 0, .32); }
#home-view > .hero h1 span { color: var(--white); }
#home-view > .hero h1 em { background: linear-gradient(180deg, #fff1bd 0%, #e7b85c 38%, #b97d2d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
#home-view .hero-lead { max-width: 530px; color: #d1dde2; font-size: 18px; line-height: 1.62; }
#home-view .hero-proof { color: #c1d0d7; font-size: 13px; line-height: 1.6; }
#home-view .hero-actions { gap: 12px; margin: 32px 0 42px; }
#home-view .hero-actions .button { min-height: 54px; padding-inline: 24px; font-size: 16px; }
#home-view .hero-actions .button-primary { min-width: 190px; }

#home-view .section-heading h2, #home-view .mascot-section h2 { font-size: clamp(40px, 5vw, 68px); line-height: .98; letter-spacing: -.06em; }
#home-view .section-heading > p:last-child, #home-view .mascot-section p:not(.eyebrow), #home-view .instruction-panel p:not(.eyebrow), #home-view .final-cta p:not(.eyebrow) { color: #b7c7d1; font-size: 17px; line-height: 1.65; }
#home-view .eyebrow { font-size: 13px; letter-spacing: .16em; }
#home-view .step-card h3, #home-view .platform-card h3 { font-size: 23px; }
#home-view .step-card p, #home-view .tariff-card p, #home-view .platform-card p { color: #b7c7d1; font-size: 16px; line-height: 1.58; }
#home-view .tariff-card > span { color: #d4e0e5; font-size: 13px; letter-spacing: .12em; }
#home-view .tariff-card .button, #home-view .platform-card a, #home-view .instruction-actions .button, #home-view .final-cta .button { font-size: 15px; }
#home-view .tariff-card .button { min-height: 48px; }
#home-view .platform-card a { display: inline-flex; align-items: center; }
#home-view .instruction-panel, #home-view .final-cta { border-color: rgba(231, 184, 92, .46); }
#home-view .mascot-slot { background: radial-gradient(circle at 50% 40%, rgba(85, 231, 244, .24), transparent 24%), linear-gradient(145deg, #10283a, #071421 65%); }
#home-view .public-help { padding-bottom: 96px; }
#how, #tariffs, #devices, #instructions, #public-help { scroll-margin-top: 98px; }

.public-russia-panel { display: flex; align-items: center; margin-top: 16px; padding: 18px 22px; border: 1px solid rgba(85, 231, 244, .24); background: linear-gradient(115deg, rgba(11, 28, 43, .82), rgba(8, 24, 37, .56)); }
.public-russia-copy { min-width: 0; }
.public-russia-panel h3 { margin: 0 0 6px; color: var(--cyan); font: 700 25px var(--display); letter-spacing: -.03em; }
.public-russia-panel p:not(.eyebrow) { max-width: 900px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.public-russia-panel .public-russia-option { margin-bottom: 3px; color: var(--white); font-weight: 650; }
.public-russia-panel .public-russia-price { margin-top: 8px; color: var(--white); font-weight: 650; }

/* Keep the public product hierarchy compact: Russia is an optional note, not a fourth tariff. */
#home-view .tariff-card { min-height: 246px; padding: 20px; }
#home-view .tariff-card strong { margin-top: 18px; }
#home-view .tariff-card .button { margin-top: 15px; }

@media (max-width: 900px) {
  #home-view > .hero { min-height: 620px; padding-inline: 36px; }
  #home-view > .hero .hero-copy { min-height: 620px; }
  #home-view > .hero .hero-artwork.has-image { background-position: 68% center; }
  #home-view > .hero .hero-artwork.has-image::before { background: linear-gradient(90deg, rgba(5, 13, 22, .88), rgba(5, 13, 22, .46) 58%, rgba(5, 13, 22, .14)); }
}

@media (min-width: 601px) and (max-width: 900px) {
  #home-view .instruction-panel { display: block; }
  #home-view .instruction-actions { margin-top: 18px; }
}

@media (max-width: 600px) {
  .site-header { gap: 12px; }
  .brand-logo-small { width: 56px; height: 56px; }
  .header-actions .button { min-height: 44px; font-size: 14px; }
  #home-view > .hero { min-height: 590px; padding-inline: 18px; }
  #home-view > .hero .hero-copy { min-height: 590px; padding: 42px 0 56px; }
  #home-view > .hero .hero-artwork.has-image { background-position: 68% center; }
  #home-view > .hero .hero-artwork.has-image::before { background: linear-gradient(180deg, rgba(5, 13, 22, .9) 0%, rgba(5, 13, 22, .72) 46%, rgba(5, 13, 22, .28) 100%); }
  #home-view > .hero h1 { font-size: clamp(54px, 15vw, 70px); }
  #home-view .hero-lead { max-width: 215px; font-size: 17px; line-height: 1.62; }
  #home-view .hero-proof { font-size: 12px; }
  #home-view .section-heading > p:last-child, #home-view .mascot-section p:not(.eyebrow), #home-view .instruction-panel p:not(.eyebrow), #home-view .final-cta p:not(.eyebrow) { font-size: 16px; }
}

/* Iteration 4: compact support destination. */
#home-view > .section { padding-top: 76px; padding-bottom: 76px; }
#home-view > .instructions { padding-top: 10px; padding-bottom: 38px; }
#home-view > .public-help { padding-top: 26px; padding-bottom: 62px; }
.support-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 32px; border: 1px solid rgba(85, 231, 244, .22); border-left: 3px solid var(--gold); background: linear-gradient(120deg, rgba(16, 40, 58, .9), rgba(11, 28, 43, .62)); box-shadow: 0 16px 42px rgba(0, 0, 0, .16); }
.support-panel h2 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.055em; }
.support-panel p:not(.eyebrow) { max-width: 610px; margin-bottom: 0; color: #b7c7d1; font-size: 16px; line-height: 1.55; }
.support-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 10px; }
.support-actions .button { min-height: 48px; font-size: 15px; }

@media (max-width: 600px) {
  #home-view > .section { padding-top: 58px; padding-bottom: 58px; }
  #home-view > .instructions { padding-top: 2px; padding-bottom: 26px; }
  #home-view > .public-help { padding-top: 12px; padding-bottom: 42px; }
  .support-panel { display: block; padding: 24px; }
  .support-panel h2 { font-size: 34px; }
  .support-actions { display: grid; margin-top: 22px; }
  .support-actions .button { width: 100%; }
}

/* Iteration 5: keep title artwork optional and preserve natural hero colors. */
#home-view > .hero .hero-title-stack { position: relative; z-index: 1; max-width: 580px; margin-bottom: 32px; }
#home-view > .hero .hero-title-art { display: none; width: clamp(300px, 27vw, 420px); max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
#home-view > .hero .hero-title-stack.has-art .hero-title-art { display: block; }
#home-view > .hero .hero-title-fallback { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#home-view > .hero .hero-title-stack.has-art .hero-title-fallback { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#home-view > .hero .hero-title-stack.fallback { margin-bottom: 0; }
#home-view > .hero .hero-title-stack.fallback .hero-title-art { display: none; }
#home-view > .hero .hero-title-stack.fallback .hero-title-fallback { position: relative; width: auto; height: auto; margin: 0 0 32px; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
#home-view > .hero .hero-title-fallback { transform: none; }
#home-view > .hero .hero-title-fallback span,
#home-view > .hero .hero-title-fallback em { position: relative; display: block; width: auto; max-width: none; transform: none; }
#home-view > .hero .hero-title-fallback span::after,
#home-view > .hero .hero-title-fallback em::after { display: none; content: none; }
#home-view > .hero .hero-title-fallback span { color: var(--white); }
#home-view > .hero .hero-title-fallback em { margin-top: 8px; margin-left: 28px; background: linear-gradient(180deg, #fff4c9 0%, #e7b85c 42%, #bd812e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
#home-view > .hero .hero-artwork.has-image { background-color: var(--navy-900); background-image: url("public/brand/fritz-vpn-hero-alps.jpg"); background-position: center right; }
#home-view > .hero .hero-artwork.has-image::before { background: linear-gradient(90deg, rgba(5, 13, 22, .92) 0%, rgba(5, 13, 22, .72) 25%, rgba(5, 13, 22, .34) 48%, rgba(5, 13, 22, .06) 65%, transparent 74%); }
#home-view > .hero .hero-artwork.has-image::after { display: none; }
#home-view > .hero .hero-artwork.has-image .artwork-glow { display: none; }

@media (max-width: 900px) {
  #home-view > .hero .hero-artwork.has-image { background-position: 68% center; }
  #home-view > .hero .hero-artwork.has-image::before { background: linear-gradient(90deg, rgba(5, 13, 22, .82), rgba(5, 13, 22, .42) 54%, rgba(5, 13, 22, .05) 78%, transparent); }
}

@media (min-width: 601px) and (max-width: 900px) {
  #home-view > .hero .hero-title-art { width: clamp(270px, 34vw, 330px); }
}

@media (max-width: 600px) {
  #home-view > .hero .hero-title-stack { margin-top: -12px; margin-bottom: 26px; }
  #home-view > .hero .hero-title-stack.fallback .hero-title-fallback { margin-bottom: 32px; }
  #home-view > .hero .hero-title-art { width: min(55%, 205px); max-width: 100%; height: auto; }
  #home-view > .hero .hero-title-fallback em { margin-left: 18px; }
  #home-view > .hero .hero-artwork.has-image { background-position: 68% center; }
  #home-view > .hero .hero-artwork.has-image::before { background: linear-gradient(180deg, rgba(5, 13, 22, .88) 0%, rgba(5, 13, 22, .64) 42%, rgba(5, 13, 22, .12) 78%, transparent 100%), linear-gradient(90deg, rgba(5, 13, 22, .38), transparent 72%); }
}

/* Cabinet Phase 2 / Part 1: mock authenticated navigation and profile. */
.cabinet-chrome { display: none; }
body.cabinet-mode .cabinet-chrome { display: block; }
body.cabinet-mode .site-header .public-nav,
body.cabinet-mode .site-header .header-start,
body.cabinet-mode .site-header .header-login,
body.cabinet-mode .site-header .menu-trigger,
body.cabinet-mode .site-footer { display: none; }
body.cabinet-mode main > .view.active { padding-left: 278px; padding-right: 28px; }
body.cabinet-mode #dashboard-view > .dashboard-shell { display: block; max-width: 1180px; }
body.cabinet-mode #dashboard-view > .dashboard-shell > .sidebar { display: none; }
.cabinet-sidebar { position: fixed; z-index: 14; top: 82px; bottom: 0; left: 0; width: 250px; padding: 26px 18px 22px; border-right: 1px solid var(--line); background: rgba(5, 13, 22, .96); display: flex; flex-direction: column; overflow-y: auto; }
.cabinet-brand { display: inline-flex; align-items: center; width: fit-content; min-height: 54px; margin: 0 0 24px 8px; }
.cabinet-brand img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.cabinet-kicker { margin: 0 12px 12px; color: var(--gold); font: 700 11px/1.2 var(--display); letter-spacing: .16em; }
.cabinet-primary-nav, .cabinet-secondary-nav, .cabinet-more-list { display: grid; gap: 5px; }
.cabinet-secondary-nav { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.cabinet-link, .cabinet-bottom-link { min-height: 48px; border: 1px solid transparent; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; font: 600 15px/1.25 var(--ui); cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
body.cabinet-mode .button,
body.cabinet-mode .cabinet-link,
body.cabinet-mode .cabinet-bottom-link,
body.cabinet-mode .payment-tariff { touch-action: manipulation; }
.cabinet-link:hover, .cabinet-link:focus-visible, .cabinet-bottom-link:hover, .cabinet-bottom-link:focus-visible { color: var(--white); border-color: rgba(85, 231, 244, .34); background: rgba(85, 231, 244, .07); }
.cabinet-link.active, .cabinet-bottom-link.active { color: var(--white); border-color: rgba(85, 231, 244, .52); background: rgba(85, 231, 244, .12); box-shadow: inset 3px 0 0 var(--cyan); }
.cabinet-link.is-priority { color: var(--gold); border-color: rgba(231, 184, 92, .42); }
.cabinet-link[hidden] { display: none; }
.cabinet-link-icon { width: 22px; flex: 0 0 22px; color: var(--cyan); font-size: 18px; line-height: 1; text-align: center; }
.cabinet-link.active .cabinet-link-icon, .cabinet-link.is-priority .cabinet-link-icon { color: var(--gold); }
.cabinet-bottom-nav, .cabinet-more-drawer, .cabinet-backdrop { display: none; }
.cabinet-more-drawer[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.profile-top-note { margin: -10px 0 0; color: var(--muted); font-size: 16px; }
.profile-status-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 28px; }
.profile-status-copy { min-width: 0; }
.profile-status-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font: 700 14px/1.3 var(--display); letter-spacing: .05em; }
.profile-status-card.warning .profile-status-badge { color: var(--danger); }
.profile-status-card.gold .profile-status-badge { color: var(--gold); }
.profile-status-copy h2 { margin: 12px 0 6px; font-size: clamp(24px, 3vw, 34px); }
.profile-status-copy p:last-child { max-width: 580px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.profile-status-action { display: grid; justify-items: end; gap: 16px; flex: 0 0 auto; }
.profile-status-action .button { min-width: 190px; }
.demo-badge, .profile-card-mark { color: var(--gold); font: 700 10px/1.2 var(--display); letter-spacing: .12em; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-card { min-width: 0; border: 1px solid var(--line); background: rgba(11, 28, 43, .72); padding: 24px; }
.profile-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-card .mini-label { margin-bottom: 0; }
.profile-card h2 { margin: 18px 0 8px; font-size: 25px; }
.profile-card p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.profile-card .button { margin-top: 16px; }
.profile-identity h2 { margin-bottom: 0; font-size: 30px; }
.profile-username { color: var(--cyan) !important; margin-bottom: 18px; }
.profile-facts { display: grid; gap: 10px; margin: 0; }
.profile-facts div { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 10px; }
.profile-facts dt { color: var(--muted); font-size: 14px; }
.profile-facts dd { margin: 0; color: var(--white); font-size: 14px; text-align: right; }
.profile-subscription h2 strong, .profile-devices h2 strong { display: block; font-size: 22px; }
.profile-subscription h2 p, .profile-devices h2 p { margin: 7px 0 0; font: 400 16px/1.45 var(--ui); }
.profile-count { color: var(--gold); font: 700 18px var(--display); }
.profile-traffic h2 { color: var(--cyan); font-size: 36px; }
.profile-traffic .traffic-bars { height: 66px; margin-top: 10px; }
.profile-loyalty { border-color: rgba(231, 184, 92, .38); }
.profile-loyalty h2 { font-size: 22px; }
.placeholder-surface { border: 1px solid var(--line); background: rgba(11, 28, 43, .72); padding: 30px; }
.placeholder-surface h2 { margin: 18px 0 8px; font-size: 26px; }
.placeholder-surface p { max-width: 540px; color: var(--muted); font-size: 16px; line-height: 1.55; }

@media (max-width: 900px) {
  body.cabinet-mode main > .view.active { padding-left: 0; padding-right: 0; padding-bottom: 102px; }
  body.cabinet-nested .cabinet-bottom-nav { display: none; }
  body.cabinet-nested main > .view.active { padding-bottom: 24px; }
  body.cabinet-mode #dashboard-view > .dashboard-shell { max-width: none; }
  .cabinet-sidebar { display: none; }
  .cabinet-bottom-nav { position: fixed; z-index: 22; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(85, 231, 244, .2); background: var(--navy-950); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -12px 30px rgba(0, 0, 0, .24); }
  .cabinet-bottom-link { min-height: 56px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 7px 4px; text-align: center; font-size: 12px; }
  .cabinet-bottom-link .cabinet-link-icon { font-size: 17px; }
  .cabinet-more-drawer { position: fixed; z-index: 24; right: 0; bottom: 0; left: 0; display: block; transform: translateY(105%); padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(85, 231, 244, .26); border-radius: 22px 22px 0 0; background: var(--navy-900); box-shadow: 0 -20px 50px rgba(0, 0, 0, .42); transition: transform .24s ease; }
  .cabinet-more-drawer.is-open { transform: translateY(0); }
  .cabinet-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
  .cabinet-drawer-head h2 { margin: 5px 0 0; font-size: 26px; }
  .cabinet-drawer-close { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--white); font-size: 28px; cursor: pointer; }
  .cabinet-more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cabinet-more-list .cabinet-link { min-height: 52px; font-size: 15px; }
  .cabinet-demo-note { margin: 18px 0 0; color: var(--muted); font: 11px/1.4 var(--display); letter-spacing: .08em; text-align: center; }
  .cabinet-backdrop { position: fixed; z-index: 23; inset: 0; background: rgba(2, 8, 14, .62); }
  .cabinet-backdrop:not([hidden]) { display: block; }
  .profile-status-card { display: block; padding: 22px; }
  .profile-status-action { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
  .profile-status-action .button { min-width: 0; }
  .profile-grid { grid-template-columns: 1fr; gap: 12px; }
  .profile-card { padding: 20px; }
  .profile-card h2 { font-size: 23px; }
  .dashboard-top { padding-inline: 18px; }
  #dashboard-state { padding-inline: 18px; }
}

@media (max-width: 430px) {
  .cabinet-bottom-nav { padding-inline: 4px; }
  .cabinet-bottom-link { font-size: 11px; }
  .cabinet-more-list { grid-template-columns: 1fr; }
  .profile-status-action { align-items: flex-start; flex-direction: column; }
  .profile-status-action .button { width: 100%; }
  .profile-facts dt, .profile-facts dd { font-size: 13px; }
}

/* Phase 3.4B: canonical profile and authenticated support. */
.profile-edit-card { display:grid; gap:16px; margin-top:22px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(8,24,37,.72); }
.profile-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.profile-form label,.support-form label { display:grid; gap:7px; color:var(--muted); font-size:12px; }
.profile-form input,.support-form select,.support-form textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:rgba(4,14,23,.78); color:var(--white); padding:12px 14px; }
.profile-form input,.support-form select { min-height:46px; }
.support-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.support-form textarea { min-height:120px; resize:vertical; line-height:1.45; }
.profile-form input:focus,.support-form select:focus,.support-form textarea:focus { outline:2px solid rgba(85,231,244,.55); outline-offset:2px; border-color:var(--cyan); }
.profile-email { grid-column:1/-1; margin:0; color:var(--muted); font-size:13px; }
.profile-email strong { color:var(--white); font-weight:600; }
.form-feedback { min-height:20px; margin:0; color:var(--muted); font-size:13px; line-height:1.4; }
.support-form { display:grid; gap:10px; margin-top:16px; }
.support-form .button { margin-top:4px; }
.support-form .form-feedback { color:var(--cyan); }
@media (max-width:600px) { .profile-form { grid-template-columns:1fr; } .profile-email { grid-column:auto; } .profile-edit-card { padding:16px; } }

@media (max-width: 600px) {
  .instruction-pdf-row { margin-bottom: 14px; }
  .instruction-pdf-action,
  .instruction-ip-action { width: 100%; justify-content: center; }
  .instruction-expected-ip { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* Iteration 7: compact public cards without reducing primary readability. */
.site-footer { font-size: 12px; letter-spacing: .08em; }

@media (max-width: 600px) {
  .site-footer { font-size: 12px; letter-spacing: .06em; }
  #home-view { font-size: 17px; }
  #home-view .eyebrow, #login-view .eyebrow { font-size: 14px; }
  .header-actions .button { min-height: 48px; font-size: 16px !important; }
  .menu-trigger { width: 48px; height: 48px; flex-basis: 48px; }
  #home-view .hero-proof { font-size: 15px; line-height: 1.45; }
  #home-view #how .step-card h3 { font-size: 20px; }
  #home-view #how .step-card p { font-size: 16px; line-height: 1.45; }

  #home-view .tariff-grid { gap: 12px; }
  #home-view .tariff-card { min-height: 0; padding: 20px; }
  #home-view .tariff-card > span { font-size: 14px; }
  #home-view .tariff-card strong { margin-top: 14px; font-size: 55px; }
  #home-view .tariff-card strong small { font-size: 16px; }
  #home-view .tariff-card .price { margin: 2px 0 4px; font-size: 25px; }
  #home-view .tariff-card p { margin: 0; font-size: 16px; line-height: 1.45; }
  #home-view .tariff-card .button { width: 100%; min-height: 50px; margin-top: 16px; font-size: 16px; }

  #home-view .public-russia-panel { padding: 18px; }
  #home-view .public-russia-panel h3 { font-size: 24px; }
  #home-view .public-russia-panel p:not(.eyebrow) { font-size: 16px; }
  #home-view .tariff-card { min-height: 0; padding: 18px; }
  #home-view .tariff-card strong { margin-top: 12px; }
  #home-view .tariff-card .button { margin-top: 13px; }

  #home-view .platform-grid { gap: 12px; }
  #home-view .platform-card { min-height: 0; padding: 20px; }
  #home-view .platform-card h3 { margin: 14px 0 6px; font-size: 23px; }
  #home-view .platform-card p { margin: 0; font-size: 16px; line-height: 1.45; }
  #home-view .platform-card a { min-height: 48px; margin-top: 12px; font-size: 16px; }

  #home-view > .instructions { padding-top: 2px; padding-bottom: 22px; }
  #home-view .instruction-panel { padding: 22px; }
  #home-view .instruction-panel h2 { font-size: 32px; }
  #home-view .instruction-panel p:not(.eyebrow) { font-size: 16px; line-height: 1.5; }
  #home-view .instruction-actions { margin-top: 18px; }
  #home-view .instruction-actions .button { min-height: 50px; font-size: 16px; }

  #home-view .support-panel p:not(.eyebrow) { font-size: 16px; line-height: 1.5; }
  #home-view .support-actions .button { min-height: 50px; font-size: 16px; }

  #login-view .auth-tabs { margin-bottom: 20px; }
  #login-view .tab { min-height: 48px; padding-bottom: 12px; font-size: 16px; }
  #login-view .auth-panel label { font-size: 16px; }
  #login-view .auth-panel input { min-height: 50px; font-size: 17px; }
  #login-view .auth-panel .button { min-height: 50px; font-size: 16px; }
  #login-view .form-hint { font-size: 16px; line-height: 1.5; }
  #login-view .auth-note strong { font-size: 16px; }
  #login-view .auth-note small { font-size: 14px; line-height: 1.45; }
  #login-view .telegram-box p { font-size: 16px; line-height: 1.5; }
}

/* Iteration 8: restrained, mutually exclusive public device selection. */
.platform-card { position: relative; }
.platform-card.is-selected { border-color: var(--cyan); background: rgba(85, 231, 244, .06); box-shadow: inset 3px 0 0 var(--cyan), 0 0 22px rgba(85, 231, 244, .1); }
.platform-card.is-selected::after { content: 'Выбрано'; position: absolute; top: 18px; right: 18px; color: var(--cyan); font-size: 12px; font-weight: 700; }
.platform-card.is-selected > span { color: var(--white); text-shadow: 0 0 12px rgba(85, 231, 244, .6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Iteration 6: compact mobile controls and non-emoji public arrows. */
.button-arrow, .text-arrow { display: inline-block; width: 8px; height: 8px; margin-left: 14px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; font-size: 0; line-height: 0; transform: rotate(45deg); vertical-align: 1px; }
.text-arrow { width: 7px; height: 7px; margin-left: 9px; border-width: 1.5px; }
.proof-short { display: none; }
#home-view .hero-proof .proof-label { color: var(--muted); }
#home-view .hero-trial-offer { max-width: 430px; margin: 20px 0 0; color: #d1dde2; font-family: inherit; font-size: 18px; font-weight: inherit; line-height: 1.62; letter-spacing: -.01em; }
#home-view .line-icon { position: relative; display: block; width: 36px; height: 36px; margin: 38px 0 20px; border: 1px solid rgba(85, 231, 244, .62); border-radius: 10px; color: var(--cyan); font-size: 0; }
#home-view .line-icon::before, #home-view .line-icon::after { content: ''; position: absolute; box-sizing: border-box; }
#home-view .line-icon-login::before { top: 7px; left: 13px; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
#home-view .line-icon-login::after { bottom: 6px; left: 9px; width: 16px; height: 10px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 10px 10px 0 0; }
#home-view .line-icon-access::before { inset: 8px; border: 1.5px solid currentColor; border-radius: 4px; }
#home-view .line-icon-access::after { top: 17px; left: 12px; width: 12px; height: 1.5px; background: currentColor; box-shadow: 0 -4px 0 -0.25px currentColor, 0 4px 0 -0.25px currentColor; }
#home-view .line-icon-device::before { top: 6px; left: 10px; width: 14px; height: 22px; border: 1.5px solid currentColor; border-radius: 4px; }
#home-view .line-icon-device::after { bottom: 9px; left: 16px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
#home-view .line-icon-qr::before { inset: 7px; background: conic-gradient(from 90deg at 25% 25%, currentColor 0 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 10px 10px; }

@media (max-width: 600px) {
  .site-header { height: 72px; padding-inline: 16px; gap: 10px; }
  .brand-logo-small { width: 60px; height: 60px; }
  .header-actions { gap: 8px; }
  .header-login { min-width: 72px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(13, 34, 49, .62); font-size: 14px !important; }
  .menu-trigger { flex: 0 0 44px; }
  .proof-long { display: none; }
  .proof-short { display: inline; }
  #home-view .hero-proof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; font-size: 13px; line-height: 1.35; }
  #home-view .hero-trial-offer { max-width: 170px; margin-top: 12px; font-size: 17px; line-height: 1.62; transform: translateY(-8px); }
  #home-view .hero-proof i { display: none; }
  #home-view #how.section { padding-top: 48px; padding-bottom: 48px; }
  #home-view #how .section-heading { margin-bottom: 22px; }
  #home-view #how .section-heading h2 { font-size: 34px; }
  #home-view #how .section-heading > p:last-child { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  #home-view #how .steps-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  #home-view #how .step-card, #home-view #how .step-card.featured { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 0; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); background: transparent; }
  #home-view #how .step-card:last-child { border-bottom: 0; }
  #home-view #how .step-number { padding-top: 3px; }
  #home-view #how .line-icon { width: 26px; height: 26px; margin: 0; border-radius: 7px; }
  #home-view #how .line-icon-login::before { top: 5px; left: 9px; width: 6px; height: 6px; }
  #home-view #how .line-icon-login::after { bottom: 4px; left: 6px; width: 12px; height: 7px; }
  #home-view #how .line-icon-access::before { inset: 6px; }
  #home-view #how .line-icon-access::after { top: 12px; left: 8px; width: 9px; }
  #home-view #how .line-icon-device::before { top: 4px; left: 7px; width: 10px; height: 16px; }
  #home-view #how .line-icon-device::after { bottom: 5px; left: 11px; width: 2px; height: 2px; }
  #home-view #how .line-icon-qr::before { inset: 5px; background-size: 8px 8px; }
  #home-view #how .step-copy { min-width: 0; }
  #home-view #how .step-card h3 { margin: 0 0 2px; font-size: 18px; }
  #home-view #how .step-card p { max-width: none; margin: 0; font-size: 15px; line-height: 1.4; }
  #home-view #how .card-arrow { display: none; }
  #login-view .auth-tabs { margin-bottom: 22px; }
  #login-view .tab { min-height: 44px; display: inline-flex; align-items: center; padding-bottom: 10px; }
  #login-view .auth-intro h1 { font-size: clamp(48px, 14vw, 64px); }
  #login-view .auth-intro > p:not(.eyebrow) { font-size: 17px; line-height: 1.55; }
}

/* Cabinet Part 1.2: desktop uses one page scroll and a single sticky sidebar. */
@media (min-width: 901px) {
  body.cabinet-mode {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    overflow-x: hidden;
  }
  body.cabinet-mode .site-header { display: none; }
  body.cabinet-mode main { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }
  body.cabinet-mode .cabinet-chrome { grid-column: 1; grid-row: 1; display: block; align-self: start; min-width: 0; min-height: 100vh; position: sticky; top: 0; z-index: 14; }
  body.cabinet-mode .cabinet-sidebar { position: sticky; top: 0; bottom: auto; width: 250px; min-height: 100vh; height: auto; overflow: visible; box-sizing: border-box; }
  body.cabinet-mode main > .view.active { max-width: none; padding: 0 32px 70px; }
  body.cabinet-mode #dashboard-view > .dashboard-shell { width: 100%; max-width: 1280px; margin: 0 auto; }
  body.cabinet-mode #dashboard-view > .dashboard-shell > .dashboard-content { padding: 36px 0 72px; }
  body.cabinet-mode .dashboard-top { margin-bottom: 20px; }
  body.cabinet-mode .cabinet-brand { margin-bottom: 18px; }
  body.cabinet-mode .cabinet-kicker { margin-bottom: 9px; }
  body.cabinet-mode .cabinet-primary-nav, body.cabinet-mode .cabinet-secondary-nav { gap: 3px; }
  body.cabinet-mode .cabinet-secondary-nav { padding-top: 12px; }
  body.cabinet-mode .cabinet-link { min-height: 46px; padding: 8px 10px; }
  body.cabinet-mode .profile-grid { gap: 14px; }
  body.cabinet-mode .profile-card { padding: 22px; }
}

/* Cabinet Part 2: compact, readable mock device flow. */
body.cabinet-mode .device-icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(93, 226, 235, .72);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(93, 226, 235, .08);
}
body.cabinet-mode .device-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: currentColor;
}
body.cabinet-mode .device-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
}
body.cabinet-mode .device-status.revoked { color: var(--muted); }
body.cabinet-mode .device-status.attention { color: var(--gold); }
body.cabinet-mode .device-status.revoked i { background: var(--muted); }
body.cabinet-mode .device-status.attention i { background: var(--gold); }
body.cabinet-mode .status-label-muted { color: var(--muted); }
body.cabinet-mode .device-status i,
body.cabinet-mode .setup-status i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
body.cabinet-mode .devices-count { color: var(--muted); font-size: 17px; }
body.cabinet-mode .devices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.cabinet-mode .cabinet-device-card,
body.cabinet-mode .device-detail-card,
body.cabinet-mode .devices-empty,
body.cabinet-mode .device-limit-notice {
  min-height: 0;
  padding: 22px;
}
body.cabinet-mode .device-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
body.cabinet-mode .device-card-head > div:first-child { display: flex; gap: 12px; align-items: center; }
body.cabinet-mode .device-card-head h2 { margin: 0; font-size: 23px; }
body.cabinet-mode .device-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
body.cabinet-mode .cabinet-device-card > p { margin: 18px 0; color: var(--muted); font-size: 16px; }
body.cabinet-mode .device-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.cabinet-mode .button-danger { border: 1px solid rgba(237, 125, 125, .55); background: rgba(237, 125, 125, .08); color: var(--danger); }
body.cabinet-mode .button-danger:hover,
body.cabinet-mode .button-danger:focus-visible { border-color: var(--danger); background: rgba(237, 125, 125, .14); }
body.cabinet-mode .button-danger:disabled { opacity: .55; cursor: wait; }
body.cabinet-mode .device-confirmation { width: 100%; margin-top: 4px; padding: 14px; border: 1px solid rgba(237, 125, 125, .35); border-radius: 12px; background: rgba(237, 125, 125, .05); }
body.cabinet-mode .device-confirmation p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
body.cabinet-mode .device-confirmation > div { display: flex; flex-wrap: wrap; gap: 10px; }
body.cabinet-mode .device-action-feedback { margin: 12px 0 0; color: var(--gold); font-size: 14px; }
body.cabinet-mode .device-name-label { display: block; margin-top: 18px; color: var(--text); font-weight: 700; }
body.cabinet-mode #device-name { width: 100%; margin-top: 8px; }
body.cabinet-mode .device-action-note { margin-top: 24px; font-size: 14px; }
body.cabinet-mode .platform-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 16px;
}
body.cabinet-mode .platform-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 120px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
body.cabinet-mode .platform-choice:hover,
body.cabinet-mode .platform-choice:focus-visible { border-color: rgba(93, 226, 235, .75); }
body.cabinet-mode .platform-choice.is-selected {
  border-color: var(--cyan);
  background: rgba(93, 226, 235, .09);
  box-shadow: inset 3px 0 0 var(--cyan);
}
body.cabinet-mode .platform-choice strong { display: block; font-size: 18px; }
body.cabinet-mode .platform-choice small { display: block; margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.4; }
body.cabinet-mode .platform-selected-label { display: block; margin-top: 12px; color: var(--cyan); font-size: 15px; font-weight: 700; }
body.cabinet-mode .cabinet-lead { color: var(--muted); font-size: 17px; line-height: 1.55; }
body.cabinet-mode .cabinet-continue { min-height: 52px; }
body.cabinet-mode .cabinet-continue:disabled { opacity: .45; cursor: not-allowed; }
body.cabinet-mode .device-detail-heading { display: flex; align-items: center; gap: 16px; }
body.cabinet-mode .device-detail-heading h2 { margin: 0; font-size: 23px; }
body.cabinet-mode .device-detail-heading p { margin: 5px 0 0; color: var(--muted); font-size: 16px; }
body.cabinet-mode .device-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
body.cabinet-mode .device-detail-facts div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
body.cabinet-mode .device-detail-facts dt { color: var(--muted); font-size: 15px; }
body.cabinet-mode .device-detail-facts dd { margin: 5px 0 0; font-size: 17px; font-weight: 700; }
body.cabinet-mode .device-actions { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
body.cabinet-mode .device-actions button { min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 16px; text-align: left; }
body.cabinet-mode .device-actions button:hover,
body.cabinet-mode .device-actions button:focus-visible { border-color: var(--cyan); color: var(--text); }
body.cabinet-mode .device-actions .danger-link { border-color: rgba(237, 125, 125, .42); color: var(--danger); }
body.cabinet-mode .cabinet-demo-qr { width: min(280px, 80vw); margin: 24px auto; }
body.cabinet-mode .setup-status { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; }
body.cabinet-mode .setup-instructions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
body.cabinet-mode .setup-instructions h2 { font-size: 22px; }
body.cabinet-mode .setup-instructions ol { margin: 0; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
body.cabinet-mode .setup-instructions li + li { margin-top: 6px; }
body.cabinet-mode .secure-setup-card { padding: 26px; }
body.cabinet-mode .karing-connect-panel { margin: 20px 0 18px; padding: 18px; border: 1px solid rgba(85,231,244,.42); background: linear-gradient(135deg, rgba(85,231,244,.12), rgba(11,28,43,.3)); box-shadow: 0 0 28px rgba(85,231,244,.08); }
body.cabinet-mode .karing-connect-panel h2 { margin: 7px 0 6px; font-size: 22px; }
body.cabinet-mode .karing-connect-panel p:not(.mini-label) { color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
body.cabinet-mode .karing-connect-panel .button { margin-top: 0; min-height: 48px; }
body.cabinet-mode .karing-platform-note { color: var(--gold) !important; border-left: 2px solid var(--gold); padding-left: 12px; }
body.cabinet-mode .karing-required-steps { margin: 16px 0 18px; padding: 14px 16px 14px 18px; border: 1px solid rgba(85, 231, 244, .28); border-radius: 12px; background: rgba(5, 13, 22, .34); }
body.cabinet-mode .karing-required-steps .mini-label { margin-bottom: 8px; color: var(--cyan); }
body.cabinet-mode .karing-required-steps ol { margin: 0; padding-left: 21px; color: var(--text); line-height: 1.45; }
body.cabinet-mode .karing-required-steps li + li { margin-top: 6px; }
body.cabinet-mode .karing-required-steps strong { color: var(--text); }
body.cabinet-mode .setup-fallback-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
body.cabinet-mode .setup-fallback-section h2 { margin: 7px 0 5px; font-size: 20px; }
body.cabinet-mode .setup-fallback-copy { color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
body.cabinet-mode .setup-fallback-required { margin: 14px 0 16px; padding: 12px 14px; border-left: 2px solid var(--cyan); color: var(--text); line-height: 1.45; }
body.cabinet-mode .setup-fallback-required strong { color: var(--cyan); }
body.cabinet-mode .setup-qr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 18px; }
body.cabinet-mode .setup-qr-actions .button { min-height: 52px; }
body.cabinet-mode .setup-qr-panel { display: grid; justify-items: center; gap: 16px; margin: 22px 0; padding: 20px; border: 1px solid rgba(85, 231, 244, .3); border-radius: 18px; background: rgba(5, 13, 22, .58); }
body.cabinet-mode .setup-qr-image { display: block; width: min(340px, 100%); aspect-ratio: 1; padding: 12px; border-radius: 8px; background: #fff; object-fit: contain; image-rendering: pixelated; }
body.cabinet-mode .setup-qr-close { min-width: 150px; }
body.cabinet-mode .security-note,
body.cabinet-mode .setup-persistence-note { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
body.cabinet-mode .setup-persistence-note { margin-top: 8px; }
body.cabinet-mode .setup-feedback { margin: 18px 0 0; padding: 14px; border: 1px solid rgba(231, 184, 92, .38); border-radius: 12px; background: rgba(231, 184, 92, .07); color: var(--text); }
body.cabinet-mode .setup-feedback p { margin: 0; line-height: 1.45; }
body.cabinet-mode .setup-feedback .button { margin-top: 12px; }
body.cabinet-mode .setup-feedback.is-error { border-color: rgba(237, 125, 125, .42); }
body.cabinet-mode .device-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (min-width: 901px) {
  body.cabinet-mode #devices-view > .simple-shell { max-width: 1280px; }
  body.cabinet-mode #add-device-view > .simple-shell,
  body.cabinet-mode #setup-view > .simple-shell,
  body.cabinet-mode #device-detail-view > .simple-shell { max-width: 760px; }
  body.cabinet-mode #devices-view .devices-grid { max-width: 900px; }
}

@media (max-width: 900px) {
  body.cabinet-mode .devices-grid { grid-template-columns: 1fr; gap: 12px; }
  body.cabinet-mode .platform-choice-grid { grid-template-columns: 1fr; }
  body.cabinet-mode .platform-choice { min-height: 72px; align-items: center; }
  body.cabinet-mode .cabinet-device-card,
  body.cabinet-mode .device-detail-card,
  body.cabinet-mode .devices-empty,
  body.cabinet-mode .device-limit-notice { padding: 18px; }
  body.cabinet-mode .device-detail-facts { grid-template-columns: 1fr 1fr; }
  body.cabinet-mode .cabinet-demo-qr { width: min(280px, calc(100vw - 54px)); }
  body.cabinet-mode .secure-setup-card { padding: 18px; }
  body.cabinet-mode .setup-qr-actions { grid-template-columns: 1fr; }
  body.cabinet-mode .setup-qr-image { width: min(320px, 100%); }
}

/* Cabinet Part 2.2: harden nested mobile pages for Safari chrome. */
body.cabinet-mode .device-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.cabinet-mode .device-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.cabinet-mode .platform-selected-label { display: none; }

@media (max-width: 900px) {
  body.cabinet-nested main > .view.active {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }
  body.cabinet-nested main > .view.active .simple-shell > .back-link {
    margin-bottom: 24px;
  }
  body.cabinet-nested main > .view.active .simple-shell > h1 {
    max-width: 12ch;
    margin-top: 8px;
    margin-bottom: 18px;
    font-size: clamp(46px, 13vw, 54px);
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  body.cabinet-nested .cabinet-continue,
  body.cabinet-nested .setup-actions .button,
  body.cabinet-nested .device-actions button {
    min-height: 48px;
  }
}

/* Phase 3.3A-1: prioritize public mobile intent without changing auth flow. */
.public-instruction-selector { display: none; }
.public-instruction-tab { min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(11, 28, 43, .7); font-weight: 700; cursor: pointer; }
.public-instruction-tab:hover,
.public-instruction-tab:focus-visible,
.public-instruction-tab.is-selected { border-color: var(--cyan); color: var(--white); background: rgba(85, 231, 244, .09); }
.public-instruction-actions { justify-content: flex-start; margin-top: 18px; }

@media (max-width: 600px) {
  .site-header {
    height: calc(60px + env(safe-area-inset-top));
    min-height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    gap: 8px;
  }
  .brand-logo-small { width: 48px; height: 48px; }
  .header-actions { gap: 6px; }
  .header-actions .button { min-height: 44px; font-size: 14px !important; }
  .header-login { min-width: 62px; padding: 9px 10px; }
  .menu-trigger { width: 44px; height: 44px; flex-basis: 44px; }

  #login-view .auth-shell {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    padding-top: 20px;
    padding-bottom: 54px;
  }
  #login-view .auth-card { order: 1; width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; }
  #login-view .auth-intro { order: 2; }
  #login-view .auth-intro h1 { font-size: clamp(44px, 13vw, 58px); margin-bottom: 16px; }
  #login-view .auth-note { margin-top: 22px; padding-top: 16px; }

  #home-view #instructions.section { padding-top: 2px; padding-bottom: 30px; }
  #home-view #instructions .instruction-panel { padding: 20px; }
  #home-view #instructions .instruction-panel h2 { font-size: 31px; }
  #home-view #instructions .instruction-panel p:not(.eyebrow) { margin-bottom: 0; font-size: 16px; line-height: 1.5; }
  #home-view .public-instruction-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  #home-view .public-instruction-tab { min-height: 48px; padding: 8px 5px; border-radius: 10px; font-size: 12px; line-height: 1.2; }
  #home-view .public-instruction-grid { display: block; margin-top: 10px; }
  #home-view .public-instruction-grid article { display: none; padding: 16px; }
  #home-view .public-instruction-grid article.is-selected { display: block; }
  #home-view .public-instruction-grid h3 { margin-bottom: 9px; font-size: 20px; }
  #home-view .public-instruction-grid ol { font-size: 15px; line-height: 1.48; }
  #home-view .public-instruction-grid li + li { margin-top: 6px; }
  #home-view .public-instruction-grid a { min-height: 48px; display: inline-flex; align-items: center; margin-top: 10px; font-size: 15px; }
  #home-view .public-instruction-actions { display: grid; margin-top: 12px; }
  #home-view .public-instruction-actions .button { width: 100%; min-height: 50px; }
  #home-view #how,
  #home-view #tariffs,
  #home-view #devices,
  #home-view #instructions,
  #home-view #public-help { scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px); }
}

/* Phase 3.3A: functional login, instruction, and help surfaces. */
.auth-tabs .tab:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .55;
}
.auth-unavailable {
  border-left: 2px solid var(--gold);
  padding: 14px 16px;
  background: rgba(231, 184, 92, .06);
}
.auth-unavailable h3 { margin: 0 0 6px; font: 600 18px/1.2 var(--ui); }
.auth-unavailable p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.email-box h3 { margin: 0 0 22px; font: 600 23px/1.15 var(--display); }
.email-code-note { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.email-code-note strong { color: var(--white); }
.email-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.text-button { padding: 0; border: 0; background: none; color: var(--cyan); font: 600 12px/1.4 var(--ui); cursor: pointer; }
.text-button:hover,
.text-button:focus-visible { color: var(--white); }
.auth-status { min-height: 1.4em; margin: 14px 0 0; color: var(--danger); font-size: 13px; line-height: 1.4; }
.instruction-hub { display: grid; gap: 18px; }
.instruction-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.instruction-platform {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(11, 28, 43, .7);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.instruction-platform:hover,
.instruction-platform:focus-visible,
.instruction-platform.is-selected { border-color: var(--cyan); background: rgba(85, 231, 244, .08); }
.instruction-platform .device-icon { flex: 0 0 auto; width: 30px; height: 30px; }
.instruction-platform strong,
.instruction-platform small { display: block; }
.instruction-platform strong { font-size: 14px; }
.instruction-platform small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.instruction-detail { padding: 20px; border: 1px solid var(--line); background: rgba(11, 28, 43, .7); }
.instruction-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.instruction-detail-heading .mini-label { margin-bottom: 5px; color: var(--gold); }
.instruction-detail h2 { margin: 0; font-size: 25px; }
.instruction-detail ol { margin: 18px 0 0; padding-left: 22px; color: var(--muted); line-height: 1.55; }
.instruction-detail li + li { margin-top: 7px; }
.instruction-hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.instruction-pdf-row { display: flex; justify-content: flex-start; margin: 2px 0 18px; }
.instruction-pdf-action { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.instruction-subsection { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(85, 231, 244, .14); }
.instruction-subsection ol { margin-top: 12px; }
.instruction-routing-mode,
.instruction-server-selection { border-top-color: rgba(244, 198, 94, .3); }
.instruction-routing-mode li:first-child,
.instruction-server-selection li:first-child { color: var(--white); }
.instruction-wrong-ip { border-top-color: rgba(237, 125, 125, .26); }
.instruction-expected-ip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; color: var(--muted); }
.instruction-expected-ip strong { color: var(--white); }
.instruction-expected-ip code { padding: 7px 10px; border: 1px solid rgba(85, 231, 244, .35); color: var(--cyan); background: rgba(85, 231, 244, .08); font: 700 16px/1 var(--ui); }
.instruction-ip-action { margin-top: 14px; min-height: 50px; display: inline-flex; align-items: center; gap: 8px; }
.public-instruction-grid .instruction-ip-action { color: var(--navy-950); }
.public-instruction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.public-instruction-grid article { padding: 18px; border: 1px solid var(--line); background: rgba(11, 28, 43, .55); }
.public-instruction-grid h3 { margin: 0 0 10px; font: 600 17px/1.2 var(--ui); }
.public-instruction-grid ol { margin: 0; padding-left: 19px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.public-instruction-grid li + li { margin-top: 5px; }
.public-instruction-grid a,
.help-action { display: inline-block; margin-top: 15px; color: var(--cyan); font-size: 12px; font-weight: 700; }
.help-details { margin-top: 16px; }
.help-detail { padding: 20px; border: 1px solid rgba(85, 231, 244, .25); background: rgba(5, 13, 22, .42); scroll-margin-top: 98px; }
.help-detail h2 { margin: 0 0 12px; font-size: 23px; }
.help-detail ol,
.help-detail ul { margin: 0; padding-left: 22px; color: var(--muted); line-height: 1.55; }
.help-detail li + li { margin-top: 6px; }
.help-detail .button { margin-top: 18px; }

@media (max-width: 600px) {
  .instruction-platforms,
  .public-instruction-grid { grid-template-columns: 1fr; }
  .instruction-detail-heading { display: block; }
  .instruction-detail-heading .button { margin-top: 14px; }
  .instruction-detail { padding: 16px; }
  .public-instruction-grid article { padding: 15px; }
}

/* Phase 3.3A-2: render the verified bot instructions as one focused web panel. */
.public-instruction-grid > article { display: none; }
.public-instruction-grid > article.is-selected { display: block; }
.instruction-content-loading { padding: 24px; border: 1px solid var(--line); color: var(--muted); background: rgba(11, 28, 43, .55); }
.instruction-content-loading.is-error { border-color: rgba(237, 125, 125, .42); color: var(--danger); }
.canonical-instruction-sections { display: grid; gap: 22px; margin-top: 20px; }
.canonical-instruction-sections section { padding-top: 17px; border-top: 1px solid var(--line); }
.canonical-instruction-sections ol { margin: 9px 0 0; padding-left: 22px; color: var(--muted); line-height: 1.55; }
.canonical-instruction-sections li + li { margin-top: 6px; }
.instruction-requirement { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
.instruction-check-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.instruction-link-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px; }
.instruction-download-link { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; color: var(--cyan); font-size: 13px; font-weight: 700; }
.instruction-download-link:hover, .instruction-download-link:focus-visible { color: var(--white); }
.instruction-resource-links { padding-top: 15px; border-top: 1px solid var(--line); }
.instruction-detail .instruction-hub-actions { margin-top: 22px; }
.instruction-device-actions { margin-top: 0; }

@media (min-width: 601px) {
  #home-view .public-instruction-grid > article { padding: 26px; }
  #home-view .canonical-instruction-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}

@media (max-width: 600px) {
  #home-view .public-instruction-grid > article { padding: 16px; }
  #home-view .canonical-instruction-sections { gap: 17px; margin-top: 16px; }
  #home-view .canonical-instruction-sections ol { font-size: 15px; line-height: 1.5; }
  #home-view .instruction-link-row { display: grid; gap: 4px; }
  #home-view .instruction-download-link { min-height: 46px; }
  body.cabinet-mode .instruction-detail .canonical-instruction-sections { gap: 16px; }
  body.cabinet-mode .instruction-detail { padding: 16px; }
}

/* Phase 3.3A-4: keep the selected public instruction panel wide on desktop. */
@media (min-width: 601px) {
  #home-view .public-instruction-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  #home-view .public-instruction-grid {
    display: block;
  }

  #home-view .public-instruction-grid > article.is-selected {
    width: 100%;
  }
}

@media (min-width: 601px) and (max-width: 1023px) {
  #home-view .canonical-instruction-sections {
    grid-template-columns: 1fr;
  }
}

/* Cabinet Part 2.1: root screens share one mobile hierarchy. */
body.cabinet-root .simple-shell > .back-link { display: none; }
body.cabinet-mode .mobile-cabinet { display: none; }
body.cabinet-mode .identity-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
@media (max-width: 900px) {
  body.cabinet-mode main > .view.active .simple-shell > h1,
  body.cabinet-mode #devices-view .page-title-row h1,
  body.cabinet-mode #dashboard-view .dashboard-top h1,
  body.cabinet-mode #subscription-view .simple-shell > h1,
  body.cabinet-mode #add-device-view .simple-shell > h1 {
    font-size: clamp(44px, 12vw, 48px);
    line-height: .98;
    letter-spacing: -.04em;
  }
  body.cabinet-mode .simple-shell { padding-top: 28px; padding-bottom: 42px; }
  body.cabinet-mode #devices-view .page-title-row { margin-bottom: 22px; }
  body.cabinet-mode #devices-view .page-title-row h1 { margin-bottom: 8px; }
  body.cabinet-mode #devices-view .page-title-row .button { margin-top: 16px; }
  body.cabinet-mode .platform-choice-grid { margin-top: 20px; margin-bottom: 14px; }
  body.cabinet-mode .cabinet-continue { margin-bottom: 8px; }
}

/* Phase 3.1B-5A: compact authenticated mobile cabinet spacing. */
@media (max-width: 900px) {
  body.cabinet-root main > .view.active { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.cabinet-mode .site-header { position: static; }
  body.cabinet-mode .profile-status-card { padding: 18px; }
  body.cabinet-mode .profile-card,
  body.cabinet-mode .sub-card,
  body.cabinet-mode .cabinet-device-card,
  body.cabinet-mode .device-detail-card,
  body.cabinet-mode .devices-empty,
  body.cabinet-mode .help-card { padding: 16px; }
  body.cabinet-mode .profile-grid,
  body.cabinet-mode .sub-layout,
  body.cabinet-mode .devices-grid,
  body.cabinet-mode .help-grid { gap: 12px; }
  body.cabinet-mode .profile-card h2,
  body.cabinet-mode .sub-card h2 { margin-top: 12px; }
  body.cabinet-mode .cabinet-bottom-nav {
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body.cabinet-mode .cabinet-more-drawer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* R6B-1: keep subscription/payment controls above the fixed mobile nav. */
@media (max-width: 900px) {
  body.cabinet-mode.cabinet-root main > #subscription-view.view.active {
    padding-bottom: calc(192px + env(safe-area-inset-bottom));
  }
}

/* Phase 3.1B-5B: final dashboard visual polish. */
body.cabinet-mode .profile-status-card,
body.cabinet-mode .profile-card,
body.cabinet-mode .sub-card,
body.cabinet-mode .cabinet-device-card,
body.cabinet-mode .device-detail-card,
body.cabinet-mode .devices-empty,
body.cabinet-mode .help-card,
body.cabinet-mode .identity-card,
body.cabinet-mode .session-card {
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

body.cabinet-mode .profile-status-card,
body.cabinet-mode .profile-card,
body.cabinet-mode .sub-card,
body.cabinet-mode .cabinet-device-card,
body.cabinet-mode .device-detail-card,
body.cabinet-mode .devices-empty,
body.cabinet-mode .help-card {
  background: linear-gradient(145deg, rgba(16, 40, 58, .78), rgba(11, 28, 43, .72));
}

body.cabinet-mode .profile-status-badge,
body.cabinet-mode .sub-card .status-label,
body.cabinet-mode .device-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

body.cabinet-mode .profile-status-badge { font-size: 13px; }
body.cabinet-mode .sub-card .status-label { font-size: 13px; }
body.cabinet-mode .device-status { font-size: 13px; }
body.cabinet-mode .device-status i { flex: 0 0 auto; }
body.cabinet-mode .profile-status-card.warning .profile-status-badge,
body.cabinet-mode .sub-card .status-label-muted { background: rgba(237, 125, 125, .08); }
body.cabinet-mode .device-status.revoked { background: rgba(139, 160, 173, .08); }
body.cabinet-mode .device-status.attention { background: rgba(231, 184, 92, .08); }

body.cabinet-mode .profile-card-heading,
body.cabinet-mode .device-card-head,
body.cabinet-mode .profile-device-line { min-width: 0; }
body.cabinet-mode .profile-card-heading > *,
body.cabinet-mode .device-card-head > * { min-width: 0; }
body.cabinet-mode .profile-card h2,
body.cabinet-mode .sub-card h2,
body.cabinet-mode .device-card-head h2,
body.cabinet-mode .device-detail-heading h2 {
  line-height: 1.12;
  overflow-wrap: anywhere;
}
body.cabinet-mode .profile-card p,
body.cabinet-mode .sub-card p,
body.cabinet-mode .sub-card li,
body.cabinet-mode .cabinet-device-card > p,
body.cabinet-mode .device-detail-heading p {
  line-height: 1.45;
}
body.cabinet-mode .profile-facts dd,
body.cabinet-mode .device-card-head p,
body.cabinet-mode .device-detail-facts dd { overflow-wrap: anywhere; }

body.cabinet-mode .profile-card .button,
body.cabinet-mode .sub-card .button,
body.cabinet-mode .cabinet-device-card .button,
body.cabinet-mode .state-banner .button {
  min-height: 48px;
}
body.cabinet-mode .profile-status-action .button { min-height: 48px; }
body.cabinet-mode .button:focus-visible,
body.cabinet-mode .cabinet-link:focus-visible,
body.cabinet-mode .cabinet-bottom-link:focus-visible {
  outline-offset: 2px;
}

@media (max-width: 600px) {
  body.cabinet-mode .device-card-head { flex-wrap: wrap; }
  body.cabinet-mode .device-card-head > div:first-child { flex: 1 1 190px; }
  body.cabinet-mode .device-status { margin-left: 60px; }
  body.cabinet-mode .profile-status-badge,
  body.cabinet-mode .sub-card .status-label { white-space: normal; }
  body.cabinet-mode .profile-status-copy h2 { font-size: clamp(25px, 7vw, 32px); }
  body.cabinet-mode .profile-top-note { font-size: 15px; line-height: 1.45; }
  body.cabinet-mode .sub-card li { overflow-wrap: anywhere; }
  body.cabinet-mode .device-card-actions { align-items: stretch; }
  body.cabinet-mode .device-card-actions .button { width: 100%; }
}

/* Phase 3.1F: keep active capacity primary and leave mobile content above the nav. */
.devices-add-action { display: grid; justify-items: end; gap: 8px; }
.devices-count { margin: 8px 0 0; color: var(--gold); font-size: 17px; }
.device-limit-message { max-width: 230px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; text-align: right; }
.device-limit-status { display: grid; gap: 3px; max-width: 360px; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--gold); }
.device-limit-status strong { color: var(--gold); font-size: 14px; }
.device-limit-status span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.devices-section + .devices-section { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.devices-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.devices-section-heading h2 { margin: 0; font: 600 22px/1.2 var(--display); }
.devices-section-heading > span { color: var(--muted); font-size: 14px; }
.devices-history-section { opacity: .86; }
.devices-history-section .device-card { background: rgba(11, 28, 43, .5); }
.cabinet-device-card.is-inactive .device-icon-wrap { border-color: rgba(139, 160, 173, .5); color: var(--muted); }
.cabinet-device-card .device-card-head > div > p { white-space: nowrap; }
.subscription-summary-card { max-width: 760px; }
.subscription-summary-card h2 { margin-bottom: 12px; }
.subscription-device-summary { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.device-detail-card .device-detail-facts dd { color: var(--white); }
.secure-setup-card { padding-block: 22px; }
.secure-setup-card > .cabinet-lead { margin: 10px 0 0; }
.secure-setup-card .setup-qr-actions { margin-block: 16px 14px; }
.secure-setup-card .setup-instructions { margin-top: 18px; padding-top: 16px; }

/* Device setup uses the same four canonical instruction cards as the public page. */
body.cabinet-mode .setup-instructions > .mini-label { margin: 0 0 12px; color: var(--gold); }
body.cabinet-mode .setup-instructions .instruction-step-guide { grid-template-columns: 1fr; gap: 12px; }
body.cabinet-mode .setup-instructions .instruction-step { grid-column: auto; padding: 16px; }
body.cabinet-mode .setup-instructions .instruction-step-body { margin-left: 39px; }
body.cabinet-mode .setup-instructions .instruction-step-body ol { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
body.cabinet-mode .setup-instructions .instruction-step-body li + li { margin-top: 6px; }
body.cabinet-mode .setup-instructions .instruction-connection-check { margin-top: 16px; }

@media (max-width: 900px) {
  body.cabinet-mode.cabinet-root main > .view.active {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }
  body.cabinet-mode .devices-add-action { justify-items: stretch; margin-top: 14px; }
  body.cabinet-mode .device-limit-message { max-width: none; text-align: left; }
  body.cabinet-mode .device-limit-status { max-width: none; }
  body.cabinet-mode .devices-section + .devices-section { margin-top: 26px; padding-top: 22px; }
  body.cabinet-mode .devices-section-heading h2 { font-size: 20px; }
  body.cabinet-mode .secure-setup-card { padding: 16px; }
  body.cabinet-mode .secure-setup-card .setup-meta { font-size: 14px; }
  body.cabinet-mode .secure-setup-card .setup-qr-actions { margin-top: 14px; }
  body.cabinet-mode .secure-setup-card .security-note,
  body.cabinet-mode .secure-setup-card .setup-persistence-note { font-size: 15px; }
  body.cabinet-mode .secure-setup-card .setup-instructions ol { line-height: 1.5; }
}

/* Phase 3.2E: compact mobile hierarchy without changing cabinet contracts. */
.payment-intro { max-width: 620px; }
.payment-request-summary { align-items: center; }
.payment-summary-tariff,
.payment-summary-amount { display: grid; gap: 3px; }
.payment-summary-tariff::first-line,
.payment-summary-amount::first-line { color: var(--muted); }
.payment-summary-amount strong { color: var(--gold); font: 700 clamp(24px, 4vw, 32px)/1 var(--display); }
.payment-selection-total { color: var(--muted); }
.payment-selection-total strong { font-size: 22px; }
.payment-instructions { margin: 18px 0 0; padding: 16px 18px 0 34px; border-top: 1px solid var(--line); }
.payment-instructions h3 { margin: 0 0 9px -18px; color: var(--white); font: 700 18px/1.2 var(--display); }
.payment-instructions ol { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--muted); }
.payment-current { margin-top: 18px; padding-top: 18px; }
.payment-state-copy { display: grid; gap: 4px; margin: 0 0 14px; }
.payment-state-copy .mini-label { color: var(--muted); }
.payment-state-copy strong { color: var(--gold); }
.payment-current-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(242, 194, 82, .07);
}
.payment-current-status span { color: var(--muted); font-size: 13px; }
.payment-current-status strong { color: var(--gold); }
.payment-cancel-action { display: block; margin: 18px 0 0 auto; }
.payment-cancel-confirm {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(237, 125, 125, .42);
  border-radius: var(--radius-md);
  background: rgba(237, 125, 125, .06);
}
.payment-cancel-confirm > strong { display: block; color: var(--white); }
.payment-cancel-confirm p { margin: 7px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.payment-cancel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.payment-receipt { padding-top: 14px; border-top: 1px solid var(--line); }
.payment-receipt h3 { margin: 0 0 6px; font: 700 18px/1.2 var(--display); }
.payment-receipt p { margin-bottom: 0; }
.payment-receipt label { margin-top: 13px; }
.payment-preselection-hint { margin: 10px 0 0; color: var(--muted); }
.device-card-identity { display: flex; align-items: center; min-width: 0; gap: 12px; }
.device-card-identity > div:last-child { min-width: 0; }
.device-card-copy { margin: 12px 0 0; }
.device-secondary-action { color: var(--muted); }
.device-detail-status { display: block; margin-top: 5px; color: var(--green); font-size: 15px; font-weight: 700; }
.setup-help-link { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; text-align: left; cursor: pointer; }
.setup-help-link:hover, .setup-help-link:focus-visible { color: var(--white); text-decoration: underline; }

@media (max-width: 900px) {
  body.cabinet-mode .dashboard-content,
  body.cabinet-mode .simple-shell { padding-top: calc(28px + env(safe-area-inset-top)); }
  body.cabinet-mode.cabinet-root main > .view.active { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.cabinet-mode .cabinet-bottom-nav {
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
  }
  body.cabinet-mode .cabinet-bottom-link { min-height: 48px; padding: 5px 4px; gap: 2px; }
  body.cabinet-mode .profile-status-card { padding: 16px; }
  body.cabinet-mode .profile-card,
  body.cabinet-mode .sub-card,
  body.cabinet-mode .cabinet-device-card,
  body.cabinet-mode .device-detail-card,
  body.cabinet-mode .devices-empty,
  body.cabinet-mode .help-card { padding: 15px; }
  body.cabinet-mode .profile-grid,
  body.cabinet-mode .sub-layout,
  body.cabinet-mode .devices-grid,
  body.cabinet-mode .help-grid { gap: 10px; }
  body.cabinet-mode .profile-status-copy h2 { margin: 9px 0 0; }
  body.cabinet-mode .profile-card h2,
  body.cabinet-mode .sub-card h2 { margin-top: 9px; }
  body.cabinet-mode .profile-card .button,
  body.cabinet-mode .sub-card .button { margin-top: 12px; }
  body.cabinet-mode #devices-view .page-title-row { margin-bottom: 16px; }
  body.cabinet-mode #devices-view .page-title-row .button { margin-top: 12px; }
  body.cabinet-mode .cabinet-device-card { padding: 14px; }
  body.cabinet-mode .device-card-head { gap: 10px; }
  body.cabinet-mode .device-card-head > div:first-child { flex-basis: 170px; }
  body.cabinet-mode .device-icon-wrap { width: 42px; height: 42px; flex-basis: 42px; }
  body.cabinet-mode .device-card-head h2 { font-size: 21px; }
  body.cabinet-mode .device-card-head p { margin-top: 2px; font-size: 14px; }
  body.cabinet-mode .device-card-actions { gap: 8px; margin-top: 12px; }
  body.cabinet-mode .device-card-actions .button { margin-top: 0; }
  body.cabinet-mode .device-secondary-action { order: 2; }
  body.cabinet-mode .device-card-actions .button-danger { order: 3; }
  body.cabinet-mode .payment-card { padding: 15px; }
  body.cabinet-mode .payment-card > h2 { font-size: 25px; }
  body.cabinet-mode .payment-card > .payment-intro { margin-bottom: 0; font-size: 15px; line-height: 1.4; }
  body.cabinet-mode .payment-tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 16px 0 10px; }
  body.cabinet-mode .payment-tariff { min-height: 70px; gap: 3px; padding: 10px 8px; text-align: center; }
  body.cabinet-mode .payment-tariff strong { font-size: 15px; }
  body.cabinet-mode .payment-tariff span { font-size: 16px; }
  body.cabinet-mode .payment-total { margin: 8px 0 12px; }
  body.cabinet-mode .payment-selection-total { padding: 8px 10px; border-left: 2px solid var(--gold); background: rgba(231,184,92,.06); }
  body.cabinet-mode .payment-qr-actions { gap: 8px; }
  body.cabinet-mode .payment-request-summary { margin: 14px 0 10px; padding: 12px; }
  body.cabinet-mode .payment-bank-warning { margin: 8px 0 12px; }
  body.cabinet-mode .payment-qr-panel { margin: 16px 0; padding: 14px; }
  body.cabinet-mode .payment-instructions { margin-top: 14px; padding-top: 13px; }
  body.cabinet-mode .payment-instructions h3 { font-size: 17px; }
  body.cabinet-mode .payment-receipt h3 { font-size: 17px; }
  body.cabinet-mode .secure-setup-card { padding: 15px; }
  body.cabinet-mode .secure-setup-card > .cabinet-lead { margin-top: 7px; }
  body.cabinet-mode .secure-setup-card .setup-qr-actions { margin: 12px 0; }
  body.cabinet-mode .secure-setup-card .security-note,
  body.cabinet-mode .secure-setup-card .setup-persistence-note { margin-top: 9px; }
  body.cabinet-mode .secure-setup-card .setup-instructions { margin-top: 14px; padding-top: 13px; }
  body.cabinet-mode .secure-setup-card .setup-instructions ol { line-height: 1.45; }
  body.cabinet-mode .secure-setup-card .setup-instructions li + li { margin-top: 4px; }
}

@media (max-width: 600px) {
  body.cabinet-mode main > .view.active .simple-shell > h1,
  body.cabinet-mode #devices-view .page-title-row h1 { font-size: clamp(40px, 11vw, 46px); }
  body.cabinet-mode .payment-tariffs { grid-template-columns: 1fr; }
  body.cabinet-mode .payment-tariff { min-height: 0; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  body.cabinet-mode .payment-qr-actions { grid-template-columns: 1fr; }
  body.cabinet-mode .payment-request-summary { grid-template-columns: 1fr; gap: 8px; }
  body.cabinet-mode .payment-summary-amount strong { font-size: 28px; }
}

/* Phase 3.2E-3: final mobile density and fixed-nav clearance contract. */
body.cabinet-mode .payment-instructions h3,
body.cabinet-mode .payment-receipt h3,
body.cabinet-mode .devices-section-heading h2,
body.cabinet-mode .setup-instructions h2 {
  font-family: var(--ui);
  letter-spacing: -.015em;
}

body.cabinet-mode .payment-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 14px 0;
  color: var(--muted);
}

body.cabinet-mode .payment-loading-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid rgba(93, 226, 235, .25);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: cabinet-loading-spin .8s linear infinite;
}

@keyframes cabinet-loading-spin {
  to { transform: rotate(360deg); }
}

body.cabinet-mode .button:disabled {
  border-color: rgba(139, 160, 173, .32);
  background: rgba(139, 160, 173, .08);
  color: var(--muted);
  opacity: .78;
  cursor: not-allowed;
}

body.cabinet-mode .payment-request-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  margin-block: 12px 10px;
  padding: 12px 14px;
}

body.cabinet-mode .payment-summary-tariff,
body.cabinet-mode .payment-summary-amount { margin: 0; }
body.cabinet-mode .payment-summary-amount { text-align: right; }
body.cabinet-mode .payment-summary-amount strong { font-size: clamp(26px, 6vw, 32px); }
body.cabinet-mode .payment-bank-warning { margin-block: 8px 12px; font-size: 13px; line-height: 1.4; }
body.cabinet-mode .payment-qr-actions { gap: 8px; }
body.cabinet-mode .payment-change-tariff { min-height: 44px; margin-top: 8px; }
body.cabinet-mode .payment-instructions { margin-top: 14px; padding-top: 12px; }
body.cabinet-mode .payment-instructions ol { gap: 4px; }
body.cabinet-mode .payment-current { margin-top: 14px; padding-top: 14px; }
body.cabinet-mode .payment-receipt { padding-top: 12px; }
body.cabinet-mode .payment-receipt label { margin-top: 10px; }

body.cabinet-mode .devices-add-action { gap: 6px; }
body.cabinet-mode .device-limit-message { font-size: 12px; }
body.cabinet-mode .cabinet-device-card { padding: 14px; }
body.cabinet-mode .cabinet-device-card > p.device-card-copy { margin: 10px 0; font-size: 14px; }
body.cabinet-mode .device-card-actions { gap: 8px; margin-top: 10px; }
body.cabinet-mode .device-card-actions .button { min-height: 46px; }
body.cabinet-mode .secure-setup-card { padding: 14px; }
body.cabinet-mode .secure-setup-card .setup-instructions { margin-top: 12px; padding-top: 12px; }

@media (max-width: 900px) {
  body.cabinet-mode .dashboard-content,
  body.cabinet-mode .simple-shell {
    padding-top: calc(30px + env(safe-area-inset-top));
    padding-bottom: 28px;
  }

  body.cabinet-mode main > .view.active {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  body.cabinet-mode.cabinet-nested main > .view.active {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  body.cabinet-mode .cabinet-bottom-nav {
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    gap: 4px;
  }

  body.cabinet-mode .cabinet-bottom-link {
    min-height: 48px;
    padding: 4px 3px;
    border: 1px solid transparent;
    border-radius: 12px;
    gap: 2px;
    font-size: 12px;
  }

  body.cabinet-mode .cabinet-bottom-link.active {
    border-color: transparent;
    background: rgba(93, 226, 235, .09);
    box-shadow: inset 0 -2px 0 var(--cyan);
    color: var(--white);
  }

  body.cabinet-mode .cabinet-bottom-link.active .cabinet-link-icon {
    color: var(--cyan);
  }

  body.cabinet-mode main > .view.active .simple-shell > h1,
  body.cabinet-mode #devices-view .page-title-row h1 {
    font-size: clamp(38px, 10vw, 44px);
    line-height: .98;
  }

  body.cabinet-mode .profile-status-card,
  body.cabinet-mode .profile-card,
  body.cabinet-mode .sub-card,
  body.cabinet-mode .device-detail-card,
  body.cabinet-mode .devices-empty,
  body.cabinet-mode .help-card { padding: 14px; }

  body.cabinet-mode .payment-card > h2 { margin-top: 8px; font-size: 24px; }
  body.cabinet-mode .payment-card > .payment-intro { font-size: 14px; }
  body.cabinet-mode .payment-tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 8px; }
  body.cabinet-mode .payment-tariff { min-height: 66px; gap: 3px; padding: 8px 5px; text-align: center; }
  body.cabinet-mode .payment-tariff strong { font-size: 14px; }
  body.cabinet-mode .payment-tariff span { font-size: 15px; }
  body.cabinet-mode .payment-selection-total { margin-block: 7px 10px; padding: 7px 9px; }
  body.cabinet-mode .payment-selection-total strong { font-size: 20px; }
  body.cabinet-mode .payment-qr-panel { margin-block: 14px; padding: 12px; }
  body.cabinet-mode .payment-receipt h3,
  body.cabinet-mode .payment-instructions h3 { font-size: 17px; }
}

@media (max-width: 600px) {
  body.cabinet-mode .cabinet-bottom-link { font-size: 11px; }
  body.cabinet-mode .payment-cancel-action { width: 100%; margin-top: 14px; }
  body.cabinet-mode .payment-cancel-actions { display: grid; grid-template-columns: 1fr; }
  body.cabinet-mode .payment-cancel-actions .button { width: 100%; }
  body.cabinet-mode .payment-request-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.cabinet-mode .payment-request-summary .payment-summary-tariff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
  }
  body.cabinet-mode .payment-request-summary .payment-summary-tariff strong {
    white-space: nowrap;
  }
  body.cabinet-mode .payment-request-summary .payment-summary-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(85,231,244,.24);
    text-align: left;
  }
  body.cabinet-mode .payment-summary-amount strong { font-size: 26px; }
  body.cabinet-mode .payment-qr-actions { grid-template-columns: 1fr; }
  body.cabinet-mode .device-card-head > div:first-child { flex-basis: 160px; }
}

/* Amendment: keep the two Profile data cards symmetrical and tariff choices vertical. */
body.cabinet-mode #dashboard-view .profile-top-grid {
  align-items: stretch;
}

body.cabinet-mode #dashboard-view .profile-top-card--traffic,
body.cabinet-mode #dashboard-view .profile-top-card--earnings {
  height: 100%;
  box-sizing: border-box;
}

body.cabinet-mode #dashboard-view .earnings-top-actions .button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--cabinet-mobile-button-height, 44px);
  margin: 0;
}

@media (max-width: 600px) {
  body.cabinet-mode #dashboard-view .traffic-summary {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 14px;
  }

  body.cabinet-mode #dashboard-view .traffic-summary dt,
  body.cabinet-mode #dashboard-view .traffic-summary dd {
    white-space: normal;
  }

  body.cabinet-mode #dashboard-view .traffic-summary dt {
    white-space: normal;
    line-height: 1.25;
  }

  body.cabinet-mode #dashboard-view .traffic-summary dd {
    font-size: 13px;
    margin-top: 0;
    white-space: nowrap;
  }

  body.cabinet-mode #dashboard-view .earnings-top-actions .button {
    padding-inline: 8px;
  }

  body.cabinet-mode #dashboard-view .earnings-top-actions {
    margin-top: 10px;
  }
}

body.cabinet-mode #subscription-view .payment-tariffs {
  align-items: stretch;
}

body.cabinet-mode #subscription-view .payment-tariff {
  display: flex;
  min-height: 72px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  text-align: center;
}

body.cabinet-mode #subscription-view .payment-tariff strong,
body.cabinet-mode #subscription-view .payment-tariff span {
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

body.cabinet-mode #subscription-view .payment-tariff strong {
  font-size: 15px;
}

body.cabinet-mode #subscription-view .payment-tariff span {
  font-size: 16px;
}

body.cabinet-mode #subscription-view .payment-change-tariff {
  display: block;
  width: 100%;
  margin: 0 0 12px;
}

@media (max-width: 600px) {
  body.cabinet-mode #subscription-view .payment-tariff {
    min-height: 66px;
    padding: 8px 5px;
  }
}

/* Phase 3.2E-4: device-only mobile title and card polish. */
@media (max-width: 900px) {
  body.cabinet-mode main > .view.active .simple-shell > h1,
  body.cabinet-mode #devices-view .page-title-row h1,
  body.cabinet-mode #dashboard-view .dashboard-top h1,
  body.cabinet-mode #subscription-view .simple-shell > h1,
  body.cabinet-mode #add-device-view .simple-shell > h1 {
    font-size: clamp(34px, 9vw, 40px);
    line-height: 1;
    letter-spacing: -.035em;
  }

  body.cabinet-mode #add-device-view .simple-shell > h1 {
    max-width: 14ch;
    margin-bottom: 14px;
  }

  body.cabinet-mode .cabinet-device-card {
    padding: 12px 13px;
  }

  body.cabinet-mode .cabinet-device-card .device-card-actions {
    margin-top: 9px;
  }

  body.cabinet-mode .cabinet-device-card > p.device-card-copy {
    margin-block: 8px;
  }
}

@media (max-width: 430px) {
  body.cabinet-mode main > .view.active .simple-shell > h1,
  body.cabinet-mode #devices-view .page-title-row h1,
  body.cabinet-mode #dashboard-view .dashboard-top h1,
  body.cabinet-mode #subscription-view .simple-shell > h1,
  body.cabinet-mode #add-device-view .simple-shell > h1 {
    font-size: clamp(32px, 8.8vw, 38px);
  }
}

/* Keep the normal subscription purchase surface within a desktop viewport. */
@media (min-width: 901px) {
  /* The desktop cabinet has no footer in this mode; do not reserve the root view's mobile-safe bottom space. */
  body.cabinet-mode #subscription-view {
    padding-bottom: 0;
  }

  /* Keep the two access products balanced while leaving payment full-width below them. */
  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    align-items: stretch;
    gap: 20px;
  }

  /* Trial/gift users see the main purchase first in markup; keep that order
     while giving the primary purchase more visual weight on desktop. */
  body.cabinet-mode #subscription-view #subscription-state:has(> .payment-card + .russia-card) {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    align-items: start;
    gap: 20px;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .payment-card + .russia-card) > .subscription-summary-card {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    max-width: none;
    margin-top: 0;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .payment-card + .russia-card) > .payment-card {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    margin-top: 0;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .payment-card + .russia-card) > .russia-card {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    align-self: start;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .subscription-summary-card,
  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .russia-card {
    min-width: 0;
    max-width: none;
    margin-top: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .subscription-summary-card .subscription-device-summary,
  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .russia-card > .button,
  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .russia-card > .russia-muted {
    margin-top: auto;
  }

  body.cabinet-mode #subscription-view #subscription-state:has(> .subscription-summary-card + .russia-card) > .payment-card {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
  }

  /* The locked add-on is a calm dependency notice, not an error state or a
     competing purchase offer. */
  body.cabinet-mode #subscription-view .russia-card-paid-required {
    border-color: rgba(231, 184, 92, .32);
    background: linear-gradient(145deg, rgba(231, 184, 92, .055), rgba(11, 28, 43, .72) 58%);
    padding: 18px;
  }

  body.cabinet-mode #subscription-view .russia-card-paid-required .russia-status-muted {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    color: var(--gold);
    border-color: rgba(231, 184, 92, .46);
    background: rgba(231, 184, 92, .055);
    font-size: 9px;
    text-overflow: ellipsis;
  }

  body.cabinet-mode #subscription-view .russia-card-paid-required .russia-copy {
    max-width: 34ch;
    margin-top: 14px;
    line-height: 1.45;
  }

  body.cabinet-mode #subscription-view .russia-card-paid-required .russia-detail {
    max-width: 30ch;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.4;
  }

  body.cabinet-mode #subscription-view .russia-card-paid-required > .button.button-outline {
    align-self: flex-start;
    margin-top: 18px;
    border-color: rgba(231, 184, 92, .42);
    background: rgba(5, 13, 22, .22);
    color: var(--muted);
    box-shadow: none;
    font-size: 12px;
  }

  body.cabinet-mode #subscription-view .russia-card-paid-required > .button.button-outline:hover,
  body.cabinet-mode #subscription-view .russia-card-paid-required > .button.button-outline:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
  }

  body.cabinet-mode #subscription-view .simple-shell {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  body.cabinet-mode #subscription-view .simple-shell > h1 {
    margin-bottom: 16px;
    font-size: 42px;
    line-height: 1;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card {
    padding: 18px;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card .eyebrow,
  body.cabinet-mode #subscription-view .payment-card > .eyebrow {
    margin-bottom: 10px;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card h2,
  body.cabinet-mode #subscription-view .payment-card > h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 1.12;
  }

  body.cabinet-mode #subscription-view .subscription-summary-card ul {
    margin: 0;
  }

  body.cabinet-mode #subscription-view .subscription-device-summary {
    margin-top: 12px;
    padding-top: 10px;
  }

  body.cabinet-mode #subscription-view .payment-card {
    margin-top: 12px;
    padding: 18px;
  }

  body.cabinet-mode #subscription-view .payment-card > .payment-intro {
    max-width: 720px;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  body.cabinet-mode #subscription-view .payment-tariffs {
    gap: 10px;
    margin: 14px 0 8px;
  }

  body.cabinet-mode #subscription-view .payment-tariff {
    min-height: 72px;
    gap: 4px;
    padding: 10px 14px;
  }

  body.cabinet-mode #subscription-view .payment-tariff strong {
    font-size: 15px;
  }

  body.cabinet-mode #subscription-view .payment-tariff span {
    font-size: 16px;
  }

  body.cabinet-mode #subscription-view .payment-selection-total {
    margin: 6px 0 10px;
    padding: 6px 10px;
  }

  body.cabinet-mode #subscription-view .payment-card > .button {
    min-height: 48px;
  }

  body.cabinet-mode #subscription-view .payment-feedback {
    margin-top: 10px;
  }
}

/* Phase 3.3A-6: present shared Karing logic as one visual step guide. */
.instruction-platform-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(85, 231, 244, .16);
}
.instruction-platform-header .device-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--cyan);
}
.instruction-platform-header .device-icon svg { width: 100%; height: 100%; }
.instruction-platform-header .device-icon svg,
.instruction-platform-header .device-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.instruction-platform-header .mini-label { margin-bottom: 3px; color: var(--gold); }
.instruction-platform-header h2,
.instruction-platform-header h3 { margin: 0; font: 700 26px/1.08 var(--ui); letter-spacing: -.025em; }
.instruction-platform-header p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.instruction-detail > .instruction-pdf-row { margin: 18px 0 16px; }
.instruction-pdf-action {
  box-shadow: 0 8px 24px rgba(85, 231, 244, .16);
}
.instruction-pdf-action:hover,
.instruction-pdf-action:focus-visible {
  box-shadow: 0 10px 28px rgba(85, 231, 244, .26);
  transform: translateY(-1px);
}
.instruction-pdf-action:active { transform: translateY(0); }
.instruction-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.instruction-shared-note {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(85, 231, 244, .2);
  border-radius: 14px;
  background: rgba(5, 24, 36, .72);
  color: var(--muted);
  line-height: 1.5;
}
.instruction-shared-note p { margin: 0; }
.instruction-shared-note p:first-child { color: var(--white); }
.instruction-facts > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(85, 231, 244, .16);
  background: rgba(5, 18, 29, .58);
}
.instruction-facts .instruction-step-icon { width: 23px; height: 23px; }
.instruction-facts span:last-child { display: grid; gap: 3px; min-width: 0; }
.instruction-facts small { color: var(--muted); font-size: 12px; }
.instruction-facts strong { overflow-wrap: anywhere; color: var(--white); font-size: 14px; }
.instruction-step-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.instruction-step {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(11, 31, 47, .92), rgba(5, 17, 28, .72));
}
.instruction-step:nth-child(3) { grid-column: 1 / -1; }
.instruction-step:nth-child(4),
.instruction-step:nth-child(5) { border-color: rgba(244, 198, 94, .2); }
.instruction-step:nth-child(7) { border-color: rgba(85, 231, 244, .34); background: linear-gradient(145deg, rgba(9, 45, 58, .92), rgba(5, 24, 36, .78)); }
.instruction-step-heading { display: flex; align-items: center; gap: 10px; }
.instruction-step-number { color: var(--gold); font: 700 13px/1 var(--ui); letter-spacing: .1em; }
.instruction-step-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  place-items: center;
  color: var(--cyan);
}
.instruction-step-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.instruction-step-heading .mini-label { margin-bottom: 3px; color: var(--muted); }
.instruction-step-heading h3 { margin: 0; color: var(--white); font: 700 18px/1.15 var(--ui); }
.instruction-step-body { margin-left: 69px; }
.instruction-step-summary { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.instruction-step-body ol { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.instruction-step-body li + li { margin-top: 6px; }
.instruction-step-body .instruction-link-row { margin-top: 12px; }
.instruction-alternative {
  margin-top: 14px;
  border-top: 1px solid rgba(85, 231, 244, .13);
  padding-top: 11px;
}
.instruction-alternative summary { cursor: pointer; color: var(--cyan); font-size: 13px; font-weight: 700; }
.instruction-alternative ol { margin-top: 10px; }
.instruction-step-body .instruction-check-note { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.instruction-step-profile-import .instruction-check-note {
  padding: 10px 12px;
  border-left: 2px solid rgba(244, 198, 94, .58);
  background: rgba(244, 198, 94, .06);
}
.instruction-step-verification .instruction-step-body { margin-left: 69px; }
.instruction-step-verification .instruction-expected-ip { margin-top: 14px; }
.instruction-step-verification .instruction-ip-action { margin-top: 12px; }
.instruction-troubleshooting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.instruction-troubleshooting {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(237, 125, 125, .25);
  background: rgba(36, 19, 25, .36);
}
.instruction-cannot-connect { border-color: rgba(244, 198, 94, .22); background: rgba(35, 29, 19, .24); }
.instruction-troubleshooting .instruction-check-note { margin-bottom: 0; }
.instruction-limit-action { display: grid; gap: 8px; }
.instruction-limit-action p { margin: 0; max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.instruction-device-actions { align-items: flex-start; }

@media (min-width: 601px) {
  #home-view .public-instruction-grid > article { padding: 25px; }
  #home-view .instruction-step-body ol { max-width: 68ch; }
  #home-view .instruction-step:nth-child(3) .instruction-step-body ol { max-width: 100ch; columns: 2; column-gap: 32px; }
  #home-view .instruction-step:nth-child(3) .instruction-step-body li { break-inside: avoid; }
}

@media (max-width: 900px) {
  .instruction-step-guide,
  .instruction-troubleshooting-grid { grid-template-columns: 1fr; }
  #home-view .instruction-troubleshooting-grid { grid-auto-rows: auto; }
  .instruction-step:nth-child(3) { grid-column: auto; }
  #home-view .instruction-step:nth-child(3) .instruction-step-body ol { columns: auto; }
}

@media (max-width: 600px) {
  .instruction-platform-header { gap: 10px; padding-bottom: 14px; }
  .instruction-platform-header .device-icon { width: 35px; height: 35px; }
  .instruction-platform-header h2,
  .instruction-platform-header h3 { font-size: 22px; }
  .instruction-platform-header p:last-child { font-size: 13px; }
  .instruction-detail > .instruction-pdf-row { margin: 14px 0; }
  .instruction-pdf-action { width: 100%; justify-content: center; }
  .instruction-facts { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .instruction-facts > div { min-height: 48px; padding: 9px 10px; }
  .instruction-step { padding: 14px; }
  .instruction-step-heading h3 { font-size: 16px; }
  .instruction-step-body,
  .instruction-step-verification .instruction-step-body { margin-left: 39px; }
  .instruction-step-summary { margin-top: 10px; font-size: 13px; line-height: 1.5; }
  .instruction-step-body ol { font-size: 14px; line-height: 1.5; }
  .instruction-step-icon { width: 25px; height: 25px; }
  .instruction-troubleshooting { padding: 14px; }
  .instruction-step-profile-import .instruction-check-note { margin-top: 14px; }
  .instruction-hub-actions.public-canonical-actions { display: grid; }
  .instruction-hub-actions.public-canonical-actions .button { width: 100%; justify-content: center; }
  #home-view .public-instruction-grid .instruction-step { display: block; }
}

/* Phase 3.3A-6C: keep Step 03 as two light sections, not nested cards. */
#home-view .instruction-step-profile-import .instruction-step-groups {
  gap: 0;
}
#home-view .instruction-step-profile-import .instruction-step-group {
  padding: 14px 20px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#home-view .instruction-step-profile-import .instruction-step-group ol {
  columns: auto !important;
  max-width: none;
}
#home-view .instruction-step-profile-import .instruction-check-note {
  margin-top: 12px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(244, 198, 94, .16);
  border-left: 0;
  background: transparent;
}

#home-view .instruction-step-profile-import .instruction-step-group + .instruction-step-group {
  border-left: 1px solid rgba(85, 231, 244, .14);
}

#home-view .instruction-step:nth-child(6),
#home-view .instruction-step:nth-child(7) {
  border-color: rgba(85, 231, 244, .34);
  background: linear-gradient(145deg, rgba(9, 45, 58, .92), rgba(5, 24, 36, .78));
}

#home-view .instruction-download-link {
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(85, 231, 244, .22);
  border-radius: 8px;
  background: rgba(5, 24, 36, .72);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
#home-view .instruction-download-link:hover,
#home-view .instruction-download-link:focus-visible {
  border-color: rgba(85, 231, 244, .58);
  background: rgba(9, 45, 58, .9);
}

#home-view .instruction-alternative {
  padding: 12px 14px;
  border-radius: 10px;
}
#home-view .instruction-alternative summary { font-size: 15px; }
#home-view .instruction-alternative ol { margin-bottom: 2px; }

@media (max-width: 900px) {
  #home-view .instruction-step-profile-import .instruction-step-groups { gap: 0; }
  #home-view .instruction-step-profile-import .instruction-step-group + .instruction-step-group {
    border-top: 1px solid rgba(85, 231, 244, .14);
    border-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 600px) {
  #home-view .instruction-step-profile-import .instruction-step-group { padding: 12px 13px 14px; }
}

/* Phase 3.3A-6B: reliable public platform icons and readable instruction rhythm. */
#home-view .platform-card-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--cyan);
  font-size: 0;
}
#home-view .instruction-platform-header { scroll-margin-top: 98px; }
#home-view .platform-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
#home-view .platform-card-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
#home-view .public-instruction-grid a.instruction-pdf-action {
  min-height: 50px;
  padding-inline: 18px;
  font-size: 15px;
  background: var(--cyan);
  color: var(--navy-950);
  opacity: 1;
  visibility: visible;
  font-weight: 800;
}
#home-view .public-instruction-grid a.instruction-pdf-action:hover,
#home-view .public-instruction-grid a.instruction-pdf-action:focus-visible {
  background: #8af2fa;
  color: var(--navy-950);
}
#home-view .instruction-platform-header p:last-child { font-size: 15px; line-height: 1.45; }
#home-view .instruction-facts small { font-size: 13px; }
#home-view .instruction-facts strong { font-size: 15px; }
#home-view .instruction-step-heading h3 { font-size: 19px; line-height: 1.2; }
#home-view .instruction-step-summary { font-size: 16px; line-height: 1.55; }
#home-view .instruction-step-body ol {
  font-size: 17px;
  line-height: 1.58;
}
#home-view .instruction-step-body li + li { margin-top: 8px; }
#home-view .instruction-step-profile-import .instruction-step-body > ol { columns: auto; max-width: none; }
.instruction-step-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.instruction-step-group {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(85, 231, 244, .14);
  background: rgba(5, 18, 29, .28);
}
.instruction-step-group h4 {
  margin: 0;
  color: var(--white);
  font: 700 15px/1.3 var(--ui);
}
.instruction-step-group ol { margin-top: 9px !important; }
#home-view .instruction-alternative {
  margin-top: 16px;
  padding: 12px 14px 0;
  border: 1px solid rgba(244, 198, 94, .18);
  background: rgba(244, 198, 94, .045);
}
#home-view .instruction-alternative summary { font-size: 14px; }
#home-view .instruction-step-body .instruction-check-note { font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .instruction-step-groups { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 600px) {
  #home-view .instruction-platform-header { scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px); }
  #home-view .platform-card-icon { width: 36px; height: 36px; }
  #home-view .public-instruction-grid .instruction-step-heading h3 { font-size: 18px; }
  #home-view .public-instruction-grid .instruction-step-summary { font-size: 16px; }
  #home-view .public-instruction-grid .instruction-step-body ol { font-size: 17px; line-height: 1.58; }
  #home-view .public-instruction-grid .instruction-step-group { padding: 12px; }
  #home-view .public-instruction-grid .instruction-step-group h4 { font-size: 15px; }
  #home-view .instruction-step-profile-import .instruction-step-body > ol { columns: auto; }
}

/* Keep the alternative QR callout visually closed in every responsive cascade. */
#home-view .instruction-step-profile-acquisition .instruction-alternative {
  padding: 12px 14px !important;
}

/* Phase 3.3A-6E: keep every instruction card on one typography and geometry system. */
#home-view .instruction-step-guide > .instruction-step {
  grid-column: auto;
  min-width: 0;
  padding: var(--instruction-card-padding);
  border: 1px solid var(--line);
  background: var(--instruction-card-background);
}
#home-view .instruction-step-guide > .instruction-step-connect,
#home-view .instruction-step-guide > .instruction-step-verification {
  border-color: rgba(85, 231, 244, .34);
  background: linear-gradient(145deg, rgba(9, 45, 58, .92), rgba(5, 24, 36, .78));
}
#home-view .instruction-step-guide > .instruction-step-profile-import-part {
  min-width: 0;
}
#home-view .instruction-step-guide > .instruction-step-profile-import-part + .instruction-step-profile-import-part {
  border-left-color: var(--line);
}
#home-view .instruction-step-guide > .instruction-step-profile-import-part .instruction-step-body ol {
  columns: auto !important;
  max-width: none;
}
#home-view .instruction-troubleshooting-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
#home-view .instruction-step,
#home-view .instruction-troubleshooting { scroll-margin-top: 98px; }
#home-view .instruction-troubleshooting {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--instruction-card-padding);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--navy-950);
}
#home-view .instruction-step-heading h3 {
  font-size: var(--instruction-step-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
#home-view .instruction-step-heading .mini-label {
  font-size: var(--instruction-small-label);
  font-weight: 700;
  line-height: 1.1;
}
#home-view .instruction-step-number {
  font-size: var(--instruction-meta);
  line-height: 1;
}
#home-view .instruction-step-summary,
#home-view .instruction-step-body ol {
  font-size: var(--instruction-body);
  line-height: var(--instruction-line);
}
#home-view .instruction-step-body li + li {
  margin-top: var(--instruction-list-gap);
}
#home-view .instruction-wrong-ip,
#home-view .instruction-cannot-connect { border-color: var(--line); }

#home-view .instruction-fallback-callout {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(244, 198, 94, .2);
  border-radius: 10px;
  background: rgba(5, 18, 29, .5);
  color: var(--muted);
  font-size: var(--instruction-meta);
  line-height: 1.5;
}

/* Phase 3.3A-6F: final typography and spacing tokens for the instruction system. */
#home-view .instruction-step-guide,
#home-view .instruction-troubleshooting-grid {
  gap: var(--instruction-card-gap);
}
#home-view .instruction-step-heading h3 {
  font-family: var(--ui);
  font-size: var(--instruction-step-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
#home-view .instruction-step-heading .mini-label {
  font-family: var(--ui);
  font-size: var(--instruction-small-label);
  font-weight: 700;
  line-height: 1.1;
}
#home-view .instruction-step-number {
  font-family: var(--ui);
  font-size: var(--instruction-meta);
  font-weight: 700;
  line-height: 1;
}
#home-view .instruction-step-summary,
#home-view .instruction-step-body ol {
  font-family: var(--ui);
  font-size: var(--instruction-body);
  line-height: var(--instruction-line);
}
#home-view .instruction-step-summary,
#home-view .instruction-step-body ol,
#home-view .instruction-step-body .instruction-link-row {
  margin-top: var(--instruction-list-gap);
}
#home-view .instruction-step-body li + li {
  margin-top: var(--instruction-list-gap);
}
#home-view .public-instruction-grid a.instruction-pdf-action {
  font-size: var(--instruction-cta);
  font-weight: 800;
  line-height: 1.2;
}
#home-view .instruction-download-link {
  font-family: var(--ui);
  font-size: var(--instruction-download);
  font-weight: 800;
  line-height: 1.3;
}
#home-view .instruction-fallback-callout {
  font-size: var(--instruction-helper);
  line-height: 1.5;
}
#home-view .instruction-troubleshooting {
  padding: var(--instruction-card-padding);
  background: var(--navy-950);
}
#home-view .instruction-cannot-connect {
  background: var(--navy-950);
}

@media (max-width: 600px) {
  #home-view .instruction-step-guide > .instruction-step,
  #home-view .instruction-troubleshooting {
    --instruction-card-padding: 14px;
    --instruction-content-offset: 39px;
    padding: var(--instruction-card-padding);
  }
  #home-view .public-instruction-grid .instruction-troubleshooting {
    --instruction-card-padding: 14px;
    padding: var(--instruction-card-padding);
  }
  #home-view .instruction-step-heading h3,
  #home-view .public-instruction-grid .instruction-pdf-action { font-size: var(--instruction-cta); }
#home-view .public-instruction-grid .instruction-troubleshooting { display: flex; }
#home-view .instruction-fallback-callout { padding: 12px 14px; }
#home-view .public-instruction-grid a.instruction-pdf-action { font-size: var(--instruction-cta); }
#home-view .instruction-step,
#home-view .instruction-troubleshooting { scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px); }
}

/* Instructions V3: one compact selector, four actions, and secondary help. */
#home-view .public-instruction-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
#home-view .public-instruction-tab { min-height: 48px; border-radius: 12px; }
#home-view .public-instruction-grid { margin-top: 0; }
#home-view .public-instruction-grid > article { padding: 24px; }
#home-view .instruction-step-guide > .instruction-step { grid-column: auto; }
.instruction-server-choice,
.instruction-existing-note,
.instruction-connection-check {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(85, 231, 244, .2);
  background: rgba(5, 24, 36, .62);
}
.instruction-server-choice h3,
.instruction-connection-check h2 { margin: 0 0 8px; color: var(--white); font-size: 20px; }
.instruction-server-choice ul,
.instruction-expected-ip-list { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }
.instruction-server-choice li + li,
.instruction-expected-ip-list li + li { margin-top: 7px; }
.instruction-server-choice strong,
.instruction-expected-ip-list strong { color: var(--white); }
.instruction-existing-note { border-color: rgba(244, 198, 94, .24); background: rgba(35, 29, 19, .24); }
.instruction-existing-note strong { display: block; margin-bottom: 7px; color: var(--white); }
.instruction-existing-note p { margin: 0; color: var(--muted); line-height: 1.55; }
.instruction-connection-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; }
.instruction-connection-check p { margin: 0; color: var(--muted); line-height: 1.5; }
.instruction-connection-check .mini-label { margin-bottom: 5px; color: var(--gold); }
.instruction-expected-ip-list { padding-left: 18px; }
.instruction-expected-ip-list code { color: var(--cyan); font: 700 15px/1 var(--ui); }
.instruction-connection-check .instruction-ip-action { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
.instruction-troubleshooting-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.instruction-troubleshooting-heading h2 { margin: 0; color: var(--white); font-size: 25px; }
.instruction-troubleshooting-heading .eyebrow { margin-bottom: 6px; }
.instruction-troubleshooting-section .instruction-troubleshooting-grid { margin-top: 14px; }
.instruction-troubleshooting .instruction-check-note { white-space: pre-line; }
.instruction-troubleshooting-support { margin-top: 14px; }
#home-view .instruction-server-choice,
#home-view .instruction-existing-note,
#home-view .instruction-connection-check,
#home-view .instruction-troubleshooting-section { scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px); }

@media (max-width: 600px) {
  #home-view .public-instruction-selector { gap: 6px; margin-bottom: 10px; }
  #home-view .public-instruction-tab { min-height: 48px; padding: 8px 5px; border-radius: 10px; font-size: 12px; line-height: 1.2; }
  #home-view .public-instruction-grid > article { padding: 16px; }
  .instruction-connection-check { grid-template-columns: 1fr; }
  .instruction-connection-check .instruction-ip-action { grid-column: auto; width: 100%; justify-content: center; }
}

/* Ensure the shared instruction tokens win over legacy mobile link/title rules. */
#home-view .public-instruction-grid .instruction-step-heading h3 {
  font-size: var(--instruction-step-title);
  line-height: 1.2;
}
#home-view .public-instruction-grid a.instruction-download-link {
  font-size: var(--instruction-download);
  line-height: 1.3;
}

@media (max-width: 900px) {
  #home-view .instruction-troubleshooting-grid { grid-auto-rows: auto; }
}

/* Phase 3.3B-2D3: final login proportions and interaction hierarchy. */
#login-view .auth-shell {
  min-height: 550px;
  column-gap: clamp(38px, 5vw, 62px);
  row-gap: 16px;
}
#login-view .auth-intro { align-self: center; }
#login-view .auth-intro h1 { margin-bottom: 18px; }
#login-view .auth-intro > p:not(.eyebrow) { max-width: 320px; line-height: 1.5; }
#login-view .auth-card {
  border-radius: 14px;
  border-color: rgba(85, 231, 244, .18);
  padding: 30px;
}
#login-view .auth-tabs { margin-bottom: 26px; }
#login-view .auth-tabs .tab { min-height: 40px; }
#login-view .auth-tabs .tab.active:after { left: 27%; right: 27%; height: 1px; }
#login-view .telegram-box,
#login-view .email-box { min-height: 248px; }
#login-view .telegram-glyph,
#login-view .email-glyph {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  display: grid;
  place-items: center;
}
#login-view .email-glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
#login-view .email-glyph rect { fill: none; }
#login-view .telegram-glyph { font-size: 0; }
#login-view .telegram-box h3,
#login-view .email-box h3 { margin-bottom: 13px; }
#login-view .telegram-box p { margin-bottom: 21px; }
#login-view .email-box h3 { font-size: 21px; }
#login-view .email-box .sr-only + input { margin-top: 2px; }
#login-view .auth-panel .button { border-radius: 8px; }
#login-view .login-acquisition {
  margin-top: 14px;
  padding-top: 2px;
}
#login-view .login-acquisition p,
#login-view .login-acquisition .text-button { font-size: 12px; }
#login-view .login-acquisition .text-button { font-weight: 550; }
#login-view .auth-note { margin-top: 0; }
#login-view .auth-note > span { font-size: 16px; }
#login-view .auth-note strong { font-size: 15px; }
#login-view .auth-note small { font-size: 12px; line-height: 1.45; }
.public-login-mode .header-start { background: rgba(85, 231, 244, .1); border-color: rgba(85, 231, 244, .25); color: var(--cyan); }
.public-login-mode .header-login { opacity: .58; pointer-events: none; }
.public-login-mode .header-login:focus-visible { opacity: .85; pointer-events: auto; }
.public-nav a { font-size: 16px; }
.site-footer { font-size: 11px; color: #a9bdc8; }

@media (max-width: 900px) {
  #login-view .auth-shell { gap: 20px; }
  #login-view .auth-card { padding: 22px; }
}

/* Keep the support note and footer copyright on the site's body-copy scale. */
.site-body-copy {
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: normal;
}

@media (max-width: 600px) {
  .site-body-copy {
    font-size: 16px;
    line-height: 1.4;
  }
}

@media (max-width: 600px) {
  #login-view .auth-shell { gap: 16px; padding-top: 10px; padding-bottom: 34px; }
  #login-view .auth-intro h1 { margin-bottom: 12px; }
  #login-view .auth-intro > p:not(.eyebrow) { font-size: 16px; }
  #login-view .auth-card { padding: 18px; }
  #login-view .auth-tabs { margin-bottom: 20px; }
  #login-view .telegram-box,
  #login-view .email-box { min-height: 230px; }
  #login-view .login-acquisition { margin-top: 12px; }
  #login-view .auth-note strong { font-size: 16px; }
  #login-view .auth-note small { font-size: 14px; }
  .public-login-mode .header-login { opacity: .48; }
}

/* Phase 3.3B-2D2: compact, single-purpose login composition. */
#login-view .auth-shell {
  min-height: 600px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 460px);
  column-gap: clamp(46px, 6vw, 72px);
  row-gap: 20px;
}
#login-view .auth-intro { grid-column: 1; grid-row: 1; align-self: end; }
#login-view .auth-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  border-color: rgba(85, 231, 244, .22);
  background: rgba(11, 28, 43, .82);
  box-shadow: 0 18px 55px rgba(2, 10, 18, .24), 0 0 30px rgba(85, 231, 244, .045);
}
#login-view .auth-note {
  grid-column: 1;
  grid-row: 3;
  max-width: 430px;
  margin-top: 0;
}
#login-view .auth-tabs .tab { flex: 1; margin-right: 0; text-align: center; }
#login-view .telegram-glyph svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
#login-view .telegram-glyph svg path { fill: none; }
#login-view .telegram-box { padding-top: 12px; }
#login-view .telegram-box h3,
#login-view .email-box h3 { margin-bottom: 12px; }
#login-view .telegram-box p { max-width: 330px; margin: 0 auto 22px; line-height: 1.5; }
#login-view .email-box h3 { font-size: 22px; }
#login-view .auth-panel input { margin-bottom: 14px; }
#login-view .email-actions { gap: 12px; margin-top: 13px; }
#login-view .login-acquisition {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: -2px 0 0;
  padding: 0 2px;
}
#login-view .login-acquisition p { margin: 0; color: var(--muted); font-size: 12px; }
#login-view .login-acquisition .text-button { font-size: 12px; }

@media (max-width: 900px) {
  #login-view .auth-shell {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
    padding-top: 28px;
    padding-bottom: 54px;
  }
  #login-view .auth-intro { order: 1; align-self: auto; }
  #login-view .auth-card { order: 2; width: 100%; max-width: 500px; margin: 0 auto; padding: 22px; }
  #login-view .login-acquisition { order: 3; width: 100%; max-width: 500px; margin: -4px auto 0; }
  #login-view .auth-note { order: 4; width: 100%; max-width: 500px; margin: 0 auto; }
  #login-view .auth-intro h1 { margin-bottom: 14px; }
  #login-view .auth-intro > p:not(.eyebrow) { max-width: 330px; }
}

@media (max-width: 600px) {
  #login-view .auth-shell { gap: 18px; padding-top: 16px; padding-bottom: 40px; }
  #login-view .auth-intro h1 { font-size: clamp(43px, 12.8vw, 57px); line-height: .94; }
  #login-view .auth-intro > p:not(.eyebrow) { font-size: 16px; line-height: 1.45; }
  #login-view .auth-card { padding: 18px; }
  #login-view .auth-tabs { margin-bottom: 18px; }
  #login-view .tab { min-height: 44px; padding-bottom: 10px; font-size: 15px; }
  #login-view .telegram-box { padding: 8px 2px 2px; }
  #login-view .telegram-glyph { width: 48px; height: 48px; margin-bottom: 15px; }
  #login-view .telegram-box h3,
  #login-view .email-box h3 { font-size: 19px; }
  #login-view .telegram-box p { font-size: 15px; margin-bottom: 18px; }
  #login-view .email-box h3 { margin-bottom: 16px; }
  #login-view .login-acquisition { flex-wrap: wrap; gap: 5px 12px; }
  #login-view .login-acquisition p,
  #login-view .login-acquisition .text-button { font-size: 13px; }
  #login-view .auth-note { padding-top: 14px; }
}

/* Phase 3.3B-2D4: final cross-breakpoint login consistency. */
#login-view .auth-shell { min-height: 570px; }
#login-view .auth-intro .eyebrow {
  margin-bottom: 14px;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .18em;
}
#login-view .auth-panel .button {
  min-height: 50px;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 14px;
  line-height: 1.2;
}
#login-view .auth-panel .button .button-arrow {
  margin-left: 14px;
  vertical-align: 1px;
}
#login-view .auth-tabs .tab { font-weight: 650; }
#login-view .auth-tabs .tab.active:after { left: 30%; right: 30%; height: 1px; }
#login-view .telegram-box,
#login-view .email-box { min-height: 240px; }
#login-view .login-acquisition {
  margin-top: 18px;
}
#login-view .login-acquisition .text-button {
  padding: 6px 0;
  font-weight: 550;
  line-height: 1.35;
}
#login-view .auth-note > span { font-size: 15px; }
#login-view .auth-note strong { font-size: 15px; }
#login-view .auth-note small { font-size: 12px; }
.public-login-mode .header-start,
.public-login-mode .header-login { border-radius: 8px; }

@media (max-width: 900px) {
  #login-view .auth-shell { min-height: auto; }
  #login-view .auth-panel .button { min-height: 50px; font-size: 16px; }
  #login-view .login-acquisition { margin-top: 18px; }
}

@media (max-width: 600px) {
  #login-view .auth-intro .eyebrow { font-size: 14px; letter-spacing: .16em; }
  #login-view .auth-card { padding: 18px; }
  #login-view .auth-panel .button { min-height: 50px; }
  #login-view .login-acquisition { margin-top: 18px; }
}

/* Phase 3.3B-2D5: one login composition across breakpoints. */
#login-view .auth-shell {
  min-height: 570px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 460px);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(38px, 5vw, 64px);
  row-gap: 22px;
}
#login-view .auth-intro {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
#login-view .auth-intro .eyebrow {
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .17em;
}
#login-view .auth-intro h1 { margin-bottom: 18px; }
#login-view .login-acquisition {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: fit-content;
  margin: 0;
  padding: 0;
}
#login-view .login-acquisition p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
#login-view .login-acquisition-cta {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 650;
}
#login-view .login-acquisition-cta .button-arrow {
  margin-left: 12px;
}
#login-view .auth-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  display: grid;
  grid-template-rows: auto 286px;
  min-height: 0;
  border-radius: 14px;
  border-color: rgba(85, 231, 244, .2);
  background: rgba(11, 28, 43, .82);
  box-shadow: 0 18px 55px rgba(2, 10, 18, .24), 0 0 30px rgba(85, 231, 244, .045);
}
#login-view .auth-card > .auth-panel {
  min-height: 286px;
  overflow: visible;
}
#login-view .auth-panel .button {
  min-height: 50px;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 14px;
}
#login-view .auth-panel .button .button-arrow {
  margin-left: 14px;
}
#login-view .auth-note {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  max-width: 430px;
  margin: 0;
}
#login-view .auth-note > span { font-size: 15px; }
#login-view .auth-note strong { font-size: 15px; }
#login-view .auth-note small { font-size: 12px; line-height: 1.45; }
.public-login-mode .header-login,
.public-login-mode .header-start {
  display: none;
}

@media (max-width: 900px) {
  #login-view .auth-shell {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    padding-top: 22px;
    padding-bottom: 48px;
  }
  #login-view .auth-intro { order: 1; align-self: auto; }
  #login-view .login-acquisition {
    order: 2;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #login-view .auth-card {
    order: 3;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #login-view .auth-note {
    order: 4;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #login-view .auth-intro .eyebrow { font-size: 14px; }
}

@media (max-width: 600px) {
  #login-view .auth-shell { gap: 16px; padding-top: 16px; padding-bottom: 38px; }
  #login-view .auth-intro h1 { margin-bottom: 14px; }
  #login-view .login-acquisition {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
  #login-view .login-acquisition p { font-size: 13px; }
  #login-view .login-acquisition-cta { min-height: 44px; font-size: 14px; }
  #login-view .auth-card { padding: 18px; }
  #login-view .auth-note strong { font-size: 16px; }
  #login-view .auth-note small { font-size: 14px; }
}

/* Phase 3.3B-2D6: center the complete desktop login composition below the header. */
@media (min-width: 901px) {
  #login-view,
  #login-view .auth-shell {
    min-height: calc(100dvh - 140px);
  }
  #login-view .auth-shell {
    padding-top: clamp(80px, 10vh, 104px);
    padding-bottom: clamp(48px, 6vh, 72px);
    grid-template-rows: auto auto 1fr;
    row-gap: 22px;
  }
  #login-view .auth-card { align-self: center; }
}

/* Phase 3.3B-2D7: shared auth-card type and center-axis tokens. */
#login-view .telegram-box h3,
#login-view .email-box h3 {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(19px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
}
#login-view .telegram-box p,
#login-view .email-box .form-hint {
  color: var(--muted);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
#login-view .email-box { text-align: center; }
#login-view .email-box form { text-align: left; }
#login-view .email-box .form-hint,
#login-view .email-code-note { text-align: center; }
#login-view .email-box input { text-align: left; }

@media (max-width: 600px) {
  #login-view .telegram-box p,
  #login-view .email-box .form-hint { font-size: 15px; }
}

/* Phase 3.3C-2B: acquisition uses the existing public design tokens. */
.acquisition-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 24px 88px;
}
.acquisition-page > .back-link { margin-bottom: 34px; }
.acquisition-page > .eyebrow { margin-bottom: 14px; }
.acquisition-page > h1 { max-width: 680px; margin-bottom: 14px; }
.acquisition-lead { max-width: 600px; color: var(--muted); font-size: 17px; line-height: 1.55; margin-bottom: 28px; }
.acquisition-steps { display: flex; gap: 26px; margin-bottom: 24px; color: var(--muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.acquisition-steps span { position: relative; }
.acquisition-steps .is-current { color: var(--cyan); }
.acquisition-steps .is-complete { color: var(--white); }
.acquisition-panel { max-width: 660px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 21, 27, .76); box-shadow: 0 18px 54px rgba(0, 0, 0, .18); }
.acquisition-tariffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.acquisition-tariff { min-height: 126px; padding: 20px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025); color: var(--white); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.acquisition-tariff:hover, .acquisition-tariff:focus-visible { border-color: var(--cyan); }
.acquisition-tariff.is-selected { border-color: var(--cyan); background: rgba(40, 220, 236, .09); box-shadow: inset 0 0 0 1px rgba(40, 220, 236, .22); }
.acquisition-tariff span, .acquisition-tariff strong { display: block; }
.acquisition-tariff span { color: var(--muted); font-size: 14px; }
.acquisition-tariff strong { margin-top: 14px; font-family: var(--display); font-size: 25px; font-weight: 600; }
.acquisition-feedback { margin-top: 16px; color: #ffb5a9; }
.identity-panel { max-width: 660px; }
.identity-panel h2, .acquisition-summary h2 { margin-bottom: 12px; }
.acquisition-identity-lead { max-width: 520px; color: var(--muted); line-height: 1.55; margin-bottom: 24px; }
.acquisition-auth-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.acquisition-auth-tabs button { position: relative; min-height: 42px; padding: 0 3px 12px; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.acquisition-auth-tabs button.is-active { border-bottom: 2px solid var(--cyan); color: var(--white); }
.acquisition-auth-pane { max-width: 520px; text-align: center; }
.acquisition-auth-pane h3 { margin: 14px 0 12px; font-family: var(--display); font-size: 21px; font-weight: 600; }
.acquisition-auth-pane p { color: var(--muted); line-height: 1.5; }
.acquisition-telegram-glyph, .acquisition-email-glyph { display: grid; width: 52px; height: 52px; margin: 0 auto; place-items: center; border: 1px solid rgba(40, 220, 236, .55); border-radius: 50%; color: var(--cyan); }
.acquisition-telegram-glyph svg, .acquisition-email-glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.acquisition-telegram-glyph svg path { fill: currentColor; stroke: none; }
.acquisition-email-glyph { margin-bottom: 2px; }
.acquisition-auth-pane form { text-align: left; }
.acquisition-auth-pane input { width: 100%; min-height: 50px; margin: 8px 0 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--white); font: inherit; }
.acquisition-auth-pane input:focus { border-color: var(--cyan); outline: 2px solid rgba(40, 220, 236, .2); outline-offset: 2px; }
.acquisition-helper, .acquisition-code-note { text-align: center; font-size: 13px; }
.acquisition-code-note { margin: 0 0 14px; }
.acquisition-code-note strong { color: var(--white); font-weight: 500; }
.acquisition-resend { display: block; margin: 16px auto 0; }
.acquisition-back { display: block; margin: 24px auto 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.acquisition-back:hover, .acquisition-back:focus-visible { color: var(--white); }
.acquisition-summary dl { display: grid; gap: 1px; margin: 24px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.acquisition-summary dl div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 16px; background: rgba(255, 255, 255, .025); }
.acquisition-summary dt { color: var(--muted); }
.acquisition-summary dd { margin: 0; color: var(--white); font-weight: 600; }
.acquisition-summary .button.is-disabled, .acquisition-summary .button.is-disabled:hover, .acquisition-summary .button:disabled { border-color: rgba(139, 160, 173, .32); background: rgba(139, 160, 173, .08); color: var(--muted); opacity: .78; cursor: not-allowed; transform: none; box-shadow: none; }
.acquisition-payment-note { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }
.acquisition-panel.state-banner { max-width: 660px; }

@media (max-width: 700px) {
  .acquisition-page { padding: 32px 18px 60px; }
  .acquisition-page > .back-link { margin-bottom: 26px; }
  .acquisition-lead { font-size: 16px; }
  .acquisition-steps { gap: 14px; font-size: 11px; }
  .acquisition-panel { padding: 20px; }
  .acquisition-tariffs { grid-template-columns: 1fr; }
  .acquisition-tariff { min-height: 82px; padding: 15px 16px; }
  .acquisition-tariff strong { margin-top: 7px; font-size: 22px; }
}

/* Phase 3.3C-3A final cascade: keep polish scoped to acquisition only. */
body.acquisition-mode .header-start { display: none; }
body.acquisition-mode .acquisition-page { max-width: 1060px; padding: 42px 24px 84px; }
body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 28px; }
body.acquisition-mode .acquisition-page > h1 { max-width: 760px; margin-bottom: 10px; font-size: clamp(42px, 5vw, 68px); line-height: .98; }
body.acquisition-mode .acquisition-heading-brand { white-space: nowrap; }
body.acquisition-mode .acquisition-lead { max-width: 640px; margin-bottom: 30px; font-size: 18px; line-height: 1.5; }
body.acquisition-mode .acquisition-steps { display: flex; width: min(100%, 610px); justify-content: space-between; gap: 16px; margin-bottom: 30px; padding: 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; background: linear-gradient(rgba(183, 199, 209, .23), rgba(183, 199, 209, .23)) center / calc(100% - 56px) 1px no-repeat; }
body.acquisition-mode .acquisition-steps > span { z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-width: 0; background: var(--navy-950); text-transform: uppercase; }
body.acquisition-mode .acquisition-steps > span > strong { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(183, 199, 209, .32); border-radius: 50%; color: var(--muted); font-size: 11px; letter-spacing: 0; }
body.acquisition-mode .acquisition-steps > .is-current { color: var(--cyan); }
body.acquisition-mode .acquisition-steps > .is-current > strong { border-color: var(--cyan); background: rgba(85, 231, 244, .11); color: var(--cyan); box-shadow: 0 0 16px rgba(85, 231, 244, .12); }
body.acquisition-mode .acquisition-steps > .is-complete { color: var(--white); }
body.acquisition-mode .acquisition-steps > .is-complete > strong { border-color: rgba(85, 231, 244, .52); color: var(--cyan); font-size: 0; }
body.acquisition-mode .acquisition-steps > .is-complete > strong::after { content: '✓'; font-size: 12px; }
body.acquisition-mode .acquisition-panel { width: 100%; max-width: 100%; padding: 32px; border-radius: 18px; background: linear-gradient(135deg, rgba(14, 31, 44, .86), rgba(8, 17, 27, .82)); box-shadow: 0 24px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035); }
body.acquisition-mode .acquisition-tariffs { gap: 14px; margin-bottom: 24px; }
body.acquisition-mode .acquisition-tariff { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; min-height: 148px; padding: 22px 20px; border-radius: 14px; background: rgba(5, 13, 22, .48); }
body.acquisition-mode .acquisition-tariff:hover { background: rgba(85, 231, 244, .055); }
body.acquisition-mode .acquisition-tariff:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
body.acquisition-mode .acquisition-tariff-label { color: var(--white) !important; font-size: 16px !important; font-weight: 650; }
body.acquisition-mode .acquisition-tariff strong { margin-top: 22px; color: var(--white); font-size: clamp(27px, 3vw, 34px); letter-spacing: -.03em; }
body.acquisition-mode .acquisition-tariff.is-selected { background: linear-gradient(145deg, rgba(85, 231, 244, .13), rgba(85, 231, 244, .035)); box-shadow: inset 0 0 0 1px rgba(85, 231, 244, .18), 0 0 28px rgba(85, 231, 244, .1); }
body.acquisition-mode .acquisition-tariff.is-selected .acquisition-tariff-label { color: var(--cyan) !important; }
body.acquisition-mode .acquisition-tariff-check { grid-column: 2; grid-row: 1; display: grid !important; width: 22px; height: 22px; place-items: center; border: 1px solid transparent; border-radius: 50%; color: transparent; font-size: 12px !important; }
body.acquisition-mode .acquisition-tariff.is-selected .acquisition-tariff-check { border-color: rgba(85, 231, 244, .65); color: var(--cyan); background: rgba(85, 231, 244, .1); }
body.acquisition-mode .acquisition-panel > .button.full { min-height: 50px; border-radius: 10px; font-size: 15px; }
body.acquisition-mode .acquisition-feedback { margin-bottom: 0; padding: 11px 14px; border: 1px solid rgba(255, 181, 169, .2); border-radius: 10px; background: rgba(255, 107, 91, .06); }
body.acquisition-mode .identity-panel, body.acquisition-mode .acquisition-summary, body.acquisition-mode .acquisition-panel.state-banner { max-width: 760px; }
body.acquisition-mode .identity-panel h2, body.acquisition-mode .acquisition-summary h2 { margin-bottom: 8px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1; }
body.acquisition-mode .acquisition-identity-lead { max-width: 600px; margin-bottom: 26px; }
body.acquisition-mode .acquisition-auth-tabs { gap: 8px; margin-bottom: 30px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 13, 22, .42); }
body.acquisition-mode .acquisition-auth-tabs button { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--muted); font-weight: 650; }
body.acquisition-mode .acquisition-auth-tabs button.is-active { border: 1px solid rgba(85, 231, 244, .55); background: rgba(85, 231, 244, .1); color: var(--white); }
body.acquisition-mode .acquisition-auth-tabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
body.acquisition-mode .acquisition-auth-pane { max-width: 580px; margin: 0 auto; padding: 4px 8px 0; }
body.acquisition-mode .acquisition-auth-pane h3 { margin: 16px 0 10px; font-size: 24px; }
body.acquisition-mode .acquisition-auth-pane > p { max-width: 450px; margin: 0 auto 22px; }
body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 50px; }
body.acquisition-mode .acquisition-telegram-glyph, body.acquisition-mode .acquisition-email-glyph { width: 56px; height: 56px; background: rgba(85, 231, 244, .06); }
body.acquisition-mode .acquisition-auth-pane input { min-height: 50px; border-radius: 10px; }
body.acquisition-mode .acquisition-auth-pane .acquisition-helper { margin: 12px 0 0; }
body.acquisition-mode .acquisition-summary-intro > p:last-child { max-width: 500px; margin: 0; color: var(--muted); }
body.acquisition-mode .acquisition-summary-plan { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin: 28px 0 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.acquisition-mode .acquisition-summary-plan span { display: block; color: var(--muted); font-size: 13px; }
body.acquisition-mode .acquisition-summary-plan strong { display: block; margin-top: 5px; color: var(--white); font-family: var(--display); font-size: 24px; }
body.acquisition-mode .acquisition-summary-total { text-align: right; }
body.acquisition-mode .acquisition-summary-total strong { color: var(--cyan); font-size: 34px; }
body.acquisition-mode .acquisition-confirmed { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--white); }
body.acquisition-mode .acquisition-confirmed > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(85, 231, 244, .14); color: var(--cyan); font-weight: 800; }
body.acquisition-mode .acquisition-summary .acquisition-payment-note { text-align: left; }

@media (max-width: 700px) {
  body.acquisition-mode .site-header .header-login { border: 0; background: transparent; }
  body.acquisition-mode .acquisition-page { padding: 28px 18px 58px; }
  body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 24px; }
  body.acquisition-mode .acquisition-page > h1 { max-width: 520px; font-size: clamp(38px, 11vw, 52px); line-height: .98; }
  body.acquisition-mode .acquisition-lead { max-width: 480px; margin-bottom: 24px; font-size: 16px; }
  body.acquisition-mode .acquisition-steps { gap: 8px; margin-bottom: 24px; font-size: 10px; letter-spacing: .06em; }
  body.acquisition-mode .acquisition-steps { background-size: calc(100% - 44px) 1px; }
  body.acquisition-mode .acquisition-steps > span { gap: 6px; }
  body.acquisition-mode .acquisition-steps > span > strong { width: 24px; height: 24px; }
  body.acquisition-mode .acquisition-panel { padding: 22px 18px; border-radius: 15px; }
  body.acquisition-mode .acquisition-tariffs { gap: 9px; margin-bottom: 18px; }
  body.acquisition-mode .acquisition-tariff { min-height: 78px; padding: 14px 16px; }
  body.acquisition-mode .acquisition-tariff-label { font-size: 15px !important; }
  body.acquisition-mode .acquisition-tariff strong { margin-top: 6px; font-size: 25px; }
  body.acquisition-mode .identity-panel h2, body.acquisition-mode .acquisition-summary h2 { font-size: clamp(30px, 9vw, 42px); }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 24px; }
  body.acquisition-mode .acquisition-auth-pane { padding-inline: 0; }
  body.acquisition-mode .acquisition-auth-pane h3 { font-size: 21px; }
  body.acquisition-mode .acquisition-auth-pane > p { font-size: 15px; }
  body.acquisition-mode .acquisition-summary-plan { gap: 12px; margin-top: 22px; padding: 18px 0; }
  body.acquisition-mode .acquisition-summary-plan strong { font-size: 21px; }
  body.acquisition-mode .acquisition-summary-total strong { font-size: 29px; }
  body.acquisition-mode .acquisition-confirmed { margin-bottom: 20px; font-size: 15px; }
  body.acquisition-mode .acquisition-summary .acquisition-payment-note { font-size: 12px; }
}

@media (max-width: 380px) {
  body.acquisition-mode .acquisition-steps { font-size: 9px; }
  body.acquisition-mode .acquisition-steps > span { gap: 4px; }
  body.acquisition-mode .acquisition-page > h1 { font-size: 36px; }
}

/* Phase 3.3C-3B final cascade: compact steps without clipping content. */
body.acquisition-mode .view.active { min-height: calc(100dvh - 150px); }
body.acquisition-mode .acquisition-page { padding: 22px 24px 28px; }
body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 14px; }
body.acquisition-mode .acquisition-page > .eyebrow { margin-bottom: 8px; }
body.acquisition-mode .acquisition-page > h1 { margin-bottom: 8px; font-size: clamp(40px, 4.5vw, 60px); }
body.acquisition-mode .acquisition-lead { margin-bottom: 18px; font-size: 16px; line-height: 1.45; }
body.acquisition-mode .acquisition-steps { margin-bottom: 18px; }
body.acquisition-mode .acquisition-panel { padding: 22px; }
body.acquisition-mode .acquisition-tariffs { gap: 12px; margin-bottom: 16px; }
body.acquisition-mode .acquisition-tariff { min-height: 112px; padding: 16px 18px; }
body.acquisition-mode .acquisition-tariff strong { margin-top: 14px; }
body.acquisition-mode .acquisition-panel > .button.full { min-height: 48px; }
body.acquisition-mode .acquisition-panel > .button-primary:disabled,
body.acquisition-mode .acquisition-panel > .button-primary:disabled:hover {
  border-color: rgba(139, 160, 173, .32);
  background: rgba(139, 160, 173, .08);
  color: var(--muted);
  opacity: .78;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.acquisition-mode .acquisition-identity-lead { margin-bottom: 16px; line-height: 1.45; }
body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 18px; }
body.acquisition-mode .acquisition-auth-pane { padding-top: 0; }
body.acquisition-mode .acquisition-auth-pane h3 { margin: 10px 0 6px; font-size: 20px; }
body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 14px; line-height: 1.45; }
body.acquisition-mode .acquisition-telegram-glyph,
body.acquisition-mode .acquisition-email-glyph { width: 48px; height: 48px; }
body.acquisition-mode .acquisition-telegram-glyph svg,
body.acquisition-mode .acquisition-email-glyph svg { width: 23px; height: 23px; }
body.acquisition-mode .acquisition-auth-pane input { min-height: 46px; margin: 6px 0 10px; }
body.acquisition-mode .acquisition-auth-pane .button.full { min-height: 48px; }
body.acquisition-mode .acquisition-auth-pane .acquisition-helper { margin-top: 8px; }
body.acquisition-mode .acquisition-back { margin-top: 14px; }
body.acquisition-mode .acquisition-summary-intro > .eyebrow { margin-bottom: 0; }
body.acquisition-mode .acquisition-summary-plan { gap: 16px; margin: 18px 0 12px; padding: 16px 0; }
body.acquisition-mode .acquisition-summary-plan strong { font-size: 22px; }
body.acquisition-mode .acquisition-summary-total strong { font-size: 32px; }
body.acquisition-mode .acquisition-confirmed { margin-bottom: 18px; }
body.acquisition-mode .acquisition-summary .acquisition-payment-note { margin-top: 10px; }

@media (min-width: 701px) and (max-height: 800px) {
  body.acquisition-mode .acquisition-page { padding-top: 16px; padding-bottom: 0; }
  body.acquisition-mode .acquisition-page > .back-link { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-page > h1 { font-size: clamp(38px, 3.5vw, 46px); }
  body.acquisition-mode .acquisition-lead { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-steps { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-panel { padding: 18px 22px; }
  body.acquisition-mode .acquisition-tariff { min-height: 104px; padding: 14px 16px; }
  body.acquisition-mode .acquisition-tariff strong { margin-top: 10px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 12px; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 14px; }
  body.acquisition-mode .acquisition-auth-pane h3 { margin-top: 7px; }
  body.acquisition-mode .acquisition-auth-pane > p { margin-bottom: 10px; }
  body.acquisition-mode .acquisition-summary-plan { margin-top: 14px; padding: 12px 0; }
  body.acquisition-mode .acquisition-confirmed { margin-bottom: 14px; }
}

@media (max-width: 700px) {
  body.acquisition-mode .view.active { min-height: calc(100dvh - 128px); }
  body.acquisition-mode .acquisition-page { padding: 18px 18px 24px; }
  body.acquisition-mode .acquisition-page > h1 { font-size: clamp(36px, 10vw, 48px); }
  body.acquisition-mode .acquisition-lead { margin-bottom: 16px; font-size: 15px; }
  body.acquisition-mode .acquisition-steps { margin-bottom: 16px; }
  body.acquisition-mode .acquisition-panel { padding: 18px; }
  body.acquisition-mode .acquisition-tariffs { gap: 8px; margin-bottom: 14px; }
  body.acquisition-mode .acquisition-tariff { min-height: 76px; padding: 12px 14px; }
  body.acquisition-mode .acquisition-tariff strong { margin-top: 5px; font-size: 24px; }
  body.acquisition-mode .acquisition-identity-lead { margin-bottom: 14px; font-size: 14px; }
  body.acquisition-mode .acquisition-auth-tabs { margin-bottom: 16px; }
  body.acquisition-mode .acquisition-auth-pane h3 { font-size: 19px; }
  body.acquisition-mode .acquisition-auth-pane > p { font-size: 14px; }
  body.acquisition-mode .acquisition-summary-plan { margin-top: 14px; padding: 14px 0; }
  body.acquisition-mode .acquisition-summary-plan strong { font-size: 20px; }
  body.acquisition-mode .acquisition-summary-total strong { font-size: 28px; }
  body.acquisition-mode .acquisition-confirmed { margin-bottom: 16px; }
}

/* Mobile acquisition review: keep currency amounts atomic and clear the sticky header. */
body.acquisition-mode .acquisition-summary-component {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 12px;
}

body.acquisition-mode .acquisition-summary-component span {
  min-width: 0;
}

body.acquisition-mode .acquisition-summary-component strong {
  min-width: max-content;
  white-space: nowrap;
  justify-self: end;
}

@media (max-width: 700px) {
  body.acquisition-mode {
    scroll-padding-top: calc(82px + env(safe-area-inset-top));
  }

  body.acquisition-mode .acquisition-page {
    scroll-margin-top: calc(82px + env(safe-area-inset-top));
    padding-top: calc(30px + env(safe-area-inset-top));
  }
}

/* Final cascade guard for the single-column profile card. */
body.cabinet-mode #dashboard-view .profile-unified-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-bottom: 10px;
  padding: 16px 18px;
}

body.cabinet-mode #dashboard-view .profile-unified-card h2 {
  margin: 7px 0 3px;
  font-size: 25px;
  line-height: 1.1;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-username {
  margin-bottom: 9px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts {
  gap: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-facts div {
  padding-top: 5px;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value {
  color: var(--green);
  font-weight: 600;
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.warning {
  color: var(--danger);
}

body.cabinet-mode #dashboard-view .profile-unified-card .profile-access-value.gold {
  color: var(--gold);
}

body.cabinet-mode #dashboard-view .profile-unified-card .button {
  width: fit-content;
  min-height: 44px;
  margin-top: 10px;
  padding-block: 10px;
}

@media (min-width: 901px) {
  body.cabinet-mode #dashboard-view .dashboard-top { margin-bottom: 12px; }
  body.cabinet-mode #dashboard-view .dashboard-top h1 { font-size: 38px; line-height: 1; }
  body.cabinet-mode #dashboard-view .profile-greeting { margin: 7px 0 2px; }
  body.cabinet-mode #dashboard-view .profile-top-note { margin: 0; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 9px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 13px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  body.cabinet-mode #dashboard-view .profile-card { display: flex; min-height: 0; flex-direction: column; padding: 15px 16px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: auto; padding-block: 10px; }
}

@media (max-width: 900px) {
  body.cabinet-mode #dashboard-view .profile-unified-card { padding: 14px; }
  body.cabinet-mode #dashboard-view .profile-unified-card .button { width: 100%; min-height: 46px; }
  body.cabinet-mode #dashboard-view .profile-quick-stats { gap: 8px; margin-bottom: 10px; }
  body.cabinet-mode #dashboard-view .profile-stat { padding: 10px 11px; }
  body.cabinet-mode #dashboard-view .profile-grid { grid-template-columns: 1fr; gap: 8px; }
  body.cabinet-mode #dashboard-view .profile-card { padding: 12px; }
  body.cabinet-mode #dashboard-view .profile-card .button { margin-top: 10px; }
}

/* Instructions V3.2 final cascade: sequential Step 03 and balanced desktop cards. */
#home-view .instruction-step-guide > .instruction-step-connection .instruction-step-body ol {
  columns: 1 !important;
  max-width: none;
}

@media (min-width: 901px) {
  #home-view .instruction-step-guide {
    align-items: stretch;
  }

  #home-view .instruction-step-guide > .instruction-step {
    display: flex;
    flex-direction: column;
  }

  #home-view .instruction-step-guide > .instruction-step .instruction-step-body {
    flex: 1;
  }
}

/* Public navigation isolation: keep the accepted tariff/instruction cascade
   when those surfaces live in their own public views. */
.public-page-view { scroll-margin-top: 98px; }
#tariffs-view > .tariff-preview { padding-top: 76px; padding-bottom: 96px; }
#tariffs-view .tariff-card { min-height: 246px; padding: 20px; }
#tariffs-view .tariff-card strong { margin-top: 18px; }
#tariffs-view .tariff-card .button { margin-top: 15px; }

#instructions-view > .instructions { padding-top: 72px; padding-bottom: 76px; }
#instructions-view .public-instruction-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
#instructions-view .public-instruction-tab { min-height: 48px; border-radius: 12px; }
#instructions-view .public-instruction-grid { display: block; margin-top: 0; }
#instructions-view .public-instruction-grid > article { width: 100%; padding: 25px; }
#instructions-view .instruction-step-guide > .instruction-step { grid-column: auto; }
#instructions-view .instruction-step-guide > .instruction-step-connection .instruction-step-body ol { columns: 1 !important; max-width: none; }
#instructions-view .instruction-step-guide { align-items: stretch; }
#instructions-view .instruction-step-guide > .instruction-step { display: flex; flex-direction: column; }
#instructions-view .instruction-step-guide > .instruction-step .instruction-step-body { flex: 1; }
#instructions-view .instruction-step-profile-import .instruction-step-groups { gap: 0; }
#instructions-view .instruction-step-profile-import .instruction-step-group { padding: 14px 20px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#instructions-view .instruction-step-profile-import .instruction-step-group ol { columns: auto !important; max-width: none; }
#instructions-view .instruction-step-profile-import .instruction-check-note { margin-top: 12px; padding: 8px 0 0; border-top: 1px solid rgba(244, 198, 94, .16); border-left: 0; background: transparent; }
#instructions-view .instruction-step-profile-import .instruction-step-group + .instruction-step-group { border-left: 1px solid rgba(85, 231, 244, .14); }
#instructions-view .instruction-step:nth-child(6),
#instructions-view .instruction-step:nth-child(7) { border-color: rgba(85, 231, 244, .34); background: linear-gradient(145deg, rgba(9, 45, 58, .92), rgba(5, 24, 36, .78)); }
#instructions-view .instruction-download-link { color: var(--cyan); font-size: 0; }
#instructions-view .instruction-platform-header { scroll-margin-top: 98px; }
#instructions-view .platform-card-icon svg,
#instructions-view .platform-card-icon svg * { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#instructions-view .public-instruction-grid a.instruction-pdf-action { min-height: 50px; padding-inline: 18px; font-size: 15px; background: var(--cyan); color: var(--navy-950); opacity: 1; visibility: visible; font-weight: 800; }
#instructions-view .public-instruction-grid a.instruction-pdf-action:hover,
#instructions-view .public-instruction-grid a.instruction-pdf-action:focus-visible { background: #8af2fa; color: var(--navy-950); }
#instructions-view .instruction-platform-header p:last-child { font-size: 15px; line-height: 1.45; }
#instructions-view .instruction-facts small { font-size: 13px; }
#instructions-view .instruction-facts strong { font-size: 15px; }
#instructions-view .instruction-step-heading h3 { font-size: 19px; line-height: 1.2; }
#instructions-view .instruction-step-summary { font-size: 16px; line-height: 1.55; }
#instructions-view .instruction-step-body ol { font-size: 17px; line-height: 1.58; }
#instructions-view .instruction-step-body li + li { margin-top: 8px; }
#instructions-view .instruction-step-profile-import .instruction-step-body > ol { columns: auto; max-width: none; }
#instructions-view .instruction-alternative { margin-top: 16px; padding: 12px 14px 0; border: 1px solid rgba(244, 198, 94, .18); background: rgba(244, 198, 94, .045); }
#instructions-view .instruction-alternative summary { font-size: 14px; }
#instructions-view .instruction-step-body .instruction-check-note { font-size: 15px; line-height: 1.5; }
#instructions-view .instruction-server-choice,
#instructions-view .instruction-existing-note,
#instructions-view .instruction-connection-check,
#instructions-view .instruction-troubleshooting-section { scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px); }

@media (min-width: 901px) {
  /* Keep the accepted cards unchanged while removing excess space above the
     tariff heading on the one-page landing. Mobile spacing remains untouched. */
  #tariffs-view > .tariff-preview { padding-top: 24px; }
}

@media (max-width: 900px) {
  #instructions-view .instruction-step-guide { align-items: initial; }
  #instructions-view .instruction-step-guide > .instruction-step { display: block; }
  #instructions-view .instruction-troubleshooting-grid { grid-auto-rows: auto; }
}

@media (max-width: 600px) {
  #tariffs-view > .tariff-preview { padding-top: 58px; padding-bottom: 58px; }
  #tariffs-view .tariff-grid { gap: 12px; }
  #tariffs-view .tariff-card { min-height: 0; padding: 18px; }
  #tariffs-view .tariff-card > span { font-size: 14px; }
  #tariffs-view .tariff-card strong { margin-top: 12px; font-size: 55px; }
  #tariffs-view .tariff-card strong small { font-size: 16px; }
  #tariffs-view .tariff-card .price { margin: 2px 0 4px; font-size: 25px; }
  #tariffs-view .tariff-card p { margin: 0; font-size: 16px; line-height: 1.45; }
  #tariffs-view .tariff-card .button { width: 100%; min-height: 50px; margin-top: 13px; font-size: 16px; }
  #tariffs-view .public-russia-panel { padding: 18px; }
  #tariffs-view .public-russia-panel h3 { font-size: 24px; }
  #tariffs-view .public-russia-panel p:not(.eyebrow) { font-size: 16px; }

  #instructions-view > .instructions { padding-top: 58px; padding-bottom: 58px; }
  #instructions-view .public-instruction-selector { gap: 6px; margin-bottom: 10px; }
  #instructions-view .public-instruction-tab { min-height: 48px; padding: 8px 5px; border-radius: 10px; font-size: 12px; line-height: 1.2; }
  #instructions-view .public-instruction-grid > article { padding: 16px; }
  #instructions-view .public-instruction-grid .instruction-step { display: block; }
  #instructions-view .public-instruction-grid .instruction-step-heading h3 { font-size: var(--instruction-step-title); line-height: 1.2; }
  #instructions-view .public-instruction-grid a.instruction-download-link { font-size: var(--instruction-download); line-height: 1.3; }
  #instructions-view .instruction-step-profile-import .instruction-step-body > ol { columns: auto; }
  #instructions-view .instruction-troubleshooting-grid { grid-auto-rows: auto; }
  #instructions-view .instruction-connection-check { grid-template-columns: 1fr; }
  #instructions-view .instruction-connection-check .instruction-ip-action { grid-column: auto; width: 100%; justify-content: center; }
}

/* Shared outline icon geometry for the cabinet navigation set. */
.cabinet-link-icon.nav-icon,
.cabinet-link-icon.device-monitor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  line-height: 1;
}
.cabinet-link-icon.nav-icon svg,
.cabinet-link-icon.device-monitor-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cabinet-bottom-link .cabinet-link-icon.nav-icon,
.cabinet-bottom-link .cabinet-link-icon.device-monitor-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
.cabinet-bottom-link .cabinet-link-icon.nav-icon svg,
.cabinet-bottom-link .cabinet-link-icon.device-monitor-icon svg {
  width: 20px;
  height: 20px;
}
.cabinet-link-icon.nav-icon-help {
  box-sizing: border-box;
  border: 1.7px solid currentColor;
  border-radius: 50%;
}
.mobile-cabinet .nav-icon-svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}