/* Y666 — CSS */

/* ============================================================
     HIDE NATIVE TILDA FORM (Способ 1)
     ============================================================ */
  .t-form-element-block,
  .t396__elem[data-elem-type="form"],
  div[class*="t-form_block"]:not(.t-form_block--exclude) {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root[data-theme="dark"] {
    --bg: #04040a;
    --bg-deep: #020205;
    --bg-elev: #0c0c14;
    --bg-card: rgba(18, 18, 26, 0.55);
    --bg-card-solid: #0e0e16;
    --bg-card-active: rgba(28, 18, 12, 0.7);
    --bg-input: rgba(12, 12, 20, 0.8);
    --fg: #f6f6f8;
    --fg-soft: #d4d4dc;
    --fg-muted: #9090a0;
    --fg-subtle: #5a5a68;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-active: #ff6b1a;
    --accent: #ff6b1a;
    --accent-2: #ff4500;
    --accent-3: #ffaa55;
    --accent-hover: #ff8133;
    --accent-soft: rgba(255, 107, 26, 0.12);
    --accent-glow: rgba(255, 107, 26, 0.4);
    --accent-deep-glow: rgba(255, 69, 0, 0.6);
    --success: #34d399;
    --success-glow: rgba(52, 211, 153, 0.25);
    --warn: #fbbf24;
    --warn-strong: #f59e0b;
    --warn-glow: rgba(251, 191, 36, 0.4);
    --warn-soft: rgba(251, 191, 36, 0.08);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.8);
    --shadow-pop: 0 30px 80px -20px rgba(255, 107, 26, 0.55);
    --glass-blur: 22px;
    --grid-color: rgba(255, 255, 255, 0.03);
  }
  :root[data-theme="light"] {
    --bg: #fff7ee;
    --bg-deep: #fff1de;
    --bg-elev: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-card-solid: #ffffff;
    --bg-card-active: rgba(255, 240, 220, 0.85);
    --bg-input: rgba(255, 255, 255, 0.92);
    --fg: #0a0a0f;
    --fg-soft: #27272a;
    --fg-muted: #52525b;
    --fg-subtle: #71717a;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);
    --border-active: #ea580c;
    --accent: #ea580c;
    --accent-2: #c2410c;
    --accent-3: #fb923c;
    --accent-hover: #c2410c;
    --accent-soft: rgba(234, 88, 12, 0.1);
    --accent-glow: rgba(234, 88, 12, 0.32);
    --accent-deep-glow: rgba(234, 88, 12, 0.45);
    --success: #059669;
    --success-glow: rgba(5, 150, 105, 0.2);
    --warn: #d97706;
    --warn-strong: #b45309;
    --warn-glow: rgba(217, 119, 6, 0.32);
    --warn-soft: rgba(217, 119, 6, 0.08);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 50px -20px rgba(15, 23, 42, 0.18);
    --shadow-pop: 0 30px 60px -15px rgba(234, 88, 12, 0.4);
    --glass-blur: 18px;
    --grid-color: rgba(15, 23, 42, 0.04);
  }

  /* ============================================================
     RESET
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100dvh;
    position: relative;
    transition: background 0.5s cubic-bezier(.16,1,.3,1), color 0.5s cubic-bezier(.16,1,.3,1);
  }
  h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.025em; }
  button { font-family: inherit; }

  ::selection { background: var(--accent); color: #fff; }

  /* ============================================================
     BACKGROUND — mesh + grid + grain + tiles
     ============================================================ */
  .bg-mesh {
    position: fixed; inset: -10%;
    z-index: -4;
    pointer-events: none;
    background:
      radial-gradient(ellipse 50% 40% at 12% 18%, rgba(255, 107, 26, 0.36), transparent 60%),
      radial-gradient(ellipse 45% 50% at 88% 25%, rgba(255, 69, 0, 0.28), transparent 60%),
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 140, 30, 0.22), transparent 60%),
      radial-gradient(ellipse 40% 60% at 8% 80%, rgba(255, 107, 26, 0.18), transparent 60%),
      var(--bg-deep);
    filter: blur(70px);
    animation: meshDrift 24s ease-in-out infinite alternate;
  }
  :root[data-theme="light"] .bg-mesh {
    background:
      radial-gradient(ellipse 50% 40% at 12% 18%, rgba(234, 88, 12, 0.18), transparent 60%),
      radial-gradient(ellipse 45% 50% at 88% 25%, rgba(251, 146, 60, 0.18), transparent 60%),
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 200, 100, 0.2), transparent 60%),
      radial-gradient(ellipse 40% 60% at 8% 80%, rgba(234, 88, 12, 0.12), transparent 60%),
      var(--bg-deep);
  }
  @keyframes meshDrift {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(2%, -2%) rotate(6deg) scale(1.1); }
    100% { transform: translate(-2%, 3%) rotate(-5deg) scale(1.05); }
  }
  .bg-conic {
    position: fixed; inset: -50%;
    z-index: -3;
    pointer-events: none;
    background: conic-gradient(from 230deg at 50% 50%,
      transparent 0deg,
      rgba(255, 107, 26, 0.06) 90deg,
      transparent 180deg,
      rgba(255, 69, 0, 0.05) 270deg,
      transparent 360deg);
    animation: conicSpin 60s linear infinite;
    opacity: 0.7;
  }
  :root[data-theme="light"] .bg-conic { opacity: 0.4; }
  @keyframes conicSpin { to { transform: rotate(360deg); } }
  .bg-grid {
    position: fixed; inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      linear-gradient(var(--grid-color) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  }
  .bg-noise {
    position: fixed; inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ============================================================
     FLOATING CHANNEL POSTERS — stylised TV-frame mini-cards
     Each tile has its own genre tint (sport/cinema/news/kids/etc.)
     so the background reads as a living EPG mosaic, not orange noise.
     ============================================================ */
  .bg-tiles {
    position: fixed; inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .bg-tile {
    --tile-tint: #ff6b1a;
    --tile-tint-2: #ff4500;
    position: absolute;
    width: 158px; height: 98px;
    border-radius: 14px;
    background:
      linear-gradient(155deg,
        color-mix(in srgb, var(--tile-tint) 32%, var(--bg-card-solid)) 0%,
        var(--bg-card-solid) 55%,
        color-mix(in srgb, var(--tile-tint-2) 22%, var(--bg-card-solid)) 100%);
    border: 1px solid var(--border);
    box-shadow:
      0 24px 70px -24px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.04),
      inset 0 0 0 1px color-mix(in srgb, var(--tile-tint) 18%, transparent);
    overflow: hidden;
    opacity: 0.42;
    will-change: transform, filter;
    transition: filter .25s ease-out;
  }
  :root[data-theme="light"] .bg-tile {
    opacity: 0.55;
    box-shadow:
      0 18px 50px -18px rgba(15,23,42,0.25),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 0 0 1px color-mix(in srgb, var(--tile-tint) 22%, transparent);
  }
  /* CRT scanlines + soft vignette — sells the "TV frame" feel */
  .bg-tile::before {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(0deg,
        rgba(255,255,255,0.035) 0 1px,
        transparent 1px 3px),
      radial-gradient(ellipse 120% 80% at 50% 110%,
        color-mix(in srgb, var(--tile-tint) 45%, transparent) 0%,
        transparent 60%),
      radial-gradient(ellipse 80% 60% at 80% 0%,
        color-mix(in srgb, var(--tile-tint-2) 35%, transparent) 0%,
        transparent 60%);
    mix-blend-mode: screen;
  }
  :root[data-theme="light"] .bg-tile::before {
    background:
      repeating-linear-gradient(0deg,
        rgba(15,23,42,0.04) 0 1px,
        transparent 1px 3px),
      radial-gradient(ellipse 120% 80% at 50% 110%,
        color-mix(in srgb, var(--tile-tint) 30%, transparent) 0%,
        transparent 60%),
      radial-gradient(ellipse 80% 60% at 80% 0%,
        color-mix(in srgb, var(--tile-tint-2) 22%, transparent) 0%,
        transparent 60%);
    mix-blend-mode: multiply;
  }
  /* subtle bottom dim so name/progress always reads */
  .bg-tile::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 38%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    pointer-events: none;
  }
  :root[data-theme="light"] .bg-tile::after {
    background: linear-gradient(to top, rgba(15,23,42,0.18), transparent);
  }

  /* Stylised channel mark — bespoke SVG "station ID" per tile */
  .bg-tile__mark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -56%);
    width: 108px;
    height: 56px;
    display: block;
    filter:
      drop-shadow(0 2px 6px rgba(0,0,0,0.45))
      drop-shadow(0 0 14px color-mix(in srgb, var(--tile-tint) 55%, transparent));
    z-index: 1;
  }
  :root[data-theme="light"] .bg-tile__mark {
    filter:
      drop-shadow(0 1px 3px rgba(15,23,42,0.25))
      drop-shadow(0 0 10px color-mix(in srgb, var(--tile-tint) 35%, transparent));
  }
  .bg-tile__mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .bg-tile__mark text {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    paint-order: stroke;
  }
  .bg-tile__icon {
    position: absolute;
    top: 8px; left: 9px;
    width: 14px; height: 14px;
    color: color-mix(in srgb, var(--tile-tint) 80%, var(--fg));
    opacity: 0.85;
    z-index: 2;
  }
  .bg-tile__icon svg { width: 100%; height: 100%; display: block; }

  /* HD chip top-right (next to live-dot) */
  .bg-tile__hd {
    position: absolute;
    top: 7px; right: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--fg);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    opacity: 0.85;
    z-index: 2;
  }
  :root[data-theme="light"] .bg-tile__hd {
    background: rgba(15,23,42,0.06);
    border-color: rgba(15,23,42,0.12);
  }

  /* Channel name strip */
  .bg-tile__name {
    position: absolute;
    bottom: 14px; left: 9px; right: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
  }

  /* Genre badge under name */
  .bg-tile__genre {
    position: absolute;
    bottom: 4px; left: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tile-tint) 70%, var(--fg));
    opacity: 0.85;
    z-index: 2;
  }

  /* "сейчас в эфире" progress bar */
  .bg-tile__bar {
    position: absolute;
    bottom: 4px; right: 9px;
    width: 38px; height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
    z-index: 2;
  }
  :root[data-theme="light"] .bg-tile__bar { background: rgba(15,23,42,0.12); }
  .bg-tile__bar::after {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--p, 60%);
    background: linear-gradient(90deg, var(--tile-tint), var(--tile-tint-2));
    box-shadow: 0 0 6px color-mix(in srgb, var(--tile-tint) 60%, transparent);
  }

  .bg-tile .live-dot {
    position: absolute;
    top: 7px; right: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tile-tint);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tile-tint) 80%, transparent);
    animation: pulse 1.6s ease-out infinite;
    z-index: 3;
  }
  @media (max-width: 720px) {
    .bg-tiles { display: none; }
  }

  /* ============================================================
     THEME TOGGLE
     ============================================================ */
  .theme-switch {
    position: fixed; top: 18px; right: 18px; z-index: 100;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border);
    border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 500; color: var(--fg-muted);
    transition: all .35s cubic-bezier(.16,1,.3,1);
  }
  .theme-switch:hover {
    border-color: var(--border-active);
    color: var(--fg);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -10px var(--accent-glow);
  }
  .theme-switch svg { width: 14px; height: 14px; transition: all 0.4s cubic-bezier(.16,1,.3,1); }
  .theme-switch .icon-sun { display: none; }
  :root[data-theme="light"] .theme-switch .icon-sun { display: inline-block; }
  :root[data-theme="light"] .theme-switch .icon-moon { display: none; }

  /* ============================================================
     SHELL
     ============================================================ */
  .shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 200px;
    position: relative;
    z-index: 1;
  }

  /* ============================================================
     HERO — cinematic
     ============================================================ */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(32px, 6vh, 56px) 0 18px;
    position: relative;
  }
  .hero__meta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-soft);
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .15s forwards;
  }
  .hero__meta-dot {
    width: 7px; height: 7px; border-radius: 50%;
  }
  .hero__meta-dot--accent {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    animation: pulse 1.6s ease-out infinite;
  }
  .hero__meta-dot--live {
    background: var(--success);
    box-shadow: 0 0 10px var(--success-glow);
    animation: pulse 1.4s ease-out infinite;
  }
  .hero__meta-divider { width: 1px; height: 12px; background: var(--border-strong); }
  .hero__meta-num { font-family: 'JetBrains Mono', monospace; color: var(--fg-soft); font-weight: 700; }
  .hero__meta-text { color: var(--fg-soft); }
  .hero__meta-text--muted { color: var(--fg-muted); }
  @media (max-width: 380px) {
    .hero__meta { gap: 6px; }
    .hero__meta-divider { display: none; }
  }

  .hero h1 {
    font-size: clamp(40px, 7vw, 76px);
    line-height: 0.98;
    margin-bottom: 12px;
    letter-spacing: -0.04em;
    max-width: 14ch;
  }
  .hero h1 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 .04em;
  }
  .hero h1 .word > span {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
  }
  .hero h1 .word.is-in > span {
    animation: heroWordIn .9s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  @keyframes heroWordIn {
    to { transform: translateY(0); }
  }
  .hero h1 em {
    font-style: normal;
  }
  .hero h1 em .word > span {
    background: linear-gradient(135deg, var(--accent), var(--accent-3) 60%, var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero h1 em .word.is-in > span {
    animation:
      heroWordIn .9s cubic-bezier(.22, 1, .36, 1) forwards,
      gradShift 6s ease-in-out infinite;
  }
  @keyframes gradShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .hero p {
    color: var(--fg-muted);
    font-size: clamp(15px, 2vw, 18px);
    max-width: 480px;
    margin: 0 auto 16px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp .8s cubic-bezier(.16,1,.3,1) .7s forwards;
  }

  .hero__live-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--fg);
    display: inline-flex;
    gap: 1px;
  }
  .hero__live-num .digit {
    display: inline-block;
    width: 9px;
    text-align: center;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
  }
  .hero__live-num .digit.flip {
    animation: digitFlip .55s cubic-bezier(.34, 1.56, .64, 1);
  }
  @keyframes digitFlip {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-100%); opacity: 0; }
    51% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* ============================================================
     CHANNEL TICKER (under accordion)
     ============================================================ */
  .channel-ticker {
    margin: 24px -24px 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    padding: 8px 0;
  }
  .channel-ticker__track {
    display: flex;
    gap: 10px;
    animation: tickerScroll 50s linear infinite;
    width: max-content;
  }
  .channel-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--fg-soft);
    white-space: nowrap;
  }
  .channel-chip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ============================================================
     WARNING CALLOUT — persistent above accordion
     ============================================================ */
  .warn {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.10),
        rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 0 0 1px rgba(251, 191, 36, 0.05),
      0 30px 70px -30px rgba(251, 191, 36, 0.35);
    will-change: transform, box-shadow;
    transition: box-shadow .35s ease;
  }
  :root[data-theme="light"] .warn {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(251, 146, 60, 0.05));
    border-color: rgba(217, 119, 6, 0.45);
  }
  .warn::before {
    /* corner shimmer caustic */
    content: "";
    position: absolute;
    inset: -2px;
    background:
      radial-gradient(ellipse 200px 80px at 0% 0%, rgba(251,191,36,0.18), transparent 60%),
      radial-gradient(ellipse 200px 80px at 100% 100%, rgba(251,191,36,0.18), transparent 60%);
    pointer-events: none;
    opacity: 0.7;
  }
  .warn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    transition: box-shadow .8s ease;
  }
  .warn.is-pulse::after {
    animation: warnPulse 1.2s cubic-bezier(.16,1,.3,1);
  }
  @keyframes warnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.65); }
    100% { box-shadow: 0 0 0 18px rgba(251, 191, 36, 0); }
  }
  .warn__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: inline-flex; align-items: center; justify-content: center;
    color: #1a1a0a;
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.3) inset,
      0 0 0 6px rgba(251, 191, 36, 0.08),
      0 18px 40px -10px rgba(251, 191, 36, 0.5);
    animation: warnIconBob 2.6s ease-in-out infinite;
  }
  @keyframes warnIconBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-3deg); }
  }
  .warn__icon svg { width: 22px; height: 22px; stroke-width: 2.5; }
  .warn__body { font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
  .warn__title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--warn);
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .warn__title::after {
    content: "";
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 8px var(--warn-glow);
    animation: pulse 1.6s ease-out infinite;
  }
  .warn__body b { color: var(--fg); font-weight: 600; }
  .warn__body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--warn);
    font-weight: 600;
    margin: 0 2px;
  }
  @media (max-width: 540px) {
    .warn { grid-template-columns: 1fr; padding: 18px 18px 20px; gap: 12px; }
    .warn__icon { width: 36px; height: 36px; }
  }

  /* ============================================================
     STEPPER + STEPS
     ============================================================ */
  .stepper { display: flex; flex-direction: column; gap: 14px; }

  .step {
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    transition:
      border-color .45s cubic-bezier(.16,1,.3,1),
      background .45s cubic-bezier(.16,1,.3,1),
      transform .45s cubic-bezier(.16,1,.3,1),
      box-shadow .45s cubic-bezier(.16,1,.3,1);
    box-shadow: var(--shadow-card);
    position: relative;
  }
  .step.is-active {
    border-color: var(--border-active);
    background: var(--bg-card-active);
    transform: translateY(-2px);
    box-shadow:
      var(--shadow-card),
      0 0 0 1px var(--accent-soft),
      0 40px 100px -30px var(--accent-glow);
  }
  .step.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent-3));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
  }
  /* Active orbital glow underneath */
  .step.is-active::after {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--accent-glow), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    opacity: .8;
    animation: orbital 6s ease-in-out infinite alternate;
  }
  @keyframes orbital {
    0% { transform: translate(0, 0) scale(1); opacity: .5; }
    100% { transform: translate(2%, 2%) scale(1.05); opacity: .85; }
  }

  .step__head {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .step__num {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--bg-elev);
    color: var(--fg-muted);
    border: 1px solid var(--border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
  }
  .step.is-active .step__num {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    transform: scale(1.05);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 24px -4px var(--accent-glow);
  }
  .step.is-done .step__num {
    background: linear-gradient(135deg, var(--success), #10b981);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--success-glow);
  }
  .step.is-done .step__num-text { display: none; }
  .step.is-done .step__num-check { display: inline-block; }
  .step__num-check { display: none; }

  .step__head-text { flex: 1; min-width: 0; }
  .step__title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; font-size: 15px;
    color: var(--fg);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
  }
  .step__summary {
    font-size: 13px; color: var(--fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .3s;
  }
  .step.is-done .step__summary {
    color: var(--accent);
    font-weight: 500;
  }
  .step__chevron {
    color: var(--fg-subtle);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .3s;
    flex-shrink: 0;
  }
  .step.is-active .step__chevron { transform: rotate(180deg); color: var(--accent); }

  /* Spring physics body */
  .step__body {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      height .55s cubic-bezier(.34, 1.56, .64, 1),
      opacity .35s ease-out;
    will-change: height;
  }
  .step.is-active .step__body { opacity: 1; }
  .step__body-inner {
    padding: 4px 22px 24px;
  }

  /* Stagger fade-in for active step children */
  .step.is-active .stagger > * {
    opacity: 0;
    transform: translateY(10px);
    animation: stagIn .55s cubic-bezier(.16,1,.3,1) forwards;
  }
  .step.is-active .stagger > *:nth-child(1) { animation-delay: .04s; }
  .step.is-active .stagger > *:nth-child(2) { animation-delay: .08s; }
  .step.is-active .stagger > *:nth-child(3) { animation-delay: .12s; }
  .step.is-active .stagger > *:nth-child(4) { animation-delay: .16s; }
  .step.is-active .stagger > *:nth-child(5) { animation-delay: .20s; }
  .step.is-active .stagger > *:nth-child(6) { animation-delay: .24s; }
  .step.is-active .stagger > *:nth-child(7) { animation-delay: .28s; }
  .step.is-active .stagger > *:nth-child(8) { animation-delay: .32s; }
  @keyframes stagIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============================================================
     PORTAL LIST  (minimal "settings-row" selector)
     ============================================================ */
  .portal-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-input);
  }
  .portal-row {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 18px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    color: var(--fg-soft);
    font-family: inherit;
    transition: background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .portal-row:first-child { border-top: 0; }
  .portal-row::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .2s ease;
  }
  .portal-row:hover {
    background: rgba(255,255,255,.025);
    color: var(--fg);
  }
  :root[data-theme="light"] .portal-row:hover {
    background: rgba(15,23,42,.03);
  }
  .portal-row:focus-visible {
    outline: none;
    background: var(--accent-soft);
  }
  .portal-row__code {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 36px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    flex-shrink: 0;
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
  }
  :root[data-theme="light"] .portal-row__code {
    background: rgba(15,23,42,.03);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  }
  .portal-row__code svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .portal-row:hover .portal-row__code {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .portal-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .portal-row__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fg);
    letter-spacing: -.005em;
  }
  .portal-row__regions {
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.35;
    letter-spacing: .005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .portal-row__currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    transition: color .2s ease;
  }
  .portal-row__radio {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: border-color .2s ease, background .2s ease;
  }
  .portal-row__radio::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .portal-row__auto {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: max-content;
  }
  .portal-row__auto svg { width: 10px; height: 10px; }
  .portal-row.is-auto .portal-row__auto { display: inline-flex; }

  .portal-row[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--fg);
  }
  .portal-row[aria-selected="true"]::before {
    background: var(--accent);
  }
  .portal-row[aria-selected="true"] .portal-row__code {
    box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .portal-row[aria-selected="true"] .portal-row__currency {
    color: var(--accent);
  }
  .portal-row[aria-selected="true"] .portal-row__radio {
    border-color: var(--accent);
  }
  .portal-row[aria-selected="true"] .portal-row__radio::after {
    transform: scale(1);
  }

  @media (max-width: 480px) {
    .portal-row {
      grid-template-columns: 48px 1fr auto;
      gap: 10px;
      padding: 12px 12px 12px 14px;
    }
    .portal-row__radio { display: none; }
    .portal-row__code { width: 46px; height: 30px; border-radius: 6px; }
    .portal-row__name { font-size: 14px; }
    .portal-row__regions { font-size: 11.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .portal-row,
    .portal-row__code,
    .portal-row__radio,
    .portal-row__radio::after,
    .portal-row__currency,
    .portal-row::before { transition: none; }
  }

  /* ============================================================
     DEVICES
     ============================================================ */
  .device-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media (min-width: 600px) {
    .device-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  }
  .device {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 14px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
    font-family: inherit;
    color: var(--fg-soft);
    text-align: left;
    will-change: transform;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .device:hover {
    border-color: var(--border-strong);
    color: var(--fg);
  }
  .device[aria-selected="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--fg);
  }
  .device::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .2s ease;
  }
  .device[aria-selected="true"]::before { background: var(--accent); }

  .device__mock {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    overflow: hidden;
    transition: box-shadow .25s ease, background .25s ease;
  }
  :root[data-theme="light"] .device__mock {
    background: rgba(15,23,42,.035);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.07);
  }
  .device__mock svg,
  .device__mock-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .device[aria-selected="true"] .device__mock {
    box-shadow: inset 0 0 0 1px var(--accent-soft);
    background: rgba(255, 107, 26, 0.06);
  }
  :root[data-theme="light"] .device[aria-selected="true"] .device__mock {
    background: rgba(234, 88, 12, 0.06);
  }
  /* All device mocks share the same IDE-style dark frame */
  .device__mock--app,
  .device__mock--playlist,
  .device__mock--mag {
    background: rgba(255,255,255,.025);
  }
  :root[data-theme="light"] .device__mock--app,
  :root[data-theme="light"] .device__mock--playlist,
  :root[data-theme="light"] .device__mock--mag {
    background: rgba(15,23,42,.035);
  }


  .device__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .device__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .device__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--fg);
  }
  .device__hint {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fg-muted);
    letter-spacing: .005em;
  }
  .device__bill {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--fg-subtle);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  :root[data-theme="light"] .device__bill {
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.07);
  }
  .device[aria-selected="true"] .device__bill {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--accent);
  }

  .device__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .device__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px 3px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--fg-soft);
    letter-spacing: .005em;
    line-height: 1;
    white-space: nowrap;
  }
  :root[data-theme="light"] .device__chip {
    background: rgba(15,23,42,.035);
    border-color: rgba(15,23,42,.07);
    color: var(--fg-soft);
  }
  .device__chip svg {
    display: block;
    width: 11px;
    height: 11px;
    color: var(--fg-muted);
  }
  .device[aria-selected="true"] .device__chip {
    background: rgba(255, 107, 26, 0.08);
    border-color: rgba(255, 107, 26, 0.2);
  }
  :root[data-theme="light"] .device[aria-selected="true"] .device__chip {
    background: rgba(234, 88, 12, 0.08);
    border-color: rgba(234, 88, 12, 0.22);
  }
  .device[aria-selected="true"] .device__chip svg { color: var(--accent); }

  @media (max-width: 599px) {
    /* === Mobile redesign: "poster card" concept ===
       Stack: large centered mock (PNG fits via contain) on top of an
       accent-tinted aura, then centered title/hint, then chips row.
       Active state amplifies the aura with a soft pulse + lift. */
    .device {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 18px 16px 16px;
      border-radius: 16px;
    }
    /* Soft animated radial aura behind mock — uses accent token */
    .device::after {
      content: "";
      position: absolute;
      top: 14px;
      left: 50%;
      width: 78%;
      aspect-ratio: 16 / 10;
      transform: translateX(-50%) scale(.9);
      background:
        radial-gradient(60% 60% at 50% 45%, var(--accent-soft) 0%, transparent 70%);
      filter: blur(14px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
      z-index: 0;
    }
    .device:hover::after { opacity: .55; }
    .device[aria-selected="true"]::after {
      opacity: 1;
      transform: translateX(-50%) scale(1);
      animation: deviceAuraPulse 3.6s ease-in-out infinite;
    }

    /* Mock — centered, large, never cropped (object-fit: contain via override).
       Hybrid frame: thin glassy bezel (6px) + img with its own inner radius so
       PNG and parent read as one unified rounded poster, not "square inside chip". */
    .device__mock {
      position: relative;
      width: 78%;
      max-width: 280px;
      margin: 2px auto 0;
      aspect-ratio: 16 / 10;
      border-radius: 14px;
      background:
        linear-gradient(155deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        inset 0 1px 0 0 rgba(255,255,255,.06),
        inset 0 0 22px rgba(255,255,255,.025);
      padding: 6px;
      z-index: 1;
      transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .35s ease;
    }
    :root[data-theme="light"] .device__mock {
      background:
        linear-gradient(155deg, rgba(15,23,42,.05) 0%, rgba(15,23,42,.02) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(15,23,42,.09),
        inset 0 1px 0 0 rgba(255,255,255,.55),
        inset 0 0 22px rgba(15,23,42,.03);
    }
    .device__mock svg,
    .device__mock-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      /* Inner radius = parent radius (14) - padding (6) ≈ 10px → keeps even bezel */
      border-radius: 10px;
      background: rgba(255,255,255,.02);
      filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
      transition: transform .45s cubic-bezier(.16,1,.3,1), filter .35s ease, background .35s ease;
    }
    :root[data-theme="light"] .device__mock svg,
    :root[data-theme="light"] .device__mock-img {
      background: rgba(15,23,42,.02);
      filter: drop-shadow(0 4px 14px rgba(15,23,42,.18));
    }

    /* Active mock: lift + glow */
    .device[aria-selected="true"] .device__mock {
      transform: translateY(-2px);
      background:
        linear-gradient(155deg, var(--accent-soft) 0%, rgba(255,107,26,.04) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,107,26,.35),
        0 12px 32px -12px var(--accent-glow),
        0 0 0 1px var(--accent-soft);
    }
    .device[aria-selected="true"] .device__mock-img {
      transform: scale(1.04);
      filter: drop-shadow(0 6px 18px var(--accent-glow));
    }
    .device:active .device__mock { transform: scale(.985); }

    /* Auto/Manual badge — overlay top-right of mock (sits inside the inner img frame) */
    .device__bill {
      position: absolute;
      top: 26px;
      right: calc(11% + 14px);
      z-index: 2;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(0,0,0,.42);
      border-color: rgba(255,255,255,.14);
      color: var(--fg-soft);
    }
    :root[data-theme="light"] .device__bill {
      background: rgba(255,255,255,.7);
      border-color: rgba(15,23,42,.1);
    }

    /* Body: centered text stack */
    .device__body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
      text-align: center;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .device__head {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .device__title {
      align-items: center;
      gap: 3px;
      width: 100%;
    }
    .device__label {
      font-size: 17px;
      letter-spacing: -.01em;
    }
    .device__hint {
      font-size: 12.5px;
    }

    /* Chips: centered, comfortable wrap */
    .device__chips {
      width: 100%;
      justify-content: center;
      gap: 6px;
      padding-top: 12px;
      margin-top: 0;
    }
    .device__chip {
      padding: 4px 9px;
      font-size: 11px;
    }

    /* Bottom accent bar on active card — mirrors left ribbon, mobile-only */
    .device[aria-selected="true"] {
      transform: translateY(-1px);
      box-shadow: 0 14px 36px -18px var(--accent-glow);
    }
  }

  @keyframes deviceAuraPulse {
    0%, 100% { opacity: .8; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;  transform: translateX(-50%) scale(1.06); }
  }

  @media (prefers-reduced-motion: reduce) {
    .device,
    .device__mock,
    .device__mock-img,
    .device__bill,
    .device__chip,
    .device::after { transition: none; animation: none; }
    .device[aria-selected="true"] .device__mock,
    .device[aria-selected="true"] .device__mock-img,
    .device[aria-selected="true"] { transform: none; }
  }

  /* Device info panel — appears only in active step under selected device */
  .device-info {
    margin-top: 0;
    padding: 0 20px;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: opacity .35s ease, max-height .55s cubic-bezier(.34, 1.56, .64, 1), margin-top .35s ease, padding .35s ease, border-color .35s ease;
  }
  .device-info.is-on {
    opacity: 1;
    max-height: 720px;
    margin-top: 16px;
    padding: 18px 20px;
    border-color: var(--border);
  }
  .device-info__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .device-info__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    flex-shrink: 0;
  }
  .device-info__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.3;
  }
  .device-info__sections {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    animation: deviceInfoEnter .28s ease both;
  }
  @keyframes deviceInfoEnter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .device-info__section {
    min-width: 0;
  }
  .device-info__section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .device-info__section-title svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .device-info__section--compat .device-info__section-title svg { color: var(--fg-muted); }
  .device-info__section--steps  .device-info__section-title svg { color: var(--accent); }
  .device-info__section--notes  .device-info__section-title svg { color: var(--accent-3); }
  .device-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-soft);
  }
  .device-info__list li {
    padding: 5px 0;
    border-bottom: 1px dashed var(--border);
  }
  .device-info__list li:last-child {
    border-bottom: 0;
  }
  .device-info__list strong {
    color: var(--fg);
    font-weight: 600;
  }
  .device-info__list--notes li {
    position: relative;
    padding-left: 16px;
  }
  .device-info__list--notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-3) 60%, transparent);
  }
  .device-info__steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-soft);
  }
  .device-info__steps li {
    counter-increment: step;
    position: relative;
    padding: 6px 0 6px 32px;
    border-bottom: 1px dashed var(--border);
    min-height: 22px;
  }
  .device-info__steps li:last-child { border-bottom: 0; }
  .device-info__steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .device-info__steps strong {
    color: var(--fg);
    font-weight: 600;
  }

  /* Samsung DNS callout (app device) */
  .device-info__tvnote {
    margin-top: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card-solid));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
  }
  .device-info__tvnote-dns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    min-width: 0;
  }
  .device-info__tvnote-dns dt {
    color: var(--fg-muted);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 2px;
  }
  .device-info__tvnote-dns dd {
    margin: 0 0 4px;
    color: var(--fg);
    font-weight: 600;
    user-select: all;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }
  .device-info__tvnote-dns dd:last-child { margin-bottom: 0; }

  /* Pill-style link — used for App tvNote.link AND MAG guide */
  .device-info__tvnote-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .device-info__tvnote-link:hover,
  .device-info__tvnote-link:focus-visible {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px var(--accent-glow);
    outline: none;
  }
  .device-info__tvnote-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform .2s ease;
  }
  .device-info__tvnote-link:hover svg,
  .device-info__tvnote-link:focus-visible svg {
    transform: translateX(3px);
  }

  /* CTA "Перейти к тарифам" — bottom of every device info panel */
  .device-info__cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .device-info__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px var(--accent-glow);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .device-info__cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px var(--accent-deep-glow);
    filter: brightness(1.05);
  }
  .device-info__cta-btn:active {
    transform: translateY(0);
  }
  .device-info__cta-btn svg {
    width: 14px; height: 14px;
    transition: transform .2s ease;
  }
  .device-info__cta-btn:hover svg {
    transform: translateX(3px);
  }
  @media (max-width: 720px) {
    .device-info__cta { justify-content: stretch; }
    .device-info__cta-btn { width: 100%; justify-content: center; }
  }

  @media (max-width: 720px) {
    .device-info__sections { grid-template-columns: 1fr; gap: 14px; }
    .device-info.is-on { max-height: 1400px; }
  }

  /* ============================================================
     TARIFF GRID
     ============================================================ */
  .tariff-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-muted);
  }
  .tariff-note b { color: var(--fg-soft); font-weight: 600; }
  .tariff-note em { font-style: italic; color: var(--fg-muted); display: block; margin-top: 4px; }

  .tariff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  @media (min-width: 540px) {
    .tariff-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .tariff {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    font-family: inherit;
    color: var(--fg-soft);
    text-align: left;
    will-change: transform;
  }
  .tariff:hover {
    border-color: var(--border-strong);
    color: var(--fg);
    transform: translateY(-2px);
  }
  .tariff[aria-selected="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--fg);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 16px 40px -10px var(--accent-glow);
  }
  .tariff__months { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.03em; }
  .tariff[aria-selected="true"] .tariff__months { color: var(--accent); }
  .tariff__price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--fg);
    letter-spacing: -0.02em;
    transition: opacity .3s ease;
  }
  .tariff__price.is-morphing {
    animation: priceMorph .55s cubic-bezier(.34, 1.56, .64, 1);
  }
  @keyframes priceMorph {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-6px) scale(0.9); opacity: 0; }
    51% { transform: translateY(6px) scale(0.9); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }
  .tariff__off {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px -2px var(--accent-glow);
  }
  .tariff__per { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }

  /* Tariff includes infographic — appears under selected tariff */
  .tariff-includes {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity .35s ease, max-height .55s cubic-bezier(.34, 1.56, .64, 1), margin-top .35s ease;
  }
  .tariff-includes.is-on {
    opacity: 1;
    max-height: 320px;
    margin-top: 16px;
  }
  .tariff-includes__title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-soft);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .tariff-includes ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; }
  @media (min-width: 540px) {
    .tariff-includes ul { grid-template-columns: 1fr 1fr; }
  }
  .tariff-includes li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--fg-muted);
    opacity: 0;
    transform: translateX(-6px);
  }
  .tariff-includes.is-on li { animation: ticksIn .45s cubic-bezier(.16,1,.3,1) forwards; }
  .tariff-includes.is-on li:nth-child(1) { animation-delay: .05s; }
  .tariff-includes.is-on li:nth-child(2) { animation-delay: .12s; }
  .tariff-includes.is-on li:nth-child(3) { animation-delay: .19s; }
  .tariff-includes.is-on li:nth-child(4) { animation-delay: .26s; }
  .tariff-includes.is-on li:nth-child(5) { animation-delay: .33s; }
  .tariff-includes.is-on li:nth-child(6) { animation-delay: .40s; }
  @keyframes ticksIn { to { opacity: 1; transform: translateX(0); } }
  .tariff-includes li svg {
    width: 16px; height: 16px;
    stroke-width: 2.5;
    color: var(--success);
    flex-shrink: 0;
  }

  /* ============================================================
     IDENTITY
     ============================================================ */
  .id-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .id-fields .id-help { margin-top: -2px; }
  @media (min-width: 540px) {
    .id-fields {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "login email"
        "help  help";
      column-gap: 14px;
      row-gap: 14px;
    }
    .id-fields__login { grid-area: login; }
    .id-fields__email { grid-area: email; }
    .id-fields .id-help { grid-area: help; margin-top: 0; }
  }
  .input-wrap { position: relative; }
  .input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--fg);
    outline: none;
    transition: all .25s ease;
  }
  .input::placeholder { color: var(--fg-subtle); }
  .input:focus {
    border-color: var(--accent);
    background: var(--bg-card-active);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .input-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 6px;
    display: inline-block;
  }
  .input-hint {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fg-soft);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 8px;
  }
  :root[data-theme="light"] .input-hint {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--fg);
  }
  .input-hint::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    color: var(--accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat;
  }
  .input-hint.is-warn {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .input-hint.is-warn::before { display: none; }
  .input-hint.is-warn b { color: var(--warn-strong); font-weight: 600; }
  .login-suggest {
    margin-top: 0;
    padding: 0 12px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 12px;
    color: var(--fg-soft);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .3s ease, max-height .45s cubic-bezier(.34, 1.56, .64, 1), margin-top .3s ease, padding .3s ease;
  }
  .login-suggest.is-on {
    opacity: 1;
    max-height: 80px;
    margin-top: 8px;
    padding: 10px 12px;
  }
  .login-suggest button {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--warn), var(--warn-strong));
    color: #1a1a0a;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .2s ease;
  }
  .login-suggest button:hover { transform: translateY(-1px); }

  /* Reassurance card above identity inputs */
  .id-reassure {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  :root[data-theme="light"] .id-reassure {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
  }
  .id-reassure__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--accent);
    opacity: 0.85;
    margin-top: 1px;
  }
  .id-reassure__icon svg { width: 20px; height: 20px; }
  .id-reassure__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-soft);
  }
  .id-reassure__text strong {
    color: var(--fg);
    font-weight: 600;
  }

  /* Help row below identity inputs */
  .id-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 2%, transparent)),
      rgba(255, 255, 255, 0.025);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    position: relative;
  }
  :root[data-theme="light"] .id-help {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 1%, transparent)),
      rgba(15, 23, 42, 0.02);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    border-left-color: color-mix(in srgb, var(--accent) 65%, transparent);
  }
  .id-help__text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.45;
    flex: 1 1 auto;
    min-width: 0;
  }
  .id-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
    transition: background-color .2s ease, transform .2s ease;
  }
  :root[data-theme="light"] .id-help__icon {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .id-help__icon svg { width: 20px; height: 20px; }
  .id-help__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .id-help__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  .id-help__desc {
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.45;
  }
  .id-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .id-help:hover .id-help__icon {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .id-help__btn:hover,
  .id-help__btn:focus-visible {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px var(--accent-glow);
    outline: none;
  }
  .id-help__btn:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 18px -10px var(--accent-glow);
  }
  .id-help__btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform .2s ease;
  }
  .id-help__btn:hover svg,
  .id-help__btn:focus-visible svg {
    transform: translateX(3px);
  }
  @media (max-width: 640px) {
    .id-help {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 14px 16px;
    }
    .id-help__btn {
      width: 100%;
      padding: 11px 16px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .id-help__icon,
    .id-help__btn,
    .id-help__btn svg {
      transition: none;
    }
    .id-help__btn:hover,
    .id-help__btn:focus-visible {
      transform: none;
    }
    .id-help__btn:hover svg,
    .id-help__btn:focus-visible svg {
      transform: none;
    }
  }

  /* ============================================================
     SUBMIT — sticky bottom + liquid shimmer
     ============================================================ */
  .submit-wrap {
    position: sticky;
    bottom: 18px;
    margin-top: 28px;
    padding: 14px;
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .submit-totals {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 6px;
    min-width: 0;
  }
  .submit-totals__sum {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .submit-totals__sub {
    font-size: 12px;
    color: var(--fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pay-btn {
    position: relative;
    overflow: hidden;
    padding: 14px 22px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, opacity .3s;
    box-shadow: 0 16px 40px -10px var(--accent-glow);
    display: inline-flex; align-items: center; gap: 8px;
    will-change: transform;
  }
  .pay-btn::before {
    /* liquid shimmer */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 100% 0;
    transition: background-position .9s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
  }
  .pay-btn:hover:not(:disabled)::before { background-position: -120% 0; }
  .pay-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -12px var(--accent-deep-glow);
  }
  .pay-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
  .pay-btn:disabled {
    background: var(--bg-elev);
    color: var(--fg-subtle);
    cursor: not-allowed;
    box-shadow: none;
  }
  .pay-btn.is-success::after {
    content: "";
    position: absolute;
    inset: 50% 50%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-3), var(--accent) 30%, transparent 70%);
    animation: successBurst .9s cubic-bezier(.16,1,.3,1) forwards;
    pointer-events: none;
  }
  @keyframes successBurst {
    0% { inset: 50% 50%; opacity: 1; }
    100% { inset: -100% -100%; opacity: 0; }
  }
  .pay-btn span { position: relative; z-index: 1; }

  /* ============================================================
     UTILITY ANIMATIONS
     ============================================================ */
  @keyframes pulse {
    0% { transform: scale(.85); opacity: .9; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(.85); opacity: .9; }
  }
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50% { transform: translate(0, -10px) rotate(var(--rot, 0deg)); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
  /* ============================================================
     MODE CARD (renew invitation / trial banner)
     ============================================================ */
  .mode-card {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    margin: 18px 0 22px;
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
    border: 1px solid var(--border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: border-color 280ms cubic-bezier(.16,1,.3,1),
                background 280ms cubic-bezier(.16,1,.3,1),
                box-shadow 280ms cubic-bezier(.16,1,.3,1);
    isolation: isolate;
  }
  .mode-card:hover {
    border-color: var(--border-strong);
  }
  body[data-mode="trial"] .mode-card {
    background: var(--bg-card-active);
    border-color: var(--border-active);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 18px 48px -28px var(--accent-glow);
  }
  .mode-card__inner {
    grid-area: stack;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .28s cubic-bezier(.16,1,.3,1),
                transform .28s cubic-bezier(.16,1,.3,1),
                visibility 0s linear .28s;
    pointer-events: none;
  }
  .mode-card[data-mode="renew"] .mode-card__inner--renew,
  .mode-card[data-mode="trial"] .mode-card__inner--trial {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .mode-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .mode-card__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
    line-height: 1.3;
  }
  .mode-card__sub {
    font-size: 13px;
    color: var(--fg-muted);
    font-weight: 500;
    line-height: 1.45;
  }
  .mode-card__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    box-shadow: 0 12px 30px -10px var(--accent-glow);
    transition: background 240ms ease, border-color 240ms ease,
                color 240ms ease, transform 240ms ease,
                box-shadow 240ms ease;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .mode-card__btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
  }
  .mode-card__btn:active { transform: translateY(0); }
  .mode-card__btn:focus-visible {
    outline: 2px solid var(--border-active);
    outline-offset: 2px;
  }
  .mode-card__btn--ghost {
    background: transparent;
    color: var(--fg-soft);
    border: 1px solid var(--border-strong);
    box-shadow: none;
  }
  .mode-card__btn--ghost:hover {
    background: transparent;
    border-color: var(--accent);
    color: var(--fg);
  }
  .mode-card__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    margin-right: 8px;
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: modeCardPulse 1.8s ease-out infinite;
    vertical-align: middle;
  }
  @keyframes modeCardPulse {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  @media (max-width: 520px) {
    .mode-card {
      padding: 16px 18px;
    }
    .mode-card__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
    .mode-card__btn {
      width: 100%;
      padding: 12px 18px;
    }
  }

  /* trial mode — hide tariff + submit confirm steps and login field */
  body[data-mode="trial"] .step[data-step="3"],
  body[data-mode="trial"] .step[data-step="5"] {
    display: none;
  }
  body[data-mode="trial"] .id-fields .id-fields__login,
  body[data-mode="trial"] .id-fields .id-help {
    display: none;
  }
  body[data-mode="trial"] .id-fields {
    grid-template-columns: 1fr !important;
    grid-template-areas: "email" !important;
  }
  body[data-device-mode="playlist"] .step[data-step="4"] {
    display: none;
  }
  .input-label__opt {
    display: none;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    vertical-align: middle;
  }
  body[data-device-mode="app"] .input-label__opt,
  body[data-device-mode="mag"] .input-label__opt { display: inline-block; }