/* ===== extracted style block 0 ===== */

    /* ═══════════════════════════════════════════════════════════════════════
       DESIGN TOKENS
       Three layers:
         1. Brand constants  — identical in every theme (the logo's gold).
         2. Theme tokens     — :root/[data-theme=dark] and [data-theme=light].
         3. Shape/motion     — theme-independent primitives.

       WHY --gold changes value between themes:
       #c9a84c is used 46x as `color` (text) and 30x as `background` (fill).
       On a light background it measures 2.17:1 contrast — unreadable, far under
       the 4.5:1 WCAG AA floor. The light theme therefore re-points --gold at
       #7f6418, which is the lightest gold that passes BOTH roles at once
       (5.34:1 as text on --bg, 5.62:1 for white text sitting on it). That keeps
       all 112 existing declarations correct without rewriting a single one.
       Decorative gold that never carries text (glows, gradients, the logo) uses
       --brand-gold instead, so the brand hue itself never dulls.
       ═══════════════════════════════════════════════════════════════════════ */

    :root {
      /* ── 1. Brand constants — never re-themed ─────────────────────────── */
      --brand-gold: #c9a84c;
      --brand-gold-light: #e8c97a;
      --brand-gold-deep: #a8842f;

      /* ── 3. Shape ─────────────────────────────────────────────────────── */
      --r-xs: 6px;
      --r-sm: 8px;
      --r: 12px;
      --r-lg: 16px;
      --r-xl: 22px;
      --r-full: 999px;

      /* ── 3. Shadow/elevation scale — neutral black; colour accents (gold status glows, focus
         rings) and the pre-existing theme-aware --shadow-sm/md/lg workspace tokens live
         outside this ladder on purpose. Numbered 2-5, not 1-5: рев'ю контролера знайшло
         --shadow-1 неживим (жодне справжнє значення в app.css не лежало на його глибині
         1px/2px — усі, хай і дрібні, лежали ближче до --shadow-2), тож токен прибрано, а не
         прив'язано штучно до першого-ліпшого. ─────────────────────────────────────────── */
      --shadow-2: 0 4px 12px rgba(0, 0, 0, .18);
      --shadow-3: 0 8px 24px rgba(0, 0, 0, .28);
      --shadow-4: 0 16px 44px rgba(0, 0, 0, .4);
      --shadow-5: 0 24px 64px rgba(0, 0, 0, .5);

      /* ── 3. Spacing scale — 4px base, used for new work ───────────────── */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 64px;

      /* ── 3. Motion — durations kept in the 120-320ms comfort band ─────── */
      --dur-fast: 120ms;
      --dur: 200ms;
      --dur-slow: 320ms;

      /* ── 3. Layout ────────────────────────────────────────────────────── */
      --tap-min: 44px;   /* minimum touch target */
      --nav-h: 64px;
    }

    /* ── 2. DARK THEME (default) ────────────────────────────────────────── */
    :root,
    [data-theme="dark"] {
      color-scheme: dark;

      --bg: #0a0a08;
      /* Секція F задача 1: площини піднято так, щоб сходинка була ВИДИМОЮ — ΔL* ≈ 4 між
         сусідніми рівнями замість колишніх 2.33 / 4.16 / 4.42. Мірялось L*, а не коефіцієнтом
         контрасту: біля чорного підлога +0.05 у формулі WCAG стискає весь діапазон, і та сама
         сходинка, що дає ΔL* 4.4, показує «контраст 1.11». Деталі й доказ — у
         backend/tests/design-overhaul.test.js. --surface3 лишається hover-підсвіткою (усі 9
         використань — :hover), тож його сходинка менша, 2.93. */
      --surface: #161510;
      --surface2: #1f1e19;
      --surface3: #25241f;
      --border: #2a2a28;
      --border-strong: #3a3a36;

      --gold: #c9a84c;
      --gold-l: #e8c97a;
      --gold-dim: rgba(201, 168, 76, 0.12);
      --gold-dim-strong: rgba(201, 168, 76, 0.22);
      --on-gold: #0a0a08;          /* text that sits ON a gold fill */
      /* Секція E: у ТЕМНІЙ темі акцент і площина можуть збігатись — на чорному тлі те саме
         золото читається і як текст, і як площина. Токени все одно розділені, бо правило
         «золото не матеріал» тримається на тому, що кожна площина мусить назвати --gold-fill
         явно: інакше золота площина знову з'явиться непомітно. */
      --gold-fill: #c9a84c;
      --on-gold-dim: rgba(32, 24, 10, 0.22);   /* chip/badge resting on gold */
      --gold-grad-btn: linear-gradient(135deg, var(--gold-fill) 0%, #e8b84b 100%);

      --text: #f0ede6;
      --mid: #c5c2bb;
      --dim: #8a8880;

      /* Status: -text variants are contrast-safe for type; the base is a fill */
      --green: #4caf7d;
      --green-text: #6fd39c;
      --green-dim: rgba(76, 175, 125, 0.14);
      --red: #e05a5a;
      --red-text: #ef8080;
      --red-dim: rgba(224, 90, 90, 0.14);
      /* Separate from --red: that one is tuned to be READ on a dark surface, so
         white text on it measures only 3.63:1. A filled destructive button needs
         a darker red so its own label passes. */
      --danger-fill: #c62f2f;
      --amber: #f59e0b;
      --amber-text: #fbbf24;
      --amber-dim: rgba(245, 158, 11, 0.14);
      --info: #818cf8;
      --info-text: #a5b4fc;
      --info-dim: rgba(129, 140, 248, 0.14);

      --overlay: rgba(0, 0, 0, 0.85);   /* modal scrim */
      --skeleton: rgba(255, 255, 255, 0.06);
      /* Translucent because the nav blurs what scrolls under it — so it cannot
         reuse --surface, which is opaque. */
      --nav-bg: rgba(12, 12, 10, 0.76);
      --nav-bg-scrolled: rgba(12, 12, 10, 0.88);
      --nav-menu-bg: rgba(16, 16, 13, 0.97);
      --nav-border: rgba(201, 168, 76, 0.14);
      --nav-border-scrolled: rgba(201, 168, 76, 0.26);
      --nav-shadow: 0 4px 24px rgba(0, 0, 0, .35);
      --nav-shadow-scrolled: 0 14px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 168, 76, .06);
      --scrim-panel: rgba(10, 10, 8, 0.78);  /* locked/pro-gated panel veil */
      /* Cards sit slightly ABOVE the page in dark (lighter than --bg) and
         slightly below it in light (white against the warm off-white page). */
      --card-grad: linear-gradient(180deg, #14140f 0%, #0f0f0d 100%);
      --card-border: rgba(255, 255, 255, .07);
      --cookie-bg: rgba(18, 18, 22, .97);
      --panel-veil: rgba(26, 26, 24, .5);
      --brand-word-grad: linear-gradient(96deg, #fff 0%, #f1dda2 44%, #cba94d 100%);
      /* Oversized watermark numeral behind each step — decorative, but it has to
         stay perceptible or the card layout looks unfinished. */
      --ghost-numeral: rgba(201, 168, 76, .12);
    }

    /* ── 2. LIGHT THEME ─────────────────────────────────────────────────── */
    [data-theme="light"] {
      color-scheme: light;

      /* Warm off-white, so the light theme stays in the same warm family as
         the dark one rather than turning clinical blue-grey. */
      /* Секція F задача 1: тло сторінки темнішає, щоб біла картка від нього відділялась —
         ΔL* 2.07 → 4.13. --surface3 (hover) РІВНО на межі, яку дозволяє золото: #7f6418 дає на
         ньому 4.50:1, а колишній #e9e5da давав 4.46:1, тобто наявний стан уже був нижче AA —
         це впіймав сторож задачі 1, а не окремий аудит. Темніше йти нікуди. */
      --bg: #f6f3eb;
      --surface: #ffffff;
      --surface2: #efece4;
      --surface3: #e9e6de;
      --border: #e2ded2;
      --border-strong: #cdc7b6;

      /* Секція E §3.1: раніше тут стояло ОДНЕ значення (#7f6418) з чесним зізнанням у
         коментарі, що воно «passes text AND fill». Одне число не може бути водночас
         читабельним текстом на світлому тлі й площиною під білим текстом — компроміс і давав
         той оливково-брунатний колір. Тепер ролі розведені:
         --gold      — текст, межа, підкреслення на тлі сторінки (темніший, під контраст 4.5:1);
         --gold-fill — площина головної дії, під якою стоїть темний --on-gold.
         Значення --gold мусить лишатись СВІТЛІШИМ за --gold-l (#6b520f, hover-стан) і не
         збігатись з ним побайтово — інакше будь-який linear-gradient(…, var(--gold),
         var(--gold-l)) з однаковими кінцями вироджується в суцільний колір. Тому тут повернуто
         первісне значення #7f6418. */
      --gold: #7f6418;
      --gold-fill: #b8912f;
      --on-gold: #2a2205;
      --gold-l: #6b520f;            /* emphasis/hover — darker, not lighter */
      --gold-dim: rgba(127, 100, 24, 0.10);
      --gold-dim-strong: rgba(127, 100, 24, 0.18);
      --on-gold-dim: rgba(255, 255, 255, 0.24);  /* lightens instead of darkens */
      /* Рев'ю 2026-08-20: раніше обидва кінці цього градієнта поставали з --gold (акцентного
         токена), тому кнопки поверх нього малювались тим самим оливково-брунатним компромісом,
         заради усунення якого й існувала задача 1. Тепер темніший кінець — сам --gold-fill
         (5.37:1 з --on-gold), світліший — лише відтінок того самого кольору. */
      --gold-grad-btn: linear-gradient(135deg, #d9b568 0%, var(--gold-fill) 100%);

      --text: #17160f;
      --mid: #4a4740;
      --dim: #6b6860;

      --green: #15803d;
      --green-text: #15803d;
      --green-dim: rgba(21, 128, 61, 0.10);
      --red: #b91c1c;
      --red-text: #b91c1c;
      --red-dim: rgba(185, 28, 28, 0.10);
      --danger-fill: #b91c1c;
      --amber: #a16207;
      --amber-text: #a16207;
      --amber-dim: rgba(161, 98, 7, 0.10);
      --info: #4338ca;
      --info-text: #4338ca;
      --info-dim: rgba(67, 56, 202, 0.10);

      --overlay: rgba(23, 22, 15, 0.55);
      --skeleton: rgba(23, 22, 15, 0.06);
      --nav-bg: rgba(255, 255, 255, 0.78);
      --nav-bg-scrolled: rgba(255, 255, 255, 0.92);
      --nav-menu-bg: rgba(255, 255, 255, 0.98);
      --nav-border: rgba(127, 100, 24, 0.18);
      --nav-border-scrolled: rgba(127, 100, 24, 0.30);
      --nav-shadow: 0 4px 20px rgba(23, 22, 15, .07);
      --nav-shadow-scrolled: 0 10px 34px rgba(23, 22, 15, .11), 0 0 0 1px rgba(127, 100, 24, .07);
      --scrim-panel: rgba(250, 249, 246, 0.82);
      --card-grad: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%);
      --card-border: rgba(23, 22, 15, .09);
      --cookie-bg: rgba(255, 255, 255, .98);
      /* A hint of warmth, not a fog — enough to separate the band from the page. */
      --panel-veil: rgba(23, 22, 15, .045);
      /* Every stop stays readable on white: the lightest (#8a6d1f) is 4.90:1. */
      --brand-word-grad: linear-gradient(96deg, #6b520f 0%, #7f6418 44%, #8a6d1f 100%);
      --ghost-numeral: rgba(127, 100, 24, .16);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html, body { overflow-x: hidden; max-width: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      min-height: 100vh
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 36px;
      background: var(--nav-bg);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border)
    }

    .logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 19px;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .logo img {
      height: 32px;
      width: 32px;
      object-fit: contain
    }

    .mobile-toggle {
      display: none
    }

    /* FIX (audit #20 medium #6): standard "skip to content" pattern — off-screen until the
       link itself receives keyboard focus (Tab from a fresh page load), then jumps above the
       fixed nav (z-index:100) so it's actually visible/clickable, not hidden behind it. */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 12px;
      z-index: 200;
      background: var(--gold);
      color: var(--on-gold);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 14px;
      padding: 12px 20px;
      border-radius: var(--r-sm);
      text-decoration: none;
      transition: top .2s ease;
    }
    .skip-link:focus {
      top: 12px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px
    }

    .nav-links a {
      color: var(--mid);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color .2s
    }

    .nav-links a:hover {
      color: var(--text)
    }

    .btn-nav {
      background: var(--gold);
      color: var(--on-gold);
      border: none;
      padding: 9px 18px;
      border-radius: var(--r-sm);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: all .2s
    }

    .btn-nav:hover {
      background: var(--gold-l);
      transform: translateY(-1px)
    }

    .hero {
      padding: 148px 36px 80px;
      max-width: 1080px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--gold-dim);
      border: 1px solid rgba(201, 168, 76, .28);
      color: var(--gold-l);
      padding: 5px 13px;
      border-radius: var(--r-full);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 22px
    }

    h1 {
      font-family: 'Old Standard TT', serif;
      font-size: clamp(36px, 4.8vw, 56px);
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 20px
    }

    h1 em {
      color: var(--gold);
      font-style: italic
    }

    .hero p {
      color: var(--mid);
      font-size: 16px;
      line-height: 1.75;
      margin-bottom: 32px;
      font-weight: 300
    }

    .ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .btn-primary {
      /* Рев'ю 2026-08-20: цей background практично мертвий — рядок 4005 перекриває його
         !important — але залишати тут акцентний --gold ризиковано: варто комусь прибрати
         !important, і кнопка знову стане тим самим оливковим компромісом. --gold-fill і тут. */
      background: var(--gold-fill);
      color: var(--on-gold);
      border: none;
      padding: 13px 26px;
      border-radius: var(--r);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all .25s
    }

    .btn-primary:hover {
      background: var(--gold-fill);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(201, 168, 76, .32)
    }

    .btn-secondary {
      background: transparent;
      color: var(--mid);
      border: 1px solid var(--border);
      padding: 13px 26px;
      border-radius: var(--r);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all .25s
    }

    .btn-secondary:hover {
      border-color: var(--mid);
      color: var(--text)
    }

    .stats {
      display: flex;
      gap: 26px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--border)
    }

    .stat-n {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 21px;
      color: var(--gold)
    }

    .stat-l {
      font-size: 11px;
      color: var(--dim)
    }

    /* Task 13: живий композер у героєві. Консолідовано з шести фрагментів .hero-visual, що
       раніше конкурували в каскаді (ця база + мобільний display:none + редефініція нижче за
       файлом + !important-блок box-shadow/animation + декоративний ::before-glow + трейлинг
       position:relative) — тепер одне джерело правди. animation/heroFloat/heroGlow/::before
       прибрано навмисно: статична форма для реального вводу тексту доречніша за декоративне
       вікно з фейковою анімацією друку, яку ця задача якраз і замінює. !important теж прибрано —
       статичному правилу більше нема з чим боротись у каскаді (border/box-shadow збережено зі
       значень, що фактично рендерились — редефініція нижче й !important-блок вигравали свої
       властивості за специфічністю/порядком). Мокап-класи .mh/.md/.mt/.mb/.ml/.mi/.mo/.mtags/
       .mtag належали ВИКЛЮЧНО фейковому вікну #hero-demo (видаленому цією ж задачею) — жоден не
       використовується деінде в проєкті (перевірено), тому прибрані разом, а не лишені мертвими. */
    .hero-composer {
      background: var(--surface);
      border: 1px solid rgba(201, 168, 76, .18);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 168, 76, .08), 0 0 80px rgba(201, 168, 76, .06);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .hc-head { display: flex; align-items: center; gap: 8px; font-family: 'Syne', sans-serif; font-size: 12.5px; color: var(--dim); }
    .hc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .hc-label { font-size: 12px; color: var(--dim); }
    .hc-ta { width: 100%; min-height: 56px; resize: none; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--text); }
    .hc-row { display: flex; gap: 8px; }
    .hc-select { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; font-size: 12.5px; color: var(--text); min-height: 44px; }
    .hero-gen-btn { width: 100%; min-height: 44px; background: var(--gold-fill); color: var(--on-gold); border: none; border-radius: var(--r); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: transform var(--dur-fast); }
    .hero-gen-btn:hover { transform: translateY(-1px); }
    .hero-gen-btn:disabled { opacity: .6; cursor: default; }
    .hc-result { font-size: 12.5px; line-height: 1.6; color: var(--mid); max-height: 220px; overflow-y: auto; padding-top: 8px; border-top: 1px solid var(--border); white-space: pre-wrap; }
    .hc-remaining { font-size: 11.5px; color: var(--dim); }

    /* Задача 13: у героєві лишається ОДНА залита золотом кнопка — .hero-gen-btn (дія, яку людина
       виконує найчастіше на цьому екрані: генерація прямо тут). .btn-primary («Спробувати
       безкоштовно») у контексті .hero стає другорядним обведеним варіантом. !important
       ОБОВ'ЯЗКОВИЙ з обох боків: нижче в каскаді (.btn-primary, .gen-btn) заливає золотом через
       !important — без власного !important цей рядок був би мертвим кодом, бо не-!important
       правило програє !important незалежно від специфічності. Специфічність ЦЬОГО селектора
       (.hero .btn-primary, 0-2-0) вища за (.btn-primary, .gen-btn, 0-1-0), тож у межах
       !important-рівня він легітимно перемагає. */
    .hero .btn-primary {
      background: transparent !important;
      color: var(--gold) !important;
      border: 1px solid var(--gold) !important;
      box-shadow: none;
    }
    .hero .btn-primary:hover {
      background: var(--gold-dim);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .sec {
      padding: 72px 36px;
      max-width: 1080px;
      margin: 0 auto;
      border-top: 1px solid var(--border)
    }

    .sec-label {
      text-align: center;
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 14px
    }

    .sec-title {
      font-family: 'Old Standard TT', serif;
      font-size: clamp(28px, 3.8vw, 44px);
      text-align: center;
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 14px
    }

    .sec-title em {
      color: var(--gold);
      font-style: italic
    }

    .sec-sub {
      text-align: center;
      color: var(--dim);
      max-width: 520px;
      margin: 0 auto 52px;
      font-size: 15px
    }

    .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .feat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 26px;
      transition: all .3s
    }

    .feat-card:hover {
      border-color: rgba(201, 168, 76, .4);
      transform: translateY(-4px)
    }

    .feat-icon {
      width: 42px;
      height: 42px;
      border-radius: var(--r);
      background: var(--gold-dim);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      margin-bottom: 16px
    }

    .feat-card h3 {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 8px
    }

    .feat-card p {
      color: var(--dim);
      font-size: 13px;
      line-height: 1.6
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .price-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 30px;
      position: relative;
      transition: all .3s
    }

    .price-card.pop {
      border-color: var(--gold);
      background: linear-gradient(155deg, rgba(201, 168, 76, .07), var(--surface))
    }

    .pop-badge {
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: var(--on-gold);
      padding: 3px 14px;
      border-radius: var(--r-full);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .04em;
      white-space: nowrap
    }

    .plan-name {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 14px
    }

    .plan-price .amt {
      font-family: 'Old Standard TT', serif;
      font-size: 46px;
      color: var(--text)
    }

    .plan-price .per {
      color: var(--dim);
      font-size: 13px
    }

    .plan-desc {
      color: var(--dim);
      font-size: 13px;
      margin-bottom: 22px
    }

    .plan-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 26px
    }

    .plan-feats li {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 13px
    }

    .plan-feats li::before {
      content: '✓';
      color: var(--green);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px
    }

    .btn-plan {
      width: 100%;
      padding: 11px;
      border-radius: var(--r-sm);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: all var(--dur-fast);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text)
    }

    .btn-plan:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    .price-card.pop .btn-plan {
      background: var(--gold);
      color: var(--on-gold);
      border-color: var(--gold)
    }

    .price-card.pop .btn-plan:hover {
      background: var(--gold-l)
    }

    /* FIX (audit #9 low #15): visual state for the "current plan" button (see
       updatePricingCardStates() in app-1.js) — overrides both the plain and .pop (popular/Pro)
       button styles above so re-buying the plan you're already on is visibly a no-op, not just
       functionally blocked. */
    .btn-plan.current-plan-btn,
    .price-card.pop .btn-plan.current-plan-btn {
      cursor: default;
      opacity: .6;
      background: var(--surface2);
      color: var(--dim);
      border-color: var(--border)
    }
    .btn-plan.current-plan-btn:hover,
    .price-card.pop .btn-plan.current-plan-btn:hover {
      background: var(--surface2);
      color: var(--dim);
      border-color: var(--border)
    }

    #app-wrap {
      padding: 72px 36px;
      border-top: 1px solid var(--border)
    }

    .app-box {
      max-width: 880px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden
    }

    .app-hdr {
      background: var(--surface2);
      padding: 18px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border)
    }

    .app-hdr-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .sdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 7px var(--green);
      animation: pulse 2s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .35
      }
    }

    #conn-label {
      font-size: 12px;
      color: var(--dim)
    }

    .api-panel {
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      padding: 20px 26px
    }

    .api-panel-title {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--dim);
      margin-bottom: 12px
    }

    .prov-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .ptab {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 7px 14px;
      border-radius: var(--r-sm);
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .ptab:hover {
      border-color: var(--gold);
      color: var(--text)
    }

    .ptab.active {
      border-color: var(--gold);
      color: var(--gold);
      background: var(--gold-dim)
    }

    .free-badge {
      font-size: 12px;
      padding: 1px 6px;
      border-radius: var(--r-full);
      background: rgba(76, 175, 125, .2);
      color: var(--green);
      font-weight: 700
    }

    .hint-box {
      font-size: 12px;
      color: var(--dim);
      line-height: 1.6;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 13px;
      margin-bottom: 12px
    }

    .hint-box a {
      color: var(--gold);
      text-decoration: none
    }

    .hint-box a:hover {
      text-decoration: underline
    }

    .key-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .key-inp {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 13px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      outline: none;
      transition: border-color .2s;
      min-width: 180px
    }

    .key-inp:focus {
      border-color: var(--gold)
    }

    .key-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 10px 16px;
      border-radius: var(--r-sm);
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
      white-space: nowrap
    }

    .key-btn:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    /* Секція E задача 2: .key-btn лишається спільною головною дією (16 місць) — тут
       приглушується лише ОДНЕ конкретне вживання, заклик порожнього стану бібліотеки,
       який до цієї задачі отримував золоту площину через інлайновий style= у app-1.js
       (дублюючи .ws-new-btn, що вже веде на /app/new). Клас .key-btn лишається як є. */
    .key-btn--quiet {
      background: var(--surface2);
      color: var(--gold);
      border-color: var(--gold-dim-strong);
    }
    .key-btn--quiet:hover {
      background: var(--surface3);
      border-color: var(--gold);
      color: var(--gold);
    }

    #key-status {
      font-size: 12px;
      margin-top: 7px
    }

    #key-status.ok {
      color: var(--green)
    }

    #key-status.err {
      color: var(--red)
    }

    .app-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      max-width: 880px;
      margin: 0 auto;
      width: 100%
    }

    .left-panel {
      padding: 28px 28px 26px;
      border-bottom: 1px solid var(--border);
      /* FIX (audit #17 low #5): .left-panel/.right-panel are grid items of .app-body — grid
         items default to min-width:auto, meaning a nowrap child row (e.g. the topic input's
         Ideas/Templates/SEO button trio) can force the item wider than its 1fr track on a narrow
         phone. .app-box clips with overflow:hidden so the page itself never scrolls, but the
         panel's own box (and its right-edge content) was measurably pushed a few px past the
         viewport. min-width:0 lets the item shrink to its track instead of its content's
         min-content size, the standard fix for this class of grid overflow.
      */
      min-width: 0;
    }

    .right-panel {
      padding: 24px 28px 30px;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* Make the result area clearly "the result" in the chat-like flow */
    .right-panel .out-hdr { padding-top: 4px; }

    /* Compact horizontal row for the short selectors (language / tone / length) */
    .gen-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .gen-row .fg { margin-bottom: 16px; }
    @media (max-width: 640px) {
      .gen-row { grid-template-columns: 1fr; gap: 0; }
    }

    /* B2 задача 7b: .topic-input-row належав старому полю теми (#topic) з трьома кнопками
       поруч — усе видалено разом із самим полем. Ті самі кнопки тепер живуть у #cmp-tools
       (composer), стилі для якого — нижче, біля решти правил композера. */

    .fg {
      margin-bottom: 16px
    }

    .fl {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 7px
    }

    .fi,
    .fs,
    .ft {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 13px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      transition: border-color .2s;
      outline: none
    }

    .fi:focus,
    .fs:focus,
    .ft:focus {
      border-color: var(--gold)
    }

    .fs {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%238a8880' d='M5.5 7.5L1 3h9z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      padding-right: 32px;
      cursor: pointer
    }

    .fs option {
      background: var(--surface2)
    }

    .ft {
      resize: vertical;
      min-height: 72px
    }

    /* B2 задача 7b: .cc — лічильник символів старого поля #topic — видалено разом із ним.
       Лічильник композера має свій власний клас .cmp-count (нижче, біля решти композера). */

    .tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 7px 9px;
      min-height: 40px;
      cursor: text;
      transition: border-color .2s
    }

    .tags-wrap:focus-within {
      border-color: var(--gold)
    }

    .tchip {
      background: var(--gold-dim);
      color: var(--gold-l);
      padding: 2px 8px;
      border-radius: var(--r-full);
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .tchip button {
      background: none;
      border: none;
      color: var(--gold-l);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      padding: 0;
      opacity: .6
    }

    .tchip button:hover {
      opacity: 1
    }

    #tag-inp {
      border: none;
      background: none;
      outline: none;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      flex: 1;
      min-width: 70px
    }

    .gen-btn {
      width: 100%;
      padding: 17px;
      border-radius: var(--r);
      /* Рев'ю 2026-08-20: як і .btn-primary вище — перекрито !important нижче, але лишати тут
         акцентний --gold небезпечно на майбутнє. --gold-fill і тут. */
      background: var(--gold-fill);
      color: var(--on-gold);
      border: none;
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 15.5px;
      letter-spacing: .02em;
      cursor: pointer;
      transition: all .25s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-top: 4px;
      position: relative;
      overflow: hidden
    }

    .gen-btn:hover:not(:disabled) {
      background: var(--gold-fill);
      transform: translateY(-2px);
      box-shadow: 0 8px 26px rgba(201, 168, 76, .32)
    }

    .gen-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none
    }

    .gen-btn.loading::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
      animation: shimmer-btn 1.5s infinite
    }

    @keyframes shimmer-btn {
      0% {
        transform: translateX(-100%)
      }

      100% {
        transform: translateX(100%)
      }
    }

    .out-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px
    }

    .out-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: .07em
    }

    .out-acts {
      display: flex;
      gap: 7px
    }

    .act-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 5px 11px;
      border-radius: var(--r-xs);
      font-size: 12px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif
    }

    .act-btn:hover:not(:disabled) {
      border-color: var(--gold);
      color: var(--gold)
    }

    .act-btn:disabled {
      opacity: .3;
      cursor: not-allowed
    }

    .out-area {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 16px;
      font-size: 13px;
      line-height: 1.8;
      color: var(--mid);
      min-height: 440px;
      overflow-y: auto;
      position: relative;
      font-family: 'DM Sans', sans-serif;
      word-break: break-word;
      outline: none;
      /* remove focus outline for contenteditable */
    }

    .out-area:focus {
      border-color: var(--gold);
    }

    .out-area h1,
    .out-area h2,
    .out-area h3 {
      color: var(--text);
      font-family: 'Old Standard TT', serif;
      margin-top: 24px;
      margin-bottom: 12px;
      font-weight: normal;
    }

    .out-area h1 {
      font-size: 28px;
      margin-top: 0;
    }

    .out-area h2 {
      font-size: 24px;
    }

    .out-area h3 {
      font-size: 20px;
    }

    .out-area p {
      margin-bottom: 16px;
    }

    .out-area ul,
    .out-area ol {
      margin-bottom: 16px;
      padding-left: 24px;
    }

    .out-area li {
      margin-bottom: 8px;
    }

    .out-area strong {
      color: var(--text);
    }

    .placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 11px;
      pointer-events: none
    }

    .ph-icon {
      font-size: 32px;
      opacity: .25
    }

    .ph-text {
      color: var(--dim);
      font-size: 13px;
      text-align: center;
      line-height: 1.5
    }

    .skel {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 4px
    }

    .skel-line {
      background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
      background-size: 400% 100%;
      border-radius: var(--r-xs);
      height: 13px;
      animation: shimmer 1.4s ease-in-out infinite
    }

    @keyframes shimmer {
      0% {
        background-position: 100%
      }

      100% {
        background-position: -100%
      }
    }

    .gen-progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
      z-index: 999
    }

    .gen-progress.active {
      animation: progress 25s linear
    }

    @keyframes progress {
      0% {
        transform: scaleX(0)
      }

      100% {
        transform: scaleX(1)
      }
    }

    /* B2 задача 7b: .out-meta прибрано з розмітки — метрики показує #res-bar (задача 6),
       .meta-c нижче й далі стилізує його span-и. */

    .meta-c {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--dim)
    }

    .meta-c span {
      color: var(--gold-l);
      font-weight: 600
    }

    /* ═══ B2 задача 6/8: смуга результату — два ряди замість поповера «⋯» ═══
       Класи й значення взято з виміряного макета (public/_b2-mockup.html, секція
       «СПОКІЙНА ПОДАЧА»), задача 8 додала другий ряд (.res-tabs) — контраст перевірено в
       обох темах, ціль дотику .res-b/.res-tab — 44px (перевірено й на 375px). */
    .res-bar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: var(--surface2);
    }
    .res-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .res-stat {
      font-size: 12.5px;
      color: var(--dim);
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }
    .res-act { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap }
    .res-b {
      min-height: 44px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12.5px;
    }
    .res-b:hover { border-color: var(--border-strong) }
    /* Другий ряд — вкладки, що ПЕРЕМИКАЮТЬ панель (задача 8, п.2). Розділова риска зверху
       відокремлює його від першого ряду дій, які лише ВИДАЮТЬ результат. */
    .res-tabs {
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    .res-tab {
      min-height: 44px;
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--mid);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
    }
    .res-tab:hover { border-color: var(--border-strong); color: var(--text) }
    /* Секція E, фінальне рев'ю: активна вкладка панелі результату — це ДРУГА золота площина
       на екрані, поруч із .gen-btn (обидві видимі одночасно щоразу після генерації). Активність
       і так позначена ЗАЛИВКОЮ, як і раніше — просто нейтральною, не золотою: суцільний фон +
       межа замість контурної кнопки лишаються, колір площини більше не конкурує з головною
       дією. Той самий приглушений патерн, що вже пройшов перевірку контрасту на .fmt-b[aria-pressed="true"]. */
    .res-tab.active {
      background: var(--surface2);
      border-color: var(--gold);
      color: var(--gold);
    }
    .res-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* @media після базових правил .res-act/.res-b/.res-tab(s) — інакше медіа-блок програв
       би їм за порядком появи, попри однакову специфічність (глобальне обмеження проєкту). */
    @media (max-width: 767px) {
      .res-act { width: 100%; margin-left: 0 }
      .res-b { flex: 1 }
      .res-tabs { width: 100%; }
      .res-tab { flex: 1 1 auto; min-width: 44px; }
    }

    .hist-sec {
      padding: 22px 26px;
      border-top: 1px solid var(--border)
    }

    .hist-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 12px
    }

    .hist-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .hist-item {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 11px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all .2s
    }

    .hist-item:hover {
      border-color: rgba(201, 168, 76, .3)
    }

    .hi-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 340px
    }

    .hi-meta {
      font-size: 11px;
      color: var(--dim);
      margin-top: 2px
    }

    .hi-acts {
      display: flex;
      gap: 5px;
      margin-left: 10px
    }

    /* Задача 7: картки бібліотеки «Мої тексти» — заміняють плаский рядок вище
       (селектори .hist-item / .act-btn повторюються навмисно: пізніші правила того
       самого селектора в каскаді переважають, спеціальність однакова). */
    .hist-usage { margin-bottom: 12px; font-size: 11.5px; color: var(--dim); }
    .hist-item { display: flex; align-items: flex-start; gap: 12px; }
    .hist-item-main { flex: 1; min-width: 0; }
    .hist-item-title { display: flex; align-items: center; gap: 8px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text); }
    .hist-item-prev { margin-top: 3px; font-size: 12px; color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hist-item-meta { margin-top: 4px; font-size: 12px; color: var(--dim); }
    .hist-item-acts { display: flex; gap: 4px; }
    /* Ціль кліку ≥44×44px для дій картки (мінімальний розмір торкання) — сам .act-btn
       десь-інде в каскаді компактніший (padding:5px 11px), тому саме тут задаємо min-width/
       min-height, а не чіпаємо загальний .act-btn і не ламаємо його вживання деінде. */
    .hist-item-acts .act-btn { min-width: 44px; min-height: 44px; }
    /* Незаймані чернетки приглушені, щоб бібліотека не читалася як смітник. */
    .hist-item.is-draft .hist-item-title { color: var(--mid); }
    .hist-draft-badge {
      padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--r-full);
      font-family: 'Syne', sans-serif; font-weight: 600; font-size: 12px;
      text-transform: uppercase; letter-spacing: .04em; color: var(--dim);
    }

    /* ── Секція D задача 5: стан публікації на картці бібліотеки (§6.2) ────────────────
       Драбина «чернетка → збережено → опубліковано → позиція». Кольори взяті з наявних
       змінних теми навмисно.

       ЩО САМЕ ВИМІРЯНО: два кольори тексту, які заводить ЦЕЙ блок, — .hist-pub-saved (--dim
       ≈4.9:1) і .hist-pub-dormant (--gold ≈4.9:1 у світлій і ≈7.6:1 у темній на
       --surface2/--bg). Обидва ≥4.5:1 в обох темах.

       ЩО НЕ ВИМІРЯНО І ЧОМУ: у той самий рядок їдуть бейджі «демо» і «домен»
       (monitorSimBadge/monitorDomainBadge в app-1.js) — успадковані від вкладки моніторингу
       разом із інлайновими стилями. У «демо» фон і рамка прибиті як rgba(255,255,255,.05) і
       rgba(255,255,255,.28): на СВІТЛІЙ темі вони практично зникають, тож бейдж тримається
       лише на кольорі тексту, а не на формі. Ні його контраст, ні контраст «домену»
       (rgba(201,168,76,…)) на світлому тлі тут не міряні, і цей блок їх не виправляє: бейджі
       не належать задачі 5, а їхнє візуальне полірування — секція E. Це попередження, а не
       твердження, що перевірено все.
       flex-wrap + min-width:0 — щоб довгий домен разом із позначками «демо»/«домен» на
       вузькому екрані переносився, а не виїжджав за край картки. */
    .hist-item-pub {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      margin-top: 5px; min-width: 0;
      font-size: 11px; line-height: 1.5; color: var(--mid);
      overflow-wrap: anywhere;
    }
    /* «збережено» — тихий стан, а не свято: приглушений, як і решта мета-рядків картки. */
    .hist-pub-saved { color: var(--dim); }
    /* «спить» — єдиний стан, що просить дії людини, тому єдиний акцентний у цьому рядку. */
    .hist-pub-dormant { color: var(--gold); font-weight: 600; }
    /* Вік числа (рев'ю 2026-08-20, знахідка 3): приглушений, як і «збережено», — це підпис до
       позиції, а не окреме повідомлення. Той самий --dim ≈4.9:1, що вже виміряний вище. */
    .hist-pub-checked { color: var(--dim); }

    #toast {
      position: fixed;
      bottom: 26px;
      right: 26px;
      background: var(--surface);
      border: 1px solid var(--border);
      /* Значення тут навмисно збігаються з пізнішим `.toast, #toast, .toast-box` нижче:
         той рядок раніше перекривав ці через !important (вищий каскад + пізніша позиція),
         тобто border-radius:10px і ця тінь ніколи не рендерились. Звівши обидва визначення
         до тих самих токенів, !important там більше не потрібен — суперечності нема. */
      border-radius: var(--r);
      padding: 13px 18px;
      font-size: 13px;
      color: var(--text);
      z-index: 999;
      transform: translateY(90px);
      opacity: 0;
      transition: all .3s;
      pointer-events: none;
      box-shadow: var(--shadow-md);
    }

    #toast.show {
      transform: translateY(0);
      opacity: 1
    }

    #toast.success {
      border-color: var(--green)
    }

    #toast.error {
      border-color: var(--red)
    }

    /* FIX (audit #9 low #10): showToast(..., 'info') (e.g. maybeHandleTeamInvite's "log in with
       the invited email" message) had no matching rule — only .success/.error existed — so an
       info toast rendered with the plain unstyled border, giving no visual cue it's neutral
       guidance rather than a plain default state. Reuses --gold, the app's existing accent color
       for informational/notice UI (matches the email-verification banner's styling). */
    #toast.info {
      border-color: var(--gold)
    }

    .modal-ov {
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s
    }

    .modal-ov.show {
      opacity: 1;
      pointer-events: all
    }

    /* Задача 6, рев'ю коло 2: тут стояв вхідний transform: scale(.95) → scale(1) за .3s.
       .modal-ov сама вже вмикає pointer-events:all В ТУ Ж МИТЬ, коли додається .show (opacity
       і pointer-events не інтерполюються синхронно) — тобто протягом усіх ~300мс переходу
       .act-btn/.modal-close всередині БУЛИ клікабельні, але фізично менші за 44px (0.95×44 ≈
       42px рівно те число, яке впіймав живий замір одразу після відкриття). min-height/
       min-width на самих кнопках цього не ловлять: вони й так дають 44px у СПОКОЇ (звірено
       живцем — після завершення переходу рект дає 44×44), а тут падає розмір ВІЗУАЛЬНОГО
       (і хіт-тестового) боксу ЗВЕРХУ через transform на предку. Найнадійніший фікс — прибрати
       сам стрибок розміру, а не намагатись «заморозити» touch-таргет під час анімації: opacity-
       перехід на .modal-ov лишається, модалка й далі плавно з'являється, просто без масштабу. */
    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 34px;
      width: 420px;
      max-width: 90vw;
    }

    .modal-title {
      font-family: 'Old Standard TT', serif;
      font-size: 24px;
      margin-bottom: 7px
    }

    .modal-sub {
      color: var(--dim);
      font-size: 13px;
      margin-bottom: 22px
    }

    .modal-close {
      background: none;
      border: none;
      color: var(--dim);
      font-size: 18px;
      cursor: pointer;
      float: right;
      margin-top: -6px;
      transition: color .2s
    }

    .modal-close:hover {
      color: var(--text)
    }

    footer {
      border-top: 1px solid var(--border);
      padding: 36px;
      text-align: center;
      color: var(--dim);
      font-size: 13px
    }

    .f-brand {
      font-family: 'Old Standard TT', serif;
      font-size: 20px;
      color: var(--text);
      margin-bottom: 7px
    }

    .back-top {
      position: fixed;
      bottom: 26px;
      right: 26px;
      width: 48px;
      height: 48px;
      background: var(--gold);
      color: var(--on-gold);
      border: none;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: all .3s;
      box-shadow: 0 4px 20px rgba(201, 168, 76, .3);
      z-index: 99
    }

    .back-top.show {
      opacity: 1;
      pointer-events: all
    }

    .back-top:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px rgba(201, 168, 76, .5)
    }

    /* ── "Need help?" floating action button ──────────────────────────────
       Opposite corner from .back-top/#toast (both bottom-right) so nothing overlaps;
       always visible (not scroll-gated like .back-top) since a stuck user needs it
       from the very first screen. */
    .help-fab {
      position: fixed;
      bottom: 26px;
      left: 26px;
      /* Below the modal layer — see the z-index scale documented above #cookie-banner. */
      z-index: 140;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--r-full);
      padding: 12px 18px 12px 14px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12.5px;
      cursor: pointer;
      box-shadow: var(--shadow-3);
      transition: all .2s;
    }
    .help-fab-ico { font-size: 16px; line-height: 1; }
    .help-fab:hover {
      border-color: var(--gold);
      color: var(--gold-l);
      transform: translateY(-4px);
      box-shadow: var(--shadow-3);
    }
    /* Narrow phones: collapse to an icon-only circle (mirrors .back-top's 48px size) so it
       never competes for width with the cookie banner or crowds the generator UI below it. */
    @media (max-width: 480px) {
      .help-fab { padding: 0; width: 48px; height: 48px; justify-content: center; border-radius: 50%; }
      .help-fab-txt { display: none; }
    }

    /* ── Feedback-modal type selector (bug / question / idea / other) ── */
    .fb-type-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .fb-type-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--mid);
      border-radius: var(--r-full);
      padding: 8px 14px;
      font-size: 12.5px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: all .15s;
    }
    .fb-type-pill:hover { border-color: var(--gold); color: var(--text); }
    .fb-type-pill.active {
      background: var(--gold-dim);
      border-color: var(--gold);
      color: var(--gold-l);
    }

    /* ── Feedback-modal FAQ deflector (shown only for type="question") ── */
    .fb-faq-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
    .fb-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .fb-faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: transparent;
      border: none;
      color: var(--text);
      text-align: left;
      padding: 10px 12px;
      font-size: 12.5px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
    }
    .fb-faq-q:hover { color: var(--gold-l); }
    .fb-faq-ico { flex-shrink: 0; color: var(--gold); font-size: 14px; transition: transform .2s; }
    .fb-faq-q.open .fb-faq-ico { transform: rotate(45deg); }
    .fb-faq-a { display: none; }
    .fb-faq-a.open { display: block; }
    .fb-faq-a-inner { padding: 0 12px 12px; color: var(--mid); font-size: 12px; line-height: 1.55; }

    @media(max-width:760px) {
      nav {
        padding: 13px 18px
      }

      .nav-links {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 16px;
        gap: 16px;
        display: none
      }

      .nav-links.show {
        display: flex
      }

      /* Hide the standalone top CTA on mobile — it overlapped the logo. The ☰ menu
         (with the Generator link) and the hero's "Try for Free" cover this action. */
      .btn-nav { display: none }
      .logo { font-size: 15px; white-space: nowrap; }
      .logo img { height: 26px; width: 26px; }
      .stats { gap: 0; flex-wrap: wrap; }
      .stats > div { padding-right: 16px; margin-right: 16px; }
      .stat-n { font-size: 17px; }

      .mobile-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--text);
        font-size: 24px;
        cursor: pointer;
        padding: 4px
      }

      .hero {
        grid-template-columns: 1fr;
        padding: 110px 18px 52px;
        gap: 34px
      }

      /* Живий репорт: у локалізованому тексті ("Спробувати безкоштовно" / "Переглянути
         тарифи") два .btn-primary/.btn-secondary у .ctas разом не влазять у рядок
         (виміряно: 304px + 245px проти ~320px екрана), тож flex-wrap переносив кожну
         кнопку на власний рядок — але кожна лишалась своєї "природної" ширини й тому
         тулилась ліворуч із порожнім простором праворуч ("децентралізовані" кнопки).
         Повна ширина й по одній в рядок прибирає цю асиметрію на будь-якій довжині
         тексту/мові. */
      .ctas {
        flex-direction: column;
      }
      .ctas .btn-primary,
      .ctas .btn-secondary {
        width: 100%;
        text-align: center;
        white-space: normal;
      }

      /* Той самий .btn-primary під довгим вільним текстом (не короткий підпис кнопки)
         переповнював екран праворуч — виміряно живцем: права межа кнопки на 401px
         проти viewport 312px, бо спільне правило .btn-primary{white-space:nowrap}
         (пілюля-форма для коротких підписів на кшталт "Вхід"/"Зберегти") не давало
         рядку перенестись. Клас — не сам .btn-primary — щоб коротких підписів
         (навбар, робочий простір, модалки) це не торкалось.
         .cta-wrap-text{...} САМ ПО СОБІ (0,1,0) програвав .btn-primary{white-space:nowrap}
         (теж 0,1,0, рядок 4798, пізніше у файлі) — та сама пастка каскаду, що вже billed
         цей проєкт неодноразово: при рівній специфічності виграє порядок у файлі, а не
         намір. Складений селектор .btn-primary.cta-wrap-text (0,2,0) виграє незалежно
         від порядку. */
      .btn-primary.cta-wrap-text {
        white-space: normal;
        max-width: 100%;
      }

      /* Task 13: композер лишається видимим на мобільному — герой це продукт, він не має
         ховатись саме там, де більшість трафіку; тут лише зменшено внутрішні відступи. */
      .hero-composer {
        padding: 16px
      }

      .feat-grid,
      .price-grid {
        grid-template-columns: 1fr
      }

      .app-body {
        grid-template-columns: 1fr
      }

      .left-panel {
        border-right: none;
        border-bottom: 1px solid var(--border)
      }

      .sec,
      #app-wrap {
        padding: 52px 18px
      }
    }

    /* Anti-copy measures */
    /* FIX (audit #4 #18): this selector targeted a `.app-wrap` CLASS, but the element is
       `<div id="app-wrap">` — the class never matched, so the generator area had no
       anti-copy protection at all (only .hero did). */
    #app-wrap,
    .hero {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .fi,
    .ft,
    .out-area,
    input,
    textarea {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }

    /* ── Social login buttons ─────────────────────────────────────── */
    .social-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0 12px;
      color: var(--dim);
      font-size: 12px;
    }

    .social-divider::before,
    .social-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 11px 16px;
      border-radius: var(--r-sm);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      border: 1px solid var(--border);
      margin-bottom: 8px;
    }

    .social-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .social-btn.google {
      background: #fff;
      color: #3c4043;
    }

    .social-btn.google:hover {
      background: #f7f7f7;
      box-shadow: var(--shadow-2);
      transform: translateY(-1px);
    }


    /* ── Language switcher ─────────────────────────────────────────── */
    .lang-switch {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 5px 12px;
      border-radius: var(--r-xs);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .lang-switch:hover {
      border-color: var(--gold);
      color: var(--gold);
    }

    /* ── Model toggle ───────────────────────────────────────────── */
    .model-toggle {
      display: flex;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .model-opt {
      flex: 1;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      background: var(--bg);
      color: var(--dim);
      border: none;
      font-family: 'DM Sans', sans-serif;
      transition: all .2s;
      text-align: center;
    }

    .model-opt:first-child {
      border-right: 1px solid var(--border);
    }

    .model-opt.active {
      background: var(--gold-dim);
      color: var(--gold);
    }

    .model-opt:hover:not(.active) {
      color: var(--text);
    }

    /* ── Keyword density ────────────────────────────────────────── */
    .kd-panel {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 14px;
      margin-top: 12px;
    }

    .kd-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--dim);
      margin-bottom: 10px;
    }

    .kd-bar-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .kd-label {
      font-size: 12px;
      color: var(--mid);
      min-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .kd-bar {
      flex: 1;
      height: 6px;
      background: var(--surface2);
      border-radius: var(--r-xs);
      overflow: hidden;
    }

    .kd-fill {
      height: 100%;
      border-radius: var(--r-xs);
      transition: width .4s;
    }

    .kd-count {
      font-size: 11px;
      color: var(--dim);
      min-width: 30px;
      text-align: right;
    }

    /* ── Meta Tag Studio ────────────────────────────────────────── */
    .meta-studio {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px;
      margin-top: 12px;
    }

    .meta-studio-title {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--dim);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .meta-input-wrap {
      margin-bottom: 10px;
    }

    .meta-input-wrap label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--dim);
      margin-bottom: 4px;
    }

    .meta-char-count {
      font-weight: 600;
    }

    .meta-char-count.warn {
      color: var(--red);
    }

    .meta-char-count.ok {
      color: var(--green);
    }

    .meta-input {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      padding: 8px 10px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      outline: none;
      transition: border-color .2s;
    }

    .meta-input:focus {
      border-color: var(--gold);
    }

    .meta-preview {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px;
      margin-top: 8px;
    }

    .meta-preview-title {
      font-size: 16px;
      color: #1a0dab;
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meta-preview-url {
      font-size: 12px;
      color: #006621;
      margin-bottom: 4px;
    }

    .meta-preview-desc {
      font-size: 13px;
      color: #545454;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ── Stats mini ──────────────────────────────────────────────── */
    .stats-mini {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .stats-mini-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px;
      text-align: center;
    }

    .stats-mini-n {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 18px;
      color: var(--gold);
    }

    .stats-mini-l {
      font-size: 12px;
      color: var(--dim);
      margin-top: 2px;
    }

    /* ── History search ─────────────────────────────────────────── */
    .hist-search {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .hist-search input {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      padding: 8px 12px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      outline: none;
      /* Задача 6: виміряно 34px на 375px — під ціль дотику 44px. */
      min-height: var(--tap-min);
    }

    .hist-search input:focus {
      border-color: var(--gold);
    }

    /* ── Live word count ────────────────────────────────────────── */
    .live-wc {
      display: flex;
      gap: 12px;
      padding: 8px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      margin-top: 8px;
      font-size: 11px;
      color: var(--dim);
    }

    .live-wc span {
      color: var(--gold-l);
      font-weight: 600;
    }

    /* ── Phase 1: WYSIWYG Toolbar ──────────────────────────────── */
    .wysiwyg-bar {
      display: none;
      gap: 4px;
      padding: 8px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      /* Округлення тільки верхніх кутів — не одне з 6 значень шкали radius (Task 2 підсумовує
         лише повні border-radius), тому виражено довгою формою на кут. */
      border-top-left-radius: var(--r-sm);
      border-top-right-radius: var(--r-sm);
      border-bottom: none;
      flex-wrap: wrap;
      align-items: center;
    }
    .wysiwyg-bar.visible { display: flex; }
    .wysiwyg-btn {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 5px 10px;
      border-radius: var(--r-xs);
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
      line-height: 1;
    }
    .wysiwyg-btn:hover { border-color: var(--gold); color: var(--gold); }
    .wysiwyg-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

    /* ── Phase 1: Copy Format Dropdown ──────────────────────────── */
    .copy-dropdown { position: relative; display: inline-block; }
    .copy-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      min-width: 180px;
      z-index: 50;
      box-shadow: var(--shadow-3);
      overflow: hidden;
      margin-top: 4px;
    }
    .copy-dropdown-menu.show { display: block; }
    .copy-dropdown-item {
      display: block;
      width: 100%;
      padding: 10px 14px;
      background: none;
      border: none;
      color: var(--mid);
      font-size: 13px;
      cursor: pointer;
      text-align: left;
      font-family: 'DM Sans', sans-serif;
      transition: all .15s;
    }
    .copy-dropdown-item:hover { background: var(--gold-dim); color: var(--gold); }

    /* ── Phase 2: Topic Ideas Panel ────────────────────────────── */
    .ideas-panel {
      display: none;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px;
      margin-top: 8px;
    }
    .ideas-panel.visible { display: block; }
    .ideas-panel-title {
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--dim);
      margin-bottom: 8px;
    }
    .idea-chip {
      display: block;
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 4px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      color: var(--mid);
      font-size: 12px;
      cursor: pointer;
      transition: all .2s;
      text-align: left;
      font-family: 'DM Sans', sans-serif;
    }
    .idea-chip:hover { border-color: var(--gold); color: var(--gold); }
    .ideas-loading { text-align: center; color: var(--dim); font-size: 12px; padding: 12px; }

    /* ── Phase 2: Export Buttons ────────────────────────────────── */
    .export-bar {
      display: none;
      gap: 6px;
      padding: 10px 0;
      flex-wrap: wrap;
    }
    .export-bar.visible { display: flex; }
    .export-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--mid);
      padding: 6px 12px;
      border-radius: var(--r-xs);
      font-size: 11px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
    }
    .export-btn:hover { border-color: var(--gold); color: var(--gold); }

    /* ── Phase 3: Template selector in content type ─────────────── */
    .template-badge {
      font-size: 12px;
      padding: 1px 5px;
      border-radius: var(--r-full);
      background: rgba(76,175,125,.15);
      color: var(--green);
      font-weight: 700;
      margin-left: 4px;
    }

    /* ── SEO TEXT ANALYZER MODULE ────────────────────────────────── */
    .seo-az-panel {
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      background: var(--surface);
    }
    .seo-az-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      background: var(--surface2);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      user-select: none;
      transition: background 0.18s;
    }
    .seo-az-hdr:hover { background: var(--bg); }
    .seo-az-body { padding: 14px 14px 10px; }
    .seo-top-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 13px;
      padding-bottom: 13px;
      border-bottom: 1px solid var(--border);
    }
    .seo-top-circle {
      width: 70px; height: 70px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 3px solid var(--border);
      flex-shrink: 0;
      background: var(--surface2);
      transition: border-color 0.4s;
    }
    .seo-top-pct {
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      color: var(--mid);
      transition: color 0.4s;
    }
    .seo-top-pct-unit { font-size: 12px; color: var(--dim); }
    .seo-top-meta { flex: 1; min-width: 0; }
    .seo-top-meta-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 7px;
      line-height: 1.3;
    }
    .seo-score-bar-track {
      height: 6px;
      background: var(--surface2);
      border-radius: var(--r-xs);
      overflow: hidden;
      margin-bottom: 7px;
    }
    .seo-score-bar-fill {
      height: 100%;
      border-radius: var(--r-xs);
      width: 0%;
      transition: width 0.6s ease, background 0.4s;
    }
    .seo-disclaimer {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: var(--dim);
    }
    .seo-disclaimer-icon {
      width: 13px; height: 13px;
      border-radius: 50%;
      border: 1px solid currentColor;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      cursor: help;
      flex-shrink: 0;
    }
    .seo-h-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 11px;
    }
    .seo-h-badge {
      padding: 2px 7px;
      border-radius: var(--r-xs);
      font-size: 12px;
      font-weight: 700;
      border: 1px solid;
    }
    .seo-h-badge.h1 { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }
    .seo-h-badge.h2 { border-color: var(--mid); color: var(--mid); background: rgba(255,255,255,0.04); }
    .seo-h-badge.h3 { border-color: var(--dim); color: var(--dim); background: rgba(255,255,255,0.02); }
    .seo-h-badge.miss { opacity: 0.3; }
    .seo-legend-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 11px;
    }
    .seo-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--mid);
    }
    .seo-legend-dot { width: 8px; height: 8px; border-radius: var(--r-xs); flex-shrink: 0; }
    .seo-user-input-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--mid);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .seo-user-txt {
      width: 100%;
      min-height: 90px;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text);
      font-size: 12px;
      resize: vertical;
      font-family: inherit;
      line-height: 1.5;
      box-sizing: border-box;
      margin-bottom: 9px;
    }
    .seo-user-txt:focus { outline: none; border-color: var(--gold); }
    .seo-run-btn {
      width: 100%;
      padding: 9px;
      background: var(--surface2);
      color: var(--gold);
      border: 1px solid rgba(201,168,76,0.35);
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 12px;
      transition: background 0.18s;
    }
    .seo-run-btn:hover { background: rgba(201,168,76,0.08); }
    .seo-panels-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-bottom: 11px;
    }
    @media (max-width: 600px) { .seo-panels-grid { grid-template-columns: 1fr; } }
    .seo-hl-card {
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      overflow: hidden;
      background: var(--bg);
    }
    .seo-hl-card-hdr {
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--mid);
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .seo-hl-card-body {
      padding: 9px;
      min-height: 56px;
      max-height: 220px;
      overflow-y: auto;
      font-size: 11px;
      line-height: 1.6;
      color: var(--text);
    }
    .seo-ph { color: var(--dim); font-style: italic; font-size: 11px; }
    .hl-red {
      display: block;
      background: rgba(239,68,68,0.12);
      border-left: 3px solid #ef4444;
      padding: 3px 6px 3px 7px;
      /* Округлення тільки правих кутів (акцентна смуга ліворуч мусить лишатись прямою) —
         довга форма на кут, не рахується в шкалі border-radius. */
      border-top-right-radius: var(--r-xs);
      border-bottom-right-radius: var(--r-xs);
      margin-bottom: 3px;
    }
    .hl-yellow {
      display: block;
      background: rgba(201,168,76,0.12);
      border-left: 3px solid var(--gold);
      padding: 3px 6px 3px 7px;
      /* Округлення тільки правих кутів (акцентна смуга ліворуч мусить лишатись прямою) —
         довга форма на кут, не рахується в шкалі border-radius. */
      border-top-right-radius: var(--r-xs);
      border-bottom-right-radius: var(--r-xs);
      margin-bottom: 3px;
    }
    .hl-green {
      display: block;
      background: rgba(34,197,94,0.08);
      border-left: 3px solid #22c55e;
      padding: 3px 6px 3px 7px;
      /* Округлення тільки правих кутів (акцентна смуга ліворуч мусить лишатись прямою) —
         довга форма на кут, не рахується в шкалі border-radius. */
      border-top-right-radius: var(--r-xs);
      border-bottom-right-radius: var(--r-xs);
      margin-bottom: 3px;
    }
    .btn-bring-top {
      width: 100%;
      padding: 11px;
      background: linear-gradient(135deg,#22c55e,#16a34a);
      color: #fff;
      border: none;
      border-radius: var(--r);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: opacity 0.18s;
    }
    .btn-bring-top:hover { opacity: 0.88; }
    .btn-bring-top:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--surface2);
      color: var(--mid);
    }

    /* ── Pro lock gate wrapper ───────────────────────────────────────── */
    .seo-pro-gate {
      position: relative;
      border-radius: var(--r);
    }
    .seo-pro-lock {
      position: absolute;
      inset: 0;
      background: var(--scrim-panel);
      border-radius: var(--r);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5;
      backdrop-filter: blur(3px);
      gap: 5px;
      cursor: pointer;
      text-align: center;
      padding: 12px;
    }
    .seo-pro-lock-icon { font-size: 24px; }
    .seo-pro-lock-text { font-size: 13px; color: var(--gold); font-weight: 700; }
    .seo-pro-lock-sub  { font-size: 11px; color: var(--dim); }

    /* ── Competitor Content Plan module ─────────────────────────────── */
    .comp-module {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px;
      margin-top: 28px;
    }
    .comp-module-hdr {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .comp-module-icon { font-size: 22px; }
    .comp-module-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .comp-module-sub { font-size: 12px; color: var(--mid); margin-top: 2px; }
    .comp-url-row {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
    }
    .comp-url-input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 9px 12px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .comp-url-input:focus { border-color: var(--gold); }
    /* Секція E, фінальне рев'ю: головна дія сторінки конкурентів — той самий випадок, що
       .settings-plan-upgrade вище. --gold-fill/--on-gold замість акцентного --gold напряму. */
    .comp-analyze-btn {
      padding: 9px 16px;
      background: var(--gold-fill);
      color: var(--on-gold);
      border: none;
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .18s;
    }
    .comp-analyze-btn:hover { opacity: .85; }
    .comp-analyze-btn:disabled { opacity: .5; cursor: not-allowed; }
    .comp-topics-list { display: flex; flex-direction: column; gap: 10px; }
    .comp-topic-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .comp-topic-title { font-size: 13px; font-weight: 600; color: var(--text); }
    .comp-topic-kw { font-size: 11px; color: var(--gold); }
    .comp-topic-rationale { font-size: 12px; color: var(--mid); }
    .comp-topic-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 4px;
    }
    .comp-diff-badge {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: var(--r-xl);
      font-weight: 600;
      text-transform: uppercase;
    }
    .comp-diff-low { background: rgba(34,197,94,.15); color: #22c55e; }
    .comp-diff-medium { background: rgba(245,158,11,.15); color: #f59e0b; }
    .comp-diff-high { background: rgba(239,68,68,.15); color: #ef4444; }
    .comp-gen-btn {
      padding: 5px 12px;
      background: transparent;
      border: 1px solid var(--gold);
      border-radius: var(--r-xs);
      color: var(--gold);
      font-size: 11px;
      cursor: pointer;
      font-weight: 600;
      transition: background .15s;
    }
    .comp-gen-btn:hover { background: rgba(201,168,76,.15); }
    .comp-starter-note {
      font-size: 12px;
      color: var(--dim);
      margin-bottom: 8px;
      text-align: center;
    }

    /* ── SEO Monitor module ──────────────────────────────────────────── */
    .monitor-module {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px;
      margin-top: 28px;
    }
    .monitor-add-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 8px;
      margin-bottom: 16px;
    }
    /* FIX (audit #17 medium #1): 1fr 1fr auto on a narrow phone pushes the "Add" button off the
       right edge of .app-box (overflow-x:hidden), making it invisible AND unclickable — an
       Agency/Max user on mobile could not add an article to monitoring at all. Stack to one
       column below 560px so every control stays on-screen and reachable. */
    @media (max-width: 560px) {
      .monitor-add-row { grid-template-columns: 1fr; }
    }
    .monitor-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 8px 12px;
      color: var(--text);
      font-size: 12px;
      outline: none;
      /* Задача 6: виміряно 31px на 375px — під ціль дотику 44px. */
      min-height: var(--tap-min);
    }
    .monitor-input:focus { border-color: var(--gold); }
    .monitor-add-btn {
      padding: 8px 14px;
      /* Рев'ю 2026-08-20: головна дія цієї поверхні мусить брати ПЛОЩИННИЙ токен, не --gold
         (акцент/текст) — інакше правило секції E «площина = --gold-fill» лишається мертвою
         буквою саме там, де воно найважливіше. */
      background: var(--gold-fill);
      color: var(--on-gold);
      border: none;
      border-radius: var(--r-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .18s;
    }
    .monitor-add-btn:hover { opacity: .85; }
    .monitor-check-all-btn {
      width: 100%;
      padding: 9px;
      background: linear-gradient(135deg,#1d4ed8,#2563eb);
      color: #fff;
      border: none;
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      margin-bottom: 14px;
      transition: opacity .18s;
    }
    .monitor-check-all-btn:hover { opacity: .88; }
    .monitor-articles-list { display: flex; flex-direction: column; gap: 10px; }
    .monitor-article-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
    }
    .monitor-article-card.status-dropped { border-color: #ef4444; }
    .monitor-article-card.status-top10 { border-color: #22c55e; }
    .monitor-art-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .monitor-art-url {
      font-size: 12px;
      color: var(--gold);
      word-break: break-all;
      flex: 1;
    }
    .monitor-art-pos {
      font-size: 20px;
      font-weight: 700;
      font-family: 'Old Standard TT', serif;
      min-width: 40px;
      text-align: right;
    }
    .monitor-pos-ok { color: #22c55e; }
    .monitor-pos-mid { color: #f59e0b; }
    .monitor-pos-bad { color: #ef4444; }
    .monitor-art-kw { font-size: 11px; color: var(--mid); margin-bottom: 6px; }
    .monitor-art-meta {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .monitor-status-badge {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: var(--r-xl);
      font-weight: 600;
    }
    .status-badge-dropped { background: rgba(239,68,68,.15); color: #ef4444; }
    .status-badge-top10 { background: rgba(34,197,94,.15); color: #22c55e; }
    .status-badge-ok { background: rgba(100,116,139,.15); color: var(--mid); }
    .status-badge-pending { background: rgba(245,158,11,.15); color: #f59e0b; }
    .monitor-check-btn {
      font-size: 11px;
      padding: 3px 10px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      color: var(--text);
      cursor: pointer;
      transition: border-color .15s;
    }
    .monitor-check-btn:hover { border-color: var(--gold); color: var(--gold); }
    .monitor-del-btn {
      font-size: 11px;
      padding: 3px 10px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--r-xs);
      color: var(--mid);
      cursor: pointer;
      transition: color .15s;
    }
    .monitor-del-btn:hover { color: #ef4444; }
    .monitor-brief {
      margin-top: 10px;
      background: rgba(239,68,68,.05);
      border: 1px solid rgba(239,68,68,.2);
      border-radius: var(--r-sm);
      padding: 10px 12px;
      font-size: 12px;
      color: var(--text);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .monitor-brief-title {
      font-size: 11px;
      font-weight: 700;
      color: #ef4444;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .monitor-agency-lock {
      text-align: center;
      padding: 24px;
      color: var(--mid);
      font-size: 13px;
    }
    .monitor-agency-lock-icon { font-size: 28px; margin-bottom: 8px; }
    .monitor-agency-lock-title { color: var(--gold); font-weight: 700; margin-bottom: 4px; }

    /* ── Monitor: weekly note + manual-check credits ──────────────────── */
    .monitor-note {
      background: rgba(201,168,76,.08);
      border: 1px solid rgba(201,168,76,.22);
      border-radius: var(--r-sm);
      padding: 9px 12px;
      font-size: 12px;
      color: var(--mid);
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .monitor-note b { color: var(--gold-l); font-weight: 700; }
    .monitor-credits-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 10px 14px;
      margin-bottom: 12px;
    }
    .monitor-credits-info { display: flex; align-items: baseline; gap: 7px; }
    .monitor-credits-num {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 22px;
      color: var(--gold-l);
      line-height: 1;
    }
    .monitor-credits-lbl { font-size: 12px; color: var(--dim); }
    /* Секція E задача 2: головна дія цієї поверхні — «+ Add» (.monitor-add-btn), яка лишається
       золотою площиною. Купівля кредитів другорядна: нейтральна площина, золотий текст і межа. */
    .monitor-buy-btn {
      background: var(--surface2);
      color: var(--gold);
      border: 1px solid var(--gold-dim-strong);
      border-radius: var(--r-sm);
      padding: 8px 14px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .18s, background .15s, border-color .15s;
      /* Задача 6: виміряно 32px на 375px (видима на тарифах, де кредитів не вистачає). */
      min-height: var(--tap-min);
    }
    .monitor-buy-btn:hover { background: var(--surface3); border-color: var(--gold); }
    .monitor-buy-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ── Pro Action Cards (Bring-to-TOP) ──────────────────── */
    .seo-action-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
      margin-top: 14px;
    }
    .seo-action-card-header {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }
    .seo-action-icon {
      font-size: 20px;
      line-height: 1.2;
      flex-shrink: 0;
    }
    .seo-action-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }
    .seo-action-subtitle {
      font-size: 11px;
      color: var(--mid);
    }

    /* ── Team module (Agency seats) ───────────────────────── */
    .team-card {
      text-align: center;
      padding: 32px 24px;
      background: linear-gradient(135deg, rgba(201,168,76,.08), var(--surface2));
      border: 1px solid rgba(201,168,76,.25);
      border-radius: var(--r-lg);
    }
    .team-seats-bar {
      font-size: 12px; color: var(--mid);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px;
    }
    .team-seats-bar b { color: var(--gold); }
    .team-invite-row { display: flex; gap: 8px; }
    .team-invite-row .comp-url-input { flex: 1; }
    .team-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
    .team-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r); padding: 11px 14px;
    }
    .team-row-pending { opacity: .72; border-style: dashed; }
    .team-row-email { font-size: 13px; color: var(--text); font-weight: 600; flex: 1; word-break: break-all; }
    .team-row-meta { font-size: 11px; color: var(--dim); white-space: nowrap; }
    .team-row-remove {
      background: transparent; border: none; color: var(--mid);
      font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: var(--r-xs); transition: all .15s;
    }
    .team-row-remove:hover { color: #ef4444; background: rgba(239,68,68,.12); }

    /* ── Pro tools panel (redesigned) ─────────── */
    .pro-tool-panel {
      background: linear-gradient(160deg, rgba(201,168,76,.07), var(--surface2) 60%);
      border: 1px solid rgba(201,168,76,.22);
      border-radius: var(--r-lg);
      padding: 20px;
      margin-top: 16px;
      box-shadow: var(--shadow-3);
    }
    .pro-tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
    .pro-tool-badge {
      font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
      color: var(--on-gold); background: var(--gold-grad);
      padding: 3px 8px; border-radius: var(--r-full); font-family: 'Syne', sans-serif;
    }
    .pro-tool-icon { font-size: 26px; line-height: 1; }
    .pro-tool-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
    .pro-tool-sub { font-size: 12px; color: var(--mid); margin: 2px 0 16px; line-height: 1.5; }
    .pro-tool-btn {
      width: 100%; padding: 13px 18px; border: none; border-radius: var(--r); cursor: pointer;
      font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--on-gold);
      background: var(--gold-grad);
      transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 18px rgba(201,168,76,.25);
    }
    .pro-tool-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201,168,76,.35); }
    .pro-tool-btn:disabled { opacity: .6; cursor: not-allowed; }
    .pro-tool-field { width: 100%; margin-bottom: 12px; }
    .pro-tool-field label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 5px; font-weight: 600; }

    /* ── App Tab Navigation ──────────────────────────────── */
    /* ЗАДАЧА 9: правила .app-tabs / .app-tab-btn видалено разом із самою смугою вкладок.
       .app-tab-pane лишається — це контейнери екранів, ними керує роутер. */
    .tab-badge {
      background: var(--gold-dim);
      color: var(--gold-l);
      font-size: 12px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: var(--r-full);
      font-family: 'Syne', sans-serif;
    }
    .app-tab-pane { display: none; }
    .app-tab-pane.active { display: block; }

    /* ── App header user info ────────────────────────────── */
    .app-hdr { display: flex; align-items: center; }
    .app-hdr-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }
    .app-hdr-gens {
      font-size: 11px;
      color: var(--dim);
    }
    .app-hdr-gens strong { color: var(--gold); }
    .app-hdr-greet {
      font-size: 12px;
      color: var(--text);
      font-weight: 600;
      white-space: nowrap;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-hdr-sep { width: 1px; height: 14px; background: var(--border); }
    .app-hdr-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-full);
      font-size: 11px;
      cursor: pointer;
      transition: border-color .2s;
    }
    .app-hdr-pill:hover { border-color: var(--gold); }
    .app-hdr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .app-hdr-plan { font-weight: 700; text-transform: uppercase; color: var(--gold); font-family: 'Syne', sans-serif; letter-spacing: .04em; }

    /* FIX: the greeting ("Привіт, {ім'я}!") used to just be display:none below 640px — the whole
       action bar (greeting + quota + plan pill) had no room to share one line with the title, so
       rather than reflow it, the greeting was dropped outright and the personalization it adds
       never showed on mobile at all. Stack the title above the action bar instead, and let the
       action bar wrap onto as many lines as its own content needs — nothing gets hidden, it just
       spreads across more lines the way the topic-input-row fix (above) already does. */
    @media (max-width: 640px) {
      .app-hdr { flex-direction: column; align-items: flex-start; gap: 10px; }
      .app-hdr-actions { width: 100%; flex-wrap: wrap; margin-left: 0; row-gap: 8px; }
      .app-hdr-greet { max-width: 100%; }
      .app-hdr-sep { display: none; } /* would render as an orphaned divider wherever the row wraps */
    }

    /* ── Settings Panel ──────────────────────────────────── */
    .settings-wrap {
      padding: 24px;
      max-width: 640px;
      margin: 0 auto;
    }
    .settings-plan-badge {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      background: linear-gradient(135deg, rgba(201,168,76,.09), var(--surface2));
      border: 1px solid rgba(201,168,76,.28);
      border-radius: var(--r);
      margin-bottom: 24px;
    }
    .settings-plan-icon { font-size: 30px; flex-shrink: 0; }
    .settings-plan-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--gold); text-transform: uppercase; }
    .settings-plan-info { font-size: 11px; color: var(--dim); margin-top: 3px; }
    /* Секція E, фінальне рев'ю: головна дія сторінки налаштувань. Раніше --gold напряму —
       у світлій темі це #7f6418, той самий оливковий колір, з якого почалась уся секція.
       --gold-fill/--on-gold — та сама розділена пара, що вже несе .gen-btn/.btn-primary. */
    .settings-plan-upgrade {
      margin-left: auto;
      padding: 8px 16px;
      background: var(--gold-fill);
      color: var(--on-gold);
      border: none;
      border-radius: var(--r-sm);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 11px;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .settings-plan-upgrade:hover { opacity: .85; transform: translateY(-1px); }
    .settings-group { margin-bottom: 24px; }
    .settings-group-title {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--gold);
      padding-bottom: 10px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--border);
    }
    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.04);
      gap: 14px;
    }
    .settings-row:last-child { border-bottom: none; }
    .settings-row-left { flex: 1; min-width: 0; }
    .settings-row-label { font-size: 13px; color: var(--text); font-weight: 500; }
    .settings-row-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
    .settings-select {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 7px 10px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      outline: none;
      cursor: pointer;
      min-width: 150px;
      flex-shrink: 0;
    }
    .settings-select:focus { border-color: var(--gold); }
    /* ДЕФЕКТ 2 (той самий корінь): .settings-select теж не мав стилю для <option>,
       і #settings-ui-lang у Налаштуваннях наслідує ту саму невидимість пунктів.
       Той самий рецепт, ті самі змінні — read у обох темах. */
    .settings-select option { background: var(--surface); color: var(--text); }
    .settings-toggle {
      position: relative;
      width: 44px;
      height: 24px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-track {
      position: absolute;
      inset: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      transition: all .25s;
    }
    /* Секція E, фінальне рев'ю: спека §7 прямо називає перемикачі серед того, що мусить
       перестати бути золотою площиною. Доріжка лишається нейтральною (--surface2, як і в
       стані «вимкнено»); стан «увімкнено» лишається однозначним завдяки і позиції повзунка
       (transform на .toggle-thumb нижче), і золотій МЕЖІ — тонка лінія, не заливка. */
    .settings-toggle input:checked + .toggle-track { border-color: var(--gold); }
    .toggle-thumb {
      position: absolute;
      top: 3px; left: 3px;
      width: 16px; height: 16px;
      background: var(--mid);
      border-radius: 50%;
      transition: all .25s;
    }
    .settings-toggle input:checked ~ .toggle-thumb { left: 23px; background: #0a0a08; }
    .shortcuts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-top: 8px;
    }
    .shortcut-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      font-size: 11px;
    }
    .shortcut-label { color: var(--mid); }
    .shortcut-keys { display: flex; gap: 3px; }
    .shortcut-keys kbd {
      padding: 2px 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-bottom-width: 2px;
      border-radius: var(--r-xs);
      font-family: monospace;
      font-size: 12px;
      color: var(--gold);
    }
    @media (max-width: 600px) {
      .shortcuts-grid { grid-template-columns: 1fr; }
      .settings-wrap { padding: 16px; }
    }

    /* ── Plan lock chips ─────────────────────────────────── */
    .plan-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      border-radius: var(--r-xs);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      vertical-align: middle;
      line-height: 1.4;
    }
    .plan-chip.pro  { background: rgba(129,140,248,.15); color: #a5b4fc; border: 1px solid rgba(129,140,248,.3); }
    .plan-chip.max  { background: var(--gold-dim); color: var(--gold-l); border: 1px solid rgba(201,168,76,.35); }
    .plan-chip.agency { background: rgba(34,197,94,.1); color: #86efac; border: 1px solid rgba(34,197,94,.3); }

    /* Locked export/action buttons */
    .act-btn.locked, .export-btn.locked {
      opacity: .45;
      position: relative;
    }
    /* Секція E, фінальне рев'ю: бейдж тарифу на заблокованих кнопках — спека §7 прямо називає
       його серед того, що мусить перестати бути золотою площиною. Приглушено до того самого
       нейтральний-фон/золотий-текст/золота-межа патерну, що й .res-tab.active вище. */
    /* Секція F задача 3, рев'ю: цей ::after рендерить attr(data-lock-plan) — рядок «PRO»
       (app-1.js:322), тобто напис, що каже, ЯКИЙ ТАРИФ розблокує дію. Це текст, а не гліф;
       він стояв на 8px, найдрібнішому кеглі у файлі — дрібнішому за 9.5px, з яких почався
       аудит. Спершу його помилково внесли до винятку GLYPH_ONLY у сторожі. */
    .act-btn.locked::after, .export-btn.locked::after {
      content: attr(data-lock-plan);
      position: absolute;
      top: -7px;
      right: -4px;
      background: var(--surface2);
      color: var(--gold);
      border: 1px solid var(--gold);
      font-size: 12px;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: var(--r-xs);
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Upgrade modal plan features */
    #upg-plan-feats li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    #upg-plan-feats li:last-child { border-bottom: none; }
    #upg-plan-feats li::before { content: '✅'; flex-shrink: 0; }

    /* ═══════════════════════════════════════════════════════════
       REDESIGN — AURORA DARK PREMIUM
    ═══════════════════════════════════════════════════════════ */

    /* Gradient text utility */
    .g-text {
      background: linear-gradient(135deg, #f4d98e 0%, var(--gold) 45%, #c9a84c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .g-text-cool {
      background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, var(--gold) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Redesigned Navigation ─────────────────────────────── */
    nav {
      backdrop-filter: blur(24px) saturate(1.4);
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      background: var(--nav-bg) !important;
      border-bottom: 1px solid var(--nav-border);
    }
    .nav-links a {
      position: relative;
      font-size: 13px;
      font-weight: 500;
      color: var(--mid);
      text-decoration: none;
      transition: color .2s;
      letter-spacing: .01em;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: var(--gold);
      transition: width .25s;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { width: 100%; }
    .btn-nav {
      background: var(--gold-grad-btn);
      color: var(--on-gold);
      border: none;
      padding: 9px 20px;
      border-radius: var(--r-sm);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .04em;
      cursor: pointer;
      transition: all .25s;
      box-shadow: 0 4px 16px rgba(201,168,76,.25);
    }
    .btn-nav:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(201,168,76,.35); }
    /* Секція F задача 9: навбар уже показує "Get Pro" (.btn-primary) як золоту заливку —
       ця друга золота кнопка поруч конкурувала за ту саму площину. Обведений варіант лишає
       один золотий акцент на екран, як і решта задач цього розділу спеки. */
    .btn-nav.outline {
      background: transparent;
      color: var(--gold);
      border: 1px solid var(--gold);
      box-shadow: none;
    }
    .btn-nav.outline:hover {
      background: var(--gold-dim);
      box-shadow: none;
    }

    /* ── Redesigned Hero ───────────────────────────────────── */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 110px 36px 90px;
    }

    /* Aurora background */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 65% 20%, rgba(201,168,76,.07) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 15% 80%, rgba(129,140,248,.05) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 110%, rgba(34,197,94,.04) 0%, transparent 55%);
      pointer-events: none;
      animation: auroraShift 12s ease-in-out infinite alternate;
    }

    /* Dot grid overlay */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(201,168,76,.06) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
    }

    @keyframes auroraShift {
      0%   { opacity: .8; transform: scale(1) translate(0,0); }
      50%  { opacity: 1;  transform: scale(1.04) translate(1%,-1%); }
      100% { opacity: .7; transform: scale(.98) translate(-1%,1%); }
    }

    .hero > div { position: relative; z-index: 1; }

    /* Hero badge */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: rgba(201,168,76,.09);
      border: 1px solid rgba(201,168,76,.25);
      border-radius: var(--r-full);
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold-l);
      margin-bottom: 28px;
    }

    /* Hero headline */
    .hero h1 {
      font-family: 'Old Standard TT', serif;
      font-size: clamp(44px, 6.5vw, 80px);
      line-height: 1.06;
      font-weight: 400;
      letter-spacing: -.02em;
      margin-bottom: 22px;
    }
    .hero h1 em {
      font-style: italic;
      background: var(--gold-grad-btn);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Hero sub */
    .hero > div > p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--mid);
      max-width: 480px;
      margin-bottom: 32px;
    }

    /* CTAs */
    .btn-primary {
      background: var(--gold-grad-btn);
      color: var(--on-gold);
      padding: 14px 30px;
      border-radius: var(--r);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .02em;
      border: none;
      cursor: pointer;
      transition: all .25s;
      box-shadow: 0 4px 20px rgba(201,168,76,.3);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(201,168,76,.42);
    }

    /* Stats */
    .stats {
      display: flex;
      gap: 0;
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }
    .stats > div {
      padding-right: 28px;
      margin-right: 28px;
      border-right: 1px solid var(--border);
    }
    .stats > div:last-child { border-right: none; padding-right: 0; margin-right: 0; }
    .stat-n { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; color: var(--gold); }
    .stat-l { font-size: 11px; color: var(--dim); margin-top: 2px; }

    /* Hero visual: консолідовано в .hero-composer (задача 13, ~рядок 442) */

    /* ── Bento Features Grid ─────────────────────────────── */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      gap: 14px;
      margin-top: 4px;
    }

    .bento-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: all .3s;
    }
    .bento-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--r-lg);
      padding: 1px;
      background: linear-gradient(135deg, transparent 30%, rgba(201,168,76,.25) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .35s;
    }
    .bento-card:hover::before { opacity: 1; }
    /* Тінь тут узгоджена з пізнішим `.bento-card:hover { box-shadow: var(--shadow-lg) !important; }`
       нижче — той рядок і так завжди перекривав це значення (!important б'є звичайну
       специфічність незалежно від порядку), тобто "0 16px 48px..." ніколи не рендерився. */
    .bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(201,168,76,.2); }

    /* Bento number label */
    .bento-num {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: .6;
      margin-bottom: 14px;
    }

    .bento-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--r);
      background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.05));
      border: 1px solid rgba(201,168,76,.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 16px;
    }

    .bento-card h3 {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 9px;
      line-height: 1.3;
    }
    .bento-card p {
      color: var(--dim);
      font-size: 12.5px;
      line-height: 1.65;
    }

    /* Bento spans */
    .bento-w2 { grid-column: span 2; }
    .bento-w3 { grid-column: span 3; }
    .bento-w4 { grid-column: span 4; }
    .bento-w6 { grid-column: span 6; }

    /* Large bento card has horizontal layout */
    .bento-card.bento-hero {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    .bento-card.bento-hero .bento-body { flex: 1; }

    /* Bento card accent bg */
    .bento-accent {
      background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, var(--surface) 60%);
      border-color: rgba(201,168,76,.18);
    }
    .bento-accent-blue {
      background: linear-gradient(135deg, rgba(129,140,248,.06) 0%, var(--surface) 60%);
      border-color: rgba(129,140,248,.15);
    }

    /* Feature tag pills inside bento cards */
    .bento-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .bento-tag {
      padding: 3px 10px;
      background: rgba(201,168,76,.08);
      border: 1px solid rgba(201,168,76,.15);
      border-radius: var(--r-full);
      font-size: 12px;
      color: var(--gold-l);
      font-weight: 600;
      font-family: 'Syne', sans-serif;
      letter-spacing: .05em;
    }

    /* ── Redesigned Pricing ───────────────────────────────── */
    .price-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 28px;
      position: relative;
      transition: all .3s;
      display: flex;
      flex-direction: column;
    }
    .price-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,.2); }

    .price-card.pop {
      background: linear-gradient(160deg, rgba(201,168,76,.07) 0%, var(--surface) 60%);
      border-color: rgba(201,168,76,.4);
      box-shadow: 0 0 0 1px rgba(201,168,76,.1), 0 24px 64px rgba(201,168,76,.1);
    }
    .pop-badge {
      background: var(--gold-grad-btn);
      color: var(--on-gold);
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .08em;
      padding: 4px 14px;
      border-radius: var(--r-full);
      /* Sits just inside the top edge so the card can clip its sheen (overflow:hidden)
         and nothing bleeds outside the card — the badge stays fully visible. */
      top: 14px;
      z-index: 2;
    }

    .plan-name {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 16px;
    }
    .plan-price .amt {
      font-family: 'Old Standard TT', serif;
      font-size: 48px;
      line-height: 1;
      color: var(--text);
    }
    .plan-price .per { color: var(--dim); font-size: 13px; margin-left: 2px; }
    .plan-desc { color: var(--dim); font-size: 13px; margin: 10px 0 20px; }

    .plan-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .plan-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--mid); }
    .plan-feats li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; font-size: 12px; }

    .btn-plan {
      width: 100%;
      padding: 12px 20px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: var(--r);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: all var(--dur-fast);
      letter-spacing: .02em;
      margin-top: auto;
    }
    .btn-plan:hover { border-color: var(--gold); color: var(--gold); }
    .price-card.pop .btn-plan {
      background: var(--gold-grad-btn);
      border-color: transparent;
      color: var(--on-gold);
      box-shadow: 0 4px 16px rgba(201,168,76,.28);
    }
    .price-card.pop .btn-plan:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,168,76,.4); }

    /* Section layout improvements */
    .sec {
      position: relative;
      padding: 80px 36px;
      max-width: 1120px;
      margin: 0 auto;
      border-top: 1px solid var(--border);
    }
    .sec-label {
      text-align: center;
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: .7;
      margin-bottom: 12px;
    }
    .sec-title {
      font-family: 'Old Standard TT', serif;
      font-size: clamp(30px, 4vw, 48px);
      text-align: center;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -.01em;
      margin-bottom: 12px;
    }
    .sec-title em { color: var(--gold); font-style: italic; }
    .sec-sub {
      text-align: center;
      color: var(--dim);
      max-width: 520px;
      margin: 0 auto 48px;
      font-size: 14.5px;
      line-height: 1.6;
    }

    /* Responsive bento */
    @media (max-width: 900px) {
      .bento-grid { grid-template-columns: repeat(2, 1fr); }
      .bento-w2, .bento-w3, .bento-w4, .bento-w6 { grid-column: span 2; }
    }
    @media (max-width: 600px) {
      .bento-grid { grid-template-columns: 1fr; }
      .bento-w2, .bento-w3, .bento-w4, .bento-w6 { grid-column: span 1; }
      .hero { padding: 80px 20px 60px; }
      .sec { padding: 60px 20px; }
    }

    /* Scroll reveal animation */
    /* Legacy reveal system: superseded by [data-reveal] in motion.js. The old rule
       hid content with .reveal{opacity:0} that was NOT conditional on JS running,
       so a script failure left whole sections permanently invisible. */
    .reveal:not(.visible) { }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── Hero visual glow: прибрано задачею 13 разом із декоративним ::before-градієнтом —
       живий композер (.hero-composer, ~рядок 442) статичний, без heroGlow. ──────── */

    /* ── How it Works ─────────────────────────────────────── */
    .how-grid {
      display: flex;
      gap: 0;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      padding: 0 0 48px;
    }
    .how-grid::before {
      content: '';
      position: absolute;
      top: 52px;
      left: calc(16.67% + 40px);
      right: calc(16.67% + 40px);
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.3) 30%, rgba(201,168,76,.3) 70%, transparent 100%);
    }
    .how-step {
      flex: 1;
      max-width: 280px;
      text-align: center;
      padding: 0 24px;
      position: relative;
    }
    .how-num {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2em;
      color: var(--gold);
      opacity: .6;
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    .how-icon-wrap {
      width: 52px;
      height: 52px;
      border-radius: var(--r-lg);
      background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
      border: 1px solid rgba(201,168,76,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin: 0 auto 16px;
      position: relative;
      z-index: 1;
      transition: all .3s;
    }
    .how-step:hover .how-icon-wrap {
      background: linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.08));
      border-color: rgba(201,168,76,.4);
      transform: scale(1.08);
    }
    .how-step h3 {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .how-step p {
      font-size: 12.5px;
      color: var(--dim);
      line-height: 1.6;
    }

    /* ── CTA Banner ───────────────────────────────────────── */
    .cta-banner {
      background: linear-gradient(135deg, rgba(201,168,76,.07) 0%, rgba(201,168,76,.03) 50%, rgba(129,140,248,.05) 100%);
      border-top: 1px solid rgba(201,168,76,.15);
      border-bottom: 1px solid rgba(201,168,76,.15);
      padding: 64px 36px;
      text-align: center;
    }
    .cta-banner h2 {
      font-family: 'Old Standard TT', serif;
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 400;
      margin-bottom: 12px;
      line-height: 1.2;
    }
    .cta-banner h2 em { font-style: italic; color: var(--gold); }
    .cta-banner p { color: var(--dim); font-size: 15px; margin-bottom: 28px; }

    /* ── Logged-in view: hide all marketing/landing content, show only the app ──
       The generator becomes the whole experience. Pricing opens as a modal on demand. */
    body.logged-in .landing-only { display: none !important; }
    /* Tighten the top gap so the app sits near the top once the hero is gone. */
    body.logged-in #app-wrap { margin-top: 24px; }

    /* ── Pricing modal (opens when "Тарифи" is clicked, any state) ─────────── */
    .pricing-modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: var(--overlay); backdrop-filter: blur(6px);
      display: none; align-items: flex-start; justify-content: center;
      padding: 40px 16px; overflow-y: auto;
    }
    .pricing-modal-box {
      position: relative; width: 100%; max-width: 1080px; margin: auto;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: 36px 28px 28px; box-shadow: var(--shadow-5);
      animation: pricingPop .25s var(--ease, ease);
    }
    @keyframes pricingPop { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
    .pricing-modal-box .sec-label,
    .pricing-modal-box .sec-title,
    .pricing-modal-box .sec-sub { text-align: center; }
    .pricing-modal-box .sec-title { font-size: clamp(24px, 4vw, 36px); margin: 6px 0; }
    .pricing-modal-box .price-grid { margin-top: 8px; }
    /* VAT / auto-renewal / merchant-of-record disclosure under the price grid. Deliberately
       readable rather than fine print — it states that the displayed price is net of VAT, which
       is the number an EU buyer would otherwise be surprised by at checkout. */
    .pricing-legal {
      max-width: 820px; margin: 22px auto 0; padding-top: 16px;
      border-top: 1px solid var(--border);
      font-size: 12.5px; line-height: 1.6; color: var(--dim); text-align: center;
    }
    .pricing-legal a { color: var(--mid); text-decoration: underline; text-underline-offset: 2px; }
    .pricing-legal a:hover { color: var(--gold); }
    /* Substantiation footnote under the competitor comparison table — states where the numbers
       in that table come from, so the comparison is verifiable rather than asserted. */
    .cmp-note {
      max-width: 820px; margin: 14px auto 0;
      font-size: 12px; line-height: 1.6; color: var(--dim); text-align: center;
    }
    .pricing-modal-close {
      font-family: inherit;
      position: absolute; top: 14px; right: 16px; z-index: 2;
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--surface2); border: 1px solid var(--border); color: var(--text);
      font-size: 22px; line-height: 1; cursor: pointer; transition: all .2s;
    }
    .pricing-modal-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
    @media (max-width: 760px) { .pricing-modal-box { padding: 28px 16px 20px; } }

    /* ── Billing period toggle (monthly / annual) ───────────── */
    .billing-toggle {
      display: inline-flex; gap: 4px; margin: 0 auto 28px; padding: 4px;
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-full);
    }
    .billing-toggle button {
      background: transparent; border: none; color: var(--mid); cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      padding: 8px 18px; border-radius: var(--r-full); transition: all .2s; display: flex; align-items: center; gap: 6px;
    }
    .billing-toggle button.active { background: var(--gold-grad, var(--gold-grad)); color: var(--on-gold); }
    .billing-save { font-size: 12px; font-weight: 800; background: rgba(34,197,94,.18); color: #22c55e; padding: 1px 6px; border-radius: var(--r-full); }
    .billing-toggle button.active .billing-save { background: var(--on-gold-dim); color: var(--on-gold); }
    .plan-billing-note { font-size: 11px; color: var(--gold); margin: 4px 0 0; min-height: 14px; }

    /* ── Social proof ───────────────────────────────────────── */
    .social-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 8px 0 36px; }
    .social-stat {
      flex: 1; min-width: 130px; max-width: 200px; text-align: center; padding: 18px 12px;
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg);
    }
    .social-stat-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28px; color: var(--gold); line-height: 1; }
    .social-stat-lbl { font-size: 12px; color: var(--dim); margin-top: 6px; }
    .social-stat-hero { background: linear-gradient(160deg, rgba(201,168,76,.12), var(--surface2)); border-color: rgba(201,168,76,.35); }
    .social-stat-hero .social-stat-num { font-size: 34px; }
    .social-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
    .social-card {
      background: linear-gradient(160deg, rgba(201,168,76,.05), var(--surface2));
      border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; text-align: left;
    }
    .social-quote { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 18px; }
    .social-author { display: flex; align-items: center; gap: 12px; }
    .social-avatar {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: var(--gold-grad); color: var(--on-gold);
      display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px;
    }
    .social-name { font-weight: 700; font-size: 14px; color: var(--text); }
    .social-role { font-size: 12px; color: var(--dim); }

    /* ── Scrolling Feature Ticker ─────────────────────────── */
    .feature-ticker {
      overflow: hidden;
      padding: 18px 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .ticker-track {
      display: flex;
      gap: 0;
      animation: tickerScroll 28s linear infinite;
      width: max-content;
    }
    .ticker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 28px;
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--mid);
      letter-spacing: .03em;
      white-space: nowrap;
      border-right: 1px solid var(--border);
    }
    .ticker-item span { color: var(--gold); }
    @keyframes tickerScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .feature-ticker:hover .ticker-track { animation-play-state: paused; }

    /* ── App section upgrade ──────────────────────────────── */
    #app-wrap {
      background: linear-gradient(180deg, var(--bg) 0%, rgba(201,168,76,.015) 50%, var(--bg) 100%) !important;
    }

    /* Footer improvements */
    footer {
      background: var(--surface2);
      border-top: 1px solid var(--border);
      padding: 40px 36px;
      text-align: center;
    }
    .f-brand {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 16px;
      color: var(--gold);
      margin-bottom: 10px;
      letter-spacing: .04em;
    }
  
/* ===== extracted style block 1 ===== */

    :root {
      --ease: cubic-bezier(.22,.61,.36,1);
    }

    /* Elevation + gradients are theme-dependent: a shadow tuned for near-black
       reads as a dirty smudge on off-white, and the bright gold gradient that
       carries dark text in the dark theme needs white text in the light one. */
    :root,
    [data-theme="dark"] {
      --gold-grad: linear-gradient(135deg, #e8c97a 0%, var(--gold-fill) 55%, #a8842f 100%);
      --ring: 0 0 0 3px rgba(201,168,76,.28);
      --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
      --shadow-md: 0 10px 30px rgba(0,0,0,.40);
      --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
    }

    [data-theme="light"] {
      /* Рев'ю 2026-08-20: цей градієнт малював .gen-btn/.btn-primary — обидва кінці брались з
         --gold (акцентного токена #7f6418), а не з --gold-fill (#b8912f), тому кнопка-дія
         виходила тим самим оливково-брунатним компромісом, заради усунення якого власник і
         завів секцію E. Тепер темніший кінець — сам --gold-fill (5.37:1 з --on-gold, виміряно
         живцем), світліший — лише відтінок того самого кольору, не акцент. */
      --gold-grad: linear-gradient(135deg, #d9b568 0%, var(--gold-fill) 100%);
      --ring: 0 0 0 3px rgba(127,100,24,.30);
      --shadow-sm: 0 1px 3px rgba(23,22,15,.08), 0 1px 2px rgba(23,22,15,.06);
      --shadow-md: 0 8px 24px rgba(23,22,15,.10), 0 2px 6px rgba(23,22,15,.06);
      --shadow-lg: 0 20px 50px rgba(23,22,15,.14), 0 4px 12px rgba(23,22,15,.08);
    }

    /* Smoother rendering + ambient depth instead of flat black */
    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body {
      background:
        radial-gradient(1100px 600px at 78% -8%, var(--ambient-1), transparent 60%),
        radial-gradient(900px 600px at -10% 12%, var(--ambient-2), transparent 55%),
        var(--bg);
      background-attachment: fixed;
    }

    /* The warm gold wash that lifts the page off flat black has to be far
       fainter on off-white, where the same alpha reads as a dirty yellow stain. */
    :root,
    [data-theme="dark"] {
      --ambient-1: rgba(201,168,76,.10);
      --ambient-2: rgba(201,168,76,.06);
    }

    [data-theme="light"] {
      --ambient-1: rgba(201,168,76,.07);
      --ambient-2: rgba(201,168,76,.04);
    }

    /* Headings: a touch more presence */
    h1, h2, h3 { letter-spacing: -.01em; }

    /* Global motion on interactive elements */
    button, .key-btn, .btn-primary, .gen-btn, .bento-card, .app-tab-btn,
    select, input, .wysiwyg-btn {
      /* background-image, not just background-color: several of these carry a
         gradient fill (.app-tab-btn.active and .gen-btn use var(--gold-grad)),
         and naming only the colour meant the gradient swapped instantly while
         everything around it eased — the exact mismatch that made the UI feel
         like it had lost its smoothness. */
      transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                  border-color .18s var(--ease), background-color .18s var(--ease),
                  background-image .18s var(--ease),
                  color .18s var(--ease), opacity .18s var(--ease);
    }
    /* Секція F задача 16: .knob/.fmt-b/.cmp-tool-btn — справжні <button>, тож без цього
       правила успадкували б .18s звідси зверху разом із .btn-primary/.gen-btn. Це не той
       буквальний "--dur-slow/.25s/.3s", який шукав план, і 180ms саме по собі не смикано —
       але це магічне число, не токен, СПІЛЬНЕ з лендінговими кнопками, яким план явно велить
       лишатись повільнішими ("не в маркетинговій драмі"). Міняти widecast-правило вище не
       можна — прискорило б і лендінг разом із робочою зоною. Власне, вужче правило на трьох
       найчастіших контролах робочого циклу — та сама властивість-множина, var(--dur-fast). */
    .knob, .fmt-b, .cmp-tool-btn {
      transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
                  border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
                  background-image var(--dur-fast) var(--ease),
                  color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    }

    /* Primary / generate buttons → premium gradient with lift + press */
    .btn-primary, .gen-btn {
      background: var(--gold-grad) !important;
      color: var(--on-gold) !important;
      border: none !important;
      font-weight: 700;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.25);
    }
    .btn-primary:hover, .gen-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md), 0 0 0 1px rgba(232,201,122,.4), inset 0 1px 0 rgba(255,255,255,.3);
      filter: saturate(1.05);
    }
    .btn-primary:active, .gen-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }

    /* Secondary buttons */
    .key-btn:hover, .wysiwyg-btn:hover { transform: translateY(-1px); border-color: var(--gold); }

    /* Inputs & selects: clear gold focus ring + custom caret */
    .fi, .fs, .settings-select, input[type="text"], input[type="email"],
    input[type="password"], select, textarea {
      border-radius: var(--r);
    }
    .fi:focus, .fs:focus, .settings-select:focus, select:focus, textarea:focus,
    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
      outline: none !important;
      border-color: var(--gold) !important;
      box-shadow: var(--ring) !important;
    }
    select.fs, select.settings-select {
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    /* Cards get a little more depth on hover */
    .bento-card:hover { box-shadow: var(--shadow-lg); }

    /* B2 задача 7b: візуальну сітку типів контенту (.ctype-cards/.ctype-card, разом із
       .cc-ico/.cc-txt/.cc-pro) видалено — вибір формату живе в пігулках/кнобі композера
       (.fmt-b/#fmt-tile нижче, біля решти стилів композера). */

    /* Custom scrollbar to match the theme */
    * { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.4) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: rgba(201,168,76,.32); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
    *::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.55); background-clip: content-box; }

    /* ── Unique flourishes ───────────────────────────────────────────────── */
    /* Animated aurora glow behind the primary generate button */
    .gen-btn { position: relative; isolation: isolate; }
    .gen-btn::before {
      /* inherit тут = var(--r-lg): border-radius єдиного .gen-btn нижче саме такий, а
         inherit не дозволяв би тесту звести шкалу до 6 значень, тому виписано явно. */
      content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: var(--r-lg);
      background: linear-gradient(120deg, #e8c97a, #c9a84c, #8a6d2a, #e8c97a);
      background-size: 300% 300%;
      opacity: 0; transition: opacity .25s var(--ease);
      animation: auroraShift 6s linear infinite;
    }
    .gen-btn:hover:not(:disabled)::before { opacity: .55; filter: blur(7px); }
    @keyframes auroraShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

    /* Gradient text accent for big hero headings.
       The stops are hardcoded for the dark theme on purpose — the light theme does not
       recolour this gradient, it removes it entirely (see the LIGHT-THEME DISPLAY TYPE
       block near the end of this file). */
    .hero h1, .hero-title, .section-title-xl {
      background: linear-gradient(100deg, #f0ede6 0%, #e8c97a 50%, #c9a84c 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Panels get a soft glass feel */
    .api-panel, .bento-card, .seo-az-panel, .kd-panel, .meta-studio {
      backdrop-filter: blur(6px);
    }

    /* Refined toast */
    .toast, #toast, .toast-box { box-shadow: var(--shadow-md); border-radius: var(--r); }

    /* Inputs lift subtly on focus */
    .fi:focus, .fs:focus { transform: translateY(-1px); }

    /* ── Extra uniqueness + UX polish ────────────────────────────────────── */
    html { scroll-behavior: smooth; }

    /* Animated shimmering gradient on hero accent words */
    .hero h1 em, .sec-title em {
      background: linear-gradient(100deg, #e8c97a, #fff3d6, #c9a84c, #e8c97a);
      background-size: 250% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      /* shimmerText removed: a later rule overrode its background-size:250% with
         auto, so animating background-position moved nothing — it repainted eight
         gradient-clipped headings every frame, forever, for no visible effect. */
      font-style: normal;
    }

    /* Accessible, on-brand focus rings for keyboard users */
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--gold-l);
      outline-offset: 2px;
      border-radius: var(--r-xs);
    }

    /* Comfier tap targets on mobile */
    @media (max-width: 600px) {
      button, .key-btn, .app-tab-btn { min-height: 44px; }
    }

    /* Card hover sheen on feature/pricing cards.
       ALL cards (incl. the popular one) clip the sheen with overflow:hidden so it is only
       ever visible INSIDE the card on hover — nothing bleeds outside onto neighbouring cards. */
    .bento-card, .price-card, .how-card { position: relative; overflow: hidden; }
    .bento-card::after, .price-card::after {
      content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
      transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none; z-index: 1;
    }
    .bento-card:hover::after, .price-card:hover::after { left: 140%; }

    /* ── Demo video block ────────────────────────────────────────────────── */
    .demo-video-sec { text-align: center; }
    .video-frame {
      position: relative; max-width: 860px; margin: 28px auto 0;
      border-radius: var(--r-xl); overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      aspect-ratio: 16 / 9; background: #000;
    }
    .video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; position: relative; z-index: 1; }
    .video-glow {
      position: absolute; inset: -40%; z-index: 0; pointer-events: none;
      background: radial-gradient(closest-side, rgba(201,168,76,.22), transparent 70%);
      animation: auroraShift 8s linear infinite; background-size: 200% 200%;
    }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }

    /* ── Cookie consent banner ────────────────────────────────────────────── */
    /* Z-INDEX SCALE (keep in sync — see the FIX note below):
         1000+  modals (.pricing-modal-overlay 1000, the inline z-index:999 modals,
                #legal-modal 9999, ._modalShell overlays 9999)
          200   .modal-ov (the clear-text confirm dialog)
          150   #cookie-banner        ← must stay BELOW every modal
          140   .help-fab             ← must stay BELOW every modal, above page chrome
          100   fixed nav        99  .back-top
       FIX (audit 2026-08-05, critical #1): the banner sat at 9997 — above EVERY modal. The
       registration consent modal (#consent-modal, z-index 1000) and the cookie banner are both
       shown only to a FIRST-TIME visitor, so they always co-occur, and on a 375x667 viewport
       document.elementFromPoint() over both "Agree & Continue" and "Decline" returned
       #cookie-banner: a new mobile user physically could not complete registration. Verified
       fixed by the same measurement after this change.
       FIX (audit 2026-08-05, low #15): .help-fab at 900 also floated above .modal-ov (200),
       so the "Need help?" button sat on top of the clear-text dialog's backdrop. Both now sit
       in a band below the modal layer. */
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
      background: var(--cookie-bg); backdrop-filter: blur(12px);
      border-top: 1px solid rgba(201,168,76,.35);
      padding: 14px 24px;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      /* Панель прикріплена до низу екрана (bottom:0) — тінь має падати ВГОРУ, на контент
         під нею; жоден з var(--shadow-N) не підходить (усі — додатний зсув вниз), тому
         тут лишається власне дзеркальне значення тієї ж глибини (рівень 3, зсув -8px). */
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
      transform: translateY(100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    #cookie-banner.cb-show { transform: translateY(0); }
    #cookie-banner .cb-text {
      flex: 1 1 260px; font-size: 13px; color: var(--mid); line-height: 1.5;
    }
    /* Задача 6, рев'ю коло 2: 270×36 на 375px, видиме в СПОКОЇ (не за модалкою й не за
       transform-переходом) на всіх трьох робочих маршрутах, поки банер не відхилено —
       координатор впіймав це моїм же живим заміром, який я раніше помилково залишив як
       "інлайн-виняток". Той самий прийом, що й у .ft-link: inline-flex+min-height/min-width
       розширює зону натискання, текст лишається того самого розміру. */
    #cookie-banner .cb-text a {
      color: var(--gold);
      display: inline-flex; align-items: center; justify-content: center;
      min-height: var(--tap-min); min-width: var(--tap-min);
    }
    #cookie-banner .cb-accept {
      flex-shrink: 0;
      /* Рев'ю 2026-08-20: раніше кольори тут були вбиті в код (#c9a84c/#e8c96a, #111) — банер
         малювався однаково в обох темах, сліпий до --data-theme. Тепер площинний токен і
         --on-gold, як і решта дозволених золотих площин. */
      background: var(--gold-fill); color: var(--on-gold);
      border: none; border-radius: var(--r-sm); padding: 8px 20px;
      font-size: 13px; font-weight: 700; cursor: pointer;
      transition: opacity .2s;
    }
    #cookie-banner .cb-accept:hover { opacity: .85; }
    #cookie-banner .cb-decline {
      flex-shrink: 0;
      background: transparent; color: var(--mid);
      border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 14px;
      font-size: 12px; cursor: pointer; transition: border-color .2s, color .2s;
    }
    #cookie-banner .cb-decline:hover { border-color: var(--gold); color: var(--text); }

    /* ════════════════════════════════════════════════════════════════
       2026 MODERNIZATION LAYER — additive, keeps dark+gold identity
       ════════════════════════════════════════════════════════════════ */

    /* Global polish: accessible focus + smooth scroll + nicer selection */
    html { scroll-behavior: smooth; }
    ::selection { background: rgba(201,168,76,.3); color: #fff; }
    a:focus-visible, button:focus-visible, select:focus-visible,
    input:focus-visible, textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--gold-l);
      outline-offset: 2px;
      border-radius: var(--r-xs);
    }

    /* ── Nav language switcher ─────────────────────────────────── */
    .nav-lang {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--mid);
      border-radius: var(--r-sm);
      padding: 7px 10px 7px 12px;
      font-family: 'Syne', sans-serif;
      font-weight: 600; font-size: 12.5px;
      cursor: pointer;
      position: relative;
      transition: border-color .2s, color .2s, background .2s;
    }
    .nav-lang:hover { border-color: var(--gold); color: var(--text); }
    .nav-lang svg { width: 14px; height: 14px; opacity: .8; flex-shrink: 0; }
    .nav-lang select {
      appearance: none; -webkit-appearance: none;
      background: transparent; border: none; outline: none;
      color: inherit; font: inherit; cursor: pointer;
      padding-right: 14px;
    }
    .nav-lang select option { background: var(--surface); color: var(--text); }
    .nav-lang .caret {
      position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
      pointer-events: none; font-size: 9px; color: var(--dim);
    }

    /* ── Richer hero backdrop (modern depth, no new hues) ─────── */
    .hero { position: relative; }
    .hero::before {
      content: ''; position: absolute; inset: -120px -10% auto -10%;
      height: 520px; z-index: -1; pointer-events: none;
      background:
        radial-gradient(60% 80% at 28% 32%, rgba(201,168,76,.13), transparent 70%),
        radial-gradient(50% 70% at 82% 10%, rgba(129,140,248,.07), transparent 70%);
      filter: blur(8px);
    }
    /* Live-demo hero window: прибрано задачею 13 разом із фейковим #hero-demo (.hd-genbtn/
       .hd-cursor/.hd-progress/.hd-bar/.mo/.hd-typed/@keyframes hdBlink — усі належали
       виключно тому вікну, живий композер їх не використовує). */

    /* ── Section rhythm: alternating tinted panel ─────────────── */
    /* The top-down veil that separates this band from the page. It was hardcoded
       dark (rgba(26,26,24,.5)), which on the off-white light theme painted a grey
       fog over the whole comparison section instead of a subtle step. */
    .sec-panel {
      background:
        linear-gradient(180deg, var(--panel-veil), transparent),
        var(--bg);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .sec-panel .sec { border-top: none; }

    /* ── Logo / trust strip ───────────────────────────────────── */
    .trust-strip { max-width: 1080px; margin: 0 auto; padding: 30px 36px 6px; text-align: center; }
    .trust-line { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; font-family: 'Syne', sans-serif; }
    .trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 34px; }
    .trust-logo {
      font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px;
      color: var(--mid); opacity: .62; letter-spacing: -.01em;
      display: inline-flex; align-items: center; gap: 7px;
      transition: opacity .25s, color .25s;
      filter: grayscale(1);
    }
    .trust-logo:hover { opacity: 1; color: var(--text); filter: grayscale(0); }
    .trust-logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: .8; }

    /* ── Testimonials ─────────────────────────────────────────── */
    .tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
    .tst-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
    }
    .tst-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,.32); box-shadow: var(--shadow-4); }
    .tst-stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
    .tst-quote { font-size: 15px; line-height: 1.65; color: var(--text); font-weight: 300; flex: 1; }
    .tst-quote b { color: var(--gold-l); font-weight: 500; }
    .tst-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
    .tst-av {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: grid; place-items: center; font-family: 'Syne', sans-serif; font-weight: 800;
      font-size: 15px; color: var(--on-gold); background: var(--gold-grad);
    }
    .tst-name { font-weight: 600; font-size: 14px; color: var(--text); }
    .tst-role { font-size: 12px; color: var(--dim); }

    /* ── Comparison table ─────────────────────────────────────── */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    .cmp-legend { display: flex; gap: 20px; justify-content: center; margin: 16px 0 20px; font-size: 12.5px; color: var(--mid); flex-wrap: wrap; }
    .cmp-state { display: inline-flex; align-items: center; gap: 6px; }
    .cmp-state-yes { color: var(--green-text); }
    .cmp-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); display: inline-block; }
    .cmp-state-dash { width: 9px; height: 2px; background: var(--dim); display: inline-block; }

    .cmp-wrap { margin-top: 8px; }
    .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .cmp-table th, .cmp-table td { padding: 14px 16px; text-align: center; font-size: 13.5px; }
    .cmp-table thead th { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--mid); border-bottom: 1px solid var(--border); }
    .cmp-table thead th.cmp-us { color: var(--gold); border-top: 2px solid var(--gold); }
    .cmp-table tbody th { text-align: left; font-weight: 500; color: var(--text); font-size: 13.5px; }
    .cmp-table tbody tr td, .cmp-table tbody tr th { border-bottom: 1px solid var(--border); }
    .cmp-col-us { border-left: 1px solid rgba(201,168,76,.35); border-right: 1px solid rgba(201,168,76,.35); background: var(--gold-dim); }
    .cmp-col-us-last { border-bottom: 1px solid rgba(201,168,76,.35); }
    .cmp-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--green-text); font-weight: 600; }
    .cmp-yes .ico { width: 14px; height: 14px; }
    /* Deliberately quieter than the check icon so the table reads at a glance, but it is
       still real content ("competitor lacks this"), so it has to clear 4.5:1 —
       the previous #6f6c64 measured 3.78:1 on the dark surface. */
    .cmp-no { color: var(--dim); }
    .cmp-part { color: var(--mid); font-size: 12.5px; }
    .cmp-head-brand { display: inline-flex; align-items: center; gap: 6px; }
    .cmp-band th, .cmp-band td { padding-top: 18px; padding-bottom: 18px; }
    .cmp-num-us { font-family: 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--gold); }

    .cmp-cards { display: none; }

    @media (max-width: 760px) {
      .cmp-table { display: none; }
      .cmp-cards { display: flex; flex-direction: column; gap: 14px; }
      .cmp-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; background: var(--surface); }
      .cmp-card-q { font-size: 13px; color: var(--text); margin-bottom: 10px; font-weight: 500; }
      .cmp-card-us { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid rgba(201,168,76,.35); border-radius: var(--r); background: var(--gold-dim); margin-bottom: 6px; }
      .cmp-card-us-name { font-size: 12.5px; color: var(--gold); font-weight: 600; }
      .cmp-card-alt { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; font-size: 12px; color: var(--mid); }
    }

    /* ── Integrations ─────────────────────────────────────────── */
    .intg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
    .intg-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 22px 16px; text-align: center;
      transition: transform .25s, border-color .25s, background .25s;
    }
    .intg-card:hover { transform: translateY(-3px); border-color: rgba(201,168,76,.3); background: var(--surface2); }
    .intg-ico { font-size: 26px; margin-bottom: 10px; }
    .intg-name { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text); }
    .intg-tag { font-size: 11px; color: var(--dim); margin-top: 3px; }

    /* ── FAQ accordion ────────────────────────────────────────── */
    .faq-list { max-width: 760px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; }
    .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color .25s; }
    .faq-item.open { border-color: rgba(201,168,76,.4); }
    .faq-q {
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15.5px;
      padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    }
    .faq-q:hover { color: var(--gold-l); }
    .faq-ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .3s; color: var(--gold); }
    .faq-item.open .faq-ico { transform: rotate(45deg); }
    .faq-ico::before, .faq-ico::after { content: ''; position: absolute; background: currentColor; border-radius: var(--r-xs); }
    .faq-ico::before { left: 50%; top: 4px; width: 2px; height: 14px; transform: translateX(-50%); }
    .faq-ico::after { top: 50%; left: 4px; height: 2px; width: 14px; transform: translateY(-50%); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .faq-a-inner { padding: 0 20px 18px; color: var(--mid); font-size: 14px; line-height: 1.7; font-weight: 300; }

    /* ── Final CTA upgrade ────────────────────────────────────── */
    .cta-guarantee { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 22px; }
    .cta-guarantee span { font-size: 12.5px; color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
    .cta-guarantee b { color: var(--green); }

    /* ── Reveal: also support left/right + scale variants ─────── */
    /* .reveal-up: see note above — hiding is now owned by html.js-motion. */
    .reveal-up.visible { opacity: 1; transform: none; }
    /* Robustness: animate the slide via transform, but make opacity instant so
       content can never get stuck invisible if a transition stalls. */
    .reveal, .reveal-up { transition: transform .6s cubic-bezier(.2,.7,.2,1) !important; }

    /* ── Responsive ───────────────────────────────────────────── */
    @media (max-width: 900px) {
      .tst-grid { grid-template-columns: 1fr; }
      .intg-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 760px) {
      .nav-lang { padding: 6px 8px 6px 10px; font-size: 12px; }
      .nav-lang .lang-full { display: none; }
      .hero::before { height: 360px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal, .reveal-up { opacity: 1 !important; transform: none !important; }
    }
  
/* ===== extracted style block 2 ===== */

    /* ── Brand logo (gold B⚡C lockup) ─────────────────────────── */
    .brand-logo { display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none; line-height:1; }
    .brand-mark { display:inline-flex; align-items:center; flex-shrink:0; filter:drop-shadow(0 2px 7px rgba(201,168,76,.4)); transition:filter .25s var(--ease); }
    .brand-mark .bc-svg, .brand-mark img { height:30px; width:auto; display:block; overflow:visible; transition:transform .3s var(--ease); }
    .brand-mark .bc-bolt { transform-origin:50% 50%; animation:bcSpark 5.5s ease-in-out infinite; }
    @keyframes bcSpark {
      0%,84%,100% { filter:drop-shadow(0 0 0 rgba(255,235,170,0)); }
      88%         { filter:drop-shadow(0 0 8px rgba(255,238,180,.95)) brightness(1.4); }
      92%         { filter:drop-shadow(0 0 2px rgba(255,238,180,.4)) brightness(1.05); }
    }
    .brand-word {
      font-family:'Syne',sans-serif; font-weight:800; font-size:19px; letter-spacing:-.005em; white-space:nowrap;
      /* The wordmark is filled by a gradient through background-clip:text, so the
         gradient IS the text colour. The old one started at pure #fff, which made
         the first 44% of "Blitz Content AI" white-on-white — invisible — once the
         nav pill turned white in the light theme. */
      background: var(--brand-word-grad);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    }
    .brand-logo:hover .brand-mark { filter:drop-shadow(0 4px 13px rgba(201,168,76,.62)); }
    .brand-logo:hover .bc-svg, .brand-logo:hover .brand-mark img { transform:scale(1.05); }
    footer .brand-logo { justify-content:center; margin-bottom:12px; }
    footer .brand-mark .bc-svg, footer .brand-mark img { height:40px; }
    footer .brand-word { font-size:23px; }

    /* ── Scroll progress bar ──────────────────────────────────── */
    /* ── Top bar: shown ONLY while generating (indeterminate), not on scroll ── */
    #scroll-prog {
      position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none;
      background:linear-gradient(90deg,#e8c97a,#fff3d0,#c9a84c);
      box-shadow:0 0 10px rgba(201,168,76,.7);
      transform:scaleX(0); transform-origin:left center;
      opacity:0; transition:opacity .25s var(--ease);
    }
    #scroll-prog.gen-on { opacity:1; animation:genBar 1.15s ease-in-out infinite; }
    @keyframes genBar {
      0%   { transform:scaleX(0);   transform-origin:left center; }
      50%  { transform:scaleX(1);   transform-origin:left center; }
      50.01% { transform-origin:right center; }
      100% { transform:scaleX(0);   transform-origin:right center; }
    }

    /* ── Bug fix: keep hero badge on one line ─────────────────── */
    .hero .badge { white-space:nowrap; }

    /* ── Animated nav-link underline ──────────────────────────── */
    .nav-links a { position:relative; }
    .nav-links a::after {
      content:''; position:absolute; left:0; right:100%; bottom:-5px; height:2px; border-radius:var(--r-xs);
      background:linear-gradient(90deg,#e8c97a,#c9a84c); transition:right .28s var(--ease);
    }
    .nav-links a:hover::after { right:0; }

    /* ── Hero entrance (staggered) ────────────────────────────── */
    /* Fades as well as rises. It used to move only, so on a first paint the hero
       text was fully opaque while sliding — which reads as the layout settling
       late rather than as content arriving. */
    @keyframes heroIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
    .hero > div:first-child > * { animation:heroIn .72s var(--ease) both; }
    .hero > div:first-child > *:nth-child(1) { animation-delay:.05s; }
    .hero > div:first-child > *:nth-child(2) { animation-delay:.12s; }
    .hero > div:first-child > *:nth-child(3) { animation-delay:.20s; }
    .hero > div:first-child > *:nth-child(4) { animation-delay:.28s; }
    .hero > div:first-child > *:nth-child(5) { animation-delay:.36s; }
    .hero > div:first-child > *:nth-child(6) { animation-delay:.44s; }

    /* ── Card 3D tilt base (driven by JS) ─────────────────────── */
    .bento-card, .price-card { transform-style:preserve-3d; }

    /* ── Marquee pause on hover (nice touch) ──────────────────── */
    .feature-ticker:hover .ticker-track { animation-play-state:paused; }

    @media (prefers-reduced-motion: reduce) {
      .bc-bolt, .hero > div:first-child > * { animation:none !important; }
      #scroll-prog { transition:none; }
    }
  
/* ===== extracted style block 3 ===== */

    :root {
      --r26-ease: cubic-bezier(.22, .7, .2, 1);
    }

    :root,
    [data-theme="dark"] {
      --r26-gold-text: linear-gradient(100deg, #f7e6b0 0%, #e8c97a 42%, #c9a84c 100%);
      --r26-hairline: linear-gradient(90deg, transparent, rgba(201,168,76,.45), transparent);
    }

    [data-theme="light"] {
      /* The gradient fills display type via background-clip, so it has to clear
         the same 4.5:1 bar a flat colour would — hence the darker stops. */
      --r26-gold-text: linear-gradient(100deg, #8a6d1f 0%, #7f6418 42%, #6b520f 100%);
      --r26-hairline: linear-gradient(90deg, transparent, rgba(127,100,24,.35), transparent);
    }

    /* ── Ambience: warm glows + film grain ─────────────────────── */
    #r26-bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(1100px 560px at 72% -140px, rgba(201, 168, 76, .09), transparent 62%),
        radial-gradient(820px 620px at -12% 38%, rgba(201, 168, 76, .05), transparent 60%),
        radial-gradient(900px 620px at 108% 88%, rgba(201, 168, 76, .045), transparent 60%);
    }
    #r26-grain {
      position: fixed; inset: -60px; z-index: 1; pointer-events: none; opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      /* mix-blend-mode removed. A full-viewport blend layer forces the browser to
         re-composite everything beneath it through the blend on every frame —
         the most expensive thing on this page, measured at ~1.16M px² — and it
         bought a 5%-opacity noise texture that is essentially invisible either
         way. Plain alpha compositing gives the same grain at a fraction of the
         cost. */
      will-change: auto;
    }

    /* ── Smooth anchor offsets (usability) ─────────────────────── */
    html { scroll-padding-top: 108px; }
    section[id], #app-wrap, #features, #faq, #integrations { scroll-margin-top: 108px; }

    /* ── Floating pill nav ─────────────────────────────────────── */
    nav {
      top: 14px; left: 50%; right: auto; transform: translateX(-50%);
      width: min(1200px, calc(100vw - 28px));
      padding: 9px 12px 9px 22px;
      border: 1px solid var(--nav-border);
      border-bottom-color: var(--nav-border);
      border-radius: var(--r-full);
      background: var(--nav-bg);
      /* PERF: blur(14) instead of 20 — the fixed pill is re-composited every scroll frame,
         so a smaller blur radius meaningfully cuts GPU cost while staying visually frosted. */
      backdrop-filter: blur(14px) saturate(1.25);
      -webkit-backdrop-filter: blur(14px) saturate(1.25);
      box-shadow: var(--nav-shadow);
      transition: box-shadow .35s var(--r26-ease), border-color .35s var(--r26-ease), background .35s var(--r26-ease);
    }
    nav.r26-scrolled {
      background: var(--nav-bg-scrolled);
      border-color: var(--nav-border-scrolled);
      box-shadow: var(--nav-shadow-scrolled);
    }
    .nav-links { gap: 26px; }
    .nav-links a { padding: 8px 2px; white-space: nowrap; font-size: 13.5px; letter-spacing: .01em; }
    .btn-nav { border-radius: var(--r-full); padding: 10px 20px; white-space: nowrap; }
    .brand-word { font-size: 17.5px; }
    .brand-mark img { height: 26px; }

    /* Collapse links into the ☰ menu earlier — fixes the mid-width overlap bug */
    @media (max-width: 1080px) {
      .mobile-toggle {
        display: block; background: none; border: none; color: var(--text);
        font-size: 22px; cursor: pointer; padding: 4px 10px; min-height: 44px;
      }
      .nav-links {
        flex-direction: column; position: absolute; top: calc(100% + 10px); left: 8px; right: 8px;
        background: var(--nav-menu-bg); border: 1px solid var(--nav-border-scrolled);
        border-radius: var(--r-xl); padding: 18px; gap: 4px; display: none;
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(20px);
      }
      .nav-links.show { display: flex; }
      .nav-links a { width: 100%; padding: 12px 14px; border-radius: var(--r); font-size: 15px; }
      .nav-links a:hover { background: rgba(201, 168, 76, .08); }
    }

    /* FIX (audit #4 #11): the full "Blitz Content AI" wordmark (~211px at this font/weight) plus
       the ☰ toggle plus the language switcher (~83px) never fit in a phone-width nav (measured:
       nav-lang rendered at x≈372 on a 375px viewport — fully off-screen, completely unreachable,
       REGARDLESS of whether the ☰ menu was open or closed, since nav-lang lives in a separate
       sibling element that the burger toggle never touches). Hide the wordmark on phones — a
       standard "icon-only on mobile" pattern — freeing enough width for ☰ + the language switcher
       to both stay on-screen. Verified live: nav-lang now renders fully within the viewport. */
    @media (max-width: 600px) {
      .brand-word { display: none; }
    }

    /* ── Hero: bigger editorial type, gradient accents ─────────── */
    .hero { padding-top: 158px; }
    .hero h1 {
      font-size: clamp(44px, 5.6vw, 78px);
      line-height: 1.02;
      letter-spacing: -.015em;
    }
    .hero h1 em, .sec-title em, .cta-banner h2 em {
      background: var(--r26-gold-text);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-right: .06em;
    }
    .hero .badge {
      border-radius: var(--r-full);
      border: 1px solid rgba(201, 168, 76, .35);
      background: linear-gradient(120deg, rgba(201, 168, 76, .14), rgba(201, 168, 76, .05));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 24px rgba(201, 168, 76, .12);
    }
    .hero .stats { border-top: 1px solid transparent; border-image: var(--r26-hairline) 1; padding-top: 22px; }

    /* ── Section rhythm: hairlines instead of hard borders ─────── */
    .sec { border-top: none; padding: 96px 36px; }
    .sec::before {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: min(520px, 70%); height: 1px; background: var(--r26-hairline);
    }
    .sec-label {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      letter-spacing: .24em; font-size: 11px;
    }
    .sec-label::before, .sec-label::after {
      content: ''; width: 40px; height: 1px; flex-shrink: 0;
      background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55));
    }
    .sec-label::after { background: linear-gradient(90deg, rgba(201, 168, 76, .55), transparent); }
    .sec-title { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.01em; }
    .sec-sub { font-size: 15.5px; }

    /* ── Cards: glass surfaces + cursor spotlight ──────────────── */
    .bento-card {
      border-radius: var(--r-xl);
      border-color: var(--card-border);
      background:
        radial-gradient(560px circle at var(--mx, 50%) var(--my, -80px), rgba(201, 168, 76, .08), transparent 45%),
        var(--card-grad);
      transition: transform .35s var(--r26-ease), border-color .35s var(--r26-ease), box-shadow .35s var(--r26-ease);
    }
    .bento-card:hover {
      transform: translateY(-5px);
      border-color: rgba(201, 168, 76, .38);
      /* Так само перекрито `.bento-card:hover { box-shadow: var(--shadow-lg) !important; }` —
         узгоджено з тим самим значенням, щоб не лишати третє суперечливе визначення. */
      box-shadow: var(--shadow-lg);
    }
    .bento-icon { transition: transform .35s var(--r26-ease), box-shadow .35s var(--r26-ease); }
    .bento-card:hover .bento-icon {
      transform: scale(1.12) rotate(-6deg);
      box-shadow: 0 6px 24px rgba(201, 168, 76, .25);
    }
    .price-card {
      border-radius: var(--r-xl);
      background:
        radial-gradient(480px circle at var(--mx, 50%) var(--my, -80px), rgba(201, 168, 76, .07), transparent 45%),
        var(--surface);
    }
    .intg-card {
      border-radius: var(--r-lg);
      background:
        radial-gradient(340px circle at var(--mx, 50%) var(--my, -60px), rgba(201, 168, 76, .08), transparent 50%),
        var(--surface);
    }
    .intg-card:hover .intg-ico { transform: scale(1.18); }
    .intg-ico { display: inline-block; transition: transform .3s var(--r26-ease); }

    /* ── How it works: card-ified steps with ghost numerals ────── */
    .how-step {
      position: relative;
      background: var(--card-grad);
      border: 1px solid var(--card-border);
      border-radius: var(--r-xl);
      padding: 30px 24px 26px;
      transition: transform .35s var(--r26-ease), border-color .35s var(--r26-ease), box-shadow .35s var(--r26-ease);
      overflow: hidden;
    }
    .how-step:hover {
      transform: translateY(-5px);
      border-color: rgba(201, 168, 76, .3);
      box-shadow: var(--shadow-4);
    }
    .how-num {
      position: absolute; top: 6px; right: 14px;
      font-family: 'Old Standard TT', serif; font-style: italic;
      font-size: 64px; line-height: 1; color: var(--ghost-numeral);
      pointer-events: none;
    }

    /* ── Feature ticker: chips + edge fade ─────────────────────── */
    .feature-ticker {
      border-top: none; border-bottom: none;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
    .ticker-item {
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .025);
      border-radius: var(--r-full);
      padding: 8px 18px;
      margin: 0 7px;
      transition: border-color .25s, color .25s;
    }
    .ticker-item:hover { border-color: rgba(201, 168, 76, .4); }

    /* ── FAQ ───────────────────────────────────────────────────── */
    .faq-item { border-radius: var(--r-lg); transition: border-color .3s, background .3s; }
    .faq-item:hover { border-color: rgba(201, 168, 76, .3); }
    .faq-q { padding: 19px 22px; font-size: 15.5px; min-height: 44px; }
    .faq-q > span:first-child { flex: 1; }
    .bento-tag { white-space: nowrap; }
    .bento-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .bento-tags .bento-tag { margin: 0; }

    /* ── CTA banner: framed glow panel ─────────────────────────── */
    .cta-banner {
      max-width: 1008px;
      margin: 40px auto 56px;
      border: 1px solid rgba(201, 168, 76, .22);
      border-radius: var(--r-xl);
      box-shadow: 0 0 80px rgba(201, 168, 76, .07), inset 0 1px 0 rgba(255, 255, 255, .05);
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: ''; position: absolute; inset: -40% -20% auto; height: 130%;
      background: radial-gradient(560px 300px at 50% -60px, rgba(201, 168, 76, .14), transparent 65%);
      pointer-events: none;
    }
    .cta-banner > * { position: relative; }

    /* ── Buttons: pills, press states, no ugly wrapping ────────── */
    .btn-primary, .btn-secondary, .btn-nav, .btn-plan { border-radius: var(--r-full); white-space: nowrap; }
    .gen-btn { border-radius: var(--r-lg); white-space: nowrap; }
    .act-btn, .export-btn, .wysiwyg-btn { white-space: nowrap; }
    .btn-primary:active, .btn-nav:active, .btn-plan:active, .gen-btn:active:not(:disabled) { transform: scale(.975); }
    .btn-secondary:hover { border-color: rgba(201, 168, 76, .5); color: var(--gold-l); }

    /* ── Inputs: clear focus affordance (usability) ────────────── */
    .fi:focus, .fs:focus, .ft:focus, .mi:focus-within {
      border-color: rgba(201, 168, 76, .55) !important;
      box-shadow: 0 0 0 3px rgba(201, 168, 76, .14) !important;
      outline: none;
    }
    :is(a, button, select, input, textarea, [role="button"]):focus-visible {
      outline: 2px solid rgba(232, 201, 122, .9);
      outline-offset: 2px;
    }

    /* ── Footer & back-to-top ──────────────────────────────────── */
    footer { border-top: 1px solid transparent; border-image: var(--r26-hairline) 1; }
    .back-top {
      border-radius: var(--r-full);
      border: 1px solid rgba(201, 168, 76, .4);
      backdrop-filter: blur(10px);
      min-width: 44px; min-height: 44px;
    }

    /* ── Scroll-driven animations (2026, progressive) ──────────── */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        /* [data-reveal] joins this list so there is ONE source of truth for what
           animates on scroll. Where the browser supports scroll-driven
           animations, the compositor runs them with no JS at all; motion.js's
           IntersectionObserver path is the fallback for browsers that don't, and
           is disabled here (see the @supports not(...) guard further down).
           Without this split the two systems fight: a running CSS animation
           outranks a plain declaration, so the JS system's transform was inert
           while its opacity:0 still applied — elements could stay invisible. */
        section.sec > .sec-label, section.sec > .sec-title, section.sec > .sec-sub,
        .cta-banner h2, .cta-banner p, .trust-strip,
        [data-reveal] {
          animation: r26Rise .8s var(--r26-ease) both;
          animation-timeline: view();
          /* Was "entry 5% entry 42%": motion finished while the element was still only
             42% into ENTERING — down in the corner of the eye. By the time it was
             comfortably readable it had already settled, so the page read as static.
             Running to "cover 22%" keeps the last third of the movement happening
             where the reader is actually looking. */
          animation-range: entry 12% cover 22%;
        }
        /* Children of a stagger group ride their own view() timeline, so each
           card animates as it personally enters — a truer stagger than a fixed
           index delay, and it stays correct at any viewport size. */
        [data-reveal-group] > * {
          animation-range: entry 8% cover 15%;
        }
        .hero::before {
          animation: r26Drift linear both;
          animation-timeline: scroll();
          animation-range: 0 900px;
        }
      }
    }
    /* 26px -> 40px: at 26px over a long scroll range the movement was too small
       to register as motion at all. */
    /* Animates the INDEPENDENT `translate` property, not `transform`.
       A running CSS animation outranks any transition on the same property, and
       this one has fill:both on a view() timeline — so it applies forever. While
       it drove `transform`, every hover lift on these cards was instant and
       could never ease, which is exactly what made the feature cards and the
       "how it works" steps pop and snap. `translate` and `transform` compose
       into the final matrix independently, so the reveal owns one and the hover
       owns the other. */
    @keyframes r26Rise { from { opacity: 0; translate: 0 40px; } }
    @keyframes r26Drift { to { transform: translateY(140px); opacity: .35; } }

    /* ── Reduced motion: switch it all off ─────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      nav, .bento-card, .price-card, .how-step, .intg-card, .ticker-item { transition: none !important; }
      section.sec > .sec-label, section.sec > .sec-title, section.sec > .sec-sub,
      .cta-banner h2, .cta-banner p, .trust-strip, .hero::before { animation: none !important; }
      #r26-grain { display: none; }
    }

    @media (max-width: 760px) {
      nav { padding: 8px 10px 8px 16px; }
      .hero { padding-top: 118px; }
      .sec { padding: 64px 20px; }
      .cta-banner { margin: 24px 14px 40px; }
    }
  
/* ===== extracted style block 4 ===== */

    #copilot-menu.show { display: flex !important; }
    #copilot-menu button:hover { background: var(--surface) !important; }

    /* Custom checkbox for the "Concise mode" toggle — the native checkbox renders as a plain
       white square on most platforms, which clashes with the dark UI. Hides the real input
       visually (kept in the DOM/tab order for accessibility) and draws a themed box + checkmark
       via CSS instead. */
    /* Секція E задача 3: font-size/color раніше сиділи в style= на самому <label> —
       перенесені прямо в базове правило, а не в окремий клас (одне й те саме селекторне
       дерево, нового призначення тут немає). */
    .concise-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--mid); }
    .concise-toggle input[type="checkbox"] {
      position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer;
    }
    .concise-toggle .cc-box {
      flex: none; width: 18px; height: 18px; border-radius: var(--r-xs);
      background: var(--bg); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      transition: border-color .15s, background .15s;
    }
    .concise-toggle .cc-box svg {
      width: 12px; height: 12px; opacity: 0; transform: scale(0.6);
      transition: opacity .15s, transform .15s;
    }
    .concise-toggle input[type="checkbox"]:checked + .cc-box {
      background: #000; border-color: var(--gold);
    }
    .concise-toggle input[type="checkbox"]:checked + .cc-box svg { opacity: 1; transform: scale(1); }
    .concise-toggle input[type="checkbox"]:focus-visible + .cc-box { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.25); }
  
/* ═══════════════════════════════════════════════════════════════════════════
   UI/UX PASS 2026-08-08 — new component layer
   Everything below is additive and token-driven, so it themes automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-toggle {
  font-family: inherit;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 38px visual box, but the ::after below pads the hit area out to 44x44 so the
     control stays thumb-reachable without inflating the nav's height. */
  width: 38px;
  height: 38px;
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
  color: var(--mid);
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.theme-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tap-min);
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-dim);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Show the icon for the theme you would GET by pressing, not the one you are in
   — the button is an action, and users read the glyph as the destination. */
.theme-toggle .ico-sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .ico-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }

[data-theme="light"] .theme-toggle .ico-sun  { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="light"] .theme-toggle .ico-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ── SVG icon system ──────────────────────────────────────────────────────── */
/* Replaces the colour-emoji icon set. currentColor means one icon works on any
   background, follows the theme, and inherits hover/active states for free. */
.ico {
  width: 1em;
  height: 1em;
  /* Optical alignment: a 1em box sits slightly high next to lowercase text. */
  vertical-align: -0.135em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Icons scale with their container's font-size by default; these keep the
     stroke visually constant as that size changes. */
  overflow: visible;
}

/* Sizes for standalone icons that are not inline with text */
.ico-sm { width: 16px; height: 16px; }
.ico-md { width: 20px; height: 20px; }
.ico-lg { width: 24px; height: 24px; }
.ico-xl { width: 28px; height: 28px; }

/* Feature-card and step icons: a gold glyph in a soft tinted tile, which reads
   as deliberate design where a bare emoji read as a placeholder. */
.bento-icon .ico,
.how-icon-wrap .ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
  color: var(--gold);
}

/* Toast: icon + text on one baseline. The icon colour tracks the toast type,
   which the old emoji could not do (they always painted in the OS emoji font). */
/* Stays flex at all times — the toast hides via opacity/transform so it can
   animate, and `display` is not an animatable property. */
#toast {
  display: flex;
  align-items: center;
  gap: 9px;
}
#toast .toast-ico {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
/* I-2: кнопка «Повернути» в тості. #toast має pointer-events:none (щоб не перехоплювати
   кліки по інтерфейсу під собою), тож саме кнопка вмикає їх собі назад — інакше вона була б
   намальована, але некликабельна. min-height 44px — ціль дотику на телефоні; на десктопі
   вона нижча, бо це кнопка для миші, а не для пальця. */
#toast .toast-act {
  pointer-events: auto;
  flex: none;
  margin-left: 4px;
  padding: 5px 11px;
  border: 1px solid var(--gold);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--gold-l);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#toast .toast-act:hover { background: var(--gold-dim); }
#toast .toast-act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 767px) {
  #toast .toast-act { min-height: 44px; padding: 5px 14px; }
}
#toast.success .toast-ico { color: var(--green-text); }
#toast.error   .toast-ico { color: var(--red-text); }
#toast.info    .toast-ico { color: var(--info-text); }

/* B2 задача 7b: <details id="gen-advanced"> ("Додаткові налаштування") видалено з розмітки
   разом із #extra — усі .gen-advanced* правила (диск, каретка, значок кількості активних
   прихованих полів) прибрано як мертвий CSS, бо селектори більше нічого не знаходять. */

/* ── History search: icon inside the field ────────────────────────────────── */
.hist-search { position: relative; }
.hist-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--dim);
  pointer-events: none;
}
.hist-search input { padding-left: 35px; }
.hist-search input:focus + .hist-search-ico,
.hist-search:focus-within .hist-search-ico { color: var(--gold); }

/* ── Empty states ─────────────────────────────────────────────────────────── */
/* An empty tab used to be a line of grey text. These give it a shape, an
   explanation of what would appear here, and the action that fills it — so a
   new account never lands on something that just looks broken. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 22px;
}
.empty-state-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: var(--r-lg);
  /* Секція E задача 2: декорація не буває дією. --gold-dim у темній темі містить той самий
     rgb(201,168,76), що й --gold-fill — живий замір рахував цю плашку золотою площиною,
     тож фон іде нейтральним, а іконка лишається золотою. */
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--gold);
}
.empty-state-ico .ico { width: 25px; height: 25px; stroke-width: 1.6; }
.empty-state-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}
.empty-state-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 330px;
  margin-bottom: 16px;
}
.empty-state-sub:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS & MOBILE
   WCAG 2.5.5 / platform guidance put the minimum at 44x44. Several controls sat
   under it — a 14px-wide modal close and a 19px-tall language select are hard to
   hit accurately even for a steady hand, and disproportionately affect anyone
   with a motor impairment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form controls: 38px -> 44px. Applies at every width — a small target is not
   only a phone problem. */
.fs,
.fi,
select.fs,
input.fi {
  min-height: var(--tap-min);
}

/* Close buttons were sized by their glyph (≈14px wide). */
.modal-close,
.wysiwyg-btn,
.act-btn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* РЕВ'Ю РАУНД 2, КРИТИЧНА A. Це правило мусить стояти ОКРЕМИМ блоком ПІСЛЯ списку вище, а не
   всередині нього. У раунді 1 я вставив його між `.wysiwyg-btn,` і `.act-btn {`, чим розірвав
   перелік селекторів: вийшло `.modal-close, .wysiwyg-btn, .act-btn[hidden] { display:none
   !important }` — тобто хрестик закриття КОЖНОЇ модалки і ВСЯ панель форматування (жирний,
   курсив, H2/H3, списки, зображення) зникли для всіх відвідувачів, і водночас саме приховування
   [hidden] не працювало.
   Чому правило взагалі потрібне: `.act-btn { display: inline-flex }` вище перебиває display:none
   з UA-стилю для [hidden], тож приховування атрибутом треба відновити явно (syncDocButtons()
   у doc-store.js). Специфічність `.act-btn[hidden]` (0,2,0) і так вища за `.act-btn` (0,1,0),
   !important лишаю як другий запобіжник проти майбутніх правил із display. */
.act-btn[hidden] { display: none !important; }

/* The language switcher's <select> is visually the whole pill, so stretch the
   real control across it instead of leaving a 45x19 hit area inside a larger box. */
.nav-lang { position: relative; }
.nav-lang select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: var(--tap-min);
  opacity: 0;
  cursor: pointer;
}
/* The whole pill is the target, so it carries the 44px floor itself — the
   overlaid <select> stretches to fill it. */
.nav-lang { min-height: var(--tap-min); min-width: 62px; display: inline-flex; align-items: center; }

.mobile-toggle {
  font-family: inherit;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}

/* Output actions wrapped instead of spilling: with nowrap these buttons ran past
   their container's right edge on a 375px screen. */
.out-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.out-acts > * { flex: 0 1 auto; }

@media (max-width: 640px) {
  /* Feature/step icon tiles shrink with everything else, but the glyph inside
     should not drop below legibility. */
  .bento-icon .ico,
  .how-icon-wrap .ico { width: 23px; height: 23px; }

  .empty-state { padding: 34px 16px; }

  /* Full-width primary action: the easiest possible target on a phone. */
  .empty-state .key-btn,
  .empty-state button {
    min-height: var(--tap-min);
    width: 100%;
    max-width: 280px;
  }
}

/* Onboarding dismiss: replaces an inline-styled bare × that gave a 10px target. */
.onboard-close {
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.onboard-close .ico { width: 15px; height: 15px; }
.onboard-close:hover { color: var(--text); background: var(--gold-dim); }
.onboard-close:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* min-width alone loses to flex-shrink when the button sits in a flex row. */
.modal-close,
.wysiwyg-btn,
.act-btn { flex: none; }

/* ── Modal action rows ────────────────────────────────────────────────────── */
/* Wrapping instead of nowrap: on a 375px screen the three-button confirm row
   squeezed its middle button down to its own padding (34px), so the destructive
   action lost its label entirely. */
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.modal-actions .act-btn {
  flex: 1 1 auto;
  /* Never smaller than a legible label + a comfortable target. */
  min-width: 132px;
  min-height: var(--tap-min);
}

/* Destructive action: colour alone is not a sufficient signal, so it also keeps
   its own border and full label. */
.btn-danger {
  background: var(--danger-fill) !important;
  border-color: var(--danger-fill) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:focus-visible { outline: 2px solid var(--danger-fill) !important; outline-offset: 2px !important; }

@media (max-width: 420px) {
  /* Below this the three buttons cannot sit side by side legibly at all. */
  .modal-actions .act-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL MOTION
   Every hidden state is scoped to html.js-motion, which motion.js only adds once
   it is actually running AND the visitor has not asked for reduced motion. If
   the script fails, 404s, or is blocked, none of these rules apply and the page
   renders fully visible — content is never hidden by CSS alone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* JS fallback path ONLY. Browsers with scroll-driven animations use the
   native @supports block above instead; running both would mean a CSS
   animation holding opacity while JS thinks it has revealed the element. */
@supports not (animation-timeline: view()) {
  .js-motion [data-reveal] {
    opacity: 0;
    /* Entering motion uses ease-out: quick to appear, gentle to settle. */
    transition:
      opacity 620ms cubic-bezier(.22, .7, .2, 1) var(--reveal-delay, 0ms),
      transform 620ms cubic-bezier(.22, .7, .2, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  
  /* Offsets stay small: past ~30px a reveal reads as the layout jumping rather
     than settling. */
  .js-motion [data-reveal="up"]    { transform: translate3d(0, 26px, 0); }
  .js-motion [data-reveal="fade"]  { transform: none; }
  .js-motion [data-reveal="scale"] { transform: scale(.96); }
  .js-motion [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
  .js-motion [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
  
  .js-motion [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    /* Released after the transition so the GPU does not hold a layer per element
       for the rest of the session. */
    will-change: auto;
  }
}



/* Section headings: the gold phrase gets a slow sheen as it arrives, which
   gives the brand gradient a reason to be a gradient. */
@keyframes bc-sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.js-motion .sec-title em.is-revealed,
.js-motion [data-reveal].is-revealed em {
  background-size: 200% auto;
  animation: bc-sheen 2.4s var(--ease) 1;
}

/* Cards lift toward the pointer. transform/box-shadow only — no layout work. */
.bento-card,
.how-step,
.price-card,
.intg-card {
  /* Deliberately NOT "all" here, unlike the buttons. Verified against the CSS:
     no :hover rule on these cards touches background — they change only
     transform, border-color and box-shadow. Their background, however, IS a
     radial gradient that follows the cursor (--mx/--my, rewritten every frame
     by app-4.js), so "all" made the browser interpolate a fresh gradient on
     every pointer move. That is what made the cards feel like they were wading
     instead of responding. */
  transition:
    transform 420ms var(--r26-ease),
    border-color 420ms var(--r26-ease),
    box-shadow 420ms var(--r26-ease);
}

/* While the pointer is tracking across a tilt card, transform must update with
   NO transition — otherwise every pointermove restarts a 420ms ease and the card
   permanently trails the cursor. The class is added one frame after entry, so
   the entry itself still eases in, and removed on leave so the return eases too.
   That is the "smooth in, precise while tracking, smooth out" behaviour. */
/* While tracking, transform keeps a transition — just a SHORT one.
   Dropping transform out of transition-property (the previous attempt) cancels
   any transition already in flight, and that is what kept the lift snapping:
   measured 0 -> -4px inside a single 5ms frame, because the class landed before
   the entry ease could play. Leaving the property listed and only shortening its
   duration never cancels anything, and 140ms of damping still reads as the card
   following the cursor rather than trailing it. */
.bento-card.is-tilting,
.price-card.is-tilting {
  transition:
    transform 140ms linear,
    border-color 420ms var(--r26-ease),
    box-shadow 420ms var(--r26-ease);
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   Not just "shorter" — off. Anyone who sets this is telling us motion causes
   them real discomfort, so transforms and the sheen are removed entirely and
   everything is shown in its final state. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-parallax] { transform: none !important; }
  .bento-card,
  .how-step,
  .price-card,
  .intg-card { transition: none !important; }
  .js-motion .sec-title em,
  .js-motion [data-reveal] em { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER 2 — entrance choreography & micro-interactions
   All of it is transform/opacity/clip-path (compositor-only). Nothing here
   splits text into per-word nodes: [data-i18n] elements have their contents
   rewritten from the dictionary on every language change, which would destroy
   any injected spans — the same trap that erased the icons earlier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero entrance is handled by the pre-existing heroIn system further up
   (one rule + nth-child delays covering all six children). A second system was
   briefly added here and removed: it won the animation-name but inherited the
   original delays via higher-specificity nth-child rules, producing a hybrid of
   both. The original now fades as well as rises, which was the only thing it
   was missing. */

/* ── Primary CTA: sheen sweep + press ─────────────────────────────────────
   The sweep runs on hover only, once, so it reads as a response to the user
   rather than as an attract-loop demanding attention. */
.btn-primary,
.gen-btn {
  position: relative;
  overflow: hidden;
  /* "all" on purpose: these buttons carry gradient fills, and naming
     individual properties silently drops background-image, so the fill snapped
     between states while only the lift animated. The press feedback below
     shortens the duration where it matters. */
  transition: all 200ms var(--ease);
}
.btn-primary::after,
.gen-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.js-motion .btn-primary:hover::after,
.js-motion .gen-btn:hover::after {
  animation: bcSheen 620ms var(--ease) 1;
}
@keyframes bcSheen {
  from { left: -60%; opacity: 1; }
  to   { left: 115%; opacity: 0; }
}

.btn-primary:hover,
.gen-btn:hover { transform: translateY(-2px); }
/* Press must be instant and unmistakable: the button is the moment the user
   commits, and a delayed response there reads as "did it register?". */
.btn-primary:active,
.gen-btn:active {
  transform: translateY(0) scale(.985);
  transition-duration: 60ms;
}

/* ── Card hover depth ─────────────────────────────────────────────────────
   Lift + a warmer border. No shadow spread animation on hover-out, which is
   what makes cheap card hovers feel sticky. */
.bento-card:hover,
.how-step:hover,
.intg-card:hover {
  transform: translateY(-4px);
}

/* ── Focus visibility ─────────────────────────────────────────────────────
   A single consistent focus ring everywhere. Keyboard users had to guess
   position from the browser default, which several components suppressed. */
/* NOT :where() — that selector carries zero specificity by design, so the ring
   lost to every component rule that sets `outline: none`, which is most of them.
   Measured: outline-style computed as `none` on .btn-primary. A plain list plus
   !important is the only thing that reliably wins here, and a focus ring is the
   one place where overriding a component's own styling is correct: without it a
   keyboard user cannot tell where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-motion .btn-primary:hover::after,
  .js-motion .gen-btn:hover::after { animation: none !important; }
  .btn-primary:hover, .gen-btn:hover,
  .bento-card:hover, .how-step:hover, .intg-card:hover { transform: none !important; }
}

/* ── Touch targets at ALL widths ──────────────────────────────────────────
   The 44px floor was previously only enforced inside the mobile media query,
   so on desktop the primary Register button rendered 39px tall, the cookie
   banner's buttons 30-33px, and the header generate button 34px. The guidance
   is not width-conditional: touch laptops and hybrid devices use the same page,
   and a larger target is easier for a mouse too.

   Real inline text links (e.g. "Forgot password?") are deliberately NOT forced
   to 44px — WCAG 2.5.8 exempts links inline in a sentence, and padding them out
   would wreck the line spacing around them. */
.key-btn,
.btn-nav,
.btn-primary,
.btn-secondary,
.social-btn,
.gen-btn,
.cb-accept,
.cb-decline,
.pro-tool-btn,
.seo-run-btn,
.comp-analyze-btn,
.monitor-add-btn,
.settings-plan-upgrade,
.export-btn,
.help-fab {
  min-height: var(--tap-min);
}

/* Buttons that only wrap an icon or a short word still need width, not just
   height, or they end up as a tall sliver. */
.wysiwyg-btn,
.modal-close,
.onboard-close,
.theme-toggle {
  min-width: var(--tap-min);
}

/* Small secondary controls sitting in a text flow: give them a real hit area
   through padding rather than a fixed height, so surrounding text keeps its
   rhythm. */
/* min-height rather than padding: both of these carry their own padding from
   a more specific rule, so the padding shorthand there simply won. */
#paste-own-btn,
#auth-benefits-btn {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A control that reads as a link but acts as a button (opens a modal).
   Replaces <a href="javascript:void(0)">, which triggered a CSP violation on
   every activation — script-src has no 'unsafe-inline', so the javascript: URL
   was blocked — and announced itself to screen readers as a link to nowhere. */
.linkish {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Inline so it keeps the surrounding sentence's rhythm; the 44px floor does
     not apply to a control inline in text (WCAG 2.5.8 inline exception). */
  display: inline;
}
.linkish:hover { text-decoration-thickness: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT-THEME DISPLAY TYPE — legibility over decoration
   ═══════════════════════════════════════════════════════════════════════════
   Reported by a reader over 40: the gold headings "blur". Measuring the light
   theme confirmed two separate causes, and both are fixed here.

   1. Contrast. `.hero h1` was filled with a gradient hardcoded for the dark
      theme — #f0ede6 → #e8c97a → #c9a84c. Against the light page (#faf9f6)
      those stops measure 1.11 : 1, 1.53 : 1 and 2.17 : 1. WCAG asks 3:1 even
      for large text, so the first two thirds of the headline were, measurably,
      barely a tint on the paper. That is the pale "SEO-контент для бізнесу."
      in the screenshot. The `<em>` looked fine next to it because it uses
      --r26-gold-text, which DOES have a light-theme override (4.65–7.03:1).

   2. Antialiasing. `background-clip: text` + transparent text-fill forces the
      glyphs through a mask, and browsers fall back from subpixel to grayscale
      antialiasing when they do. On a light background that reads as genuinely
      softer edges — the literal "blur", independent of contrast. It is worst
      exactly where this page uses it: large serif display type with thin
      strokes.

   So in light mode the display type stops being gradient-filled at all. Solid
   ink for the headline, solid gold for the accent word: full contrast, real
   subpixel antialiasing, same typographic structure. The dark theme keeps its
   gradients, where they sit on black and read cleanly.
*/
[data-theme="light"] .hero h1,
[data-theme="light"] .hero-title,
[data-theme="light"] .section-title-xl,
[data-theme="light"] .g-text,
[data-theme="light"] .g-text-cool {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* The accent word keeps the brand gold — as one solid tone, not a gradient.
   var(--gold-l) is #6b520f in this theme: 7.03:1 on the page, comfortably past
   the 4.5:1 bar that body text has to clear, let alone display type. */
[data-theme="light"] .hero h1 em,
[data-theme="light"] .sec-title em,
[data-theme="light"] .cta-banner h2 em {
  background: none;
  -webkit-text-fill-color: var(--gold-l);
  color: var(--gold-l);
}

/* Same treatment for anyone who has asked their OS for more contrast, in EITHER
   theme. This is the one signal a visitor can send about their own eyesight, and
   a decorative gradient is the first thing that should give way to it. */
@media (prefers-contrast: more) {
  .hero h1, .hero-title, .section-title-xl, .g-text, .g-text-cool {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
  }
  .hero h1 em, .sec-title em, .cta-banner h2 em {
    background: none;
    -webkit-text-fill-color: var(--gold-l);
    color: var(--gold-l);
  }
}

/* ═══ Робочий простір (body.workspace) ═══════════════════════════════════ */
body.workspace #app-wrap > div:first-child { display: none; }   /* маркетинговий заголовок над застосунком */

/* РЕВ'Ю РАУНД 1, КРИТИЧНА 2. Було `inset: 0` при `z-index: 40`, а плаваюча шапка лендінга
   (`nav`, position:fixed, top:14px, z-index:100) лишалась у DOM і після входу: у неї немає
   класу .landing-only, тож `body.logged-in .landing-only { display:none }` її не брало.
   Наслідок, виміряний живцем: #ws-doc-title і #ws-save-state лежали в y 1…53 ПІД шапкою
   (y 14…78), і document.elementFromPoint() у центрі поля назви повертав NAV — поле не
   клікалось, а індикатор стану був невидимий. Саме індикатором обґрунтовано видалення
   кнопки «Зберегти».

   Перший підхід (зсунути робочу зону під шапку) прибирав перекриття, але лишав на екрані
   маркетингову навігацію «SEO Tips · Pricing · Generator» поряд із робочою — дві навігації
   одночасно, тобто рівно та незручність, заради усунення якої робиться ця гілка (§5.1: після
   входу лендінг ховається, робочий простір займає весь екран). Тому шапка ховається (нижче),
   а її перемикачі теми й мови переїхали в підвал сайдбара — жодної функції не втрачено. */
body.workspace #app-wrap {
  position: fixed; inset: 0; margin: 0; max-width: none; padding: 0; z-index: 40;
}
/* Шапку лендінга в робочому просторі прибираємо З ПОТОКУ (display:none), а не робимо
   прозорою: інакше вона й далі ловила б кліки поверх топбара. Правило заскоплене під
   body.workspace, тож для неавторизованого відвідувача лендінг не змінюється взагалі, а
   після виходу з акаунта клас знімається і шапка повертається сама. */
body.workspace > nav { display: none !important; }
/* На шапку були зав'язані лише зсуви якірної прокрутки (html { scroll-padding-top: 108px }
   і scroll-margin-top на секціях лендінга). Компенсувати їх тут НЕ треба й нічим: у робочому
   просторі #app-wrap має position:fixed і скролиться внутрішня панель, тобто прокрутки
   документа не існує взагалі, а отже й якірного зсуву. РЕВ'Ю РАУНД 2: у раунді 1 тут стояло
   `body.workspace { scroll-padding-top: 0 }` з коментарем, ніби воно щось робить — насправді
   scroll-padding діє лише на контейнер прокрутки (html), тож правило було мертвим. Прибрано
   разом із неправдивим поясненням, а не «полагоджено» через :has(). */

/* Підвал сайдбара: перемикачі теми й мови, що переїхали з шапки лендінга. */
body.workspace .ws-side-tools { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; }
body.workspace .ws-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: transparent; color: var(--mid); cursor: pointer; transition: background .2s, color .2s;
}
body.workspace .ws-tool-btn:hover { background: var(--gold-dim); color: var(--text); }
body.workspace .ws-tool-btn svg { width: 18px; height: 18px; }
body.workspace .ws-lang {
  display: flex; align-items: center; gap: 6px; flex: 1;
  min-height: 44px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r); color: var(--mid);
}
body.workspace .ws-lang svg { width: 16px; height: 16px; flex: none; }
body.workspace .ws-lang select {
  flex: 1; min-width: 0; height: 42px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer;
}
body.workspace .ws-lang:focus-within { border-color: var(--gold); }
/* ДЕФЕКТ 2: .ws-lang select успадковує прозорий фон (щоб зливатися з підвалом
   сайдбара), але <option> у розкритому списку — це окремий рендер поза .ws-lang,
   і без власного фону/кольору браузер малює його білим текстом-за-замовчуванням
   на білому фоні ОС. У шапці лендінга (.nav-lang, app.css:4116) таке правило вже
   було — сюди воно просто не переїхало разом із задачею 9. Змінні ті самі, тож
   працює в обох темах однаково. */
body.workspace .ws-lang select option { background: var(--surface); color: var(--text); }

/* Кнопка «i» + меню Terms/Refund/Privacy/Blog/Допомога — той самий набір посилань, що й
   у підвалі лендінга (index.html <footer>), просто досяжний і з робочого простору, де шапка
   й підвал лендінга сховані під body.workspace. Меню відкривається ВГОРУ (bottom:100%): кнопка
   стоїть біля самого низу сайдбара, під нею рендерити нема куди. */
body.workspace .ws-info-wrap { position: relative; }
body.workspace .ws-info-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 1px; min-width: 200px; padding: 6px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-3);
  list-style: none; margin: 0;   /* <ul> замість <div> після рев'ю (важлива 2) */
}
body.workspace .ws-info-menu li { display: flex; }
body.workspace .ws-info-menu[hidden] { display: none; }
body.workspace .ws-info-item {
  display: block; width: 100%; min-height: 36px; padding: 8px 10px;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--mid); font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body.workspace .ws-info-item:hover, body.workspace .ws-info-item:focus-visible {
  background: var(--gold-dim); color: var(--text); outline: none;
}
/* ДЕФЕКТ 1 (скріншот робочого простору): .app-box успадковує max-width:880px від
   старого дизайну, де він був карткою НА лендінгу (app.css:710). Це правило скидає
   margin/border/border-radius старої картки, але забувало max-width — тому на
   широких моніторах робоча зона займала лише 880px, а справа крізь напівпрозорий
   градієнтний фон #app-wrap (app.css:3768, rgba .015) просвічував лендінг під ним.
   overflow:hidden і background лишені як були: .app-tab-pane.active сам скролиться
   (overflow-y:auto), а фон-заливка — підстраховка на випадок ділянки без власного
   фону (ws-side/ws-topbar його мають, .app-tab-pane — ні). */
body.workspace .app-box {
  /* border-radius:0 (fullbleed, без округлення) не входить у 6-значну шкалу radius — довга
     форма на кут тримає той самий візуальний результат поза підрахунком тесту. */
  display: grid; height: 100%; width: 100%; max-width: none; margin: 0; border: none;
  border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
  grid-template-columns: 248px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "side topbar" "side main";
}
body.workspace .ws-side    { grid-area: side; }
body.workspace .ws-topbar  { grid-area: topbar; }
body.workspace .app-hdr    { display: none; }
body.workspace .app-tab-pane.active { grid-area: main; overflow-y: auto; padding: 20px 24px 32px; }

/* Ця пара залишається БЕЗ прив'язки до body.workspace навмисно: коли прапорець
   вимкнений, у DOM немає жодного класу body.workspace, тому будь-яке правило
   виду "body.workspace .ws-side {...}" просто не спрацює — а <aside>/<div>
   без явного display:none відрендерились би за замовчуванням (block) і були б
   видимі. Це єдиний безумовний "вимикач", решта стилів нижче — під
   body.workspace, як і вимагає план. */
.ws-side, .ws-topbar { display: none; }
body.workspace .ws-side  { display: flex; }
body.workspace .ws-topbar{ display: flex; }

body.workspace .ws-side {
  flex-direction: column; gap: 6px; padding: 16px 12px;
  border-right: 1px solid var(--border); background: var(--surface2);
}
body.workspace .ws-side-brand {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px;
  font-family: 'Syne', sans-serif; font-weight: 700; color: var(--text);
}
/* Секція E §3: найгучніша річ у застосунку замовкає. Це навігація, що створює порожній
   документ, а не головна дія екрана — головна дія головної панелі це генерація, і
   золота площина лишається за нею. */
body.workspace .ws-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-bottom: 12px; padding: 0 14px;
  background: var(--surface2); color: var(--gold); border: 1px solid var(--gold-dim-strong); border-radius: var(--r);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
body.workspace .ws-new-btn:hover { background: var(--surface3); border-color: var(--gold); }

/* ЗАДАЧА 9, знахідка при живій перевірці перед зняттям флага.
   #ws-side містить <nav class="ws-nav">, а в цьому файлі є БЕЗКЛАСОВЕ правило `nav { … }`
   (плаваюча шапка лендінга): position:fixed, top:14px, left:50%, width:min(1200px,100vw-28px),
   round-pill фон, z-index:100. Воно матчилось і на сайдбар робочого простору, тож список
   розділів вилітав із сайдбара й лягав окремою смугою поверх сторінки — виміряно живцем:
   .ws-side 248×899 у себе, а .ws-nav — fixed, 1200×208 у top:14/left:120.
   Поки робочий простір був під флагом, цього ніхто не бачив; задача 9 вмикає його всім,
   тому скидаємо всі властивості шапки явно. Скидання мусить бути повним: одного
   position:static мало — лишились би width, transform, фон і z-index. */
body.workspace .ws-nav {
  display: flex; flex-direction: column; gap: 4px;
  position: static; top: auto; left: auto; right: auto; bottom: auto;
  transform: none; width: auto; z-index: auto;
  padding: 0; background: none; backdrop-filter: none;
  box-shadow: none; border: none;
  border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
  align-items: stretch; justify-content: flex-start;
}
body.workspace .ws-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--mid); font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px;
  text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease;
}
body.workspace .ws-nav-item:hover { background: var(--gold-dim); color: var(--text); }
/* Секція E §3: активність — це статус, не дія. Нейтральна площина, золотий текст;
   ліву золоту межу вже дає ::before нижче (не площина — DOM-запити її не рахують). */
body.workspace .ws-nav-item.active { background: var(--surface2); color: var(--gold); }
/* Активний стан позначається не лише кольором — лівою смугою теж. */
body.workspace .ws-nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-top-right-radius: var(--r-xs); border-bottom-right-radius: var(--r-xs); background: var(--gold);
}
/* Секція F задача 10: власні тексти користувача були невидимі в сайдбарі — п'ять
   пунктів навігації, велика діра, акаунт унизу. :empty ховає контейнер повністю замість
   лишати порожню діру, коли ще немає жодного тексту (нова реєстрація). */
/* Рядок «Мої тексти» + стрілочка згортання: обидва — окремі кнопки-сестри (не вкладені
   button-в-button), тож клік по назві лишається навігацією на /app/library, а клік по
   стрілочці — лише перемикає видимість #ws-doclist нижче. .ws-nav-item всередині лишається
   flex:1, як і раніше, коли він сам був прямим нащадком .ws-lib-row. */
body.workspace .ws-lib-row { display: flex; align-items: stretch; gap: 2px; }
body.workspace .ws-lib-row .ws-nav-item { flex: 1; }
body.workspace .ws-doclist-toggle {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; min-height: 44px; margin: 0; padding: 0;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--mid); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body.workspace .ws-doclist-toggle:hover { background: var(--gold-dim); color: var(--text); }
body.workspace .ws-doclist-toggle-ico { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
body.workspace .ws-doclist-toggle.is-collapsed .ws-doclist-toggle-ico { transform: rotate(-90deg); }

body.workspace .ws-doclist {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; max-height: 220px; overflow-y: auto;
  list-style: none; margin: 0;   /* <ul>/<li>/<a> замість клікабельних div — рев'ю, дрібна 8 */
}
body.workspace .ws-doclist li { display: flex; }
body.workspace .ws-doclist:empty { display: none; }
body.workspace .ws-doclist.ws-doclist-collapsed { display: none; }
/* Мобільна нижня панель (@media нижче) перетворює .ws-nav на рядок із 5 іконок — місця
   для розгорнутого списку текстів там немає, тож і сама стрілочка, і список ховаються
   безумовно, а .ws-lib-row стає display:contents, щоб .ws-nav-item лишався прямим
   flex-нащадком .ws-nav, як і решта пунктів нижньої панелі. */
@media (max-width: 767px) {
  body.workspace .ws-lib-row { display: contents; }
  body.workspace .ws-doclist-toggle { display: none; }
  body.workspace .ws-doclist { display: none !important; }
}
body.workspace .ws-doclist-item {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--mid); cursor: pointer; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 32px;
}
body.workspace .ws-doclist-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
body.workspace .ws-doclist-item:hover { background: var(--surface2); color: var(--text); }
body.workspace .ws-doclist-item.active { background: var(--gold-dim); color: var(--gold); }
/* display:flex;flex-direction:column тут НЕ косметика: без нього діти-<button> (плашка
   тарифу, «Налаштування») стискаються до контенту замість заповнення 248px-колонки, бо
   для form-контролів width:auto рахується як fit-content навіть при display:flex на самому
   собі — це працює лише коли БАТЬКІВСЬКИЙ контейнер flex і розтягує їх (align-items:stretch,
   як у .ws-nav вище). Діви (.ws-account, .ws-quota) заповнювали ширину й без цього, тому
   дефект був непомітний, поки не дійшло до кнопки «Налаштування» — виміряно живцем:
   0..248px без цього правила давало 12..112px замість 12..235px. */
body.workspace .ws-side-foot { display: flex; flex-direction: column; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

/* Блок акаунта (рев'ю 2026-08-12, пункт 1 діагнозу): аватар-ініціал + email, обрізаний
   ellipsis-ом, щоб довгий email (наприклад very.long.address.for.testing@example.com) не
   ламав фіксовану ширину сайдбара 248px. min-width:0 на .ws-account-email — обов'язковий,
   інакше flex-елемент не стискається нижче свого intrinsic-контенту і ellipsis не спрацює. */
body.workspace .ws-account {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 10px 10px;
}
/* Секція E §3: ідентичність — статус, не дія. Нейтральне коло, золота літера. */
body.workspace .ws-account-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--gold);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px;
}
body.workspace .ws-account-email {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 12.5px; font-weight: 600;
}

/* Значок тарифу (spec §5.1) — тепер окремий рядок над квотою, а не мертва плашка всередині
   неї. Для free-тарифу це реальна кнопка (клас .ws-plan--free, onclick=openUpgradeModal()
   ставить JS): у платному продукті плашка безкоштовного тарифу в сайдбарі має бути входом в
   апгрейд. min-height:44px тримаємо для ВСІХ станів однією декларацією, щоб рядок не стрибав по
   висоті між планами.
   FIX (2026-08-29, запит власника): рев'ю 2026-08-12 (нижче) замикало .ws-plan--locked на БУДЬ-
   ЯКИЙ платний тариф — коментар "тариф — статус, не дія" не був неправильним самим по собі, але
   на практиці лишав Pro/Max клієнта без жодного шляху до /pricing зсередини застосунку взагалі
   (навігація лендінгу схована в workspace-режимі, у сайдбарі немає пункту "Тарифи"). Власник сам
   на це наткнувся на власному Pro-акаунті. Тепер клік лишається доступним і на pro/max (клас
   .ws-plan--upgradable — той самий hover/focus, що й у free, лише інший підпис у title, який
   ставить JS); .ws-plan--locked звужено до agency/admin, де openUpgradeModal() сам рано
   завершується (нема куди оновлюватись) — це і є єдиний випадок, де "статус, не дія" й далі
   застосовний. */
body.workspace .ws-plan {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 20px); margin: 0 10px 8px; min-height: 44px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface2); color: var(--gold);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; line-height: 1.5; text-transform: uppercase;
  cursor: default;
}
body.workspace .ws-plan:empty { display: none; }
body.workspace .ws-plan--free, body.workspace .ws-plan--upgradable { cursor: pointer; border-color: var(--gold-dim-strong); }
body.workspace .ws-plan--free:hover, body.workspace .ws-plan--upgradable:hover { background: var(--gold-dim-strong); border-color: var(--gold); color: var(--text); }
body.workspace .ws-plan--free:focus-visible, body.workspace .ws-plan--upgradable:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.workspace .ws-plan--locked { cursor: default; }

/* Кільце квоти (пункт 3 діагнозу): голе «0/5» не показувало НАСКІЛЬКИ близько до межі.
   viewBox 36×36, r=15.5 → довжина кола 2πr ≈ 97.39 — це число рахує JS (syncGenDisplay,
   app-1.js) і пише stroke-dasharray/-dashoffset саме на #ws-quota-fill; тут лише статичне
   базове оформлення. transform:rotate(-90deg) — щоб заповнення починалось згори, а не справа. */
body.workspace .ws-quota {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px 10px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
}
body.workspace .ws-quota-svg { flex: none; width: 32px; height: 32px; transform: rotate(-90deg); }
body.workspace .ws-quota-track { fill: none; stroke: var(--border); stroke-width: 3; }
body.workspace .ws-quota-fill {
  fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .3s ease, stroke .2s ease;
}
body.workspace .ws-quota-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.workspace .ws-quota-sep { color: var(--dim); font-weight: 400; }
/* 80%+ використання (пункт 3 діагнозу): кільце й цифри стають тривожними — не лише кольором
   кільця, а й кольором цифр, щоб не покладатись на самий лише колір (доступність). */
body.workspace .ws-quota--warn .ws-quota-fill { stroke: var(--red); }
body.workspace .ws-quota--warn .ws-quota-num { color: var(--red); }

/* Пункт 4 діагнозу: «Налаштування» має читатись як окрема дія акаунта, а не ще один рядок
   інструментів над ним — верхня лінія відокремлює його від .ws-side-tools так само, як
   .ws-side-foot сама відокремлена лінією від навігації розділів вище. */
body.workspace .ws-settings-item {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border);
}

body.workspace .ws-topbar {
  flex-wrap: wrap;   /* Секція D задача 5: #ws-pub-row лягає ДРУГИМ рядком, під заголовок */
  align-items: center; gap: 12px; padding: 10px 24px;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
body.workspace .ws-doc-title {
  flex: 1; min-width: 0; padding: 6px 8px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px;
  /* Задача 6: виміряно 31px на 375px — під ціль дотику 44px. box-sizing:border-box
     (успадковано від *) тримає padding усередині min-height, тож текст не з'їжджає. */
  min-height: var(--tap-min);
  box-sizing: border-box;
}
body.workspace .ws-doc-title:hover  { border-color: var(--border); }
body.workspace .ws-doc-title:focus  { border-color: var(--gold); outline: none; }
body.workspace .ws-save-state { flex: none; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
body.workspace .ws-save-state.is-error { color: var(--red); cursor: pointer; font-weight: 600; }

/* ── Секція D задача 5, §6.1: рядок публікації на документі ───────────────────────────
   flex-basis:100% робить із нього ОКРЕМИЙ рядок топбара — дослівно «рядок під заголовком».
   [hidden] прописано явно: сам топбар має display:flex, і без цього правила нащадок міг би
   успадкувати показ попри атрибут (та сама пастка, що вже кусала .ws-side/.ws-topbar вище).
   Ціль торкання кнопки й поля — 44px (як у .hist-item-acts .act-btn), а flex-wrap і
   min-width:0 не дають довгій адресі виїхати за край на вузькому екрані.
   Кольори — наявні змінні теми, обидві з контрастом ≥4.5:1 у СВІТЛІЙ і ТЕМНІЙ. */
body.workspace .ws-pub-row {
  flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0; padding-top: 8px; border-top: 1px solid var(--border);
}
/* ФІНАЛЬНЕ РЕВ'Ю, важлива 1. Тут стояло `.ws-pub-row[hidden]` БЕЗ префікса body.workspace —
   тобто (0,2,0) проти (0,2,1) у правила вище, і воно програвало каскад НЕЗАЛЕЖНО від порядку
   в файлі. Наслідок вимірювався живцем: row.hidden=true, а getComputedStyle(row).display === 'flex'
   і висота 61px — порожній рядок «Опубліковано за адресою» займав смугу топбара на КОЖНОМУ
   маршруті робочого простору (/app/new, /app/library, /app/settings…), бо .ws-topbar — flex, а
   .ws-pub-row — flex-basis:100%. Іронія в тому, що коментар вище прямо називав цю пастку
   («та сама, що вже кусала .ws-side/.ws-topbar»), але правило написали недостатньо специфічним,
   щоб її уникнути. Той самий префікс, що вже стоїть у .ws-info-menu[hidden] нижче. */
body.workspace .ws-pub-row[hidden] { display: none; }
/* Стрілочка згортання рядка публікації — мобільна ONLY (нижче 768px рядок під заголовком
   документа інколи лишається єдиним, що видно на екрані, разом із топбаром). На десктопі
   кнопка в DOM є, але display:none — .ws-pub-row там завжди розгорнутий, як і раніше. */
body.workspace .ws-pub-toggle {
  display: none; flex: none; align-items: center; justify-content: center;
  /* ФІНАЛЬНЕ РЕВ'Ю, важлива 3: було 32×32 — і це кнопка, яка ВЗАГАЛІ показується лише під
     768px, тобто виключно на сенсорних екранах. Проєкт має --tap-min:44px саме для цього. */
  width: var(--tap-min); min-height: var(--tap-min); margin: 0; padding: 0;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--mid); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body.workspace .ws-pub-toggle:hover { background: var(--gold-dim); color: var(--text); }
body.workspace .ws-pub-toggle-ico { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
body.workspace .ws-pub-toggle.is-collapsed .ws-pub-toggle-ico { transform: rotate(-90deg); }
@media (max-width: 767px) {
  body.workspace .ws-pub-toggle { display: flex; }
  body.workspace .ws-pub-row.ws-pub-collapsed .ws-pub-input,
  body.workspace .ws-pub-row.ws-pub-collapsed .ws-pub-btn,
  body.workspace .ws-pub-row.ws-pub-collapsed .ws-pub-status { display: none; }
}
body.workspace .ws-pub-label {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--dim); white-space: nowrap;
}
body.workspace .ws-pub-input {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 12.5px;
}
body.workspace .ws-pub-input:focus { border-color: var(--gold); outline: none; }
/* Секція E §3: другорядне підтвердження в рядку, не головна дія. Нейтральна площина,
   золотий текст і межа. */
body.workspace .ws-pub-btn {
  flex: none; min-height: 44px; min-width: 44px; padding: 6px 16px;
  background: var(--surface2); color: var(--gold); border: 1px solid var(--gold);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12.5px;
}
body.workspace .ws-pub-btn:hover { background: var(--surface3); }
body.workspace .ws-pub-btn[disabled] { opacity: .6; cursor: default; }
body.workspace .ws-pub-status {
  flex: 1 1 100%; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 1.5; color: var(--mid); overflow-wrap: anywhere;
}
body.workspace .ws-pub-dormant { color: var(--gold); font-weight: 600; }
/* Вік числа на документі — дзеркало .hist-pub-checked із картки бібліотеки (знахідка 3). */
body.workspace .ws-pub-checked { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  body.workspace .ws-nav-item, body.workspace .ws-new-btn, body.workspace .ws-doc-title { transition: none; }
}

/* Мобільний: сайдбар стає нижньою панеллю, максимум 5 цілей */
@media (max-width: 767px) {
  body.workspace .app-box {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "topbar" "main" "side";
  }
  body.workspace .ws-side {
    flex-direction: row; gap: 0; padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border);
  }
  body.workspace .ws-side-brand, body.workspace .ws-side-foot { display: none; }
  /* Живий репорт: "Конкуренти" й "Моніторинг" наїжджали одне на одне на нижній панелі.
     Причина — односкладні кириличні мітки (жодного пробілу для природного переносу),
     ширші за свою колонку flex:1 (~72px при 12px шрифту: "Конкуренти" виміряно 92px),
     а overflow-wrap:normal за замовчуванням не ламає слово посередині — текст просто
     вилазив за межі власного пункту прямо в сусідній, і gap:0 не лишав жодного зазору,
     щоб це було непомітно. gap:2px — підстраховка навіть після переносу; сам перенос
     дає overflow-wrap на самій мітці нижче. */
  body.workspace .ws-nav { flex-direction: row; flex: 1; gap: 2px; }
  body.workspace .ws-nav-item {
    flex: 1; flex-direction: column; gap: 3px; min-width: 44px; padding: 4px 2px;
    justify-content: center; text-align: center; font-size: 11px;
  }
  body.workspace .ws-nav-item span {
    overflow-wrap: break-word; word-break: break-word; max-width: 100%; line-height: 1.15;
  }
  body.workspace .ws-nav-item.active::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 3px; border-bottom-left-radius: var(--r-xs); border-bottom-right-radius: var(--r-xs); }
  body.workspace .ws-new-btn { flex: none; width: 52px; min-width: 44px; margin: 0 4px 0 0; padding: 0; }
  body.workspace .ws-new-btn span { display: none; }
  body.workspace .app-tab-pane.active { padding: 14px 14px 20px; }
}

body.workspace .ws-only-mobile { display: none; }
@media (max-width: 767px) {
  body.workspace .ws-only-mobile { display: flex; }
  body.workspace .ws-nav-item[data-route="team"] { display: none; }   /* Команда переїжджає під «Ще» */
}

/* motion.js спостерігає за data-reveal відносно скролу вікна, а в робочому
   просторі скролиться внутрішня панель .app-tab-pane, а не вікно — без цього
   правила елементи лишилися б назавжди невидимими (opacity:0). */
body.workspace [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Задача 8: командна палітра Ctrl+K (palette.js). Оверлей завжди в DOM (не показуємо
   через display:none за замовчуванням — вузол створюється лише за першого відкриття),
   тож перемикання лише класом .show. */
.pal-ov { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); padding-top: 12vh; }
.pal-ov.show { display: block; }
.pal-box { max-width: 560px; margin: 0 auto; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pal-input { width: 100%; padding: 15px 18px; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: 'Syne', sans-serif; }
.pal-input:focus { outline: none; }
.pal-list { max-height: 46vh; overflow-y: auto; }
/* min-height:44px — ціль натискання ≥44×44px для рядка палітри (мобільна доступність). */
.pal-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; color: var(--mid); font-size: 13px; cursor: pointer; }
.pal-item.sel, .pal-item:hover { background: var(--gold-dim); color: var(--text); }
.pal-kind { flex: none; padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-xs); font-size: 12px; text-transform: uppercase; color: var(--dim); }
.pal-empty { padding: 18px; color: var(--dim); font-size: 13px; text-align: center; }

/* ── ФІНАЛЬНЕ РЕВ'Ю: дві правки розміщення, які видно лише на відрендереній сторінці ── */
@media (max-width: 767px) {
  /* M4. Виміряно на 375x812 ДО правки: .help-fab = 26..74 x 738..786, нижня панель
     .ws-side = 755..812, кнопка «+ Новий текст» = 4..56 x 762..806. Перетин 30x24px, і
     document.elementsFromPoint(50, 780) віддавав [#help-fab, BUTTON.ws-new-btn, ...] —
     тобто FAB справді перехоплював натискання головної кнопки робочого простору.
     68px піднімає його над панеллю (57px) із запасом; env() — для екранів із вирізом.
     Запасне значення в env() ОБОВ'ЯЗКОВЕ: виміряно живцем — без нього вся декларація стає
     недійсною на етапі обчислення, і bottom лишався тими самими 26px, тобто «правка» була б
     зеленою в CSS-тесті й не діяла б у браузері. Рівно та сліпа пляма, яку знайшло рев'ю. */
  body.workspace .help-fab { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* Дрібна: під 768px #settings-ui-lang — ЄДИНИЙ досяжний перемикач мови інтерфейсу
     (шапка лендінга прихована в робочому просторі, підвал сайдбара — у мобільній панелі).
     Спільний клас .settings-select давав 32px заввишки, тобто порушення обмеження 44x44px
     рівно там, де воно найдорожче. Правило вужче за клас навмисно: решта селектів у
     «Налаштуваннях» має поруч інші шляхи й не є єдиною дорогою до функції. */
  #settings-ui-lang { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* ДЕФЕКТ 3 (те саме сімейство, ширші екрани). .help-fab лежить bottom:26px;left:26px
   (app.css:1550) — координати підібрані під лендінг, де там просто порожній кут
   сторінки. У робочому просторі на екранах ≥768px сайдбар — ліва колонка 248px, і
   кнопка «Налаштування» (останній пункт .ws-side-foot) стоїть внизу цієї колонки —
   рівно там, куди лягає FAB. Попередня правка (M4) підняла FAB лише в мобільній
   медіа-межі (max-width:767px), де сайдбар стає нижньою панеллю; на ширших екранах,
   де сайдбар лишається колонкою, лишався перетин.
   Рішення: не чіпати bottom (не заважає лендінгу), а зсунути FAB ПРАВОРУЧ за межі
   колонки сайдбара, у зону основного контенту. Це єдиний елемент workspace у
   нижньому лівому куті, тому конфліктів з іншими fixed-кутами (#toast/.back-top —
   обидва bottom-right) немає. Правило під body.workspace, тому на лендінзі (немає
   класу workspace) FAB лишається на своєму місці 26/26. */
@media (min-width: 768px) {
  body.workspace .help-fab { left: calc(248px + 26px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   B2 задача 2: композер — один запит + п'ять кнобів замість восьми питань.
   Стилі перенесено з виміряного макета public/_b2-mockup.html дослівно;
   перейменовано лише там, де контракт задачі вимагає id замість класу
   (.cmp → #gen-composer, .fmt → #fmt-row, .par → #cmp-par, .fmt-tile → #fmt-tile
   для БАЗОВОГО правила display:none — сам клас .fmt-tile лишається на плитці
   формату, бо контракт задає їй саме id #fmt-tile в розмітці, а не клас).
   ═══════════════════════════════════════════════════════════════════════ */

#gen-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Було двошарова "природна" тінь (тонкий hairline + м'який ambient) — звели до одного
     рівня шкали глибини; втрата хайрлайну непомітна на такій панелі. */
  box-shadow: var(--shadow-3);
}

/* ── смуга форматів (тільки комп'ютер); пігулки будує задача 3, усі 8 завжди видно — задача 11 ── */
#fmt-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--gold-dim) 0%, transparent 100%);
}
.fmt-b {
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--mid);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}
.fmt-b:hover { background: var(--surface2); color: var(--text); }
/* Секція E задача 2: активний вибір формату — статус, не дія. Той самий прийом, що й
   .ws-nav-item.active — нейтральна площина, золотий текст, золота межа замість заливки. */
.fmt-b[aria-pressed="true"] { background: var(--surface2); color: var(--gold); border-color: var(--gold); }
/* B2 задача 11: усі 8 типів контенту — завжди пігулки, жоден не ховається за кнопкою
   «Ще N» (видалена разом із .fmt-more/.fmt-more-lock). Pro-only формати лишаються
   видимими й отримують замок ОКРЕМИМ елементом (.fmt-b-lock), як у меню кноба —
   ніколи не вписаним у текст пігулки (аудит 2026-08-05 #13). Ruling C2 (SDD-ledger
   задачі 11): 12px, не 10px — та сама MUST_READ-межа, що й підписи контролів
   композера (задача 3): напис "потрібен Pro" продає, це не декоративний гліф. */
.fmt-b-locked { opacity: .68; }
.fmt-b-lock { font-size: 12px; margin-left: 2px; }

/* ── запит ── */
.cmp-ask {
  display: block;
  padding: 16px 20px 0;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
/* B2 задача 8, п.1: поле росте разом із текстом (autosizeGenRequest у app-1.js виставляє
   height:scrollHeight на кожен input/програмний запис). Стеля — max-height, порахована від
   line-height*10 (~10 рядків, як просив власник) + вертикальні padding-и поля; далі власна
   прокрутка, а не безмежне розтягування картки. overflow-y:auto тут ЗАВЖДИ, не лише понад
   стелею — це не шумить, бо контент менший за max-height просто не породжує скролбар.
   ПІДЛОГА (min-height, *3 замість *10) — АБСОЛЮТНИЙ запобіжник на 3 рядки, а не справжня
   підлога поля: справжня підлога залежить від заповнювача (мова/формат/ширина екрана) і
   тому рахується динамічно в JS — CMP_TA_FLOOR/recalcGenRequestFloor у autosizeGenRequest()
   (app-1.js, блок композера). Рев'ю Critical, друге коло: перша спроба зробила ЦЕ число
   справжньою підлогою (95px = 3 рядки) — і довгий заповнювач (4 рядки) обрізався рівно
   там, де мусив пояснити, що писати. min-height тут лишається лише як запасний варіант
   на момент ДО першого виміру (перший рендер до initComposer) — стара min-height:80px була
   фактично мертва (обидва стани вимірювались вищими за 80px), тому підняли й цю базову
   планку до 3 рядків, а не прибрали зовсім. */
.cmp-ta {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  padding: 10px 20px 6px;
  min-height: calc(17px * 1.55 * 3 + 16px);
  max-height: calc(17px * 1.55 * 10 + 16px);
  overflow-y: auto;
}
.cmp-ta::placeholder { color: var(--dim); }
.cmp-count { padding: 0 20px 12px; text-align: right; font-size: 12px; color: var(--dim); }

/* B2 задача 7b: ряд «✨ Ідеї / 📋 Шаблони / 🔍 SEO / Керування Brand Voice» — три перші
   кнопки раніше лежали в #legacy-fields під inert (фізично існували, клікнути не можна
   було), четверта була єдиним входом у #bv-modal (аудит #4 #7). Компактний ряд під полем
   запиту, а не окрема панель: секція навмисно спокійна, зайвий блок суперечив би задачі 6. */
.cmp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 12px;
}
.cmp-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface2);
  color: var(--mid);
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.cmp-tool-btn:hover { border-color: var(--gold); color: var(--gold); }
/* Панелі «Ідеї»/«Шаблони» тепер відкриваються прямо в композері, а не в старому
   .fg-обгортці теми — без власного горизонтального відступу вони впирались би в
   заокруглені краї #gen-composer. */
#gen-composer .ideas-panel { margin: 0 20px 12px; }
@media (max-width: 767px) {
  /* Ціль дотику ≥44px (мобільна доступність) — на desktop 34px комфортні для миші й не
     роздувають ряд, який і так росте на 5 мовах підписів. */
  .cmp-tool-btn { min-height: 44px; }
}

/* ── параметри ── */
/* C-3 запровадив nowrap + обрізання «…», щоб втримати ряд в один рядок — але це означало,
   що найдовше ЗНАЧЕННЯ («Medium (600–900 words)» — 183px самого тексту) душилось
   безумовною стелею max-width:72px на .knob-v .knob-t, і людина не бачила, якого обсягу
   текст замовляє, на будь-якій ширині екрана (виміряно: 72px зі 183 на 1440px, 28px зі
   183 на 938px). Секція E §5.1: замість стелі — сітка з auto-fit. Коли сума мінімальних
   ширин плиток (150px) перевищує картку, зайва плитка переносится на наступний рядок
   цілком, а не обрізає власний текст. Кнопка генерації (#gen-btn) більше НЕ в цій сітці —
   вона окремим рядком під нею на всю ширину (index.html), бо конкуренція за ту саму
   горизонталь обрізала вже напис самої кнопки. Нижче 768px діє власна сітка 1fr 1fr
   (@media), це правило там перекрите. */
#cmp-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px 14px 10px 12px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}
.knob {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 5px 7px;
  min-height: 44px;
  /* C-3: типове min-width:auto у flex не дає елементу стиснутись нижче ширини вмісту —
     без цього рядка nowrap вище просто виштовхнув би кноби за межі картки замість того,
     щоб їх стиснути. Той самий прийом уже стоїть у мобільній сітці нижче. */
  min-width: 0;
}
.knob:hover { background: var(--surface3); border-color: var(--border); }
/* E задача 4, друге коло: попередня спроба (перший заміс задачі 4) прибрала лише
   max-width:72px на .knob-v .knob-t, але .knob-l/.knob-v/.knob-t далі мали
   white-space:nowrap + text-overflow:ellipsis — сітка (#cmp-par) звужувала плитку до
   150px, а текст усередині все одно тримався в один рядок і обрізався («Medium
   (600–900 words)»: 125px зі 183 на 1440px, живий вимір після першої правки). Немає
   жодної ширини колонки й жодної мови, на яку можна підібрати фіксовий max-width —
   українська й німецька довші за англійську. Єдине рішення без обрізання за жодних
   обставин — перенесення в межах плитки (той самий прийом, що вже стояв нижче лише в
   мобільному @media, тепер діє на будь-якій ширині): плитка росте вгору, а не душить
   текст. Стрілка ▾ (.car) лишається flex:none — вона не переноситься й не стискається,
   інакше кноб переставав би читатись як контрол, що відкривається. */
/* Секція F задача 3: було 9.5px капслоком з трекінгом — підписи ГОЛОВНИХ контролів
   продукту (Мова / Тон / Обсяг / Бренд-голос) були найдрібнішим текстом на екрані.
   Капслок прибрано разом із дрібним кеглем: він рятував читабельність рівно від того,
   що сам кегль і забирав, а на 12px звичайний регістр читається краще. */
.knob-l { font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--dim); font-weight: 600; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.knob-v { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 5px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; min-width: 0; }
.knob-v .knob-t { min-width: 0; }
.knob-v .car { color: var(--dim); font-size: 9px; flex: none; margin-top: 2px; }
.knob--empty .knob-v { color: var(--mid); font-weight: 600; }
/* E задача 4: #cmp-par більше не nowrap-рядок, а сітка (auto-fit) — розділювач як окремий
   grid-item займав би цілу колонку (мінімум 150px) замість тонкої лінії, тобто ламав би
   саме той рядок, який мав прикрашати. gap:8px у сітки вже дає візуальний відступ між
   плитками, тому декоративний (aria-hidden) роздільник тут просто вимкнений. */
.knob-sep { display: none; }
/* E задача 4: колишня .cmp-go була компактною кнопкою праворуч nowrap-смуги — разом з
   nowrap-рядком прибрана. #gen-btn тепер сама на всю ширину окремим рядком під сіткою
   плиток (базове правило .gen-btn, app.css:1092); kbd-стиль підказки живе в .gen-hint
   нижче й не потребує власного класу кнопки. */

/* Плитка формату — тільки телефон */
#fmt-tile { display: none; }

/* ═══════════════════ ТЕЛЕФОН: розкладка B ═══════════════════
   @media не додає специфічності: цей блок мусить стояти ПІСЛЯ базових правил
   вище, які він перекриває — інакше, як це вже сталося в макеті з правилом
   .res-b{min-height:38px}, що перемагало медіа-блок, поставлений РАНІШЕ нього
   в каскаді, пізніше базове правило переможе медіа-блок за рівної специфічності. */
@media (max-width: 767px) {
  #fmt-row { display: none; }
  .cmp-ask { padding-top: 18px; }
  #cmp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .knob-sep { display: none; }
  /* min-width:0 обов'язковий: типове min-width:auto в grid не дає елементу стиснутись
     нижче ширини вмісту, а .knob-v має white-space:nowrap — плитки виходили за межі
     картки (заміряно живцем: 356px замість 315px, +41px за межі картки). */
  .knob { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; min-height: 54px; min-width: 0; }
  /* Обрізати значення не можна: «Професійний» ставав «Професійн…». Плитка росте,
     бо min-height — це мінімум, а не висота. Стрілка не стискається. */
  /* «Професійний» — одне нерозривне слово: воно саме вміщалось (120 з 127px), але
     разом зі стрілкою вилазило на 6px. overflow-wrap:anywhere — остання лінія оборони:
     довге значення переноситься, а не вилазить за плитку в жодній із п'яти мов. */
  .knob-v { font-size: 13px; justify-content: space-between; width: 100%; white-space: normal; align-items: flex-start; overflow-wrap: anywhere; }
  .knob-v .car { flex: none; margin-top: 3px; }
  /* C-3: на 375px плитка вужча за деякі підписи (рев'ю зміряло labelRight 347.95 при
     cardRight ~328 — тобто підпис вилазив за КАРТКУ). Тут обрізати не можна: підпис
     мусить лишитись читабельним, тому та сама модель, що вже стоїть у .knob-v нижче —
     переносити, а не обрізати й не вилазити. @media стоїть ПІСЛЯ базового правила, тож
     перекриває його за рівної специфічності. */
  .knob-l { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .knob { padding: 8px 10px; }
  #fmt-tile { display: flex; grid-column: 1/-1; background: var(--gold-dim); border-color: var(--gold-dim-strong); }
  #fmt-tile .knob-l { color: var(--mid); }
  #fmt-tile .knob-v { color: var(--gold-l); }
  /* C-3: стиснення ряду (кегль, поля, стеля значення) — рішення суто для ДЕСКТОПНОГО
     одного рядка. На телефоні кнопка на всю ширину, а значення мають переноситись,
     а не обрізатись — тому тут усе це повертаємо назад.
     E задача 4: кнопка (#gen-btn) уже не в сітці .cmp-par і клас .cmp-go з неї
     прибрано — на мобільному вона сама на всю ширину через базове правило .gen-btn
     (app.css:1092), font-size/padding тут лишаємо, щоб не змінити її вигляд на 375px. */
  .gen-btn { width: 100%; justify-content: center; margin-top: 2px; font-size: 14px; padding: 0 22px; }
  .knob-v .knob-t { max-width: none; overflow: visible; white-space: normal; }
}

/* ═══════════════════ B2 задача 3: меню кноба ═══════════════════
   Меню створює app-1.js (composerOpenMenu) і кладе в <body> із position:fixed —
   інакше воно обрізалося б через overflow картки композера. Координати рахує
   cmpPlaceMenu() і затискає у видиму область, тож на 375px меню правої плитки
   не йде за край екрана. */
.knob-menu {
  position: fixed;
  z-index: 160;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-4);
}
.knob-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Ціль дотику: 44px — обмеження проєкту стосується й пунктів меню, не лише кнобів. */
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.knob-mi:hover { background: var(--surface3); }
.knob-mi:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.knob-mi.on { background: var(--gold-dim); color: var(--gold-l); }
.knob-mi-lock { flex: none; font-size: 11px; opacity: .85; }
.knob-mi-t { overflow-wrap: anywhere; }
/* Поповер ключових слів позичає наявну розмітку #tags-wrap — жодних власних стилів
   для тегів, щоб дві копії списку не розійшлися вигляд у вигляд. */
.knob-menu--kw { min-width: 260px; padding: 10px; }

@media (max-width: 767px) {
  /* На телефоні меню розтягуємо майже на всю ширину: 200px min-width поруч із
     затиском у видиму область інакше дає вузьку колонку під правою плиткою. */
  .knob-menu { min-width: min(320px, calc(100vw - 16px)); }
  .knob-mi { min-height: 48px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Секція E задача 3: 130 інлайнових color/background/border-color з розмітки
   робочої зони переїхали сюди. Класи названо за роллю елемента, не за виглядом;
   значення скопійовані буквально з style= — жодне число тут не змінилось.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth panel (вхід/реєстрація + інформація про акаунт) ── */
.auth-benefits-btn {
  display: block; width: 100%; margin-top: 10px; background: rgba(201,168,76,.10);
  border: 1px solid rgba(201,168,76,.35); color: var(--gold); font-size: 12.5px;
  cursor: pointer; padding: 9px 12px; border-radius: var(--r-sm); font-weight: 700;
  font-family: 'Syne', sans-serif;
}
.auth-card { padding: 16px; background: var(--surface2); border-radius: var(--r-sm); margin-bottom: 12px; }
/* .key-btn лишається спільною базою (задача 2); ця добавка — золота площина головної дії
   в самому auth-панелі (Реєстрація / Оновити план). Рев'ю 2026-08-20: раніше брала
   акцентний var(--gold) напряму (інлайн-спадок) — тепер площинний --gold-fill, як і решта
   дозволених golden-fill класів, плюс явний :hover, бо .key-btn:hover інакше перефарбовує
   ТЕКСТ у var(--gold) — той самий колір, що й площина, і напис зникає на власному фоні. */
/* Рев'ю 2026-08-20 (друге): "Реєстрація"/"Оновити план" НЕ окрема поверхня — auth-panel
   лежить у тому самому app-box, що й .gen-btn, і рахується разом з ним поверхнею (правило
   уточнене: поверхня — це ЕКРАН, який перекриває модалка чи банер, а не будь-яка панель
   усередині нього). Приглушено тим самим прийомом, що й .key-btn--quiet. */
.auth-gold-btn { flex: 1; background: var(--surface2); color: var(--gold); font-weight: 700; border-color: var(--gold-dim-strong); }
.key-btn.auth-gold-btn:hover { background: var(--surface3); color: var(--gold); border-color: var(--gold); }
.auth-forgot-link { font-size: 12px; color: var(--dim); text-decoration: none; }
/* onmouseover/onmouseout робили те саме, що :hover — і тримали script-src-attr у CSP відкритим. */
.auth-forgot-link:hover { color: var(--gold); }
/* Підписи полів у картці акаунту (Email: / План: / Генерацій:) — акцентний колір відрізняє
   назву поля від значення поруч. */
.account-field-label { color: var(--gold); }

/* ── Onboarding coach + milestone checklist (generate-таб) ── */
.onboard-coach-box {
  display: none; margin-bottom: 16px; padding: 14px 16px 15px;
  background: linear-gradient(135deg, var(--gold-dim), var(--surface2));
  border: 1px solid rgba(201,168,76,.35); border-radius: var(--r); position: relative;
}
/* Секція F задача 12: виміряно живцем на 375px — .onboard-close (44px, absolute top:4px
   right:6px) перетинав цей рядок. padding-right звільняє під нього місце, щоб текст
   переносився ДО перетину, а не під кнопку. */
.onboard-title-row { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--gold-l); margin-bottom: 3px; padding-right: 36px; }
.onboard-sub-row { font-size: 11.5px; color: var(--dim); margin-bottom: 11px; }
/* Рев'ю 2026-08-20 (друге): onboarding-картка лежить у лівій панелі /app/new РАЗОМ із
   .gen-btn — не окрема поверхня (модалка чи банер), а блок на тому самому екрані. Новий
   Free-клієнт бачив дві однаково гучні золоті площини одночасно. Приглушено. */
.onboard-example-btn {
  padding: 8px 14px; background: var(--surface2); color: var(--gold); border: 1px solid var(--gold-dim-strong);
  border-radius: var(--r-sm); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer;
}
.onboard-example-btn:hover { background: var(--surface3); border-color: var(--gold); }
.milestone-box {
  display: none; margin-bottom: 16px; padding: 14px 16px 15px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r); position: relative;
}
.milestone-close-btn { position: absolute; top: 7px; right: 10px; background: transparent; border: none; color: var(--dim); font-size: 17px; cursor: pointer; line-height: 1; }
.milestone-title-row { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--gold-l); margin-bottom: 10px; }

/* ── Композер: підказка Ctrl+Enter, AI-Act нотатка, довжина, "Вставити текст" ── */
.gen-hint { text-align: center; margin-top: 8px; font-size: 11px; color: var(--dim); }
.kbd-inline { padding: 2px 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-xs); font-family: monospace; }
.ai-notice { text-align: center; margin-top: 6px; font-size: 12px; color: var(--dim); opacity: .75; }
.len-override-hint { display: none; margin-top: 5px; font-size: 12px; color: var(--gold); background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2); border-radius: var(--r-xs); padding: 5px 9px; }
/* Секція E задача 3, зразок із брифу: 6 кольорових властивостей + onmouseover/onmouseout,
   що робили те саме, що :hover. */
.paste-own-btn {
  padding: 3px 10px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-xs); color: var(--dim); font-size: 12px; cursor: pointer;
  transition: all .2s; font-family: 'Syne', sans-serif; font-weight: 600;
}
.paste-own-btn:hover { border-color: var(--gold); color: var(--gold); }
/* Позначає кнопку, що відкриває Unsplash-модалку, серед звичайних форматувальних кнопок
   панелі — акцент, не площина, тому конфлікту з .wysiwyg-btn:hover (теж gold/gold) немає. */
.wysiwyg-btn-accent { color: var(--gold); border-color: var(--gold); }
.wysiwyg-btn-danger { color: var(--red); }
/* .wysiwyg-btn:hover перефарбовує МЕЖУ й ТЕКСТ у gold — без явного правила ця кнопка на
   ховері втрачала б червоний і виглядала б як звичайна, не «небезпечна» дія. */
.wysiwyg-btn.wysiwyg-btn-danger:hover { color: var(--red); }
.ai-freshness-note { display: none; font-size: 12px; color: var(--dim); margin: 4px 0 8px; padding: 5px 8px; background: var(--surface2); border-radius: var(--r-xs); border-left: 2px solid var(--gold); }
/* WordPress — один з п'яти рівноправних форматів експорту (.TXT/.MD/.DOCX/.HTML/WordPress),
   не головна дія своєї поверхні: приглушена площина, як .ws-new-btn/.ws-pub-btn у задачі 2.
   Фон і так успадковує var(--surface2) від базового .export-btn — нічого дублювати. Базовий
   .export-btn:hover уже дає border-color/color: var(--gold) — той самий вигляд, що й тут,
   тож окремого :hover не потрібно (і немає конфлікту специфічності). */
.export-btn-wp { color: var(--gold); border-color: var(--gold-dim-strong); }

/* ── SEO-аналізатор ── */
.seo-subheading { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.seo-checklist-title { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.seo-legend-dot-spam { background: #ef4444; }
.seo-legend-dot-short { background: var(--gold); }
.seo-legend-dot-good { background: #22c55e; }

/* ── Конкурент-таб ── */
.comp-upsell-link { color: var(--gold); }
.comp-lock-desc { color: var(--mid); font-size: 12px; margin: 6px 0 14px; }

/* ── Налаштування ── */
.key-btn-danger-sm { font-size: 11px; padding: 6px 12px; color: var(--red); border-color: var(--red); }
/* .key-btn:hover перефарбовує текст/межу в gold — без явного правила «Вийти» на ховері
   ставав би золотим замість того, щоб лишатись червоним. Складений селектор (обидва класи
   разом на цьому вузлі) дає специфічність вищу за .key-btn:hover незалежно від порядку
   правил у файлі. */
.key-btn.key-btn-danger-sm:hover { color: var(--red); border-color: var(--red); }
.settings-cancel-sub-btn { font-size: 12px; padding: 6px 12px; color: var(--gold); border-color: var(--gold); }
.settings-row-label-danger { color: var(--red); }
.key-btn-delete { font-size: 12px; padding: 6px 12px; color: #fff; background: var(--red); border-color: var(--red); }
/* Те саме, що й .key-btn-danger-sm вище: без цього ховер над «Видалити акаунт» тихо
   перефарбовував текст/межу в gold поверх червоного фону. */
.key-btn.key-btn-delete:hover { color: #fff; background: var(--red); border-color: var(--red); }
.ai-instr-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); padding: 12px; font-family: 'DM Sans', sans-serif; font-size: 13px;
  resize: vertical; box-sizing: border-box;
}
.char-count-hint { font-size: 11px; color: var(--dim); }

/* ── Футер ── */
.footer-help-link { color: var(--gold); text-decoration: none; }
/* Задача 6: виміряно 21px на 375px усередині застосунку (той самий підвал показаний і на
   лендінгу, і на /app/*) — під ціль дотику 44px. inline-flex+min-height/min-width розширює
   зону натискання без зміни розміру самого тексту; батьківський <p> уже має align-items:center. */
.ft-link { color: var(--mid); text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); }
.ft-sep { color: var(--dim); }

/* ── Дрібні модалки (лишок збереження/лімітів) ── */
.limit-modal-msg { font-size: 13px; color: var(--mid); margin-bottom: 18px; }

/* ── Спільний скелет старих модалок (upgrade/bv/seo/media/wp/feedback/legal) ──
   Оверлей і заголовок повторювались буквально однаково в кількох модалках —
   один спільний клас замість дубльованих інлайн-рядків. */
.legacy-modal-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 999; align-items: center; justify-content: center; }
.legacy-modal-overlay-pad { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 999; align-items: center; justify-content: center; padding: 16px; }
.modal-title-serif { font-family: 'Old Standard TT', serif; font-size: 28px; color: var(--gold); margin: 0; }
.modal-close-x { background: transparent; border: none; color: var(--mid); font-size: 24px; cursor: pointer; }
.modal-close-x-margin { background: transparent; border: none; color: var(--mid); font-size: 24px; cursor: pointer; line-height: 1; margin-left: 12px; }

/* ── Upgrade Modal ── */
.upgrade-modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; max-width: 500px; width: 90%; }
.upg-headline { font-family: 'Old Standard TT', serif; font-size: 26px; color: var(--gold); margin: 0; }
.upg-desc { color: var(--mid); margin-bottom: 20px; font-size: 14px; }
.upg-plan-box { background: var(--surface2); padding: 20px; border-radius: var(--r); margin-bottom: 20px; }
.upg-plan-title { font-size: 17px; margin-bottom: 14px; color: var(--gold); }
/* Головна дія upgrade-модалки («Отримати Pro») — --gold-fill, як .btn-primary в інших модалках. */
.upg-plan-btn { flex: 1; padding: 14px; background: var(--gold-fill); color: var(--on-gold); border: none; border-radius: var(--r); font-weight: 700; cursor: pointer; font-size: 14px; }
.upg-later-btn { flex: 1; padding: 14px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); font-weight: 600; cursor: pointer; font-size: 14px; }

/* ── Brand Voice Modal ── */
.bv-modal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.bv-subheading { font-size: 16px; margin-bottom: 12px; color: var(--text); }
/* Єдина кнопка внизу Brand Voice модалки — головна дія цієї поверхні. */
.bv-submit-btn { width: 100%; padding: 14px; background: var(--gold-fill); color: var(--on-gold); border: none; border-radius: var(--r); font-weight: 700; cursor: pointer; }

/* ── SEO Analyzer Modal ── */
.seo-modal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }

/* ── WordPress Publisher Modal ── */
.wp-modal-card {
  background: linear-gradient(160deg, rgba(33,150,243,.06), var(--surface2) 55%);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; max-width: 500px;
  width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-5);
}
.wp-modal-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 19px; color: var(--text); margin: 0; }
.wp-modal-sub { font-size: 12px; color: var(--mid); margin-top: 2px; }
.wp-modal-close { background: transparent; border: none; color: var(--mid); font-size: 26px; cursor: pointer; line-height: 1; }
.wp-secnote-box { display: flex; gap: 8px; align-items: flex-start; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); border-radius: var(--r); padding: 10px 12px; margin: 16px 0; }
.wp-secnote-text { font-size: 12px; color: var(--mid); line-height: 1.5; }
/* Виділяє конкретне слово/значення всередині підказки (тут — "https://" і
   "Application Password"), не просто «жирний текст узагалі». */
.hint-emphasis { color: var(--text); }
.wp-field-label { color: var(--dim); font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }

/* ── Media Modal ── */
.media-modal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; max-width: 600px; width: 90%; max-height: 90vh; display: flex; flex-direction: column; }
/* Пошук — єдина дія, що робить щось у Media-модалці, поки результатів ще немає — головна
   дія цієї поверхні. */
.media-search-btn { padding: 10px 22px; background: var(--gold-fill); color: var(--on-gold); border: none; border-radius: var(--r-sm); font-weight: bold; cursor: pointer; white-space: nowrap; }
.media-hint { font-size: 12px; color: var(--dim); margin-bottom: 16px; }
.media-results-box { flex: 1; overflow-y: auto; min-height: 200px; background: var(--bg); border-radius: var(--r); padding: 16px; border: 1px solid var(--border); }
.media-results-empty { color: var(--mid); text-align: center; padding: 20px; }

/* ── Feedback Modal ── */
.feedback-modal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }
.feedback-modal-title { font-family: 'Old Standard TT', serif; font-size: 26px; color: var(--gold); margin: 0; }
.feedback-modal-sub { color: var(--mid); font-size: 13px; margin: 0 0 18px; }
.feedback-context-note { font-size: 11px; color: var(--dim); margin: -4px 0 16px; line-height: 1.5; }
/* Головна дія Feedback-модалки («Надіслати»). .key-btn:hover інакше перефарбовує текст у
   var(--gold) — той самий колір, що й площина, і напис зникає; явний :hover тримає
   --on-gold і на ховері теж. */
.fb-submit-btn { width: 100%; background: var(--gold-fill); color: var(--on-gold); font-weight: 700; border-color: var(--gold-fill); padding: 13px; }
.key-btn.fb-submit-btn:hover { color: var(--on-gold); border-color: var(--gold-fill); }
.fb-success-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; color: var(--gold-l); margin-bottom: 6px; }
.fb-success-sub { color: var(--mid); font-size: 13px; margin: 0 0 18px; }

/* ── AI Copilot (плаваюча кнопка + меню) ──
   Рев'ю 2026-08-20: раніше золота площина — але це плаваюча допоміжна кнопка над
   результатом, не головна дія екрана (головна дія генерації — вже золотий .gen-btn).
   Дві гучні золоті площини одночасно на екрані порушують те саме правило, за яким задача 2
   приглушила .ws-new-btn/.ws-pub-btn: приглушено до нейтральної площини з золотим текстом. */
.ai-copilot-btn {
  display: none; position: absolute; z-index: 900; background: var(--surface2); color: var(--gold);
  border: 1px solid var(--gold-dim-strong);
  border-radius: var(--r-xl); padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-2); align-items: center; gap: 6px;
}
.ai-copilot-btn:hover { background: var(--surface3); border-color: var(--gold); }
.copilot-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px; width: 180px; box-shadow: var(--shadow-3); flex-direction: column; gap: 4px;
}
.copilot-menu-item { text-align: left; background: transparent; border: none; color: var(--text); padding: 8px; border-radius: var(--r-xs); cursor: pointer; font-size: 13px; width: 100%; }
.copilot-menu-item-accent { text-align: left; background: transparent; border: none; color: var(--gold); padding: 8px; border-radius: var(--r-xs); cursor: pointer; font-size: 13px; width: 100%; }

/* ── Consent Modal (реєстрація) ── */
.consent-checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); cursor: pointer; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
/* Головна дія consent-модалки при реєстрації. .key-btn:hover інакше перефарбовує текст у
   var(--gold), той самий колір, що й площина, — напис зникав би на ховері. */
.consent-agree-btn { flex: 1; background: var(--gold-fill); color: var(--on-gold); font-weight: 700; border-color: var(--gold-fill); opacity: .5; }
.key-btn.consent-agree-btn:hover { color: var(--on-gold); border-color: var(--gold-fill); }

/* ── Legal Modal ── */
.legal-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay); z-index: 9999; align-items: center; justify-content: center; overflow: auto; }
.legal-modal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; max-width: 700px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-4); }
.legal-modal-close { background: transparent; border: none; color: var(--mid); font-size: 24px; cursor: pointer; line-height: 1; }
.legal-modal-body { flex: 1; overflow-y: auto; padding-right: 8px; color: var(--text); font-size: 14px; line-height: 1.6; }

/* "+ VAT" beside every price. Creem products are tax_mode=exclusive, so the number on the card is
   not what a European consumer actually pays. The EU Price Indication Directive (98/6/EC) expects
   a consumer to see the real total, and fine print under the grid is the construction that draws
   an Abmahnung in DE — so the marker sits next to the number, and must never wrap away from it. */
.price-vat {
  /* 13px matches .per (the "/mo" suffix) on purpose: the VAT note is the same kind of qualifier
     and belongs on the same visual line as it. NOT an em value — .plan-price computes to 16px
     while the amount inside it is 48px, so the first version's 0.42em rendered at 6.72px:
     technically present, practically unreadable, which for a legal disclosure is the worst of
     both worlds. Measured in the browser, not assumed. */
  font-size: 13px;
  font-weight: 500;
  opacity: 0.78;
  margin-left: 0.35em;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: baseline;
}