/* Harbor — «личный кабинет» design system (Harbor Cabinet reskin).
   Tokens + fonts + the responsive shell live here; the brand NAME lives in
   app.js (BRAND). No external resources of any kind — fonts are self-hosted
   woff2 under /lk/static/fonts/, so the CSP stays default-src 'self'. */

/* ==== self-hosted fonts (Golos Text + JetBrains Mono, variable, ============
   Cyrillic + Latin subsets incl. latin-ext for the ₽ sign U+20BD). Google
   Fonts serves each family as ONE variable woff2 per subset, so one @font-face
   per subset with a weight RANGE covers every weight the UI uses. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jbmono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jbmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root {
  /* ==== Harbor palette (README «Design Tokens») ==== */
  --bg:          #070c18;   /* page background                       */
  --ink-deep:    #05080f;   /* the void under everything             */
  --ink:         #070c18;   /* alias of --bg (legacy name)           */
  --canvas:      #0a0f1c;   /* mock backdrop                         */
  --panel:       #0d1526;   /* cards                                 */
  --surface:     #0d1526;   /* alias of --panel (legacy name)        */
  --surface-2:   #101a2e;   /* raised elements, inputs, modal top    */
  --panel-soft:  rgba(7,12,24,.55);   /* nested / glass blocks       */
  --accent:      #2edad0;   /* primary accent (teal)                 */
  --beam:        #2edad0;   /* alias of --accent (legacy name)       */
  --accent-bright:#5cf0e6;  /* top of the button gradient            */
  --pulse:       #5cf0e6;   /* alias of --accent-bright (legacy)     */
  --accent-text: #96f2ea;   /* text on tinted accent surfaces        */
  --on-accent:   #04302c;   /* text ON the solid accent fill         */
  --accent-border:rgba(46,218,208,.28);
  --text:        #e8eef9;   /* headings / primary                    */
  --text-2:      #c3d0e6;   /* values / secondary                    */
  --dim:         #8fa1c2;   /* descriptions / muted                  */
  --dim-mono:    #7c8daf;   /* mono labels                           */
  --line:        rgba(146,176,230,.12);   /* card borders            */
  --line-soft:   rgba(146,176,230,.09);   /* list-row dividers       */
  --danger:      #ff7e6b;   /* busy-slot counter                     */
  --bad:         #ff7e6b;   /* alias (legacy name)                   */
  --danger-soft: #ff9483;   /* delete icons, «Выйти»                 */
  --ok:          #2edad0;
  --warn:        #ffc76b;
  --grad: linear-gradient(180deg, var(--accent-bright), var(--accent));
  /* fonts */
  --font-ui: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
               monospace;
  /* shape */
  --r-card: 20px;
  --r-btn: 13px;
  --nav-h: 64px;
  --hd-h: 74px;             /* desktop header height                 */
  /* shadows */
  --sh-panel: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  --sh-modal: 0 40px 90px rgba(0,0,0,.65);
  --sh-btn: 0 16px 32px -14px rgba(46,218,208,.75);
  /* motion. Not a new curve — this is the one already inlined across the
     file (rings, bars, checks); naming it stops the seventh copy drifting a
     digit. Strong ease-out: fast out of the gate, so a press reads as
     instant even though it takes 140ms. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --press: 140ms;           /* press feedback: 100-160ms */
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
button, input, textarea {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The aurora: two blurred radial blobs drifting behind everything — teal
   top-right, blue bottom-left (README «Аврора-фон»). Fixed to the viewport,
   pointer-events off. The drift (hbFloat/hbFloat2) is gated to
   no-preference further down; the blobs themselves render either way. */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body::before {   /* teal, top-right */
  top: -240px; right: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(46,218,208,.30), transparent 68%);
  filter: blur(62px);
}
body::after {    /* blue, bottom-left */
  bottom: -260px; left: -200px; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(94,124,255,.20), transparent 70%);
  filter: blur(66px);
}

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}
#app.has-nav { padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); }

/* ---- boot / loading ---------------------------------------------------- */
.boot { display: flex; align-items: center; justify-content: center; min-height: 70dvh; }
.boot-note { text-align: center; padding: 40px 20px; color: var(--dim); }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(147,160,207,.25);
  border-top-color: var(--beam);
  animation: spin .8s linear infinite;
}
.spinner.small { width: 16px; height: 16px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- view transitions --------------------------------------------------
 * The entrance belongs to a genuine NAVIGATION, not to a repaint. setView()
 * builds a fresh .view node on EVERY render - including the skeleton->content
 * swap and every background poll landing - and a fresh node replays its
 * keyframes. Ungated, the whole screen re-faded under the reader every few
 * seconds on the payment-waiting screen.
 *
 * So the animation hangs off a class that setView() adds only when it is
 * already resetting scroll: one flag, one meaning - "the user went
 * somewhere". */
.view.view-enter { animation: rise .18s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  /* Keep the fade - it still explains that the screen changed - and drop the
     8px travel, which is the part that is motion for motion's sake. */
  .view.view-enter { animation-name: fadein; }
}

/* ---- press feedback -----------------------------------------------------
 * Every pressable surface in one place. Previously each of these carried its
 * own :active scale and eleven of the twelve had NO transition, so the scale
 * snapped in and out instead of yielding under the finger; the values had
 * also drifted from .90 to .97 across the file.
 *
 * scale() takes the label and icons with it, which is what makes it read as a
 * physical press rather than a tint. A transition, not a keyframe, so a fast
 * double-tap retargets from wherever it is instead of restarting from zero.
 *
 * .97 everywhere: below ~.95 the element visibly shrinks away from the finger
 * instead of yielding under it.
 *
 * Deliberately NOT dropped under prefers-reduced-motion - this is feedback in
 * place, not travel across the screen, and removing it leaves a tap feeling
 * dead. No hover gating either: :active is a real press on touch. */
.btn, .gbtn, .lr-btn, .stepbtn, .dev .abtn, .dc-trash, .pm-step,
.pm-sum-edit, .pm-back, .iw-ghost, .hb-ref-copy, .hb-share-tile {
  transition: transform var(--press) var(--ease-out);
}
.btn:active, .gbtn:active, .lr-btn:active, .stepbtn:active, .dev .abtn:active,
.dc-trash:active, .pm-step:active, .pm-sum-edit:active, .pm-back:active,
.iw-ghost:active, .hb-ref-copy:active, .hb-share-tile:active {
  transform: scale(.97);
}

/* ---- typography -------------------------------------------------------- */
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.money {
  font-size: 38px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.bold { font-weight: 700; }
.center { text-align: center; }
.ok-text { color: var(--ok); }
.bad-text { color: var(--bad); }
.strike { text-decoration: line-through; opacity: .55; font-weight: 600; }

/* ---- layout helpers ---------------------------------------------------- */
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 20px; }
.hrow { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }

/* ---- topbar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  margin: -12px -16px 12px;
  padding-left: 8px; padding-right: 16px;
  background: rgba(10,18,48,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.topbar .title { font-size: 17px; font-weight: 700; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
}
.iconbtn:active { background: var(--surface); }

/* ---- brand ------------------------------------------------------------- */
.brandrow { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; }
.brandmark { width: 38px; height: 38px; flex: 0 0 auto; display: block;
  border-radius: 24%;
  filter: drop-shadow(0 4px 14px rgba(34,211,238,.35)); }
.brandmark.lg { width: 56px; height: 56px; }
.wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* ==== «Поток» banner (4a) — inline SVG, edges fade into the page ========= */
.ari-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* showcase/onboarding framing */
  overflow: hidden;
  /* края растворяются в фоне: бока + верх/низ */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari */
          mask-composite: intersect;   /* Chrome, Firefox */
}
.ari-flow--wide { aspect-ratio: 640 / 184; }   /* login framing */
.ari-flow__glow {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 74%;
  height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 218, 208, .2), rgba(46, 218, 208, 0) 70%);
  pointer-events: none;
}
.ari-flow__art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes ari-flow-breathe {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}
.ari-flow__glow { animation: ari-flow-breathe 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ari-flow__glow { animation: none; }
}

/* ==== «Орбита» banner (2a) — the LOGIN screen's hero ====================
 * Replaces the stock cosmos PNG. Inline SVG, no raster, no JS.
 *
 * The banner paints NO background of its own: its edges dissolve into the
 * page with a two-layer mask, so it reads as part of the page rather than a
 * picture pasted onto someone else's ground. Drop the vertical mask layer
 * and the arc/orbits get sliced off by a straight bottom edge, which is
 * exactly what makes a banner look like a rectangular inset. */
.ari-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 184;
  overflow: hidden;
  /* края растворяются в фоне страницы: бока + низ */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari */
          mask-composite: intersect;   /* Chrome, Firefox */
}
/* Soft light under the arc: a plain radial-gradient div, NOT an SVG filter -
 * cheaper, and it does not smear the 1px orbit lines. */
.ari-hero__glow {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 66%;
  aspect-ratio: 420 / 260;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(46, 218, 208, .16), rgba(46, 218, 208, 0) 72%);
  pointer-events: none;
}
.ari-hero__art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
/* Only the light breathes. The orbits stay still: at this height a rotating
 * ellipse reads as cheap. */
@keyframes ari-hero-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}
.ari-hero__glow { animation: ari-hero-breathe 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ari-hero__glow { animation: none; }
}
/* Narrow screens: crop the height only - the arc sits lower, the
 * composition survives, and «Добро пожаловать» stays the first thing read. */
@media (max-width: 480px) {
  .ari-hero { aspect-ratio: 640 / 150; }
}

/* ---- cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
}
.card--beacon { position: relative; overflow: hidden; }
.card--beacon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 85% -30%,
    rgba(34,211,238,.20), rgba(59,130,246,.07) 45%, transparent 72%);
}
.card--beacon > * { position: relative; }
.card--flat { background: var(--surface-2); border: 0; }

/* clickable feature card (referral / support on home) */
.card-link {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  color: var(--text); font: inherit;
}
.card-link .chev { margin-left: auto; color: var(--dim); flex: 0 0 auto; }
.card-art {
  width: 58px; height: 58px; border-radius: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(34,211,238,.28), transparent 60%),
    var(--surface-2);
  overflow: hidden;
}
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-art.noimg img { display: none; }
.card-art .fallback { display: none; color: var(--beam); }
.card-art.noimg .fallback { display: block; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 12px 18px;
  border: 0; border-radius: var(--r-btn);
  font: inherit; font-size: 16px; font-weight: 700;
  color: var(--text); background: var(--surface-2);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: opacity .12s ease;   /* transform: see «press feedback» */
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  position: relative; overflow: hidden;
  background: var(--grad); color: var(--on-accent);
  box-shadow: var(--sh-btn);
}
/* the running sheen — a light sweep across the accent fill (hbSheen). */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 26%,
    rgba(255,255,255,.6) 48%, transparent 68%);
  transform: translateX(-130%);
}
.btn-primary > * { position: relative; }
.btn-line { background: transparent; border: 1px solid var(--line); }
.btn-danger { background: transparent; border: 1px solid rgba(248,113,113,.35); color: var(--bad); }
.btn-small { min-height: 38px; padding: 8px 14px; font-size: 14px; width: auto; border-radius: 12px; }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn .spinner { border-top-color: var(--on-accent); }
/* An inline text-link button («перевести» next to the referral balance on
 * the home card) - a real <button>, styled as a link. */
.linkbtn {
  background: none; border: 0; padding: 0; margin-left: 6px;
  font: inherit; font-size: inherit; color: var(--beam);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ---- inputs ------------------------------------------------------------ */
.field { display: block; }
.field .lbl { display: block; font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-size: 16px;
}
.input::placeholder { color: rgba(147,160,207,.6); }
.input:focus { outline: none; border-color: var(--pulse); }
.input[disabled] { opacity: .55; }
.input-wrap { position: relative; }
.input-wrap .in-badge {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
/* An action button INSIDE an input (the transfer sheet's «Всё»). */
.input-wrap .in-act {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 6px 12px; border-radius: 10px;
}
.input.has-act { padding-right: 72px; }
/* The 6-digit email-code field (landing login + settings add-email). */
.code-input {
  text-align: center; font-size: 24px; font-weight: 700;
  letter-spacing: .3em; font-variant-numeric: tabular-nums;
}
.code-input::placeholder { letter-spacing: .3em; font-weight: 400; }
/* A counting-down «Отправить ещё раз» is a linkbtn waiting, not broken. */
.linkbtn[disabled] {
  opacity: .55; cursor: default; text-decoration: none; pointer-events: none;
}

/* ---- pills / badges ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--dim);
}
.pill-lte {  /* the «Безлимит» status badge, LTE-indicator style */
  background: var(--grad); color: var(--on-accent);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px;
}
.pill-soon { background: rgba(147,160,207,.14); color: var(--dim); }
.pill-ok   { background: rgba(52,211,153,.14);  color: var(--ok); }
.pill-warn { background: rgba(251,191,36,.14);  color: var(--warn); }
.pill-bad  { background: rgba(248,113,113,.14); color: var(--bad); }
.disc {
  display: inline-block; padding: 3px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 800;
  background: rgba(34,211,238,.16); color: var(--beam);
}

/* ---- banners ----------------------------------------------------------- */
.banner {
  border-radius: var(--r-btn); padding: 12px 14px; font-size: 14px;
  border: 1px solid;
}
.banner-bad { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); color: #FCA5A5; }
.banner-warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); color: #FDE68A; }
.banner-info { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35); color: #BFDBFE; }

/* ---- rows / lists ------------------------------------------------------ */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 15px; cursor: pointer;
}
.rows .row:last-child { border-bottom: 0; }
.row .chev { margin-left: auto; color: var(--dim); flex: 0 0 auto; }
.row-ic {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--beam);
}
.row.static { cursor: default; }

/* selectable option rows (wizard, plans list) */
.opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 15px 16px;
  color: var(--text); font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.opt .t { font-weight: 700; }
.opt .s { font-size: 13px; color: var(--dim); margin-top: 2px; }
.opt.sel { border-color: var(--beam); background: var(--surface-2); }
.opt .tick { margin-left: auto; color: var(--beam); flex: 0 0 auto; visibility: hidden; }
.opt.sel .tick { visibility: visible; }
.opt[disabled] { opacity: .5; pointer-events: none; }

/* ---- tariff carousel --------------------------------------------------- */
.plans {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 6px 16px 10px;
  scrollbar-width: none;
}
.plans::-webkit-scrollbar { display: none; }
.plan-card {
  flex: 0 0 auto; width: 220px;
  scroll-snap-align: center;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 18px 16px;
  cursor: pointer; color: var(--text); font: inherit; text-align: left;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.plan-card.sel {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
}
.plan-card .disc { position: absolute; top: 12px; right: 12px; }
.plan-price { font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 10px; }
.plan-sub { font-size: 13px; color: var(--dim); margin-top: 2px; }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 2px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(147,160,207,.35); transition: background .15s, width .15s;
}
.dots i.on { background: var(--beam); width: 16px; border-radius: 3px; }

/* ---- stepper ----------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: 16px; justify-content: center; }
.stepper .val { font-size: 24px; font-weight: 800; min-width: 44px; text-align: center;
  font-variant-numeric: tabular-nums; }
.stepbtn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stepbtn[disabled] { opacity: .35; pointer-events: none; }

/* ---- value rows (onboarding) ------------------------------------------- */
.value-row { display: flex; gap: 14px; align-items: flex-start; }
.value-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: var(--surface-2); color: var(--beam);
  display: flex; align-items: center; justify-content: center;
}
.value-row .t { font-weight: 700; font-size: 15px; }
.value-row .s { font-size: 13.5px; color: var(--dim); margin-top: 2px; }

/* ---- bottom nav -------------------------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  background: rgba(7,12,24,.76);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(146,176,230,.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar.hidden { display: none; }
.tabbar-inner { display: flex; width: 100%; max-width: 480px; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; min-height: var(--nav-h);
  background: none; border: 0; color: var(--dim); font: inherit;
  font-size: 11px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab.on { color: var(--accent); }
.tab svg { display: block; }

/* ---- accordion (FAQ) --------------------------------------------------- */
details.faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-btn); overflow: hidden;
}
details.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font-weight: 600; font-size: 14.5px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { margin-left: auto; color: var(--dim); transition: transform .18s ease; flex: 0 0 auto; }
details.faq[open] summary .chev { transform: rotate(180deg); }
details.faq .faq-a { padding: 0 16px 14px; font-size: 14px; color: var(--dim); }

/* ---- progress bar ------------------------------------------------------ */
.prog { height: 6px; border-radius: 3px; background: rgba(147,160,207,.2); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 3px; background: var(--grad); }

/* ---- sheet / modal ----------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4,8,26,.66);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadein .15s ease-out;
}
.overlay.centered { align-items: center; padding: 24px; }
@keyframes fadein { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 480px;
  background: var(--ink);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  animation: sheetup .22s ease-out;
  max-height: 88dvh; overflow-y: auto;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } }
.sheet .grip {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(147,160,207,.35); margin: 2px auto 14px;
}
.modal {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px; width: 100%; max-width: 420px;
  animation: rise .18s ease-out; max-height: 88dvh; overflow-y: auto;
}
.qrbox {
  background: #fff; border-radius: 16px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.qrbox img { display: block; width: 100%; max-width: 280px; height: auto; }

/* ---- toast ------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  z-index: 60; max-width: min(90vw, 420px);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: rise .2s ease-out;
  text-align: center;
}

/* ---- device list -------------------------------------------------------- */
.dev {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 13px 14px;
}
.dev .actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.dev .abtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface-2); border: 0; color: var(--beam);
  cursor: pointer; text-decoration: none;
}
/* The revoke action reads as destructive at a glance. */
.dev .abtn.danger { color: var(--bad); }

/* ---- how-to steps ------------------------------------------------------- */
.steps { counter-reset: st; display: flex; flex-direction: column; gap: 12px; }
.steps .st { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.steps .st::before {
  counter-increment: st; content: counter(st);
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  background: var(--surface-2); color: var(--beam);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ---- skeleton ----------------------------------------------------------- */
.skel {
  border-radius: 12px; min-height: 18px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 45%, var(--surface) 65%);
  background-size: 240% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -110% 0; } }

/* ---- payment method rows ------------------------------------------------ */
.pay-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; filter: grayscale(1); opacity: .8;
}
.opt.sel .pay-ic, .opt.live .pay-ic { filter: none; opacity: 1; }

/* ---- misc ---------------------------------------------------------------- */
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.linkbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px dashed rgba(147,160,207,.4);
  border-radius: var(--r-btn); padding: 11px 14px;
  font-size: 13.5px; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: var(--grad); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.checkmark-lg {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
  background: rgba(52,211,153,.14); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
a.plain { color: var(--beam); text-decoration: none; font-weight: 600; }

:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }

/* ======================================================================== *
 *  HARBOR CABINET — foundation animations, the responsive shell, and the   *
 *  «Устройства» screen. Everything above is the pre-reskin component layer  *
 *  (retokenized to the Harbor palette); everything below is the new design. *
 * ======================================================================== */

/* ---- keyframes (copied verbatim from Harbor Web.dc.html <style>) -------- */
@keyframes hbSpin{to{transform:rotate(360deg)}}
@keyframes hbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(16px,22px,0) scale(1.12)}}
@keyframes hbFloat2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20px,-18px,0) scale(1.08)}}
@keyframes hbSheen{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
@keyframes hbSlide{0%{transform:translateX(-115%)}100%{transform:translateX(245%)}}
@keyframes hbGlow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hbBlink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes hbPulse{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.8);opacity:0}}
@keyframes hbDraw{from{stroke-dasharray:0 400}to{stroke-dasharray:53 220}}
@keyframes hbDraw2{from{stroke-dasharray:0 420}to{stroke-dasharray:81 339}}
@keyframes hbDrawFull{from{stroke-dasharray:0 400}to{stroke-dasharray:220 220}}
@keyframes hbCheck{to{stroke-dashoffset:0}}
@keyframes hbBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hbBarY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Data-driven: the JS hbDrawBig() sets --hb-c (circumference) and --hb-off
   (final dash-offset = c*(1-fraction)) per ring, so ANY real days-left arc
   draws in. dash-offset (not dasharray) keeps the round cap correct. */
@keyframes hbDrawBig{from{stroke-dashoffset:var(--hb-c)}to{stroke-dashoffset:var(--hb-off)}}
@keyframes hbDrawTen{from{stroke-dasharray:0 402}to{stroke-dasharray:40 362}}

/* One-shot draws run always (README: «одноразовые — оставлять»). */
.hb-bar { transform-origin: left; animation: hbBar .8s cubic-bezier(.22,1,.36,1) both; }

/* Infinite drifts/sheens/blinks run ONLY when motion is welcome
   (README: «бесконечные анимации отключать»). */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: hbFloat 18s ease-in-out infinite; }
  body::after  { animation: hbFloat2 24s ease-in-out infinite; }
  .btn-primary::after,
  .hb-sheen { animation: hbSheen 3.8s ease-in-out infinite; }
  .hb-sheen.slow { animation-duration: 8s; }
  .hb-blink { animation: hbBlink 2.4s ease-in-out infinite; }
}

/* ---- desktop header (74px, README §nav) -------------------------------- */
.hb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  display: none;                     /* mobile: hidden (tab-bar is the nav) */
  align-items: center; gap: 30px; height: var(--hd-h);
  padding: 0 40px;
  border-bottom: 1px solid rgba(146,176,230,.1);
  background: var(--panel-soft);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.hb-header.hidden { display: none !important; }
.hb-header .hb-hbrand { display: flex; align-items: center; gap: 10px;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.hb-header .hb-hbrand svg, .hb-header .hb-hbrand img { width: 24px; height: 24px; display: block; }
/* the Ari VPN «a.» logo badge — app-icon rounding + faint teal glow */
.hbmark { display: block; border-radius: 24%;
  filter: drop-shadow(0 2px 8px rgba(34,211,238,.30)); }
.hb-nav { display: flex; align-items: center; gap: 4px; }
.hb-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--dim);
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.hb-pill.on {
  background: rgba(46,218,208,.10); border-color: rgba(46,218,208,.26);
  color: var(--accent-text); font-weight: 600;
}
.hb-pill .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 9px rgba(46,218,208,.9); display: none;
}
.hb-pill.on .dot { display: block; }
.hb-header .hb-hright {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
}
.hb-bal { font: 500 11.5px/1 var(--font-mono); color: var(--dim-mono);
  letter-spacing: .04em; }
.hb-ava {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid rgba(146,176,230,.16);
  display: grid; place-items: center;
  font: 600 12.5px/1 var(--font-mono); color: var(--dim);
}

/* ---- mono / value helpers used across the new screens ------------------ */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow-m {                            /* uppercase mono label */
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--dim-mono); text-transform: uppercase;
}
.val-2 { color: var(--text-2); }

/* ---- Harbor panels ----------------------------------------------------- */
.hb-panel {
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); padding: 22px;
}
.hb-panel.accent {
  position: relative; overflow: hidden;
  border-color: rgba(46,218,208,.26);
  background: linear-gradient(160deg, rgba(46,218,208,.09), rgba(13,21,38,.95) 56%);
}

/* ======================================================================== *
 *  «Устройства» — devices screen (README §2/§3)                            *
 * ======================================================================== */

/* the subscreen header row (back button + title + counter) */
.dv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dv-back {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center;
  background: transparent; border: 0; color: var(--dim);
  font-size: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dv-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.dv-count {
  margin-left: auto; font: 600 11px/1 var(--font-mono);
  letter-spacing: .1em; color: var(--danger); padding-right: 4px;
}
.dv-count.free { color: var(--accent-text); }
.dv-sub { font-size: 12.5px; line-height: 1.5; color: var(--dim-mono);
  margin: 2px 0 16px; }

/* slot bar — filled #2edad0, empty dashed */
.slotbar { display: flex; gap: 5px; margin-bottom: 9px; }
.slotbar .seg { flex: 1; height: 3px; border-radius: 2px; }
.slotbar .seg.full { background: var(--accent); transform-origin: left;
  animation: hbBar .8s cubic-bezier(.22,1,.36,1) both; }
.slotbar .seg.empty { background: rgba(146,176,230,.14);
  border: 1px dashed rgba(146,176,230,.22); box-sizing: border-box; }

/* ---- device CARD (≤3 slots) -------------------------------------------- */
.devcard {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); padding: 16px 17px;
}
.devcard.lead {                          /* the first / active card glows */
  border-color: rgba(46,218,208,.26);
  background: linear-gradient(160deg, rgba(46,218,208,.09), rgba(13,21,38,.94) 56%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.devcard .dc-top {
  position: relative; display: flex; align-items: center; gap: 13px;
  margin-bottom: 14px;
}
.dc-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(146,176,230,.16); color: var(--dim);
}
.dc-ic.apple { border-color: rgba(46,218,208,.28); background: rgba(46,218,208,.12); }
.dc-ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
.dc-name { font-size: 15.5px; font-weight: 600; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-slot { font: 500 10px/1 var(--font-mono); letter-spacing: .06em;
  color: var(--dim-mono); text-transform: uppercase; }
.dc-trash {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,126,107,.24); background: rgba(255,126,107,.06);
  color: var(--danger-soft); -webkit-tap-highlight-color: transparent;
}

/* the property table on desktop cards (ПРОТОКОЛ / ЛОКАЦИЯ / …) */
.dc-props {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  font: 500 11.5px/1 var(--font-mono); color: var(--dim-mono);
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.dc-props .pr { display: flex; justify-content: space-between; gap: 12px; }
.dc-props .pr .v { color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* config-file row */
.conf-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--panel-soft);
}
.conf-row .fic { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.devcard:not(.lead) .conf-row .fic,
.devrow .conf-row .fic { color: var(--dim); }
.conf-name {
  flex: 1; min-width: 0; font: 500 11.5px/1 var(--font-mono);
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.devcard:not(.lead) .conf-name { color: var(--dim); }
.conf-link {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: 600 12.5px/1 var(--font-ui); color: var(--accent);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* the muted (non-lead) card reads its file links in the dim tone */
.devcard:not(.lead) .conf-link { color: var(--dim); }
.conf-sep { width: 1px; height: 14px; flex: 0 0 auto;
  background: rgba(146,176,230,.16); display: block; }
/* the inline «Скачать | QR» links in the phone file row */
.conf-inline { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* the two big desktop actions «Скачать .conf» / «Показать QR» (desktop only) */
.dc-actions { position: relative; display: none; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: auto; }
.gbtn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 13.5px/1 var(--font-ui); color: var(--text);
  padding: 12px; border-radius: 12px;
  border: 1px solid rgba(146,176,230,.18); background: transparent;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}

/* the running blik on the accent «Добавить слот» row / accent panels */
.hb-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%,
    rgba(255,255,255,.08) 50%, transparent 68%);
  transform: translateX(-130%);
}

/* card view container: a stacked column on the phone, a 3-up grid on desktop */
.cardgrid { display: flex; flex-direction: column; gap: 11px; }

/* mobile / desktop element swaps */
.dv-word { display: none; }               /* the «СЛОТА»/«СЛОТОВ» word: desktop */
@media (max-width: 899px) {
  /* the dashed grid card is desktop-only; a compound selector so this wins
     over the later base `.newdev{display:flex}` regardless of source order. */
  .cardgrid .newdev { display: none; }
}
@media (min-width: 900px) {
  .newdev-mobile { display: none; }       /* the phone button is mobile-only */
  .dc-actions { display: grid; }
  .conf-inline { display: none; }         /* desktop cards use the big buttons */
  .dv-word { display: inline; }
  .hb-wide .devrow .lr-id { width: 230px; }
}
@media (max-width: 899px) {               /* compact list rows on the phone */
  .devrow { flex-wrap: wrap; padding: 14px 14px; }
  .devrow .lr-id { flex: 1; width: auto; }
  .devrow .lr-conf { flex-basis: 100%; order: 3; margin-top: 2px; }
  .devrow .lr-acts { order: 2; }
  .devrow.free .fs-hint { flex-basis: 100%; order: 3; margin-top: 4px; }
  .devrow.free .fs-cta { flex-basis: 100%; order: 4; margin-top: 8px; }
  .devrow.free .fs-cta .btn { width: 100%; }
}

/* ---- device LIST (>3 slots) -------------------------------------------- */
.devlist {
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--panel); overflow: hidden; margin-bottom: 16px;
}
.devrow {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.devrow:last-child { border-bottom: 0; }
.devrow .lr-ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(146,176,230,.16); color: var(--dim);
}
.devrow .lr-ic img { width: 21px; height: 21px; object-fit: contain; }
.devrow .lr-ic.apple { border-color: rgba(46,218,208,.2); }
.devrow .lr-id { flex: 0 0 auto; min-width: 0; }
.devrow .lr-conf { flex: 1; min-width: 0; }
.devrow .lr-conf.conf-row { padding: 11px 13px; border-radius: 12px; }
.devrow .lr-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lr-btn {
  font: 600 13px/1 var(--font-ui); color: var(--text);
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid rgba(146,176,230,.18); background: transparent;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.lr-trash {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,126,107,.24); background: rgba(255,126,107,.06);
  color: var(--danger-soft);
}
/* free-slot row */
.devrow.free { background: rgba(46,218,208,.04);
  border-top: 1px solid var(--line-soft); border-bottom: 0; }
.devrow.free .lr-ic { border: 1px dashed rgba(46,218,208,.34); color: var(--accent); }
.devrow.free .fs-hint { flex: 1; font-size: 13px; color: var(--dim); min-width: 0; }
.devrow.free .fs-cta { flex: 0 0 auto; }

/* hint cards under the list */
.hintgrid { display: grid; gap: 12px; }
.hintcard {
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.hintcard .ht { font-size: 13px; line-height: 1.5; color: var(--dim); }
.hintcard .hl { font: 600 13px/1 var(--font-ui); color: var(--accent);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }

/* the greyed «Новое устройство» block when slots are full (card view) */
.newdev {
  border: 1px dashed rgba(146,176,230,.28); border-radius: 20px;
  background: rgba(146,176,230,.04); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.newdev .nd-ic {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  border: 1px dashed rgba(146,176,230,.3); display: grid; place-items: center;
  color: var(--dim);
}
.newdev .nd-t { font-size: 16px; font-weight: 600; color: var(--text-2); }
.newdev .nd-s { font-size: 13px; line-height: 1.55; color: var(--dim); }
.newdev .nd-price { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--accent-text); }
/* dashed «Новое устройство» button (slots full) */
.newdev-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px; border-radius: 14px;
  border: 1px dashed rgba(146,176,230,.28); background: rgba(146,176,230,.06);
  color: var(--dim); font: 600 15px/1 var(--font-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- «Слоты N из N» modal / bottom sheet (README §4) ------------------- */
.slots-dim {                              /* the blurred dim behind it */
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4,8,16,.68);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadein .15s ease-out;
}
/* mobile: bottom sheet (radius 30 30 43 43) */
.slots-panel {
  width: 100%; max-width: 480px;
  border-radius: 30px 30px 43px 43px;
  background: linear-gradient(180deg, #101a2e, #0a1120);
  border-top: 1px solid rgba(146,176,230,.16);
  box-shadow: 0 -30px 70px rgba(0,0,0,.6);
  padding: 10px 22px calc(14px + env(safe-area-inset-bottom));
  animation: sheetup .22s ease-out;
  max-height: 92dvh; overflow-y: auto;
}
.slots-panel .grip { width: 42px; height: 4px; border-radius: 3px;
  background: rgba(232,238,249,.24); margin: 0 auto 18px; }
.slots-lock {
  width: 48px; height: 48px; border-radius: 15px;
  border: 1px dashed rgba(146,176,230,.3);
  display: grid; place-items: center; color: var(--dim);
  margin-bottom: 20px;
}
.slots-h { font-size: 25px; line-height: 1.15; letter-spacing: -.025em;
  font-weight: 700; margin-bottom: 7px; }
.slots-p { font-size: 13.5px; line-height: 1.5; color: var(--dim);
  margin-bottom: 20px; }
.slots-choice {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 16px 17px; border-radius: 18px;
  border: 1px solid rgba(146,176,230,.14); background: rgba(13,21,38,.9);
  color: var(--text); font: inherit; -webkit-tap-highlight-color: transparent;
}
.slots-choice + .slots-choice { margin-top: 11px; }
.slots-choice.accent {
  border-color: rgba(46,218,208,.3);
  background: linear-gradient(150deg, rgba(46,218,208,.12), rgba(13,21,38,.92) 58%);
}
.slots-choice .sc-ic {
  position: relative; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px; display: grid; place-items: center;
}
.slots-choice .sc-ic.del { border: 1px solid rgba(255,126,107,.24);
  background: rgba(255,126,107,.07); color: var(--danger-soft); }
.slots-choice.accent .sc-ic { border: 1px solid rgba(46,218,208,.3);
  background: rgba(46,218,208,.12); color: var(--accent); }
.slots-choice .sc-body { position: relative; flex: 1; min-width: 0; }
.slots-choice .sc-t { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.slots-choice .sc-s { font-size: 12.5px; color: var(--dim-mono); }
.slots-choice.accent .sc-s { font: 500 11px/1.3 var(--font-mono);
  color: var(--accent-text); }
.slots-choice .sc-chev { position: relative; flex: 0 0 auto; font-size: 17px;
  color: var(--dim-mono); }
.slots-choice.accent .sc-chev { color: var(--accent); }
.slots-cancel {
  display: block; width: 100%; text-align: center; margin-top: 20px;
  padding: 13px; background: none; border: 0; cursor: pointer;
  font: 600 14.5px/1 var(--font-ui); color: var(--dim);
}

/* ======================================================================== *
 *  Desktop layout (≥ 561px): header replaces the tab-bar; the Devices      *
 *  screen widens to the 3-column / list grid. Non-redesigned screens stay  *
 *  a centered mobile column under the same shell.                          *
 * ======================================================================== */
@media (min-width: 900px) {
  .hb-header { display: flex; }
  .hb-header.hidden { display: none !important; }
  .tabbar { display: none; }
  #app { max-width: 1240px; padding: 26px 40px 60px; }
  /* clear the fixed 74px header only when it is actually shown (not the
     landing, which has no header). */
  #app.has-header { padding-top: calc(var(--hd-h) + 26px); }
  #app.has-nav { padding-bottom: 60px; }
  /* keep the not-yet-redesigned views a readable centered column */
  .view:not(.hb-wide) { max-width: 520px; margin: 0 auto; }

  /* --- Devices, desktop --- */
  .hb-wide .dv-title { font-size: 30px; letter-spacing: -.03em; }
  .hb-wide .dv-back { border: 1px solid rgba(146,176,230,.16); }
  .hb-wide .dv-count { font-size: 12px; }
  .hb-wide .slotbar .seg { height: 6px; border-radius: 3px; }
  .hb-wide .slotbar { gap: 6px; }
  .cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    align-items: start; }
  .cardgrid .devcard, .cardgrid .newdev {
    border-radius: 22px; padding: 24px; gap: 20px; min-height: 398px;
    display: flex; flex-direction: column; }
  .cardgrid .devcard .dc-top { margin-bottom: 0; }
  .cardgrid .dc-ic { width: 46px; height: 46px; border-radius: 14px; }
  .cardgrid .dc-ic img { width: 22px; height: 22px; }
  .cardgrid .dc-name { font-size: 18px; letter-spacing: -.02em; margin-bottom: 5px; }
  .cardgrid .dc-slot { font-size: 10.5px; letter-spacing: .12em; }
  .cardgrid .dc-trash { width: 40px; height: 40px; border-radius: 12px; }
  .cardgrid .newdev { border-radius: 22px; padding: 24px; justify-content: space-between; }
  .cardgrid .newdev .nd-ic { width: 46px; height: 46px; margin-bottom: 4px; }
  .cardgrid .newdev .nd-t { font-size: 18px; letter-spacing: -.02em; }
  .hintgrid.cols3 { grid-template-columns: repeat(3, 1fr); }
  /* the property table only shows on desktop cards */
  .dc-props { display: flex; }
  .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* slots-full → centered 580px modal over a blurred dim (README §4) */
  .slots-dim { align-items: center; padding: 24px; }
  .slots-panel {
    max-width: 580px; border: 1px solid rgba(146,176,230,.16);
    border-radius: 26px; box-shadow: var(--sh-modal);
    padding: 32px; animation: rise .18s ease-out;
  }
  .slots-panel .grip { display: none; }
  .slots-h { font-size: 28px; letter-spacing: -.03em; }
  .slots-p { font-size: 14px; margin-bottom: 24px; }
  .slots-choice { padding: 18px 19px; border-radius: 18px; }
  .slots-choice .sc-ic { width: 40px; height: 40px; border-radius: 12px; }
  .slots-choice .sc-t { font-size: 15.5px; }
  .slots-choice .sc-s { font-size: 13px; }
  .slots-lock { width: 48px; height: 48px; }
}
/* the desktop-only property table is hidden on the phone card */
@media (max-width: 899px) { .dc-props { display: none; } .steps-grid { display: none; } }

/* ======================================================================== *
 *  «Обзор» (Overview) — README §1, pixel ref #8a (desktop) / #4a (mobile).  *
 *  Two subtrees render; the shell boundary (560/561) shows exactly one, so  *
 *  most sizing keys off a .sm modifier / the subtree class, not media       *
 *  queries — only the top-level toggle needs one (at the very bottom).      *
 * ======================================================================== */
.hb-ov-desktop { display: none; }
.hb-ov-mobile  { display: block; }

/* ---- the days-remaining ring (README §1) ------------------------------- */
.hb-ring { position: relative; flex: 0 0 auto; width: 176px; height: 176px; }
.hb-ring.sm { width: 126px; height: 126px; }
.hb-ring-svg, .hb-ring-svg svg { display: block; }
.hb-ring-prog {
  stroke-dasharray: var(--hb-c); stroke-dashoffset: var(--hb-off);
  filter: drop-shadow(0 0 12px rgba(46,218,208,.55));
}
@media (prefers-reduced-motion: no-preference) {
  .hb-ring-prog { animation: hbDrawBig 2s cubic-bezier(.22,1,.36,1) both; }
}
.hb-ring-center { position: absolute; inset: 0; }
.hb-ring-num {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; font: 600 46px/1 var(--font-mono); color: var(--text);
}
.hb-ring.sm .hb-ring-num { font-size: 32px; }
.hb-ring.muted .hb-ring-num { color: var(--dim); }
.hb-ring-cap {
  position: absolute; left: 0; right: 0; top: calc(50% + 25px);
  text-align: center; font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; color: var(--dim);
}
.hb-ring.sm .hb-ring-cap { top: calc(50% + 18px); font-size: 10px; letter-spacing: .1em; }

/* ---- identity block (ring + chip / title / sub / mono location) -------- */
.ov-id { display: flex; align-items: center; gap: 36px; }
.ov-id.sm { gap: 20px; margin-bottom: 8px; }
.ov-idtext { min-width: 0; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 99px;
  background: rgba(46,218,208,.10); border: 1px solid rgba(46,218,208,.24);
  font-size: 12.5px; font-weight: 600; color: var(--accent-text);
}
.ov-id.sm .ov-chip { gap: 7px; padding: 6px 11px; font-size: 12px; }
.ov-chip.off {
  background: rgba(146,176,230,.06); border-color: rgba(146,176,230,.18);
  color: var(--dim);
}
.ov-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(46,218,208,.9); flex: 0 0 auto;
}
.ov-id.sm .ov-chip-dot { width: 5px; height: 5px; box-shadow: none; }
.ov-chip.off .ov-chip-dot { background: var(--dim); box-shadow: none; }
.ov-title {
  font-size: 40px; line-height: 1.02; letter-spacing: -.035em;
  font-weight: 700; margin: 11px 0;
}
.ov-id.sm .ov-title { font-size: 21px; letter-spacing: -.02em; margin: 9px 0 6px; }
.ov-sub { font-size: 15px; color: var(--dim); margin-bottom: 12px; }
.ov-id.sm .ov-sub { font-size: 13.5px; margin-bottom: 4px; }
.ov-loc {
  font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .06em;
  color: var(--dim-mono);
}
.ov-id.sm .ov-loc { letter-spacing: .04em; }

/* ---- renew CTA --------------------------------------------------------- */
.ov-renew { font-size: 15.5px; }
.ov-renew-m { width: 100%; margin: 4px 0 11px; }

/* ---- uptime card — the FIXED service/marketing banner (verbatim) ------- */
.ov-uptime {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, rgba(46,218,208,.08), rgba(13,21,38,.94) 56%);
  padding: 22px; display: flex; flex-direction: column;
  justify-content: space-between;
}
.ov-uptime.sm {
  border-radius: 18px; padding: 17px;
  background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.92) 54%);
}
.ov-up-head {
  position: relative; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 13px;
}
.ov-up-l { display: flex; gap: 12px; }
.ov-uptime.sm .ov-up-l { gap: 11px; }
.ov-up-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(46,218,208,.9); margin-top: 6px; flex: 0 0 auto;
}
.ov-uptime.sm .ov-up-dot { margin-top: 4px; }
.ov-up-t { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.ov-uptime.sm .ov-up-t { font-size: 14.5px; margin-bottom: 3px; }
.ov-up-m {
  font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .12em;
  color: var(--dim-mono);
}
.ov-uptime.sm .ov-up-m { font-weight: 500; font-size: 10px; letter-spacing: .06em; }
.ov-up-r { text-align: right; flex: 0 0 auto; }
.ov-up-pct {
  font: 600 24px/1 var(--font-mono); color: var(--accent);
  text-shadow: 0 0 20px rgba(46,218,208,.5);
}
.ov-uptime.sm .ov-up-pct { font-size: 19px; text-shadow: 0 0 18px rgba(46,218,208,.5); }
.ov-up-cap { font: 500 9.5px/1 var(--font-mono); color: var(--dim-mono); margin-top: 6px; }
.ov-uptime.sm .ov-up-cap { font-size: 9px; margin-top: 5px; }
.ov-bars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.ov-bars.sm { gap: 3px; height: 22px; }
.ov-bar {
  flex: 1; height: 100%; border-radius: 2px; background: rgba(46,218,208,.72);
  transform-origin: bottom; box-shadow: 0 0 8px rgba(46,218,208,.35);
  animation: hbBarY .7s cubic-bezier(.22,1,.36,1) both;
}
.ov-bars.sm .ov-bar { background: rgba(46,218,208,.75); }

/* ======================================================================== *
 *  Desktop overview (.hb-ov-desktop subtree — hidden < 561px, so these      *
 *  layout rules need no media query of their own)                          *
 * ======================================================================== */
.hb-ov-desktop .ov-top {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px;
  min-height: 420px; margin-bottom: 16px;
}
.ov-hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(46,218,208,.22); border-radius: 24px;
  background: linear-gradient(150deg, rgba(46,218,208,.11), rgba(13,21,38,.94) 58%);
  padding: 34px; display: flex; flex-direction: column; justify-content: space-between;
}
.ov-hero-actions {
  position: relative; display: flex; gap: 12px; align-items: center; margin-top: 24px;
}
.ov-hero-cta { flex: 1; max-width: 290px; }
.ov-loc-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 22px; font-size: 14px;
}
.ov-soon {
  font: 600 8.5px/1 var(--font-mono); letter-spacing: .1em; color: var(--dim-mono);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px;
}
.ov-hero-note {
  margin-left: auto; font: 500 11px/1.6 var(--font-mono);
  color: var(--dim-mono); text-align: right;
}
.ov-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.ov-dev {
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
}
.ov-dev-head { display: flex; align-items: flex-start; justify-content: space-between; }
.ov-dev-count { font: 600 22px/1 var(--font-mono); color: var(--text); }
.ov-dev-count.full { color: var(--danger); }
.ov-dev .slotbar { margin: 0; }
.ov-dev-btns { display: flex; gap: 10px; }
.ov-dev-btns .gbtn { flex: 1; }
.hb-ov-desktop .ov-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-height: 276px;
}
.ov-card {
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  padding: 22px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 16px;
}
.ov-ci {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px;
  border: 1px solid rgba(146,176,230,.16); display: grid; place-items: center;
  color: var(--dim); font: 600 13px/1 var(--font-mono);
}
.ov-ci.dash { border: 1px dashed rgba(146,176,230,.3); background: rgba(146,176,230,.05); }
.ov-ci.accent {
  border-color: rgba(46,218,208,.26); background: rgba(46,218,208,.09);
  color: var(--accent); font-size: 12px;
}
.ov-card-body { flex: 1; }
.ov-card-t { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.ov-card-s { font-size: 13px; line-height: 1.5; color: var(--dim); }
.ov-card.locked .ov-card-t { color: var(--text-2); }

/* ======================================================================== *
 *  Mobile overview (.hb-ov-mobile subtree)                                 *
 * ======================================================================== */
.ov-m-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px;
}
.ov-m-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.ov-m-brand svg, .ov-m-brand img { width: 24px; height: 24px; display: block; }
.ov-m-head .hb-ava { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }
.ov-m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 11px 0; }
.ov-m-mini {
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  padding: 17px;
}
.ov-m-mini .eyebrow-m { margin-bottom: 14px; }
.ov-m-val { font: 600 22px/1 var(--font-mono); margin-bottom: 12px; }
.ov-m-val.danger { color: var(--danger); }
.ov-m-mini .gbtn { width: 100%; padding: 10px; border-radius: 10px; font-size: 13px; }
.ov-m-transfer { font-size: 12.5px; color: var(--dim); margin: -2px 0 11px; }
.ov-m-list {
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  overflow: hidden; margin-bottom: 11px;
}
.ov-m-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 17px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: none; color: var(--text); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ov-m-row:last-child { border-bottom: 0; }
.ov-m-row:active { background: rgba(146,176,230,.04); }
.ov-m-ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  border: 1px solid rgba(146,176,230,.16); display: grid; place-items: center;
  color: var(--dim); font: 600 12px/1 var(--font-mono);
}
.ov-m-ic.accent { background: rgba(46,218,208,.10); border-color: rgba(46,218,208,.22); color: var(--accent); }
.ov-m-ic.badge { color: var(--accent); }
.ov-m-rid { flex: 1; min-width: 0; }
.ov-m-rt { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.ov-m-rs { font-size: 12.5px; color: var(--dim-mono); }
.ov-m-rs.danger { color: var(--danger-soft); }
.ov-m-chev { flex: 0 0 auto; color: var(--dim-mono); font-size: 17px; }

@media (min-width: 900px) {
  .hb-ov-desktop { display: block; }
  .hb-ov-mobile  { display: none; }
}

/* ======================================================================== *
 *  «Тарифы и оплата» — tariff + payment screen (README §6, ref #8a desktop  *
 *  / #5a mobile). Both subtrees render; the 560/561 shell boundary shows     *
 *  exactly one (same pattern as Обзор). One screen: term cards, the device   *
 *  counter, «ЧТО ВХОДИТ», the leader-line totals, the method tiles, СBP-     *
 *  default, and «Оплатить».                                                  *
 * ======================================================================== */
.hb-pm-desktop { display: none; }
.hb-pm-mobile  { display: flex; flex-direction: column; gap: 14px; }

/* ---- term card: conic-gradient selected border (hbSpin over 1.5px pad) -- */
.pm-term-wrap { position: relative; border-radius: 22px; padding: 1.5px; overflow: hidden; }
.pm-term-wrap.sel { box-shadow: 0 24px 50px -22px rgba(46,218,208,.6); }
.pm-spin {
  position: absolute; left: 50%; top: 50%;
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  background: conic-gradient(from 0deg, transparent 0 56%,
    rgba(46,218,208,.95) 74%, transparent 88%);
  display: none; pointer-events: none;
}
.pm-term-wrap.sel .pm-spin { display: block; }
.pm-term {
  position: relative; z-index: 1; display: block; width: 100%; text-align: left;
  border-radius: 20.5px; padding: 22px;
  background: rgba(13,21,38,.7); border: 1px solid var(--line);
  color: var(--text); font: inherit; cursor: pointer;
  transition: background .15s ease;
}
.pm-term-wrap.sel .pm-term {
  border-color: transparent;
  background: linear-gradient(150deg, #12293f, #0d1526 62%);
}
.pm-term-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pm-term-name { font-size: 18px; font-weight: 700; }
.pm-term-permo { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
.pm-permo-num { font: 600 32px/1 var(--font-mono); }
.pm-term-wrap.sel .pm-permo-num {
  color: var(--accent); text-shadow: 0 0 22px rgba(46,218,208,.55);
}
.pm-permo-cap { font: 500 11px/1 var(--font-mono); color: var(--dim-mono); }
.pm-term-sub { font: 500 11px/1.4 var(--font-mono); color: var(--dim-mono); }
.pm-term-wrap.sel .pm-term-sub { color: var(--accent-text); }
/* the −% badge, tiered by real discount (solid > teal-outline > grey) */
.pm-disc { font: 600 10px/1 var(--font-mono); padding: 5px 7px; border-radius: 7px;
  flex: 0 0 auto; letter-spacing: .02em; }
.pm-disc-solid { background: var(--accent); color: var(--on-accent); }
.pm-disc-teal  { border: 1px solid rgba(46,218,208,.3); color: var(--accent-text); }
.pm-disc-grey  { border: 1px solid rgba(146,176,230,.24); color: var(--dim); }

/* mobile term card = a radio row */
.pm-term-wrap-m { border-radius: 20px; padding: 1.4px; }
.pm-term-wrap-m .pm-spin { width: 440px; height: 440px; margin: -220px 0 0 -220px; }
.pm-term-m { display: flex; align-items: center; gap: 13px;
  border-radius: 18.6px; padding: 15px 16px; }
.pm-term-m .pm-term-head { margin-bottom: 5px; }
.pm-term-m .pm-term-name { font-size: 16px; }
.pm-term-m .pm-disc { font-size: 9.5px; padding: 4px 6px; border-radius: 6px; }
.pm-term-m-mid { flex: 1; min-width: 0; }
.pm-term-m .pm-term-permo { flex: 0 0 auto; flex-direction: column; align-items: flex-end;
  gap: 4px; margin-bottom: 0; text-align: right; }
.pm-term-m .pm-permo-num { font-size: 20px; }
.pm-term-m .pm-permo-cap { font-size: 9px; }

/* the radio dot (term cards + method tiles) */
.pm-radio { width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  box-sizing: border-box; border: 1px solid rgba(146,176,230,.26); }
.pm-term-wrap.sel .pm-radio, .pm-method.sel .pm-radio {
  border: 5px solid var(--accent); background: var(--on-accent);
  box-shadow: 0 0 0 4px rgba(46,218,208,.14);
}

/* ---- the reusable panel + section labels ------------------------------- */
.pm-panel { border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); padding: 22px; }
.pm-m-panel { padding: 18px; }

/* ---- device counter ---------------------------------------------------- */
.pm-dev { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--panel-soft); }
.pm-dev-t { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.pm-dev-s { font-size: 12.5px; color: var(--dim-mono); }
.pm-dev-ctl { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.pm-dev-val { font: 600 19px/1 var(--font-mono); min-width: 20px; text-align: center; }
.pm-step { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  border: 1px solid rgba(146,176,230,.18); background: transparent; color: var(--dim);
  font-size: 18px; display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.pm-step[disabled] { opacity: .4; pointer-events: none; }
.pm-step-plus { border-color: rgba(46,218,208,.3); background: rgba(46,218,208,.1);
  color: var(--accent); box-shadow: 0 0 0 4px rgba(46,218,208,.06); }

/* ---- «ЧТО ВХОДИТ» with animated hbCheck ticks -------------------------- */
.pm-includes { display: flex; flex-direction: column; gap: 13px; }
.pm-inc-row { display: flex; align-items: center; gap: 12px; }
.pm-inc-t { font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.pm-check { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(46,218,208,.10); border: 1px solid rgba(46,218,208,.26); }
.pm-check svg { width: 12px; height: 12px; display: block; fill: none;
  stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  /* one-shot: runs on first paint, tamed to instant by the reduce block */
  animation: hbCheck .6s .3s ease-out forwards; }

/* ---- dashed leader-line totals ----------------------------------------- */
.pm-totals { display: flex; flex-direction: column; gap: 13px; }
.pm-leaders { display: flex; flex-direction: column; gap: 11px; }
.pm-leader { display: flex; align-items: baseline; gap: 10px; }
.pm-leader-l { color: var(--dim); font-size: 14px; }
.pm-dash { flex: 1; align-self: center; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(146,176,230,.3) 0 3px, transparent 3px 7px); }
.pm-leader-v { font: 500 13.5px/1 var(--font-mono); flex: 0 0 auto; }
.pm-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.pm-total-t { font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.pm-total-cap { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--dim-mono); }
.pm-total-v { font: 600 34px/1 var(--font-mono); flex: 0 0 auto;
  text-shadow: 0 0 26px rgba(46,218,208,.35); }

/* ---- payment-method tiles (radio) -------------------------------------- */
.pm-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pm-methods-list { display: flex; flex-direction: column; gap: 10px; }
.pm-method { position: relative; overflow: hidden; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(13,21,38,.7);
  color: var(--text); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background .15s ease; }
.pm-method.sel { border-color: var(--accent-border);
  background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.92) 60%); }
.pm-method.sel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 68%);
  transform: translateX(-130%); }
.pm-method > * { position: relative; }
.pm-method-ic { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(146,176,230,.16); color: var(--dim); }
.pm-method-ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
.pm-method.sel .pm-method-ic { border-color: rgba(46,218,208,.28);
  background: rgba(46,218,208,.1); color: var(--accent); }
.pm-method-mid { flex: 1; min-width: 0; }
.pm-method-name { display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; }
.pm-fast { font: 600 9px/1 var(--font-mono); padding: 3px 6px; border-radius: 5px;
  background: var(--accent); color: var(--on-accent); flex: 0 0 auto; }
.pm-method-sub { font: 500 10.5px/1 var(--font-mono); color: var(--accent-text); margin-top: 4px; }
.pm-method .pm-radio { margin-left: auto; }
.pm-method.pm-disabled { opacity: .5; cursor: default; pointer-events: none; }
.pm-method.pm-disabled .pm-method-sub { color: var(--danger-soft); }
.pm-soon { opacity: .55; cursor: default; }
.pm-soon .pm-method-ic { filter: grayscale(1); }
.pm-soon .pill-soon { margin-left: auto; }
/* mobile tiles sit a touch larger, like #5a-3 */
.pm-methods-list .pm-method-ic { width: 44px; height: 44px; border-radius: 13px; }
.pm-methods-list .pm-method-ic img { width: 22px; height: 22px; }
.pm-methods-list .pm-method-name { font-size: 15.5px; }

/* ---- CTA + note + disclaimer ------------------------------------------- */
.pm-cta { margin-top: 2px; }
.pm-tgnote { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px;
  border-radius: 15px; border: 1px solid var(--line); background: var(--panel-soft); }
.pm-tgnote-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-top: 6px; flex: 0 0 auto; box-shadow: 0 0 10px rgba(46,218,208,.9); }
.pm-tgnote-t { font-size: 13px; line-height: 1.5; color: var(--dim); }
.pm-tgnote-t b { color: var(--text-2); font-weight: 600; }
.pm-disclaimer { font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .06em;
  color: var(--dim-mono); text-align: center; }

/* TEMPORARY — the merchant name under the login form, for the card/СБП
   acquirer review. Quiet but genuinely visible: real colour, real size,
   selectable. Never `display:none`, `opacity:0` or a 1px font — a merchant
   application dies on hidden verification text. Remove with MERCHANT_NAME. */
.merchant-mark {
  margin-top: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--dim-mono);
}

/* legal consent line shown at login + next to every «Оплатить» button */
.pay-consent { font-size: 11.5px; line-height: 1.5; color: var(--dim);
  text-align: center; margin: 12px 2px 0; }
.pay-consent a { color: var(--accent); text-decoration: none; }
.pay-consent a:hover { text-decoration: underline; }

/* ---- mobile head + spacing (#5a-1) ------------------------------------- */
.pm-m-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 2px; }
.pm-m-title { font-size: 25px; font-weight: 700; letter-spacing: -.03em; }
.pm-m-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  border-radius: 99px; background: rgba(46,218,208,.08); border: 1px solid rgba(46,218,208,.22);
  font: 600 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--accent-text);
  flex: 0 0 auto; }
.pm-m-reassure { font-size: 13px; color: var(--dim); margin-top: -6px; }
.pm-m-lbl { margin-bottom: -3px; }
.pm-terms-list { display: flex; flex-direction: column; gap: 9px; }

/* ======================================================================== *
 *  Mobile 3-step flow (#5a-1/2/3): выбор срока → оформление → способ оплаты. *
 *  Only the active frame renders; each is a scroll column (.pm-ms) plus a    *
 *  fixed bottom dock (.pm-dock). All hidden wholesale on desktop because     *
 *  .hb-pm-mobile is display:none there (fixed docks included).               *
 * ======================================================================== */
.pm-ms { display: flex; flex-direction: column; gap: 14px; }
.pm-ms1 { padding-bottom: 84px; }        /* clear the dock above the tab-bar */
.pm-ms2, .pm-ms3 { padding-bottom: 108px; }  /* clear the flush bottom dock  */

/* the fixed CTA dock — mirrors .tabbar geometry (centered, max-width 480) */
.pm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
  display: flex; justify-content: center;
  padding: 13px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(7,12,24,.78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(146,176,230,.12); }
/* step 1 keeps the tab-bar, so its dock rides just above it */
.pm-dock-tab { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: 12px; }
.pm-dock-in { width: 100%; max-width: 480px; }
.pm-dock .pm-cta { margin-top: 0; }

/* ---- step 1: subscription status card (real /me + the ov ring) --------- */
.hb-ring.xs { width: 86px; height: 86px; }
.hb-ring.xs .hb-ring-num { font-size: 23px; }
.hb-ring.xs .hb-ring-cap { top: calc(50% + 13px); font-size: 8.5px; letter-spacing: .12em; }
.pm-status { position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid rgba(146,176,230,.14);
  background: linear-gradient(150deg, rgba(46,218,208,.12), rgba(13,21,38,.92) 52%);
  padding: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.pm-status-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.07) 50%, transparent 66%);
  transform: translateX(-130%); }
.pm-status-body { position: relative; display: flex; align-items: center; gap: 16px; }
.pm-status-text { min-width: 0; }
.pm-status-title { font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 5px; }
.pm-status-sub { font-size: 13px; color: var(--dim); margin-bottom: 9px; }
.pm-status-mono { font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--dim-mono); }

/* ---- step 2: оформление (header, selected-term summary, keep-line) ----- */
.pm-m-head2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* the back arrow is the only non-text item in a baseline-aligned row, so it
   centres itself rather than hanging off the title's baseline */
.pm-m-head2 .pm-back { align-self: center; }
.pm-m-title2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin-right: auto; }
.pm-step-of { font: 500 11px/1 var(--font-mono); color: var(--dim-mono); flex: 0 0 auto; }
.pm-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 18px; border: 1px solid rgba(46,218,208,.26); background: rgba(46,218,208,.05);
  padding: 14px 15px; }
.pm-sum-txt { min-width: 0; }
.pm-sum-t { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.pm-sum-s { font-size: 12.5px; color: var(--dim-mono); }
.pm-sum-edit { flex: 0 0 auto; font: 600 13px/1 var(--font-ui); color: var(--accent);
  padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(46,218,208,.3);
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-ms2 .pm-total-v { font-size: 30px; }
.pm-keep { font-size: 12px; line-height: 1.5; color: var(--dim-mono); text-align: center; }

/* ---- step 3: способ оплаты (back header, step rail, «К оплате» card) --- */
.pm-s3-top { display: flex; align-items: center; gap: 10px; }
/* Shared by steps 2 and 3: every step past the tariff list must have ONE way
   back that looks the same in both places. (Step 2's «Изменить» inside the
   summary card is a shortcut to the term picker, not the way out of the step.) */
.pm-back { width: 40px; height: 40px; margin-left: -10px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--dim); background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.pm-s3-title { font-size: 15.5px; font-weight: 600; }
.pm-s3-of { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--dim-mono); padding-right: 4px; }
.pm-s3-rail { display: flex; gap: 5px; padding: 12px 0 6px; }
.pm-s3-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(146,176,230,.16); }
.pm-s3-seg.on { background: var(--accent); }
.pm-s3-draw { transform-origin: left; }
.pm-pt { position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(146,176,230,.14);
  background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.9) 54%);
  padding: 18px; margin-top: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pm-pt-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.07) 50%, transparent 66%);
  transform: translateX(-130%); }
.pm-pt-body { position: relative; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; }
.pm-pt-t { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.pm-pt-cap { font: 500 10.5px/1 var(--font-mono); color: var(--dim-mono); }
.pm-pt-v { font: 600 29px/1 var(--font-mono); flex: 0 0 auto;
  text-shadow: 0 0 26px rgba(46,218,208,.35); }
.pm-pt-bar { position: relative; height: 3px; border-radius: 2px;
  background: rgba(146,176,230,.14); overflow: hidden; margin-top: 16px; }
.pm-pt-bar span { position: absolute; left: 0; top: 0; height: 3px; width: 46%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(46,218,208,0), #2edad0, rgba(46,218,208,0)); }

@media (prefers-reduced-motion: no-preference) {
  .pm-status-sheen { animation: hbSheen 7s ease-in-out infinite; }
  .pm-pt-sheen { animation: hbSheen 6.5s ease-in-out infinite; }
  .pm-s3-draw { animation: hbBar 1.1s .2s cubic-bezier(.22,1,.36,1) both; }
  .pm-pt-bar span { animation: hbSlide 2.6s ease-in-out infinite; }
}

/* ======================================================================== *
 *  Desktop tariffs (#8a): term grid on top, order | payment two-column      *
 * ======================================================================== */
.pm-d-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; }
.pm-d-title { font-size: 30px; line-height: 1.05; letter-spacing: -.03em;
  font-weight: 700; margin-bottom: 8px; }
.pm-d-sub { font-size: 13.5px; color: var(--dim); }
.pm-d-status { font: 600 12px/1 var(--font-mono); letter-spacing: .1em;
  color: var(--dim-mono); flex: 0 0 auto; }
.pm-terms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 16px; align-items: stretch; }
.pm-terms-grid .pm-term-wrap { display: flex; }
.pm-terms-grid .pm-term { display: flex; flex-direction: column; }
.pm-d-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.pm-order { display: flex; flex-direction: column; gap: 22px; }
.pm-pay { display: flex; flex-direction: column; gap: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .pm-term-wrap.sel .pm-spin { animation: hbSpin 4.6s linear infinite; }
  .pm-method.sel::before { animation: hbSheen 6.5s ease-in-out infinite; }
}
/* motion off: no rotating border — a clean solid accent edge instead */
@media (prefers-reduced-motion: reduce) {
  .pm-term-wrap.sel .pm-spin { display: none; }
  .pm-term-wrap.sel .pm-term { border-color: var(--accent); }
}

/* ======================================================================== *
 *  «Пополнение баланса» top-up (README §11): a 560px centered modal on      *
 *  desktop, a bottom sheet on mobile — it rides the .slots-dim/.slots-panel *
 *  mechanism (dim rgba(4,8,16,.68)+blur(3px)) with a .topup-panel width     *
 *  modifier. Method tiles reuse the tariff .pm-method radios (names only).  *
 *  Mobile values first (#5a); desktop (#8a) overrides below.               *
 * ======================================================================== */
.topup-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 18px; }
.topup-title { font-size: 23px; line-height: 1.15; letter-spacing: -.03em;
  font-weight: 700; }
.topup-now { font: 500 11px/1 var(--font-mono); color: var(--dim-mono);
  flex: 0 0 auto; }
.topup-amt-lbl { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; }
.topup-min { font-size: 12px; color: var(--dim-mono); }
.topup-amt { display: flex; align-items: center; gap: 11px; padding: 0 17px;
  height: 66px; border-radius: 18px; border: 1px solid rgba(46,218,208,.34);
  background: rgba(7,12,24,.6); box-shadow: 0 0 0 4px rgba(46,218,208,.07); }
.topup-amt-in { flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--text); font: 600 30px/1 var(--font-mono); padding: 0;
  caret-color: var(--accent); }
.topup-amt-in:focus { outline: none; }
.topup-amt-in::-webkit-outer-spin-button,
.topup-amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup-amt-in[type=number] { -moz-appearance: textfield; appearance: textfield; }
.topup-rub { margin-left: auto; font: 500 14px/1 var(--font-mono);
  color: var(--dim-mono); flex: 0 0 auto; }
.topup-presets { display: flex; gap: 8px; margin: 10px 0 20px; }
.topup-chip { flex: 1; text-align: center; padding: 10px 4px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(7,12,24,.5);
  font: 600 12.5px/1 var(--font-mono); color: var(--dim); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s ease; }
.topup-chip.on { border-color: rgba(46,218,208,.34);
  background: rgba(46,218,208,.08); color: var(--accent-text); }
.topup-mlbl { margin-bottom: 11px; }
.topup-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.topup-note { display: flex; gap: 12px; padding: 14px 15px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(7,12,24,.5); margin-bottom: 18px; }
.topup-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-top: 5px; flex: 0 0 auto; box-shadow: 0 0 10px rgba(46,218,208,.9); }
.topup-note-t { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.topup-go { min-height: 0; padding: 16px; border-radius: 14px; font-size: 15.5px; }
.topup-open, .topup-check, .topup-status { margin-top: 12px; }
.topup-status:empty { margin-top: 0; }
.topup-cancel { display: block; width: 100%; text-align: center; margin-top: 4px;
  padding: 13px; background: none; border: 0; cursor: pointer;
  font: 600 14.5px/1 var(--font-ui); color: var(--dim);
  -webkit-tap-highlight-color: transparent; }

@media (min-width: 900px) {   /* desktop #8a: the 560px modal */
  .slots-panel.topup-panel { max-width: 560px; padding: 30px; }
  .topup-head { margin-bottom: 22px; }
  .topup-title { font-size: 25px; }
  .topup-now { font-size: 11.5px; }
  .topup-amt-lbl { margin-bottom: 11px; }
  .topup-min { font-size: 12.5px; }
  .topup-amt { height: 74px; gap: 12px; padding: 0 18px; }
  .topup-amt-in { font-size: 34px; }
  .topup-rub { font-size: 15px; }
  .topup-presets { gap: 9px; margin: 11px 0 22px; }
  .topup-chip { padding: 11px 6px; font-size: 13px; }
  .topup-mlbl { margin-bottom: 12px; }
  .topup-methods { gap: 11px; margin-bottom: 20px; }
  .topup-note { padding: 15px 16px; margin-bottom: 20px; }
  .topup-note-dot { margin-top: 6px; }
  .topup-note-t { font-size: 13px; }
}

@media (min-width: 900px) {
  .hb-pm-desktop { display: block; }
  .hb-pm-mobile  { display: none; }
}

/* ======================================================================== *
 *  «Оплата прошла» — success screen (README §7). One markup; the CSS sizes  *
 *  the mobile fullscreen view vs the desktop centered 640px column.        *
 * ======================================================================== */
.hb-success { text-align: center; padding-top: 12px; }

/* success mark: two diverging pulse waves + a drawing check, gentle bob */
.suc-mark { position: relative; width: 132px; height: 132px; margin: 0 auto 22px; }
.suc-wave { position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(46,218,208,.5); opacity: 0; }
.suc-svgwrap { position: relative; display: block; width: 132px; height: 132px; }
.suc-svg { display: block; width: 132px; height: 132px; }
.suc-circle { fill: rgba(46,218,208,.12); stroke: rgba(46,218,208,.4); stroke-width: 1.5; }
.suc-check {
  fill: none; stroke: var(--accent); stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 52; stroke-dashoffset: 52;   /* one-shot draw, runs always */
  animation: hbCheck .8s .25s cubic-bezier(.22,1,.36,1) forwards;
}

.suc-eyebrow { font: 600 11px/1 var(--font-mono); letter-spacing: .14em;
  color: var(--dim-mono); margin-bottom: 12px; }
.suc-hero { font: 700 46px/1 var(--font-mono); color: var(--accent);
  text-shadow: 0 0 34px rgba(46,218,208,.5); margin-bottom: 12px; }
.suc-head { font-size: 22px; line-height: 1.2; letter-spacing: -.03em;
  font-weight: 700; margin: 0 0 8px; }
.suc-sub { font-size: 14.5px; color: var(--dim); margin: 0 0 24px; }

/* receipt block */
.suc-receipt { position: relative; overflow: hidden; text-align: left;
  border-radius: 20px; border: 1px solid rgba(146,176,230,.14);
  background: rgba(13,21,38,.82); padding: 17px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.suc-rbody { position: relative; }
.suc-rhead { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; }
.suc-rid { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--dim-mono); }
.suc-rdate { font: 500 10.5px/1 var(--font-mono); color: var(--dim-mono); white-space: nowrap; }
.suc-rdiv { height: 1px; margin-bottom: 14px;
  background: repeating-linear-gradient(90deg,
    rgba(146,176,230,.28) 0 4px, transparent 4px 9px); }
.suc-rows { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.suc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.suc-row-k { color: var(--dim); flex: 0 0 auto; }
.suc-row-v { font-weight: 600; text-align: right; min-width: 0; }
.suc-row-v.mono { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.suc-total { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding-top: 11px; margin-top: 4px; border-top: 1px solid var(--line); }
.suc-total-k { font-weight: 600; }
.suc-total-v { font: 600 16px/1 var(--font-mono); color: var(--accent); flex: 0 0 auto; }

/* referral upsell strip */
.suc-ref { position: relative; overflow: hidden; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px; margin-top: 11px;
  padding: 15px 16px; border-radius: 20px; border: 1px solid rgba(46,218,208,.22);
  background: rgba(46,218,208,.05); color: var(--text); cursor: pointer; }
.suc-ref-rate { position: relative; font: 600 15px/1 var(--font-mono);
  color: var(--accent); flex: 0 0 auto; }
.suc-ref-mid { position: relative; flex: 1; min-width: 0; }
.suc-ref-t { font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.suc-ref-bar { height: 3px; border-radius: 2px; background: rgba(146,176,230,.16); overflow: hidden; }
.suc-ref-fill { display: block; height: 3px; border-radius: 2px;
  background: var(--accent); transform-origin: left; }
.suc-ref-chev { position: relative; color: var(--accent); font-size: 17px; flex: 0 0 auto; }

/* CTAs + the «ничего не сгорает» reassurance */
.suc-actions { margin-top: 20px; }
.suc-text { display: block; width: 100%; padding: 12px; border: 0; background: transparent;
  color: var(--accent); font: 600 13.5px/1 var(--font-ui); cursor: pointer; }
.suc-note { margin-top: 14px; font-size: 12.5px; color: var(--dim-mono); text-align: center; }

@media (min-width: 900px) {
  .hb-success { max-width: 640px; margin: 0 auto; padding-top: 8px; }
  .suc-mark { margin-bottom: 20px; }
  .suc-eyebrow { font-size: 10.5px; letter-spacing: .12em; }
  .suc-hero { font-size: 48px; margin: 14px 0 12px; }
  .suc-head { font-size: 30px; line-height: 1.15; margin-bottom: 10px; }
  .suc-sub { font-size: 15px; margin-bottom: 20px; }
  .suc-receipt { border-radius: 22px; padding: 20px 24px; margin-bottom: 2px; }
  .suc-rhead { margin-bottom: 18px; }
  .suc-rid { font-size: 10.5px; }
  .suc-rdate { font-size: 11px; }
  .suc-rows { gap: 11px; }
  .suc-row-k { font-size: 14px; }
  .suc-row-v.mono { font-size: 13.5px; }
  .suc-total { padding-top: 14px; }
  .suc-total-k { font-size: 15px; }
  .suc-total-v { font-size: 22px; text-shadow: 0 0 22px rgba(46,218,208,.4); }
  .suc-ref { gap: 16px; padding: 15px 18px; border-radius: 18px; margin-top: 14px;
    background: linear-gradient(150deg, rgba(46,218,208,.09), rgba(13,21,38,.9) 58%); }
  .suc-ref-rate { font-size: 17px; }
  .suc-ref-t { font-size: 13.5px; margin-bottom: 9px; }
  .suc-ref-bar { height: 4px; border-radius: 3px; }
  .suc-ref-fill { height: 4px; border-radius: 3px; box-shadow: 0 0 12px rgba(46,218,208,.7); }
  .suc-ref-chev { font-size: 18px; }
  .suc-text { font-size: 14px; padding: 11px; }
}

/* README §7: the infinite pulse/bob run only when motion is welcome; the
   global reset below stills them under reduce and the one-shot check draws
   either way. */
@media (prefers-reduced-motion: no-preference) {
  .suc-mark { animation: hbBob 5s ease-in-out infinite; }
  .suc-wave { animation: hbPulse 2.6s ease-out infinite; }
  .suc-wave.w2 { animation-delay: 1.3s; }
}

/* ======================================================================== *
 *  «Ожидание оплаты» — the CryptoBot waiting screen (README §7a).           *
 *  Pixel ref: #8a (desktop, centered 640px column) / #5a-4 (mobile, actions *
 *  pinned to the bottom). Two subtrees; the 561px shell boundary shows one. *
 *  RESKIN ONLY — the poll/fulfill wiring in app.js is unchanged.            *
 * ======================================================================== */
.iw-desktop { display: none; }
.iw-mobile  { display: flex; flex-direction: column; }

/* ---- the wait-ring (shared; size driven by --iw-ring) ------------------ */
.iw-ring { position: relative; width: var(--iw-ring); height: var(--iw-ring);
  margin: 0 auto 18px; }
.iw-ring-wave { position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(46,218,208,.4); }
.iw-ring-spin { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.iw-ring-svg { display: block; width: 100%; height: 100%; }
.iw-ring-trk { fill: none; stroke: rgba(146,176,230,.13); }
.iw-ring-arc { fill: none; stroke: var(--accent); stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(46,218,208,.6)); }
.iw-ring-mid { position: absolute; inset: 0; }
.iw-ring-amt {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; font: 600 26px/1 var(--font-mono);
}
.iw-ring-cap {
  position: absolute; left: 0; right: 0; top: calc(50% + 16px);
  text-align: center; font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .12em; color: var(--dim);
}

/* ---- headings + copy --------------------------------------------------- */
.iw-eyebrow { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--dim-mono); text-transform: uppercase; }
.iw-eyebrow.center { text-align: center; }
.iw-title { font-size: 30px; line-height: 1.15; letter-spacing: -.03em;
  font-weight: 700; margin: 16px 0 10px; }
.iw-desc { font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0 0 22px; }
.iw-desc b { color: var(--text-2); font-weight: 600; }

/* ---- invoice card ------------------------------------------------------ */
.iw-inv { position: relative; overflow: hidden; text-align: left;
  border-radius: 22px; border: 1px solid rgba(146,176,230,.14);
  background: rgba(13,21,38,.82); padding: 20px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); margin-bottom: 12px; }
.iw-inv-body { position: relative; }
.iw-inv-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.iw-inv-id { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--dim-mono); }
.iw-timer { display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1 var(--font-mono); color: var(--accent-text); white-space: nowrap; }
.iw-timer-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 9px rgba(46,218,208,.9); flex: 0 0 auto; }
.iw-inv-div { height: 1px; margin-bottom: 14px;
  background: repeating-linear-gradient(90deg, rgba(146,176,230,.28) 0 4px, transparent 4px 9px); }
.iw-inv-rows { display: flex; flex-direction: column; gap: 11px; }
.iw-inv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.iw-inv-k { color: var(--dim); font-size: 14px; }
.iw-inv-v { font: 500 13.5px/1 var(--font-mono); text-align: right; }
.iw-inv-accent { color: var(--accent-text); }

/* ---- three stages (README §7a) ----------------------------------------- */
.iw-stages { position: relative; display: flex; gap: 16px;
  padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel); margin-bottom: 12px; }
.iw-stages::before { content: ""; position: absolute; left: 56px; right: 56px; top: 33px;
  height: 1px; background: repeating-linear-gradient(90deg,
    rgba(146,176,230,.22) 0 4px, transparent 4px 9px); }
.iw-stage { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.iw-st-ic { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; }
.iw-st-done { background: rgba(46,218,208,.12); border: 1px solid rgba(46,218,208,.34); }
.iw-st-check { width: 12px; height: 12px; display: block; fill: none; stroke: var(--accent);
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.iw-st-active { position: relative; }
.iw-st-wave { position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(46,218,208,.45); }
.iw-st-core { position: absolute; inset: 0; border-radius: 50%; background: rgba(46,218,208,.14);
  border: 1px solid rgba(46,218,208,.4); display: grid; place-items: center; }
.iw-st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(46,218,208,.9); display: block; }
.iw-st-pending { border: 1px dashed rgba(146,176,230,.26); }
.iw-st-t { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.iw-stage-dim .iw-st-t { color: var(--dim); }
.iw-st-s { font-size: 12.5px; line-height: 1.45; color: var(--dim-mono); }

/* ---- primary pay-link + ghost actions ---------------------------------- */
.iw-primary { border-radius: 14px; margin-bottom: 10px; font-size: 15.5px; }
.iw-ghosts { display: flex; gap: 10px; }
.iw-ghost { flex: 1; text-align: center; font: 600 13.5px/1 var(--font-ui);
  color: var(--text); padding: 13px; border-radius: 12px;
  border: 1px solid rgba(146,176,230,.18); background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iw-ghost[disabled] { opacity: .5; pointer-events: none; }
.iw-ghost-cancel { color: var(--dim); }

/* ---- failed / not-found terminal state --------------------------------- */
.iw-failed { text-align: center; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 30px 6px 0; }
.iw-failed-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: var(--danger-soft); background: rgba(255,126,107,.08);
  border: 1px solid rgba(255,126,107,.28); }
.iw-failed-h { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.iw-failed-t { font-size: 14px; line-height: 1.5; color: var(--dim); max-width: 360px; }
.iw-failed .btn { margin-top: 8px; width: auto; min-width: 240px; }

/* ---- mobile specifics -------------------------------------------------- */
.iw-mobile .iw-m-scroll { text-align: center; padding-bottom: 172px; }
.iw-mobile .iw-title-m { font-size: 25px; margin: 14px 0 8px; }
.iw-mobile .iw-desc-m { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }
.iw-mobile .iw-inv, .iw-mobile .iw-stages { text-align: left; }
.iw-inv-m { border-radius: 20px; padding: 16px 17px; margin-bottom: 11px; }
.iw-inv-m .iw-inv-head { margin-bottom: 12px; }
.iw-inv-m .iw-inv-id { font-size: 10px; }
.iw-inv-m .iw-timer { font-size: 10px; gap: 6px; }
.iw-inv-m .iw-inv-div { margin-bottom: 12px; }
.iw-inv-m .iw-inv-rows { gap: 10px; }
.iw-inv-m .iw-inv-k { font-size: 13px; }
.iw-inv-m .iw-inv-v { font-size: 12.5px; }

/* mobile stages: vertical, dashed rail down the left (placed AFTER the base
   rule so the ::before overrides win on source order) */
.iw-stages-m { flex-direction: column; gap: 0; padding: 16px 17px; background: rgba(13,21,38,.7); }
.iw-stages-m::before { left: 29px; right: auto; top: 44px; bottom: 44px;
  width: 1px; height: auto; background: repeating-linear-gradient(180deg,
    rgba(146,176,230,.22) 0 4px, transparent 4px 9px); }
.iw-stages-m .iw-stage { flex-direction: row; gap: 13px; align-items: flex-start;
  padding-bottom: 14px; }
.iw-stages-m .iw-stage:last-child { padding-bottom: 0; }
.iw-stages-m .iw-st-tx { padding-top: 2px; }
.iw-stages-m .iw-st-t { font-size: 14px; margin-bottom: 3px; }
.iw-stages-m .iw-st-s { font-size: 12px; }

/* the pinned bottom action panel (README §7a «закреплённая панель кнопок») */
.iw-actions-m { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 13px 22px calc(12px + env(safe-area-inset-bottom));
  background: rgba(7,12,24,.78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(146,176,230,.12); }
.iw-actions-m .iw-primary { min-height: 50px; }

/* ---- desktop layout ---------------------------------------------------- */
@media (min-width: 900px) {
  .iw-desktop { display: block; }
  .iw-mobile  { display: none; }
  .iw-d-col { max-width: 640px; margin: 0 auto; text-align: center; }
  .iw-d-col .iw-inv, .iw-d-col .iw-stages { text-align: left; }
  .iw-view-end .iw-failed { padding-top: 44px; }
}

/* ---- motion: infinite spin/pulse only when motion is welcome (README) --- */
@media (prefers-reduced-motion: no-preference) {
  .iw-ring-spin { animation: hbSpin 2.6s linear infinite; }
  .iw-ring-wave { animation: hbPulse 3.2s ease-out infinite; }
  .iw-st-wave  { animation: hbPulse 2.2s ease-out infinite; }
}

/* ======================================================================== *
 *  «Мастер подключения» — the 4-step connection wizard (README §5).         *
 *  Pixel ref: #8a (desktop) / #4a (mobile). One responsive markup; the CSS  *
 *  swaps the desktop 4-column rail for the mobile progress bar and reflows   *
 *  the two-column steps into a single column on the phone.                   *
 * ======================================================================== */

/* ---- head (back + title + subtitle + desktop slot badge) --------------- */
.wiz-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.wiz-back {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; background: transparent; border: 0;
  color: var(--dim); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wiz-htext { min-width: 0; flex: 1; padding-top: 3px; }
.wiz-title { font-size: 24px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.wiz-sub { font-size: 13.5px; line-height: 1.45; color: var(--dim); margin-top: 6px; }
.wiz-slot { display: none; }   /* desktop-only (shown in the min-width block) */

/* ---- the rail: desktop 4-col grid, mobile progress bar ----------------- */
.wiz-railwrap { margin-bottom: 22px; }
.wiz-rail { display: none; }   /* desktop-only */
.wiz-step { padding-top: 14px; border-top: 2px solid rgba(146,176,230,.14); }
.wiz-step.done, .wiz-step.now { border-top-color: var(--accent); }
.wiz-step-k { font-size: 10.5px; letter-spacing: .12em; color: var(--dim-mono); }
.wiz-step.done .wiz-step-k, .wiz-step.now .wiz-step-k { color: var(--accent); }
.wiz-step-t { font-size: 15px; font-weight: 600; margin-top: 9px; color: var(--text); }
.wiz-step.future .wiz-step-t { color: var(--dim); }

.wiz-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wiz-prog-now { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.wiz-prog-c { font-size: 11px; color: var(--dim-mono); letter-spacing: .04em; flex: 0 0 auto; }
.wiz-progbar { display: flex; gap: 5px; }
.wiz-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(146,176,230,.14); }
.wiz-seg.done, .wiz-seg.now { background: var(--accent); }

/* ---- step 01: this device vs another ----------------------------------- */
.wiz-choices { display: grid; gap: 11px; }
.wiz-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 20px; border-radius: 20px; border: 1px solid rgba(146,176,230,.14);
  background: var(--panel); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wiz-choice.sel {
  border-color: var(--accent);
  background: linear-gradient(160deg, #12253f, var(--panel));
}
.wiz-choice-ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center; color: var(--dim);
  border: 1px solid rgba(146,176,230,.16);
}
.wiz-choice.sel .wiz-choice-ic {
  color: var(--accent); border-color: var(--accent-border); background: rgba(46,218,208,.12);
}
.wiz-choice-b { flex: 1; min-width: 0; }
.wiz-choice-t { font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.wiz-choice-s { font-size: 11px; letter-spacing: .04em; color: var(--dim-mono); }
.wiz-choice.sel .wiz-choice-s { color: var(--accent); }
.wiz-choice-go { flex: 0 0 auto; color: var(--dim); display: inline-flex; }
.wiz-choice.sel .wiz-choice-go { color: var(--accent); }

/* ---- step 02: six platform tiles --------------------------------------- */
.wiz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
.wiz-tile {
  display: block; text-align: left; width: 100%;
  padding: 18px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wiz-tile.sel {
  border-color: rgba(46,218,208,.34);
  background: linear-gradient(160deg, rgba(46,218,208,.1), rgba(13,21,38,.94) 58%);
}
.wiz-tile-ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 26px;
  border-radius: 12px; border: 1px solid rgba(146,176,230,.16); color: var(--dim);
}
.wiz-tile.sel .wiz-tile-ic {
  color: var(--accent); border-color: var(--accent-border); background: rgba(46,218,208,.12);
}
.wiz-tile-ic img { width: 22px; height: 22px; object-fit: contain; display: block; }
.wiz-tile-t { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 5px; }
.wiz-tile-m { font-size: 10.5px; letter-spacing: .12em; color: var(--dim-mono); }
.wiz-tile.sel .wiz-tile-m { color: var(--accent); }
.wiz-tile.soon {
  border: 1px dashed rgba(146,176,230,.2); background: rgba(146,176,230,.03);
  opacity: .62; cursor: default; pointer-events: none;
}
.wiz-tile.soon .wiz-tile-ic { border-style: dashed; }
.wiz-tile-h { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.wiz-tile.soon .wiz-tile-t { margin-bottom: 0; color: var(--dim); }
.wiz-soon {
  font-size: 9px; letter-spacing: .08em; padding: 4px 7px; border-radius: 6px;
  border: 1px solid rgba(146,176,230,.22); color: var(--dim-mono);
}

/* ---- the accent note bar («один конфиг — одно устройство») -------------- */
.wiz-note {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel); font-size: 13.5px; line-height: 1.5; color: var(--dim);
}
.wiz-note-dot {
  width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(46,218,208,.9);
}

/* ---- steps 03 / 04: the two-column body -------------------------------- */
.wiz-cols { display: flex; flex-direction: column; gap: 12px; }
.wiz .hb-panel { padding: 20px; }
.wiz-col, .wiz-instr, .wiz-qrpanel { display: flex; flex-direction: column; }

/* app radio rows */
.wiz-apps { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.wiz-app {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; padding: 18px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wiz-app.sel { border-color: rgba(46,218,208,.34); background: rgba(46,218,208,.07); }
.wiz-app-ic {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 15px;
  display: grid; place-items: center; color: var(--dim);
  border: 1px solid rgba(146,176,230,.16);
}
.wiz-app.sel .wiz-app-ic {
  color: var(--accent); border-color: var(--accent-border); background: rgba(46,218,208,.12);
}
.wiz-app-b { flex: 1; min-width: 0; }
.wiz-app-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.wiz-app-t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.wiz-rec {
  font-size: 9px; letter-spacing: .06em; padding: 4px 7px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent);
}
.wiz-app-s { font-size: 10.5px; letter-spacing: .12em; color: var(--dim-mono); }
.wiz-app.sel .wiz-app-s { color: var(--accent-text); }
.wiz-radio {
  width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid rgba(146,176,230,.26);
}
.wiz-radio.on {
  border: 5px solid var(--accent); background: var(--on-accent);
  box-shadow: 0 0 0 4px rgba(46,218,208,.14);
}
.wiz-app-warn {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5; font-weight: 600;
  color: #ffb3a5; padding: 10px 12px; border-radius: 11px;
  background: rgba(255,126,107,.08); border: 1px solid rgba(255,126,107,.22);
}
.wiz-hint {
  display: flex; gap: 13px; margin-top: 12px; padding: 16px 17px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel-soft);
  font-size: 13px; line-height: 1.5; color: var(--dim);
}
.wiz-hint b { color: var(--text-2); font-weight: 600; }
.wiz-hint-dot {
  width: 6px; height: 6px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(46,218,208,.9);
}
.wiz-app-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.wiz-app-cta .btn-primary { min-height: 52px; }

/* side «другие варианты» rows */
.wiz-sides { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.wiz-side {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 18px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel-soft); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wiz-side.accent { border-color: rgba(46,218,208,.26); background: rgba(46,218,208,.06); }
.wiz-side-ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; color: var(--dim);
  border: 1px solid rgba(146,176,230,.16);
}
.wiz-side.accent .wiz-side-ic {
  color: var(--dim); border-color: var(--accent-border); background: rgba(46,218,208,.1);
}
.wiz-side-b { flex: 1; min-width: 0; }
.wiz-side-t { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.wiz-side-s { font-size: 12.5px; color: var(--dim-mono); }
.wiz-side-go { flex: 0 0 auto; color: var(--dim-mono); font-size: 18px; }
.wiz-side.accent .wiz-side-go { color: var(--accent); }

/* ---- step 04 (pre-mint): the location eyebrow -------------------------- */
.wiz-loc-eyebrow { margin-bottom: 4px; }

/* ---- step 04 (post-mint): «что сделать» steps + the QR panel ------------ */
.wiz-cols-04 .wiz-qrpanel { order: -1; }   /* QR first on the phone (primary import) */
.wiz-dos { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; }
.wiz-do { display: flex; gap: 16px; align-items: flex-start; }
.wiz-do-n {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; color: var(--accent);
  background: rgba(46,218,208,.10); border: 1px solid rgba(46,218,208,.26);
}
.wiz-do-b { min-width: 0; padding-top: 3px; }
.wiz-do-t { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.wiz-do-s { font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.wiz-do-s b { color: var(--text-2); font-weight: 600; }
.wiz-instr-cta { margin-top: 22px; }

.wiz-qrpanel { align-items: center; }
.wiz-qr-eyebrow { color: var(--accent-text); align-self: flex-start; }
.wiz-qr {
  box-sizing: border-box; width: 196px; height: 196px; margin: 20px 0;
  border-radius: 16px; background: #e8eef9; padding: 12px;
  box-shadow: 0 0 40px rgba(46,218,208,.22);
}
.wiz-qr img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.wiz-qr-foot { width: 100%; margin-top: auto; }
.wiz-file {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; margin-bottom: 12px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(7,12,24,.6);
}
.wiz-file-ic { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.wiz-file-n {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiz-qr-btns { display: flex; gap: 10px; }
.wiz-qr-btns .gbtn { flex: 1; }
.wiz-qr-note { margin-top: 10px; text-align: center; font-size: 10px; letter-spacing: .12em; color: var(--dim-mono); }

/* config-file card on the done step (download .conf → import) */
.wiz-filecard { display: flex; flex-direction: column; gap: 18px; }
.wiz-fc-head { display: flex; align-items: center; gap: 14px; }
.wiz-fc-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(46,218,208,.10); color: var(--accent);
}
.wiz-fc-name {
  flex: 1; min-width: 0; font-size: 14.5px; color: var(--text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiz-fc-dl { width: 100%; }
.wiz-side-toggle { margin-top: 24px; }

/* the bottom wizard action button sits right-aligned & compact on desktop */
.wiz > .btn-primary { min-height: 52px; }

/* ======================================================================== *
 *  Wizard — desktop (#8a): the 4-column rail, the two-column steps.         *
 * ======================================================================== */
@media (min-width: 900px) {
  .wiz-head { align-items: flex-end; gap: 16px; margin-bottom: 20px; }
  .wiz-back { border: 1px solid rgba(146,176,230,.16); }
  .wiz-title { font-size: 30px; letter-spacing: -.03em; }
  .wiz-slot {
    display: block; flex: 0 0 auto; font-size: 12px; letter-spacing: .1em;
    color: var(--accent-text); padding-bottom: 6px;
  }
  .wiz-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .wiz-prog { display: none; }

  .wiz-choices { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
  .wiz-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
  .wiz-tile { padding: 22px; }
  .wiz-tile-ic { width: 46px; height: 46px; border-radius: 14px; }
  .wiz-tile-t { font-size: 17px; }

  .wiz-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; }
  .wiz .hb-panel { padding: 28px; }
  .wiz-cols-04 .wiz-qrpanel { order: 0; }   /* steps left, QR right on desktop */
  .wiz-app-cta { margin-top: auto; }
  .wiz-instr-cta { margin-top: auto; }

  /* footer action: compact, bottom-right (mirrors the mock's note-bar CTA) */
  .wiz > .btn-primary { max-width: 260px; margin-left: auto; }
}
/* mono step labels keep the JetBrains face even in these scoped blocks */
.wiz .mono { font-family: var(--font-mono); }

/* ======================================================================== *
 *  Рефералы (README §8) — desktop #8a + a distinct mobile #6a + the         *
 *  «Ваша ссылка» share sheet. Both subtrees render; the 900px shell         *
 *  boundary shows exactly one (.hb-ref-desktop / .hb-ref-mobile).           *
 * ======================================================================== */
.hb-referral { --ref-mono: var(--font-mono); }
.hb-ref-desktop { display: none; }
.hb-ref-mobile  { display: block; }

/* ---- shared bits -------------------------------------------------------- */
.hb-ref-lbl {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--dim-mono); text-transform: uppercase;
}
.hb-ref-sheen {                            /* running blik on accent panels */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%,
    rgba(255,255,255,.07) 50%, transparent 66%);
  transform: translateX(-130%);
}
/* the ~10 % rate ring (reuses the foundation's hb-ring-prog / hbDrawBig) */
.hb-ref-ring { position: relative; flex: none; }
.hb-ref-ring-svg { display: block; }
.hb-ref-ring-c {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.hb-ref-ring-n { font: 600 21px/1 var(--font-mono); color: var(--accent);
  text-shadow: 0 0 18px rgba(46,218,208,.55); }
.hb-ref-ring-cap { font: 500 8.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--dim); margin-top: 5px; }

/* tier chip (both form factors; 5 real backend tiers) */
.hb-ref-chip {
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(13,21,38,.7); padding: 12px 6px; text-align: center;
}
.hb-ref-chip.on { border-color: rgba(46,218,208,.34); background: rgba(46,218,208,.07); }
.hb-ref-chip-v { font: 600 14px/1 var(--font-mono); color: var(--dim); margin-bottom: 6px; }
.hb-ref-chip.on .hb-ref-chip-v { color: var(--accent); }
.hb-ref-chip-l { font: 500 8.5px/1.2 var(--font-mono); color: var(--dim-mono); }

/* progress «Ещё N друзей до X %» + bar */
.hb-ref-prog-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; gap: 8px; }
.hb-ref-prog-l { font-size: 13px; color: var(--dim); }
.hb-ref-prog-l b { color: var(--text); font-weight: 600; }
.hb-ref-prog-f { font: 500 10.5px/1 var(--font-mono); color: var(--dim-mono); flex: none; }
.hb-ref-prog-track { height: 4px; border-radius: 3px; background: rgba(146,176,230,.14); overflow: hidden; }
.hb-ref-prog-fill { display: block; height: 4px; border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 12px rgba(46,218,208,.7); }

/* the real referral link in a dashed panel + «КОПИЯ» */
.hb-ref-link {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  border: 1px dashed rgba(46,218,208,.4); background: rgba(46,218,208,.05);
  border-radius: 16px; padding: 15px 16px;
}
.hb-ref-link-t { position: relative; flex: 1; min-width: 0;
  font: 600 12.5px/1.4 var(--font-mono); color: var(--accent-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-ref-copy { position: relative; flex: none; cursor: pointer; border: 0;
  font: 600 11px/1 var(--font-mono); color: var(--on-accent);
  background: var(--accent); padding: 8px 12px; border-radius: 8px; }

/* ---- MOBILE (#6a) ------------------------------------------------------- */
.hb-ref-mobile { padding-bottom: 76px; }   /* clear the docked CTA */
.hb-ref-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.hb-ref-mh { font-size: 25px; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.hb-ref-mchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px;
  background: rgba(46,218,208,.08); border: 1px solid rgba(46,218,208,.22);
  font: 600 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--accent-text); flex: none;
}
.hb-ref-mchip.off { background: rgba(146,176,230,.06); border-color: var(--line); color: var(--dim); }
.hb-ref-mchip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; }
.hb-ref-mchip.off .hb-ref-mchip-dot { background: rgba(146,176,230,.4); }

.hb-ref-mrate {
  position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid rgba(146,176,230,.14);
  background: linear-gradient(150deg, rgba(46,218,208,.12), rgba(13,21,38,.92) 52%);
  padding: 18px; margin-bottom: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.hb-ref-mrate-top { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.hb-ref-mrate-tx { min-width: 0; }
.hb-ref-mrate-h { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.hb-ref-mrate-s { font-size: 13px; line-height: 1.5; color: var(--dim); }
.hb-ref-mrate .hb-ref-prog { position: relative; }

.hb-ref-mladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 18px; }

.hb-ref-mbal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 18px; background: rgba(13,21,38,.7);
  padding: 16px 17px; margin-bottom: 11px;
}
.hb-ref-mbal-v { font: 600 22px/1 var(--font-mono); margin-top: 9px; }
.hb-ref-mwd { flex: none; padding: 11px 16px; border-radius: 11px; font-size: 13px; }
.hb-ref-mwd.is-soft { color: var(--dim); }
.hb-ref-mxfer { margin: -3px 0 11px; padding-left: 2px; font-size: 12.5px; color: var(--dim); }
.hb-ref-mxfer .linkbtn { margin-left: 0; }

.hb-ref-mlist { border: 1px solid var(--line); border-radius: 18px; background: rgba(13,21,38,.7); overflow: hidden; margin-bottom: 11px; }
.hb-ref-lrow { display: flex; align-items: center; gap: 13px; padding: 15px 17px; }
.hb-ref-lrow + .hb-ref-lrow { border-top: 1px solid var(--line-soft); }
.hb-ref-ldot { width: 7px; height: 7px; border-radius: 50%; background: rgba(146,176,230,.35); display: block; flex: none; }
.hb-ref-ldot.on { background: var(--accent); box-shadow: 0 0 10px rgba(46,218,208,.9); }
.hb-ref-lid { flex: 1; min-width: 0; }
.hb-ref-lt { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.hb-ref-lt.muted { color: var(--dim); }
.hb-ref-ls { font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--dim-mono); }
.hb-ref-lv { font: 600 13.5px/1 var(--font-mono); color: var(--accent); flex: none; }
.hb-ref-lv.dim { color: var(--dim-mono); }

.hb-ref-note { font-size: 12px; line-height: 1.5; color: var(--dim-mono); padding: 0 2px; }

.hb-ref-dock {
  position: fixed; left: 0; right: 0; z-index: 29;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  padding: 13px 16px 12px; background: rgba(7,12,24,.78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.hb-ref-dockcta { width: 100%; max-width: 480px; padding: 16px; border-radius: 14px;
  font-size: 15.5px; font-weight: 700; }

/* ---- «Ваша ссылка» share sheet + QR sheet ------------------------------- */
.hb-share { position: relative; }
.hb-share-glow {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 120px; pointer-events: none;
  background: radial-gradient(circle, rgba(46,218,208,.35), transparent 66%);
  filter: blur(40px);
}
.hb-share-h { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 6px; position: relative; }
.hb-share-h.center { text-align: center; }
.hb-share-sub { font-size: 13.5px; line-height: 1.5; color: var(--dim); margin-bottom: 16px; position: relative; }
.hb-share-sub.center { text-align: center; }
.hb-share-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 14px 0 4px; }
.hb-share-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer;
  padding: 14px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(13,21,38,.7); color: var(--dim);
}
.hb-share-tile.on { border-color: rgba(46,218,208,.28); background: rgba(46,218,208,.06); color: var(--accent-text); }
.hb-share-tile-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--dim); }
.hb-share-tile.on .hb-share-tile-ic { border-color: rgba(46,218,208,.3); background: rgba(46,218,208,.12); color: var(--accent); }
.hb-share-tile-l { font-size: 11.5px; font-weight: 600; }
.hb-share-note {
  display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(13,21,38,.6);
}
.hb-share-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block;
  margin-top: 6px; flex: none; box-shadow: 0 0 10px rgba(46,218,208,.9); }
.hb-share-note div { font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.hb-share-cta { padding: 16px; border-radius: 14px; font-size: 15.5px; font-weight: 700; }
.hb-ref-qrwrap { display: flex; justify-content: center; margin: 6px 0 4px; }
.hb-ref-qr {
  width: 220px; height: 220px; border-radius: 16px; background: #fff; padding: 12px;
  display: grid; place-items: center; box-shadow: 0 0 40px rgba(46,218,208,.22);
}
.hb-ref-qr svg { width: 100%; height: 100%; display: block; }
.hb-ref-qr-fallback { color: #05080f; text-align: center; font-size: 12px; display: grid; gap: 8px; place-items: center; }
.hb-ref-qrlink { font: 600 11.5px/1.4 var(--font-mono); color: var(--accent-text); text-align: center;
  word-break: break-all; padding: 0 8px; }
.hb-ref-qrcopy { width: 100%; gap: 8px; }

/* ---- DESKTOP (#8a) — the full Рефералы panel ---------------------------- */
@media (min-width: 900px) {
  .hb-ref-desktop { display: block; }
  .hb-ref-mobile  { display: none; }

  .hb-ref-dhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
  .hb-ref-dh1 { font-size: 30px; line-height: 1.05; letter-spacing: -.03em; font-weight: 700; margin: 0 0 8px; }
  .hb-ref-dsub { font-size: 13.5px; color: var(--dim); }
  .hb-ref-drate { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--accent-text); flex: none; white-space: nowrap; }

  .hb-ref-dgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
  .hb-ref-dleft { display: flex; flex-direction: column; gap: 16px; }

  .hb-ref-dratecard {
    position: relative; overflow: hidden; border: 1px solid rgba(46,218,208,.22);
    border-radius: 24px; background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.94) 58%);
    padding: 30px;
  }
  .hb-ref-drate-top { position: relative; display: flex; align-items: center; gap: 32px; }
  .hb-ref-dratecard .hb-ref-ring-n { font-size: 34px; }
  .hb-ref-dratecard .hb-ref-ring-cap { font-size: 10px; margin-top: 8px; }
  .hb-ref-drate-tx { min-width: 0; }
  .hb-ref-drate-h { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; }
  .hb-ref-drate-s { font-size: 14px; line-height: 1.55; color: var(--dim); margin-bottom: 18px; }
  .hb-ref-drate-tx .hb-ref-prog-l { font-size: 13.5px; }
  .hb-ref-drate-tx .hb-ref-prog-track,
  .hb-ref-drate-tx .hb-ref-prog-fill { height: 5px; }

  .hb-ref-dladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
  .hb-ref-dladder .hb-ref-chip { border-radius: 16px; padding: 16px 8px; }
  .hb-ref-dladder .hb-ref-chip-v { font-size: 16px; color: var(--text); }
  .hb-ref-dladder .hb-ref-chip.on .hb-ref-chip-v { color: var(--accent); }
  .hb-ref-dladder .hb-ref-chip-l { font-size: 9.5px; letter-spacing: .06em; }

  .hb-ref-link-d { border-radius: 18px; padding: 18px 19px; }
  .hb-ref-link-d .hb-ref-link-t { font-size: 13.5px; }
  .hb-ref-link-d .hb-ref-copy { font-size: 11.5px; padding: 10px 14px; border-radius: 9px; }

  .hb-ref-dright { display: flex; flex-direction: column; gap: 16px; }
  .hb-ref-dstats, .hb-ref-dhow {
    border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: 22px;
  }
  .hb-ref-dstatrow { display: flex; gap: 16px; }
  .hb-ref-dstat { flex: 1; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(7,12,24,.5); }
  .hb-ref-dstat-v { font: 600 26px/1 var(--font-mono); margin-top: 14px; }
  .hb-ref-dstat-v.accent { color: var(--accent); text-shadow: 0 0 20px rgba(46,218,208,.4); }
  .hb-ref-dacts { display: flex; gap: 10px; margin-top: 16px; }
  .hb-ref-dact { flex: 1; padding: 12px; font-size: 13px; }
  .hb-ref-dstats .hb-ref-note { margin-top: 14px; }
  .hb-ref-dhow { display: flex; flex-direction: column; gap: 14px; }
  .hb-ref-how-step { display: flex; gap: 12px; align-items: flex-start; }
  .hb-ref-how-n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(46,218,208,.1); border: 1px solid rgba(46,218,208,.26);
    font: 600 10.5px/1 var(--font-mono); color: var(--accent); }
  .hb-ref-how-t { font-size: 13.5px; line-height: 1.5; color: var(--dim); }
  .hb-ref-dinvite { padding: 16px; border-radius: 13px; font-size: 15.5px; font-weight: 700; }

  /* the share sheet becomes a centred modal on desktop (openSheet default is
     a sheet; here the invite CTA still opens the sheet — cap its width). */
  .hb-share { max-width: 520px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hb-referral .hb-ref-sheen { animation: hbSheen 7s ease-in-out infinite; }
  .hb-share-glow { animation: hbGlow 6s ease-in-out infinite; }
}

/* ======================================================================== *
 *  Настройки (README §9) — desktop #8a + a distinct mobile #6a. Both        *
 *  subtrees render; the 900px shell boundary shows exactly one              *
 *  (.hb-set-desktop / .hb-set-mobile). Reads /lk/api/me; a RESKIN that      *
 *  preserves every settings action (email / telegram / reissue / logout).   *
 * ======================================================================== */
.hb-set-desktop { display: none; }
.hb-set-mobile  { display: block; }

/* ---- shared bits -------------------------------------------------------- */
.hb-set-lbl {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--dim-mono); text-transform: uppercase;
}
.hb-set-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  display: block; flex: none; box-shadow: 0 0 10px rgba(46,218,208,.9);
}
.hb-set-chev { color: var(--dim-mono); font-size: 17px; flex: none; line-height: 1; }
/* the ON, read-only reminder switch (README §9 honesty) */
.hb-set-toggle {
  width: 46px; height: 27px; border-radius: 99px; flex: none; padding: 0;
  border: 1px solid rgba(46,218,208,.4); background: rgba(46,218,208,.16);
  position: relative; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(46,218,208,.05);
  -webkit-tap-highlight-color: transparent;
}
.hb-set-knob {
  position: absolute; top: 2.5px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); display: block;
  box-shadow: 0 0 12px rgba(46,218,208,.8);
}

/* ---- MOBILE (#6a) ------------------------------------------------------- */
.hb-set-mh { font-size: 25px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 16px; }
.hb-set-mprofile {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px;
  border-radius: 22px; border: 1px solid rgba(146,176,230,.14);
  background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.92) 54%);
  padding: 17px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hb-set-mavatar {
  position: relative; width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: rgba(46,218,208,.14); border: 1px solid rgba(46,218,208,.34);
  display: grid; place-items: center; font: 600 19px/1 var(--font-mono);
  color: var(--accent); box-shadow: 0 0 24px -6px rgba(46,218,208,.6);
}
.hb-set-pid { position: relative; flex: 1; min-width: 0; }
.hb-set-mname { font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-set-pmono { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .06em;
  color: var(--dim-mono); word-break: break-word; }

.hb-set-mlist {
  border: 1px solid var(--line); border-radius: 20px; background: rgba(13,21,38,.7);
  overflow: hidden; margin-bottom: 18px;
}
.hb-set-mrow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 17px; background: none; border: 0; color: var(--text); font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hb-set-mrow + .hb-set-mrow { border-top: 1px solid var(--line-soft); }
.hb-set-mrow.static { cursor: default; }
.hb-set-mrow:not(.static):active { background: rgba(146,176,230,.05); }
.hb-set-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid;
  place-items: center; border: 1px solid rgba(146,176,230,.16); color: var(--dim);
}
.hb-set-ic.accent { background: rgba(46,218,208,.1); border-color: rgba(46,218,208,.26);
  color: var(--accent); }
.hb-set-mbody { flex: 1; min-width: 0; }
.hb-set-mt { display: flex; align-items: center; gap: 8px; font-size: 14.5px;
  font-weight: 600; }
.hb-set-ms { font-size: 12.5px; color: var(--dim-mono); margin-top: 3px;
  word-break: break-word; }
.hb-set-mlang { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.hb-set-mlang-v { font-size: 13.5px; color: var(--dim); }

.hb-set-logout {
  min-height: 0; gap: 11px; padding: 16px; border-radius: 16px; font-size: 15px;
  font-weight: 700; border-color: rgba(255,126,107,.34); color: var(--danger);
  background: rgba(255,126,107,.05);
}
.hb-set-logout svg { stroke: var(--danger); }
.hb-set-foot { font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em;
  color: var(--dim-mono); text-align: center; margin-top: 16px; }

/* the honesty sheets (reminder / язык) */
.hb-set-langpick {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(46,218,208,.28);
  background: rgba(46,218,208,.06);
}
.hb-set-langpick-l { font-size: 15px; font-weight: 600; }
.hb-set-langpick-on { color: var(--accent); display: inline-flex; }

/* ---- DESKTOP (#8a) ------------------------------------------------------ */
@media (min-width: 900px) {
  .hb-set-desktop { display: block; }
  .hb-set-mobile  { display: none; }

  .hb-set-dhead { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 18px; }
  .hb-set-dh1 { font-size: 30px; line-height: 1.05; letter-spacing: -.03em;
    font-weight: 700; margin: 0 0 8px; }
  .hb-set-dsub { font-size: 13.5px; color: var(--dim); }
  .hb-set-ver { font: 600 12px/1 var(--font-mono); letter-spacing: .1em;
    color: var(--dim-mono); flex: none; white-space: nowrap; }

  .hb-set-dgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px;
    align-items: stretch; }
  .hb-set-dleft { display: flex; flex-direction: column; gap: 16px; }
  .hb-set-dright { display: flex; flex-direction: column; gap: 16px; }

  .hb-set-profile {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
    border: 1px solid rgba(46,218,208,.22); border-radius: 22px; padding: 26px;
    background: linear-gradient(150deg, rgba(46,218,208,.1), rgba(13,21,38,.94) 58%);
  }
  .hb-set-avatar {
    position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none;
    background: rgba(46,218,208,.14); border: 1px solid rgba(46,218,208,.34);
    display: grid; place-items: center; font: 600 22px/1 var(--font-mono);
    color: var(--accent);
  }
  .hb-set-pname { font-size: 21px; font-weight: 700; letter-spacing: -.02em;
    margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hb-set-profile .hb-set-pmono { font-size: 10.5px; letter-spacing: .12em; }
  .hb-set-linked {
    position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 7px 13px; border-radius: 99px; background: rgba(46,218,208,.10);
    border: 1px solid rgba(46,218,208,.24); font-size: 12.5px; font-weight: 600;
    color: var(--accent-text);
  }
  .hb-set-linked .hb-set-dot { width: 5px; height: 5px; box-shadow: none; }

  .hb-set-list { border: 1px solid var(--line); border-radius: 22px;
    background: var(--panel); overflow: hidden; }
  .hb-set-drow {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 18px 20px; background: none; border: 0;
    border-bottom: 1px solid var(--line-soft); color: var(--text); font: inherit;
    cursor: pointer;
  }
  .hb-set-drow:last-child { border-bottom: 0; }
  .hb-set-drow.static { cursor: default; }
  .hb-set-drow:not(.static):hover { background: rgba(146,176,230,.04); }
  .hb-set-dbody { flex: 1; min-width: 0; }
  .hb-set-dt { display: flex; align-items: center; gap: 9px; font-size: 15px;
    font-weight: 600; }
  .hb-set-ds { font-size: 13px; color: var(--dim-mono); margin-top: 4px;
    word-break: break-word; }
  .hb-set-lang { font: 500 12px/1 var(--font-mono); color: var(--dim); flex: none; }
  .hb-set-drow .hb-set-toggle {   /* desktop: solid teal fill, dark knob */
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 18px rgba(46,218,208,.45);
  }
  .hb-set-drow .hb-set-knob { background: var(--on-accent); box-shadow: none; }

  .hb-set-logout { min-height: 0; margin-top: auto; gap: 12px; padding: 18px;
    font-size: 15px; font-weight: 600; color: var(--danger-soft); }

  /* right-rail cards */
  .hb-set-side { border: 1px solid var(--line); border-radius: 20px;
    background: var(--panel); padding: 22px; }
  .hb-set-side-top { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; }
  .hb-set-side-chip { display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
  .hb-set-side-chip.off { color: var(--dim-mono); }
  .hb-set-side-chip .hb-set-dot { width: 5px; height: 5px; }
  .hb-set-leads { display: flex; flex-direction: column; gap: 13px; }
  .hb-set-lead { display: flex; align-items: baseline; gap: 10px; }
  .hb-set-lead-l { color: var(--dim); font-size: 14px; }
  .hb-set-lead-dash { flex: 1; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(146,176,230,.3) 0 3px, transparent 3px 7px); }
  .hb-set-lead-v { font: 500 13.5px/1 var(--font-mono); }
  .hb-set-side-cta { margin-top: 18px; width: 100%; }
  .hb-set-dright .hb-set-side:nth-child(2) { flex: 1; display: flex;
    flex-direction: column; gap: 14px; }
  .hb-set-side-h { font-size: 15px; font-weight: 600; }
  .hb-set-side-p { font-size: 13.5px; line-height: 1.55; color: var(--dim); }
  .hb-set-dright .hb-set-side:nth-child(2) .hb-set-side-cta { margin-top: auto; }

  .hb-set-configs {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
    padding: 20px; color: var(--text); font: inherit; cursor: pointer;
  }
  .hb-set-configs:hover { background: rgba(146,176,230,.04); }
  .hb-set-configs-ic { width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: grid; place-items: center; border: 1px solid rgba(146,176,230,.16);
    color: var(--dim); }
  .hb-set-configs-tx { flex: 1; min-width: 0; }
  .hb-set-configs-t { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
  .hb-set-configs-s { font-size: 12.5px; color: var(--dim-mono); }
}

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