/* ─── Reset ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── Tokens ─────────────────────────────────────────────────── */
    :root {
      --bg:          #FFFFFF;
      --surface:     #FFFFFF;
      --surface-alt: #EDEAE3;
      --ink:         #1A1A18;
      --ink-muted:   #6B6B64;
      --accent:      #C4441A;
      --border:      #DEDAD2;
      --border-hover:#B0ADA6;
      --radius:      6px;
      --radius-pill: 20px;

      --hl-red-bg:    rgba(196,68,26,0.15);
      --hl-red-line:  #C4441A;
      --hl-yel-bg:    rgba(255,190,0,0.35);
      --hl-yel-line:  #8A6D00;
      --hl-grn-bg:    rgba(26,122,74,0.12);
      --hl-grn-line:  #1A7A4A;
      --hl-pur-bg:    rgba(107,47,160,0.12);
      --hl-pur-line:  #6B2FA0;
    }

    /* ─── Base ───────────────────────────────────────────────────── */
    html, body {
      height: 100%;
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4 { text-wrap: balance; }
    p { text-wrap: pretty; }
    img { outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }

    /* ─── Utility ────────────────────────────────────────────────── */
    .label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 20px;
      border: none;
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.15s, background-color 0.15s, transform 0.1s;
    }
    .btn:active:not(:disabled) { transform: scale(0.96); }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-primary   { background: var(--accent); color: #fff; }
    .btn-primary:hover:not(:disabled) { opacity: 0.88; }
    .btn-secondary { background: var(--surface-alt); color: var(--ink); }
    .btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); }
    .btn-ghost     { background: transparent; color: var(--ink-muted); }
    .btn-ghost:hover:not(:disabled) { color: var(--ink); }

    /* ─── SCREEN: Mobile Gate ────────────────────────────────────── */
    #screen-mobile {
      display: none;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      background: var(--bg);
    }
    .mobile-card {
      max-width: 380px;
      width: 100%;
      text-align: center;
    }
    .mobile-logo {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 40px;
      letter-spacing: -0.005em;
      text-transform: lowercase;
      border-bottom: 2px solid var(--ink);
      padding-bottom: 1px;
      display: inline-block;
    }
    .mobile-headline {
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .mobile-subhead {
      font-size: 14px;
      color: var(--ink-muted);
      line-height: 1.5;
      margin-bottom: 32px;
    }
    .mobile-features-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
      text-align: left;
    }
    .mobile-feature-box {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 12px;
    }
    .mobile-feature-box.yellow { background: var(--hl-yel-bg); }
    .mobile-feature-box.yellow .mobile-feature-icon { color: var(--hl-yel-line); }
    .mobile-feature-box.yellow .mobile-feature-text { color: var(--hl-yel-line); }
    .mobile-feature-box.green  { background: var(--hl-grn-bg); }
    .mobile-feature-box.green .mobile-feature-icon  { color: var(--hl-grn-line); }
    .mobile-feature-box.green .mobile-feature-text  { color: var(--hl-grn-line); }
    .mobile-feature-box.blue   { background: rgba(37,99,235,0.10); }
    .mobile-feature-box.blue .mobile-feature-icon   { color: #2563EB; }
    .mobile-feature-box.blue .mobile-feature-text   { color: #2563EB; }
    .mobile-feature-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .mobile-feature-text {
      font-size: 14px;
      line-height: 1.5;
    }
    .mobile-capture {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mobile-capture input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      font-family: 'Google Sans', sans-serif;
      font-size: 14px;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .mobile-capture input:focus { border-color: var(--ink); }
    .mobile-capture input::placeholder { color: var(--border-hover); }
    .mobile-capture .btn {
      border-radius: var(--radius-pill);
      padding: 14px 20px;
      font-size: 14px;
    }
    #mobile-confirm {
      font-size: 13px;
      color: var(--ink-muted);
      margin-top: 4px;
      min-height: 20px;
    }

    /* ─── SCREEN: Auth ─────────────────────────────────────────── */
    #screen-auth {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 10000;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow-y: auto;
    }
    .auth-card {
      width: 380px;
      max-width: 90vw;
      padding: 40px 32px;
    }
    .auth-logo {
      text-align: center;
      margin-bottom: 32px;
      line-height: 0;
    }
    .auth-logo img {
      width: 44px;
      height: 44px;
      display: inline-block;
    }
    .auth-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      text-align: center;
      margin-bottom: 24px;
    }
    .auth-google-btn {
      width: 100%;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: background 0.15s, border-color 0.15s;
    }
    .auth-google-btn:hover { background: var(--surface-alt); border-color: var(--border-hover); }
    .auth-google-btn svg { width: 18px; height: 18px; }
    .auth-method-wrap {
      position: relative;
    }
    .auth-last-used {
      position: absolute;
      top: -10px;
      right: 10px;
      font-size: 10px;
      font-weight: 400;
      font-family: 'Google Sans', sans-serif;
      color: #fff;
      background: #1c1c1c;
      border-radius: 999px;
      padding: 2px 8px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 1;
    }
    @keyframes auth-border-glow {
      0%, 100% {
        box-shadow: 0 0 0 1.5px rgba(26,26,24,0.12), 0 1px 6px rgba(26,26,24,0.04);
        border-color: rgba(26,26,24,0.25);
      }
      50% {
        box-shadow: 0 0 0 2px rgba(26,26,24,0.4), 0 2px 10px rgba(26,26,24,0.1);
        border-color: rgba(26,26,24,0.65);
      }
    }
    .auth-google-btn.is-last-used {
      border-color: rgba(26,26,24,0.25);
      animation: auth-border-glow 2.8s ease-in-out infinite;
    }
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 24px 0;
      color: var(--ink-muted);
      font-size: 12px;
    }
    .auth-divider::before, .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .auth-tab {
      flex: 1;
      padding: 10px 0;
      font-size: 13px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color 0.15s;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    .auth-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
    .auth-field {
      margin-bottom: 14px;
    }
    .auth-field label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-muted);
      margin-bottom: 5px;
    }
    .auth-field input {
      width: 100%;
      padding: 9px 12px;
      font-size: 14px;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }
    .auth-field input:focus { border-color: var(--ink); }
    .auth-submit {
      width: 100%;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border: none;
      border-radius: var(--radius);
      background: #1c1c1c;
      color: #fff;
      cursor: pointer;
      margin-top: 6px;
      transition: background 0.15s;
    }
    .auth-submit:hover { background: #333; }
    .auth-submit:disabled { opacity: 0.4; cursor: not-allowed; }
    .auth-error {
      color: var(--accent);
      font-size: 13px;
      text-align: center;
      margin-bottom: 12px;
      min-height: 18px;
    }
    .auth-link {
      font-size: 12px;
      color: var(--ink-muted);
      text-align: center;
      margin-top: 16px;
    }
    .auth-link a {
      color: var(--ink);
      cursor: pointer;
      text-decoration: underline;
    }

    /* ─── SCREEN: Onboarding ────────────────────────────────────── */
    #screen-onboarding {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 100;
      flex-direction: column;
      overflow: hidden;
    }

    /* Nav bar */
    .ob-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      height: 56px;
      flex-shrink: 0;
    }
    .ob-logo {
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.005em;
      text-transform: lowercase;
      border-bottom: 2px solid var(--ink);
      padding-bottom: 1px;
    }
    .ob-back {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-muted);
      background: none;
      border: none;
      font-family: 'Google Sans', sans-serif;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: var(--radius);
      transition: color 0.15s, background 0.15s;
    }
    .ob-back:hover { color: var(--ink); background: var(--surface-alt); }
    .ob-back.hidden { visibility: hidden; pointer-events: none; }
    .ob-back svg { width: 16px; height: 16px; }

    /* Scrollable body */
    .ob-body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 24px 80px;
    }

    /* Card wrapper — one visible at a time */
    .ob-card {
      width: 100%;
      max-width: 560px;
      animation: cardIn 0.22s ease;
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .ob-step-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 14px;
    }
    .ob-question {
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.25;
      margin-bottom: 32px;
    }

    /* Step 1: name/business inputs */
    .ob-inputs { display: flex; flex-direction: column; gap: 16px; }
    .ob-field { display: flex; flex-direction: column; gap: 6px; }
    .ob-field label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .ob-field input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 16px;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }
    .ob-field input:focus { border-color: var(--ink); }
    .ob-field input::placeholder { color: var(--border-hover); }

    /* Step 1 footer with Next button */
    .ob-footer {
      margin-top: 32px;
      display: flex;
      justify-content: flex-end;
    }
    .ob-next {
      padding: 12px 28px;
      font-size: 15px;
    }
    /* Onboarding buttons: black, not orange */
    #screen-onboarding .btn-primary {
      background: #1c1c1c;
    }
    #screen-onboarding .btn-primary:hover:not(:disabled) {
      background: #333;
      opacity: 1;
    }

    /* Step 2: industry grid */
    .ob-industry-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .ob-industry-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 18px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      text-align: left;
      font-family: 'Google Sans', sans-serif;
      transition: border-color 0.15s, background 0.15s;
    }
    .ob-industry-item:hover {
      border-color: #ddd;
      background: #ebebeb;
    }
    .ob-industry-item:hover .ob-industry-icon  { color: var(--ink-muted); }
    .ob-industry-item:hover .ob-industry-label { color: var(--ink); }
    .ob-industry-item.selected {
      border-color: #1c1c1c;
      background: #1c1c1c;
    }
    .ob-industry-item.selected .ob-industry-icon  { color: rgba(255,255,255,0.8); }
    .ob-industry-item.selected .ob-industry-label { color: #fff; }
    .ob-industry-icon {
      width: 22px;
      height: 22px;
      color: var(--ink-muted);
    }
    .ob-industry-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.3;
    }

    /* Question counter */
    .ob-counter {
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    /* Flashcard answers */
    .ob-answers {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ob-answer-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 16px 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      text-align: left;
      font-family: 'Google Sans', sans-serif;
      transition: border-color 0.15s, background 0.15s;
    }
    .ob-answer-item:hover {
      background: #ebebeb;
      border-color: #ddd;
    }
    .ob-answer-item:hover .ob-answer-brand { color: var(--ink); }
    .ob-answer-item:hover .ob-answer-desc  { color: var(--ink-muted); }
    .ob-answer-item.selected {
      background: var(--ink);
      border-color: var(--ink);
    }
    .ob-answer-item.selected .ob-answer-brand { color: var(--bg); }
    .ob-answer-item.selected .ob-answer-desc  { color: rgba(247,245,240,0.65); }
    .ob-answer-brand {
      font-size: 15px;
      font-weight: 500;
      color: var(--ink);
    }
    .ob-answer-desc {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.4;
    }

    /* Free-text answer variant */
    .ob-answer-text-wrap { margin-top: 8px; }
    .ob-answer-text-wrap input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }
    .ob-answer-text-wrap input:focus { border-color: var(--ink); }
    .ob-answer-text-wrap input::placeholder { color: var(--border-hover); }

    /* Choose Your Path — two-card grid */
    .ob-path-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 8px;
    }
    .ob-path-card-wrap {
      position: relative;
      display: flex;
    }
    .ob-path-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 24px 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      text-align: left;
      font-family: 'Google Sans', sans-serif;
      transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
      width: 100%;
      height: 100%;
    }
    .ob-path-card:hover {
      border-color: var(--border-hover);
      background: #f8f7f4;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    .ob-path-card.ob-path-recommended {
      border: 2px solid var(--ink);
    }
    .ob-path-card.ob-path-recommended:hover {
      border-color: var(--ink);
      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }
    .ob-recommended-badge {
      position: absolute;
      top: -1px;
      right: -1px;
      background: var(--ink);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 0 var(--radius) 0 var(--radius);
      pointer-events: none;
      line-height: 1;
      font-family: 'Google Sans', sans-serif;
    }
    .ob-path-card svg {
      width: 28px;
      height: 28px;
      color: var(--ink-muted);
      flex-shrink: 0;
    }
    .ob-path-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
    }
    .ob-path-desc {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.5;
    }
    .ob-path-time {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      margin-top: auto;
    }
    .ob-path-time svg { width: 12px; height: 12px; flex-shrink: 0; color: inherit; }
    .ob-path-time.slow { color: #C0392B; }
    .ob-path-time.fast { color: #27AE60; }

    /* Paste voice box */
    .ob-paste-box {
      width: 100%;
      min-height: 180px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      resize: vertical;
      transition: border-color 0.15s;
    }
    .ob-paste-box:focus { border-color: var(--ink); }
    .ob-paste-box::placeholder { color: var(--border-hover); }

    /* Copyable prompt section */
    .ob-prompt-copy {
      margin-top: 20px;
      padding: 16px;
      background: var(--surface-alt);
      border-radius: var(--radius);
      position: relative;
    }
    .ob-prompt-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 8px;
    }
    .ob-prompt-text {
      font-size: 13px;
      color: var(--ink);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .ob-copy-prompt {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink-muted);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .ob-copy-prompt:hover { color: var(--ink); border-color: var(--border-hover); }

    /* Editable keyword textarea */
    .ob-keyword-editor {
      width: 100%;
      min-height: 280px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 14px;
      line-height: 1.8;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      resize: vertical;
      transition: border-color 0.15s;
    }
    .ob-keyword-editor:focus { border-color: var(--ink); }

    @media (max-width: 520px) {
      .ob-path-options {
        grid-template-columns: 1fr;
      }
    }

    /* ─── Sidebar ───────────────────────────────────────────────── */
    /* ──────────────────────────────────────────────────────────────
       SIDEBAR — two modes switched by viewport:
         <860px: slide-in drawer with dark overlay (legacy behaviour)
         ≥860px: persistent left rail, body gets left padding
       See Sidebar._DESKTOP_BREAKPOINT in js/auth.js.
    ────────────────────────────────────────────────────────────── */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.18);
      z-index: 900;
      transition: opacity 0.25s;
    }
    #sidebar-overlay.open { display: block; }

    #sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 240px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      z-index: 950;
      transform: translateX(-100%);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    #sidebar.open { transform: translateX(0); }

    /* Desktop — persistent rail. The sidebar lives inline with content
       instead of as a drawer; body gets a left padding to make room. */
    @media (min-width: 860px) {
      #sidebar {
        /* Always visible in the layout, translateX(0) overrides the
           mobile default of translateX(-100%). Collapse is triggered
           via body.sidebar-collapsed → transform: translateX(-100%). */
        transform: translateX(0);
      }
      #sidebar-overlay,
      #sidebar-overlay.open {
        /* No dark overlay on desktop — the rail is always inline. */
        display: none !important;
      }
      body {
        /* Make room for the 240px rail. Every screen's content
           naturally shifts right because #sidebar is position:fixed
           and we pad the body to the rail's width. */
        padding-left: 240px;
        transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* Collapsed state: hide the rail, zero out the body padding so
         content fills the full viewport. The burger button in the
         top nav stays visible (it's hidden by default on desktop via
         the existing .burger-btn rules; we override that when
         collapsed). */
      body.sidebar-collapsed {
        padding-left: 0;
      }
      body.sidebar-collapsed #sidebar {
        transform: translateX(-100%);
      }
      body.sidebar-collapsed .burger-btn {
        display: flex !important;
      }
      /* Default state — rail is up, burger button is hidden (it's
         only needed to re-open the collapsed rail). */
      body:not(.sidebar-collapsed) .burger-btn {
        display: none;
      }
      /* Secondary screen nav is empty on desktop (no title, no avatar,
         hamburger hidden above). Remove the visual separator so there
         isn't a ghost line across the content area. */
      body:not(.sidebar-collapsed) .an-nav {
        border-bottom: none;
        height: 0;
        padding: 0;
        overflow: hidden;
      }
      /* The voice-profile full-screen overlay is position:fixed with
         inset:0. On desktop with the persistent rail we want the
         overlay to start at x=240 so the sidebar stays visible on
         its left — matching how every other screen is laid out.
         When the rail is collapsed, this override is dropped and
         the overlay fills the full viewport like before. */
      body:not(.sidebar-collapsed) #screen-voice-profile {
        left: 240px;
      }
    }

    .sidebar-header {
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-muted);
      letter-spacing: 0.01em;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      height: 48px;
      box-sizing: border-box;
    }
    .sidebar-collapse-btn {
      background: none;
      border: none;
      width: 26px;
      height: 26px;
      border-radius: 6px;
      padding: 0;
      cursor: pointer;
      color: var(--ink-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .sidebar-collapse-btn:hover { background: var(--surface-alt); color: var(--ink); }
    .sidebar-collapse-btn svg { width: 14px; height: 14px; }

    .sidebar-nav {
      flex: 1;
      padding: 12px 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      border: none;
      background: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 14px;
      color: var(--ink-muted);
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: background 0.15s, color 0.15s;
      border-radius: 0;
      text-decoration: none;
    }
    .sidebar-item:hover { background: var(--surface-alt); color: var(--ink); }
    .sidebar-item.active { color: var(--ink); font-weight: 500; }
    .sidebar-item.disabled {
      color: var(--border-hover);
      cursor: default;
      pointer-events: none;
    }
    .sidebar-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
    }
    .sidebar-item .sidebar-badge {
      font-size: 10px;
      font-weight: 500;
      color: var(--border-hover);
      background: var(--surface-alt);
      padding: 1px 7px;
      border-radius: var(--radius-pill);
      margin-left: auto;
    }

    /* ─── Sidebar Brand Selector (Agency) ──────────────────────────── */
    .sidebar-brands { padding: 0 12px 8px; display: none; }
    .sidebar-brands.visible { display: block; }
    .sb-brand-active { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; }
    .sb-brand-active:hover { background: var(--surface-alt); }
    .sb-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
    .sb-brand-name { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sb-brand-chevron { color: var(--ink-muted); font-size: 10px; }
    .sb-brand-dropdown { margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
    .sb-brand-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: background 0.15s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; color: var(--ink); }
    .sb-brand-option:hover { background: var(--surface-alt); }
    .sb-brand-option.active { font-weight: 600; }
    .sb-brand-add { color: var(--ink-muted); border-top: 1px solid var(--border); }

    /* ─── Sidebar Billing (minimal) ──────────────────────────────── */
    .sidebar-billing {
      border-top: 1px solid var(--border);
      padding: 14px 20px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .sidebar-billing:hover { background: var(--surface-alt); }
    .sb-plan-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .sb-plan-badge {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      background: #1c1c1c;
      color: #fff;
    }
    .sb-plan-badge.solo { background: #1c1c1c; }
    .sb-plan-badge.team { background: #8A6D00; }
    .sb-plan-badge.agency { background: #6B2FA0; }
    .sb-plan-badge.expired { background: var(--accent); }
    .sb-plan-badge.none { background: var(--ink-muted); }
    .sb-posts-left {
      font-size: 11px;
      color: var(--ink-muted);
    }
    .sb-trial-status {
      font-size: 11px;
      font-weight: 500;
      color: #E65100;
      margin-bottom: 2px;
    }
    .sb-manage-btn {
      margin-top: 10px;
      width: 100%;
      padding: 6px 0;
      font-size: 11px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink-muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .sb-manage-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

    /* ─── Share Popup ────────────────────────────────────────────── */
    .share-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000;
      display: none; align-items: center; justify-content: center;
    }
    .share-overlay.open { display: flex; }
    .share-modal {
      background: #fff; border-radius: 12px; padding: 28px; width: 440px; max-width: 92vw;
      max-height: 80vh; overflow-y: auto;
    }
    .share-modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
    .share-modal .share-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 20px; }
    .share-section { margin-bottom: 20px; }
    .share-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 8px; }
    .share-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; background: var(--surface-alt); border-radius: 8px; margin-bottom: 10px;
    }
    .share-toggle-label { font-size: 14px; font-weight: 500; }
    .share-toggle-desc { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
    .share-toggle {
      position: relative; width: 44px; height: 24px; background: var(--border);
      border-radius: 12px; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
    }
    .share-toggle.on { background: #22c55e; }
    .share-toggle::after {
      content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
      background: #fff; border-radius: 50%; transition: transform 0.2s;
    }
    .share-toggle.on::after { transform: translateX(20px); }

    /* ── 3-state segmented picker (private / viewer / commenter) ─
       Replaces the old binary on/off toggle. Each segment is a
       button with its own hint copy below; the active segment has
       a dark pill highlight. Whole picker is a single row on
       desktop and stacks on narrow screens. */
    .share-mode-picker {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 6px; padding: 6px; background: var(--surface-alt);
      border-radius: 8px; margin-bottom: 10px;
    }
    .share-mode-btn {
      border: none; background: transparent; cursor: pointer;
      padding: 10px 10px 11px; border-radius: 6px;
      font-family: inherit; color: var(--ink-muted);
      transition: background 0.15s, color 0.15s;
      text-align: center;
    }
    .share-mode-btn:hover:not(.on) { background: rgba(26,26,24,0.05); color: var(--ink); }
    .share-mode-btn.on {
      background: #1A1A18; color: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .share-mode-btn-label {
      display: block; font-size: 13px; font-weight: 600;
      line-height: 1.25;
    }
    .share-mode-btn-sub {
      display: block; font-size: 10px; font-weight: 500;
      line-height: 1.3; margin-top: 2px;
      opacity: 0.78;
    }
    .share-mode-hint {
      font-size: 11px; color: var(--ink-muted);
      line-height: 1.5; padding: 4px 4px 0;
    }
    @media (max-width: 520px) {
      .share-mode-picker { grid-template-columns: 1fr; }
      .share-mode-btn { padding: 12px 14px; text-align: left; }
    }
    .share-link-row {
      display: flex; gap: 8px; align-items: center; margin-top: 10px;
    }
    .share-link-input {
      flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
      font-size: 13px; font-family: monospace; background: var(--surface-alt); color: var(--ink);
      outline: none;
    }
    .share-copy-btn {
      padding: 8px 16px; background: var(--ink); color: #fff; border: none; border-radius: 6px;
      font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap;
    }
    .share-copy-btn:hover { background: #333; }
    .share-close {
      position: absolute; top: 16px; right: 16px; width: 28px; height: 28px;
      border: none; background: none; cursor: pointer; color: var(--ink-muted);
      font-size: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    }
    .share-close:hover { background: var(--surface-alt); color: var(--ink); }
    .share-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

    /* ─── Voice Drift Proposal Popup (slice 2) ──────────────────────
       Sits bottom-left so it never collides with the bottom-right
       feedback popup (.fb-popup). Non-blocking — the editor is still
       fully interactive. Fires when the server decides a rule has
       crossed its accept/reject threshold; see js/voice.js DriftProposal.
       ───────────────────────────────────────────────────────────── */
    #drift-popup {
      position: fixed;
      bottom: 24px;
      left: 24px;
      width: 340px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
      padding: 18px 20px 16px;
      z-index: 9999;
      animation: drift-slide-up 0.35s ease-out;
      font-family: 'Google Sans', sans-serif;
    }
    #drift-popup[hidden] { display: none; }
    @keyframes drift-slide-up {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .dp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .dp-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--accent);
      background: rgba(196,68,26,0.08);
      border: 1px solid rgba(196,68,26,0.25);
      padding: 3px 9px;
      border-radius: 100px;
      text-transform: lowercase;
    }
    .dp-tag::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 2px rgba(196,68,26,0.2);
    }
    #dp-close {
      border: none; background: none; cursor: pointer;
      color: var(--ink-muted); font-size: 18px; line-height: 1;
      width: 24px; height: 24px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    #dp-close:hover { background: var(--surface-alt); color: var(--ink); }
    .dp-summary {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    .dp-line {
      font-size: 12px;
      color: var(--ink-muted);
      line-height: 1.5;
      padding: 10px 12px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 14px;
    }
    .dp-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
    .dp-dismiss, .dp-accept {
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 100px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
      letter-spacing: -0.005em;
    }
    .dp-dismiss {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--ink-muted);
    }
    .dp-dismiss:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--ink-muted); }
    .dp-accept {
      background: var(--ink);
      border: 1px solid var(--ink);
      color: var(--bg);
    }
    .dp-accept:hover { background: #333; border-color: #333; }
    .dp-dismiss:disabled, .dp-accept:disabled { opacity: 0.5; cursor: wait; }

    /* ─── Feedback Popup ─────────────────────────────────────────── */
    .fb-popup {
      position: fixed; bottom: 24px; right: 24px; width: 320px;
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
      padding: 24px; z-index: 9999;
      animation: fb-slide-up 0.4s ease-out;
      display: none;
    }
    .fb-popup.visible { display: block; }
    @keyframes fb-slide-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fb-close {
      position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
      border: none; background: none; cursor: pointer; color: var(--ink-muted);
      font-size: 18px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; transition: background 0.15s, color 0.15s;
    }
    .fb-close:hover { background: var(--surface-alt); color: var(--ink); }
    .fb-emoji { font-size: 28px; margin-bottom: 12px; }
    .fb-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
    .fb-desc { font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin-bottom: 16px; }
    .fb-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 20px; background: var(--ink); color: #fff; border: none;
      border-radius: var(--radius); font-size: 13px; font-weight: 500;
      font-family: 'Google Sans', sans-serif; cursor: pointer; text-decoration: none;
      transition: background 0.15s;
    }
    .fb-btn:hover { background: #333; }
    @media (max-width: 480px) {
      .fb-popup { left: 12px; right: 12px; bottom: 12px; width: auto; }
    }

    /* ─── Billing Page ───────────────────────────────────────────── */
    #screen-billing, #screen-teams, #screen-access, #screen-mykey, #screen-apikeys {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: var(--bg);
    }
    .bill-body {
      flex: 1;
      overflow-y: auto;
      padding: 40px 48px;
    }
    .bill-inner {
      max-width: 720px;
      margin: 0 auto;
    }
    .mykey-body {
      background: linear-gradient(180deg, #fbfaf7 0, #ffffff 360px);
    }
    .mykey-inner {
      max-width: 1120px;
      margin: 0 auto;
    }
    .mykey-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      margin-bottom: 24px;
    }
    .mykey-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 9px;
    }
    .mykey-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1f7a4d;
      box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.12);
    }
    .mykey-title {
      margin: 0;
      color: var(--ink);
      font-size: 34px;
      line-height: 1.08;
      font-weight: 700;
    }
    .mykey-copy {
      margin: 8px 0 0;
      max-width: 650px;
      color: var(--ink-muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .mykey-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mykey-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .mykey-usage-layout {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }
    .mykey-panel {
      min-width: 0;
      height: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 18px 46px rgba(44, 39, 33, 0.06);
      padding: 22px;
    }
    .mykey-panel-title-row {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }
    .mykey-panel-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 700;
      color: var(--ink);
    }
    .mykey-panel-subtitle {
      margin: 5px 0 0;
      color: var(--ink-muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .mykey-pill {
      min-height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      background: var(--surface-alt);
      border: 1px solid var(--border);
      white-space: nowrap;
    }
    .mykey-pill.good {
      background: #e7f2eb;
      border-color: rgba(31, 122, 77, 0.22);
      color: #1f7a4d;
    }
    .mykey-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .mykey-meta-box,
    .mykey-security-item {
      border: 1px solid #ebe7df;
      border-radius: var(--radius);
      background: #f8f6f1;
      padding: 12px;
    }
    .mykey-meta-box {
      min-height: 74px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 6px;
    }
    .mykey-label {
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .mykey-value {
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      word-break: break-word;
    }
    .mykey-form {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-top: 16px;
    }
    .mykey-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .mykey-input,
    .mykey-select {
      width: 100%;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      padding: 0 12px;
      outline: none;
      font-size: 13px;
      font-family: inherit;
    }
    .mykey-input {
      font-family: ui-monospace, "sf mono", "cascadia code", monospace;
      font-size: 12px;
    }
    .mykey-input:focus,
    .mykey-select:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.08);
    }
    .mykey-provider-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .mykey-provider-card {
      min-height: 108px;
      text-align: left;
      border: 1px solid #ebe7df;
      border-radius: var(--radius);
      background: var(--surface);
      padding: 14px;
      cursor: pointer;
      display: grid;
      gap: 10px;
      transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
      font-family: inherit;
      color: var(--ink);
    }
    .mykey-provider-card:hover {
      border-color: #cfc7b9;
      background: #fffdfa;
    }
    .mykey-provider-card.active {
      border-color: rgba(196, 68, 26, 0.55);
      background: rgba(196, 68, 26, 0.06);
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .mykey-provider-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 10px;
    }
    .mykey-provider-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
    }
    .mykey-provider-copy,
    .mykey-model-map {
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.45;
      margin: 0;
    }
    .mykey-model-map {
      display: grid;
      gap: 5px;
    }
    .mykey-model-map strong {
      color: var(--ink);
      font-weight: 600;
    }
    .mykey-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
    .mykey-metric {
      min-height: 104px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }
    .mykey-metric-value {
      font-size: 24px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }
    .mykey-note {
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .mykey-period-switch {
      display: flex;
      gap: 5px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      padding: 4px;
      border-radius: 999px;
    }
    .mykey-period-btn {
      min-height: 28px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-muted);
      padding: 5px 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
    }
    .mykey-period-btn.active {
      background: #fff;
      color: var(--ink);
      box-shadow: 0 1px 3px rgba(44, 39, 33, 0.08);
    }
    .mykey-bars {
      display: grid;
      gap: 14px;
    }
    .mykey-bar-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
    }
    .mykey-bar-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
    }
    .mykey-bar-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }
    .mykey-bar-tokens,
    .mykey-muted {
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .mykey-bar-track {
      height: 8px;
      border-radius: 999px;
      background: var(--surface-alt);
      overflow: hidden;
    }
    .mykey-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
      transform-origin: left center;
    }
    .mykey-cost {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .mykey-table-wrap,
    .mykey-activity-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surface);
    }
    .mykey-table-wrap {
      overflow-x: auto;
    }
    .mykey-table {
      width: 100%;
      min-width: min(680px, 100%);
      border-collapse: collapse;
      font-size: 13px;
    }
    .mykey-table th,
    .mykey-table td {
      text-align: left;
      padding: 11px 14px;
      border-bottom: 1px solid #ebe7df;
      vertical-align: middle;
    }
    .mykey-table th {
      color: var(--ink-muted);
      font-weight: 500;
      background: #f8f6f1;
    }
    .mykey-table tr:last-child td {
      border-bottom: 0;
    }
    .mykey-num {
      font-family: ui-monospace, "sf mono", "cascadia code", monospace;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .mykey-security-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }
    .mykey-security-item:last-child {
      grid-column: 1 / -1;
    }
    .mykey-security-item {
      min-height: 92px;
      display: grid;
      align-content: start;
      gap: 8px;
    }
    .mykey-security-item strong {
      font-size: 13px;
      color: var(--ink);
    }
    .mykey-security-item span {
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink-muted);
    }
    .mykey-activity-row {
      min-height: 62px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #ebe7df;
    }
    .mykey-activity-row:last-child {
      border-bottom: 0;
    }
    .mykey-empty {
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 22px;
      color: var(--ink-muted);
      font-size: 13px;
      line-height: 1.5;
      background: rgba(255,255,255,0.7);
    }
    @media (max-width: 1020px) {
      .mykey-grid,
      .mykey-usage-layout {
        grid-template-columns: 1fr;
      }
      .mykey-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 680px) {
      .mykey-hero,
      .mykey-form {
        grid-template-columns: 1fr;
      }
      .mykey-actions {
        justify-content: stretch;
      }
      .mykey-actions > button,
      .mykey-form > button {
        width: 100%;
      }
      .mykey-meta,
      .mykey-metrics,
      .mykey-security-grid {
        grid-template-columns: 1fr;
      }
      .mykey-security-item:last-child {
        grid-column: auto;
      }
    }
    .bill-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .bill-subtitle {
      font-size: 13px;
      color: var(--ink-muted);
      margin-bottom: 32px;
    }
    .bill-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 24px;
      margin-bottom: 20px;
      background: var(--surface);
    }
    .bill-card-title {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 16px;
    }
    .team-card-title {
      letter-spacing: 0;
      text-transform: none;
    }
    .team-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      animation: team-row-in 0.18s ease-out;
      transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .team-row-pending { opacity: 0.75; }
    .team-row-pending.is-sending {
      opacity: 0.95;
      transform: translateY(-1px);
    }
    @keyframes team-row-in {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .team-row {
        animation: none;
        transition: none;
      }
    }
    .team-invite-badge {
      font-size: 10px;
      background: #fef3cd;
      color: #8a5a00;
      padding: 1px 6px;
      border-radius: var(--radius-pill);
      vertical-align: middle;
      margin-left: 4px;
      font-weight: 500;
    }
    .team-invite-badge.is-sending {
      background: var(--surface-alt);
      color: var(--ink-muted);
    }
    .team-row-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #1c1c1c;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 500;
      flex-shrink: 0;
      overflow: hidden;
    }
    .team-row-avatar-pending {
      background: var(--surface-alt);
      color: var(--ink-muted);
      border: 1px dashed var(--border);
    }
    .team-row-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .team-row-avatar.has-avatar {
      background: var(--surface-alt);
      color: transparent;
      border: 1px solid var(--border);
    }
    .bill-plan-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .bill-plan-name {
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .bill-plan-tag {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      background: #E8F5E9;
      color: #2E7D32;
    }
    .bill-plan-tag.trial { background: #FFF3E0; color: #E65100; }
    .bill-plan-tag.expired { background: #FFEBEE; color: #C62828; }
    .bill-plan-price {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
    }
    .bill-plan-price-period {
      font-size: 13px;
      font-weight: 400;
      color: var(--ink-muted);
    }
    .bill-plan-desc {
      font-size: 13px;
      color: var(--ink-muted);
      margin-bottom: 12px;
    }
    .bill-plan-date {
      font-size: 12px;
      color: var(--ink-muted);
    }
    .bill-plan-date strong {
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 11px;
      display: block;
      margin-bottom: 2px;
    }
    .bill-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 24px;
    }
    .bill-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--ink);
    }
    .bill-feature-check {
      color: #2E7D32;
      font-size: 15px;
      flex-shrink: 0;
    }
    .bill-plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .bill-plan-option {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
      position: relative;
    }
    .bill-plan-option:hover { border-color: var(--ink); }
    .bill-plan-option.current {
      border-color: #1c1c1c;
      box-shadow: 0 0 0 1px #1c1c1c;
    }
    .bill-plan-option.current::after {
      content: 'Current';
      position: absolute;
      top: -10px;
      right: 16px;
      font-size: 10px;
      font-weight: 600;
      background: #1c1c1c;
      color: #fff;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
    }
    .bpo-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .bpo-price {
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 2px;
    }
    .bpo-period {
      font-size: 11px;
      color: var(--ink-muted);
      margin-bottom: 12px;
    }
    .bpo-feature {
      font-size: 12px;
      color: var(--ink-muted);
      margin-bottom: 4px;
    }
    .bpo-btn {
      margin-top: 14px;
      width: 100%;
      padding: 9px 0;
      font-size: 13px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
      transition: background 0.15s;
    }
    .bpo-btn:hover { background: var(--surface-alt); }
    .bpo-btn.primary { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
    .bpo-btn.primary:hover { background: #333; }
    .bpo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .bill-manage-row {
      text-align: center;
      margin-top: 16px;
    }
    .bill-manage-btn {
      padding: 8px 24px;
      font-size: 13px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
    }
    .bill-manage-btn:hover { background: var(--surface-alt); }
    .bill-manage-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
    .bill-manage-btn.primary:hover { background: #333; border-color: #333; }

    .burger-btn {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: var(--radius);
      color: var(--ink-muted);
      transition: background 0.15s, color 0.15s;
      padding: 0;
    }
    .burger-btn:hover { background: var(--surface-alt); color: var(--ink); }
    .burger-btn svg {
      width: 18px;
      height: 18px;
    }

    /* ─── Profile Avatar ─────────────────────────────────────────── */
    /* Avatar v2 (Phase B): white background + subtle border. The
       notionist illustration inside carries its own line art so the
       button doesn't need a dark background to read well. Text-initial
       fallback (pre-load state) also uses white bg + --ink text. */
    .profile-avatar-btn {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      cursor: pointer;
      padding: 0;
      overflow: hidden;
      background: var(--bg);
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      font-family: 'Google Sans', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .profile-avatar-btn:hover {
      border-color: var(--border-hover);
      box-shadow: 0 0 0 2px var(--border);
    }
    .profile-avatar-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ─── Profile Dropdown ───────────────────────────────────────── */
    .profile-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
    }
    .profile-dropdown {
      position: fixed;
      right: 12px;
      top: 52px;
      width: 300px;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
      z-index: 9999;
      padding: 20px;
      animation: prof-slide-in 0.15s ease-out;
    }
    @keyframes prof-slide-in {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .profile-dropdown-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }
    /* Avatar v2 (Phase B): white bg + subtle border, same treatment
       as .profile-avatar-btn. The edit overlay on hover now shows a
       dark tint + pen icon (Change avatar → opens notionist picker). */
    .profile-dropdown-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--ink);
      font-size: 22px;
      font-weight: 600;
      font-family: 'Google Sans', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: border-color 0.15s;
    }
    .profile-dropdown-avatar:hover { border-color: var(--border-hover); }
    .profile-dropdown-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .profile-dropdown-avatar-edit {
      position: absolute;
      inset: 0;
      background: rgba(26,26,24,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.15s;
      border-radius: 50%;
    }
    .profile-dropdown-avatar:hover .profile-dropdown-avatar-edit { opacity: 1; }
    .profile-dropdown-avatar-edit svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
    }

    /* ─── Notionist Avatar Picker (Phase B) ───────────────────── */
    /* Opens from Profile dropdown → click avatar → modal overlay   */
    /* with a 24-tile gallery of random notionists. Replaces the    */
    /* old file-upload flow.                                         */
    .avatar-picker-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 26, 24, 0.45);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: avatar-picker-fade 0.18s ease-out;
    }
    @keyframes avatar-picker-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .avatar-picker-card {
      background: var(--bg);
      border-radius: 16px;
      width: 100%;
      max-width: 720px;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      padding: 28px 28px 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
      animation: avatar-picker-slide 0.2s ease-out;
    }
    @keyframes avatar-picker-slide {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .avatar-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .avatar-picker-head h2 {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.005em;
      margin: 0;
    }
    .avatar-picker-close {
      background: transparent;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 18px;
      color: var(--ink-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      font-family: inherit;
    }
    .avatar-picker-close:hover { background: var(--surface-alt); color: var(--ink); }
    .avatar-picker-gallery {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }
    .avatar-picker-tile {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      background: var(--bg);
      border: 2px solid var(--border);
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
      padding: 0;
    }
    .avatar-picker-tile:hover {
      border-color: var(--border-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .avatar-picker-tile.selected {
      border-color: var(--ink);
      box-shadow: 0 0 0 1px var(--ink);
    }
    .avatar-picker-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .avatar-picker-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 28px;
    }
    .avatar-picker-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.15s, border-color 0.15s, background 0.15s;
    }
    .avatar-picker-btn-secondary {
      background: var(--bg);
      color: var(--ink);
      border-color: var(--border);
    }
    .avatar-picker-btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); }
    .avatar-picker-btn-primary {
      background: var(--ink);
      color: #fff;
    }
    .avatar-picker-btn-primary:hover:not(:disabled) { opacity: 0.88; }
    .avatar-picker-btn:disabled { cursor: not-allowed; }
    .avatar-picker-btn-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      padding: 0;
      background: var(--bg);
      color: var(--ink);
      border: 1px solid var(--border);
      font-size: 16px;
      line-height: 1;
      transition: border-color 0.15s, opacity 0.2s;
    }
    .avatar-picker-btn-icon:hover:not(:disabled) { border-color: var(--border-hover); }
    .avatar-picker-btn-icon:disabled { opacity: 0.3; border-color: var(--border); }

    @media (max-width: 720px) {
      .avatar-picker-card { padding: 22px 18px 20px; }
      .avatar-picker-gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    }

    .profile-dropdown-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
    }
    .profile-dropdown-email {
      font-size: 12px;
      color: var(--ink-muted);
      margin-top: 2px;
    }
    .profile-dropdown-section {
      margin-bottom: 16px;
    }
    .profile-dropdown-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 8px;
    }
    .profile-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 12px;
    }
    .profile-field label {
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-muted);
    }
    .profile-field input {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 7px 10px;
      font-size: 14px;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }
    .profile-field input:focus { border-color: var(--ink); }
    .profile-brands {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .profile-brand-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 500;
      background: var(--surface-alt);
      color: var(--ink);
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
    }
    .profile-brand-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .profile-save-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }
    .profile-save-btn {
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      border-radius: var(--radius);
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      transition: background 0.15s;
    }
    .profile-save-btn:hover { background: var(--surface-alt); }
    .profile-save-btn.primary {
      background: #1c1c1c;
      color: #fff;
      border-color: #1c1c1c;
    }
    .profile-save-btn.primary:hover { background: #333; }

    /* ─── SCREEN: Analysis ──────────────────────────────────────── */
    #screen-analysis {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: var(--bg);
    }
    .an-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      height: 48px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      position: relative;
    }
    .an-nav-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.005em;
      text-transform: lowercase;
    }
    .an-body {
      flex: 1;
      overflow-y: auto;
      padding: 40px 48px;
    }
    .an-inner {
      max-width: 860px;
      margin: 0 auto;
    }
    .an-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .an-section-title {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
    }
    .an-range-wrap {
      position: relative;
      display: inline-block;
    }
    .an-range-btn {
      font-size: 14px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink);
      background: none;
      border: none;
      border-bottom: 1px dashed var(--border-hover);
      cursor: pointer;
      padding: 0 2px 1px;
      letter-spacing: 0.04em;
    }
    .an-range-btn:hover { border-bottom-color: var(--ink); }
    .an-range-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 4px 0;
      min-width: 120px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      z-index: 100;
    }
    .an-range-wrap.open .an-range-menu { display: block; }
    .an-range-option {
      display: block;
      width: 100%;
      padding: 7px 14px;
      border: none;
      background: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      color: var(--ink-muted);
      cursor: pointer;
      text-align: left;
      white-space: nowrap;
    }
    .an-range-option:hover { background: var(--surface-alt); color: var(--ink); }
    .an-range-option.active { color: var(--ink); font-weight: 600; }
    .an-chart-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .an-chart-toggle button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 28px;
      border: none;
      background: none;
      cursor: pointer;
      color: var(--border-hover);
      transition: background 0.15s, color 0.15s;
      padding: 0;
    }
    .an-chart-toggle button:not(:last-child) {
      border-right: 1px solid var(--border);
    }
    .an-chart-toggle button:hover { color: var(--ink-muted); }
    .an-chart-toggle button.active { background: var(--ink); color: #fff; }
    .an-chart-toggle button svg {
      width: 14px;
      height: 14px;
    }
    .an-chart-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 24px 16px;
      margin-bottom: 20px;
    }
    .an-chart-wrap svg {
      display: block;
      width: 100%;
      overflow: visible;
    }
    .an-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }
    .an-stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 22px;
    }
    .an-stat-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 10px;
    }
    .an-stat-value {
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
    }
    .an-stat-value .an-stat-unit {
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-muted);
    }
    .an-stat-value.danger { color: var(--accent); }
    .an-stat-value.success { color: #1A7A4A; }
    .an-stat-value.neutral { color: var(--ink); }
    .an-warning {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      background: rgba(196,68,26,0.06);
      border: 1px solid rgba(196,68,26,0.18);
      border-radius: var(--radius);
      font-size: 14px;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .an-warning svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    /* Chart animations */
    @keyframes an-bar-grow {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }
    @keyframes an-dot-pop {
      0% { transform: scale(0); opacity: 0; }
      60% { transform: scale(1.3); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes an-line-draw {
      from { stroke-dashoffset: var(--line-length); }
      to { stroke-dashoffset: 0; }
    }
    @keyframes an-area-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes an-card-up {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .an-stat-card {
      animation: an-card-up 0.4s ease-out both;
    }
    .an-stat-card:nth-child(1) { animation-delay: 0.3s; }
    .an-stat-card:nth-child(2) { animation-delay: 0.4s; }
    .an-stat-card:nth-child(3) { animation-delay: 0.5s; }
    .an-warning {
      animation: an-card-up 0.4s ease-out 0.6s both;
    }

    .an-empty {
      text-align: center;
      padding: 100px 0;
      color: var(--ink-muted);
    }
    .an-empty-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .an-empty-text {
      font-size: 14px;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    /* ─── SCREEN: Quote ─────────────────────────────────────────── */
    #screen-quote {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: #fff;
    }
    .qt-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 24px 40px;
      overflow-y: auto;
      position: relative;
    }
    .qt-light-glow {
      position: absolute;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      width: 200vw;
      height: 100vh;
      background: radial-gradient(ellipse 45% 100% at 50% 0%, rgba(255,238,160,0.45) 0%, rgba(255,242,185,0.25) 30%, rgba(255,245,200,0.1) 60%, transparent 100%);
      pointer-events: none;
      z-index: 1;
      transition: opacity 0.5s ease;
    }
    .qt-light-off .qt-light-glow {
      opacity: 0;
    }
    .qt-semicircle {
      position: absolute;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 30px;
      z-index: 2;
      cursor: pointer;
    }
    .qt-semicircle-shape {
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #555, #444);
      border-radius: 0 0 30px 30px;
      position: relative;
    }
    .qt-semicircle-lens {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 6px;
      background: rgba(255,238,160,0.9);
      border-radius: 0 0 6px 6px;
      box-shadow: 0 2px 12px rgba(255,235,140,0.6), 0 4px 24px rgba(255,235,140,0.3);
      transition: opacity 0.4s ease, box-shadow 0.4s ease;
    }
    .qt-light-off .qt-semicircle-lens {
      opacity: 0.2;
      box-shadow: none;
    }
    .qt-wall {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    /* Nail + wire */
    .qt-nail {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #a09890;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .qt-wire {
      width: 1px;
      height: 24px;
      background: linear-gradient(to bottom, #a09890, #7a7268);
      margin-top: -1px;
    }
    /* Frame */
    .qt-frame {
      background: linear-gradient(135deg, #302a24, #1e1a16);
      padding: 10px;
      border-radius: 2px;
      box-shadow:
        0 10px 36px rgba(0,0,0,0.18),
        0 3px 10px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.3);
      margin-top: -1px;
    }
    .qt-mat {
      border: 1px solid #5a5248;
      padding: 3px;
    }
    .qt-gilt {
      border: 1px solid #8a7d6b;
    }
    .qt-canvas {
      background: linear-gradient(160deg, #faf7f1, #f0ebe2);
      padding: 52px 44px 40px;
      text-align: center;
      min-width: 300px;
      max-width: 420px;
    }
    .qt-text {
      font-family: 'Google Sans', sans-serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.75;
      color: #2a2520;
      letter-spacing: -0.005em;
      transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    }
    .qt-text.vanish {
      opacity: 0;
      transform: scale(0.95) translateY(6px);
      filter: blur(6px);
    }
    .qt-author {
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: #9a8c72;
      margin-top: 28px;
      transition: opacity 0.35s ease 0.05s, filter 0.35s ease 0.05s;
    }
    .qt-author.vanish {
      opacity: 0;
      filter: blur(4px);
    }
    /* Shadow beneath frame */
    .qt-shadow {
      width: 80%;
      height: 8px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 70%);
      margin-top: 4px;
    }
    /* Refresh button */
    .qt-refresh {
      margin-top: 80px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid #c4beb4;
      background: transparent;
      color: #9a9488;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s, color 0.25s, background 0.25s;
      position: relative;
      z-index: 5;
    }
    .qt-refresh:hover {
      border-color: #2a2520;
      background: #2a2520;
      color: #fff;
    }
    .qt-refresh svg {
      width: 17px;
      height: 17px;
      display: block;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ─── SCREEN: Editor ────────────────────────────────────────── */
    #screen-editor {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: var(--surface);
    }

    /* ─── Dashboard ─────────────────────────────────────────────── */
    #screen-dashboard {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: var(--bg);
    }
    .dash-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      height: 48px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      position: relative;
    }
    .dash-nav-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.005em;
      text-transform: lowercase;
    }
    /* (edit voice button removed — now in sidebar) */

    .dash-body {
      flex: 1;
      overflow-y: auto;
      padding: 40px 48px;
    }
    .dash-inner {
      max-width: 860px;
      margin: 0 auto;
    }

    /* Greeting + new doc row */
    .dash-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .dash-greeting {
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
    }
    .dash-new-btn {
      padding: 8px 20px;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-pill);
      background: var(--ink);
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
    }
    .dash-new-btn:hover { opacity: 0.85; }

    /* Search */
    .dash-search {
      width: 100%;
      padding: 10px 16px 10px 36px;
      font-size: 14px;
      font-family: 'Google Sans', sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      outline: none;
      box-sizing: border-box;
      display: block;
    }
    .dash-search:focus { border-color: var(--ink-muted); }
    .dash-search-wrap {
      position: relative;
      margin-bottom: 16px;
    }
    .dash-search-icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      pointer-events: none;
    }

    /* Filter + sort row */
    .dash-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .dash-filters {
      display: flex;
      gap: 4px;
    }
    .dash-filter {
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      border: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: var(--border-hover);
      background: transparent;
      cursor: pointer;
    }
    .dash-filter:hover { color: var(--ink-muted); }
    .dash-filter.active { color: #fff; background: var(--ink); font-weight: 500; }
    .dash-filter-starred { display: inline-flex; align-items: center; gap: 4px; }
    .dash-filter-starred svg { display: block; }
    .dash-toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dash-avg-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Google Sans', sans-serif;
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      transition: opacity 0.2s;
      white-space: nowrap;
    }
    .dash-avg-badge:hover { opacity: 0.8; }
    .dash-avg-badge svg { width: 12px; height: 12px; }
    .dash-sort-wrap {
      position: relative;
      display: inline-block;
    }
    .dash-sort-btn {
      font-size: 12px;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink-muted);
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 5px 26px 5px 12px;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
    }
    .dash-sort-btn:hover { border-color: var(--border-hover); color: var(--ink); }
    .dash-export-btn {
      font-size: 12px;
      font-family: 'Google Sans', sans-serif;
      color: var(--ink-muted);
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 5px 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .dash-export-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-alt); }
    .dash-export-btn:disabled { opacity: 0.5; cursor: wait; }
    .dash-sort-btn::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid currentColor;
    }
    .dash-sort-menu {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 4px 0;
      min-width: 140px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      z-index: 100;
    }
    .dash-sort-wrap.open .dash-sort-menu { display: block; }
    .dash-sort-option {
      display: block;
      width: 100%;
      padding: 7px 14px;
      border: none;
      background: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      color: var(--ink-muted);
      cursor: pointer;
      text-align: left;
      white-space: nowrap;
    }
    .dash-sort-option:hover { background: var(--surface-alt); color: var(--ink); }
    .dash-sort-option.active { color: var(--ink); font-weight: 600; }

    /* Stats line */
    .dash-stats {
      font-size: 12px;
      color: var(--ink-muted);
      margin-bottom: 16px;
    }

    /* Document cards grid */
    .dash-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .dash-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px 14px;
      cursor: pointer;
      position: relative;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      display: flex;
      flex-direction: column;
      height: 160px;
      overflow: hidden;
    }
    .dash-card:hover {
      background: #ebebeb;
      border-color: #ebebeb;
    }
    /* "+ new document" tile — top-left of the grid, google-docs style */
    .dash-card.dash-card-new {
      background: var(--surface);
      border: 1px dashed var(--border);
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0;
      color: var(--ink-muted);
      font-family: 'Google Sans', sans-serif;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .dash-card.dash-card-new:hover {
      background: #ebebeb;
      border: 1px dashed var(--ink);
      color: var(--ink);
    }
    .dash-card-new-plus {
      font-size: 32px;
      font-weight: 300;
      line-height: 1;
      color: inherit;
      transition: color 0.2s;
    }
    .dash-card-new-label {
      font-size: 13px;
      font-weight: 500;
      color: inherit;
      transition: color 0.2s;
    }
    .dash-card:hover .dash-card-title { color: var(--ink); }
    .dash-card:hover .dash-card-preview { color: var(--ink-muted); }
    .dash-card:hover .dash-card-format { background: rgba(0,0,0,0.08); color: var(--ink); }
    .dash-card:hover .dash-card-score { color: var(--ink); }
    .dash-card:hover .dash-card-score.empty { color: var(--ink-muted); }
    .dash-card:hover .dash-card-date { color: var(--ink-muted); }
    .dash-card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 24px;
      transition: color 0.2s;
    }
    .dash-card-preview {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.5;
      flex: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      transition: color 0.2s;
    }
    .dash-card-meta {
      display: flex;
      align-items: center;
      margin-top: 12px;
      gap: 8px;
    }
    .dash-card-format {
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-muted);
      background: var(--surface-alt);
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      transition: background 0.2s, color 0.2s;
    }
    .dash-card-score {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      transition: color 0.2s;
    }
    .dash-card-score.empty { color: var(--border-hover); }
    .dash-card-date {
      font-size: 11px;
      color: var(--border-hover);
      margin-left: auto;
      transition: color 0.2s;
    }
    .dash-card-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--ink);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      opacity: 0;
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }
    .dash-card:hover .dash-card-delete { opacity: 1; }
    .dash-card-delete:hover { background: rgba(196,68,26,0.9); color: #fff; }
    .dash-card-star {
      -webkit-appearance: none;
      appearance: none;
      border: none;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 0;
      margin: 0;
      transition: transform 0.15s;
      line-height: 0;
      flex-shrink: 0;
      vertical-align: middle;
    }
    .dash-card-star svg {
      display: block;
      width: 14px;
      height: 14px;
      transition: fill 0.2s, stroke 0.2s;
      fill: transparent;
      stroke: var(--ink);
      stroke-width: 1.5;
    }
    .dash-card-star.starred svg { fill: var(--ink); stroke: var(--ink); }
    .dash-card:hover .dash-card-star svg { stroke: var(--ink); }
    .dash-card:hover .dash-card-star.starred svg { fill: var(--ink); stroke: var(--ink); }
    .dash-card-star:hover { transform: scale(1.2); }

    /* Empty state */
    .dash-empty {
      text-align: center;
      padding: 80px 0;
      color: var(--ink-muted);
    }
    .dash-empty-text {
      font-size: 16px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* Access section */
    .access-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
    .access-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
    .access-title { font-size: 14px; font-weight: 600; color: var(--ink); }
    .access-count { font-size: 12px; color: var(--ink-muted); }
    .access-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius);
      margin-bottom: 8px; gap: 12px;
    }
    .access-item-info { flex: 1; min-width: 0; }
    .access-item-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .access-item-meta { font-size: 11px; color: var(--ink-muted); display: flex; gap: 12px; margin-top: 2px; }
    .access-item-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    .access-copy-btn, .access-unshare-btn {
      padding: 4px 12px; border-radius: 4px; font-size: 11px;
      font-family: inherit; cursor: pointer; border: 1px solid var(--border);
      background: var(--surface); color: var(--ink-muted);
      transition: border-color 0.15s, color 0.15s;
    }
    .access-copy-btn:hover { border-color: var(--ink); color: var(--ink); }
    .access-unshare-btn:hover { border-color: #ef4444; color: #ef4444; }
    .access-commenters { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
    .access-commenter {
      font-size: 10px; padding: 2px 8px; background: var(--surface-alt);
      border-radius: 10px; color: var(--ink-muted);
    }

    /* Delete confirmation modal */
    .del-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: del-fade-in 0.15s ease;
    }
    @keyframes del-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .del-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px 28px 24px;
      max-width: 380px;
      width: 90%;
      text-align: center;
      box-shadow: 0 12px 40px rgba(0,0,0,0.12);
      animation: an-card-up 0.2s ease-out;
    }
    .del-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .del-text {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .del-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .del-cancel {
      padding: 9px 22px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .del-cancel:hover { border-color: var(--ink); }
    .del-confirm {
      padding: 9px 22px;
      border-radius: var(--radius-pill);
      border: none;
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background 0.2s;
      user-select: none;
      -webkit-user-select: none;
    }
    .del-confirm:hover { background: #c44; }
    .del-confirm-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: var(--accent);
      pointer-events: none;
      transition: none;
    }
    .del-confirm-text {
      position: relative;
      z-index: 1;
    }

    /* Nav doc title (editable) */
    .nav-doc-title {
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-muted);
      letter-spacing: 0.01em;
      outline: none;
      border-bottom: 1px dashed transparent;
      transition: border-color 0.2s, color 0.2s;
      cursor: default;
      max-width: 320px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 2px 6px;
      border-radius: 3px;
    }
    .nav-doc-title:hover {
      border-bottom-color: var(--border);
      color: var(--ink);
    }
    .nav-doc-title.editing {
      border-bottom-color: var(--ink-muted);
      background: var(--surface-alt);
      cursor: text;
      color: var(--ink);
      overflow: visible;
      text-overflow: unset;
      white-space: normal;
    }

    /* ─── Editor Nav — clean centered title ──────────────────────── */
    #editor-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      height: 48px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      position: relative;
    }
    /* Right-anchored group in the editor nav: share button + avatar
       sit together in the top-right corner instead of the share
       button drifting next to the centered title. */
    #editor-nav-right {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    /* The profile avatar button normally pins itself to the corner
       via position:absolute. Inside #editor-nav-right it participates
       in the flex row instead so the share button can sit next to it. */
    #editor-nav-right .profile-avatar-btn {
      position: static;
      transform: none;
    }

    /* Brand voice tag in the editor nav. Only rendered for Team /
       Agency plans — tells the user which brand this doc is being
       analysed against and lets them switch without leaving the editor. */
    .editor-brand-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border: 1px solid var(--border);
      background: var(--surface-alt);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      line-height: 1.3;
      max-width: 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background 0.12s ease, border-color 0.12s ease;
    }
    .editor-brand-tag:hover {
      background: var(--bg);
      border-color: var(--ink-muted);
    }
    .editor-brand-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .editor-brand-label {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .editor-brand-chev {
      font-size: 10px;
      opacity: 0.6;
      margin-left: 2px;
    }
    .editor-brand-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      padding: 6px;
      z-index: 200;
      min-width: 220px;
      max-height: 340px;
      overflow-y: auto;
    }
    .editor-brand-option {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 10px;
      border: none;
      background: transparent;
      border-radius: 6px;
      font-size: 13px;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
    }
    .editor-brand-option:hover {
      background: var(--surface-alt);
    }
    .editor-brand-option.active {
      background: var(--surface-alt);
      font-weight: 600;
    }
    .editor-brand-option-tag {
      margin-left: auto;
      font-size: 10px;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    /* (nav-left, nav-edit removed — now in sidebar) */

    /* ─── Editor Body ────────────────────────────────────────────── */
    #editor-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    #panel-left {
      display: flex;
      flex-direction: column;
      flex: 1;
      border-right: 1px solid var(--border);
      overflow: hidden;
    }
    #panel-right {
      width: 420px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--surface);
    }

    /* ─── Panel Headers ──────────────────────────────────────────── */
    .panel-header {
      text-align: center;
      padding: 20px 20px 0;
      font-size: 13px;
      font-weight: 400;
      color: var(--border-hover);
      letter-spacing: 0.04em;
    }

    /* ─── Format Pills — subtle, inline ──────────────────────────── */
    #format-pills {
      display: flex;
      gap: 4px;
      padding: 14px 40px 10px;
      background: var(--surface);
      flex-shrink: 0;
      justify-content: center;
    }
    .pill {
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      border: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: var(--border-hover);
      background: transparent;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
    }
    .pill:hover { color: var(--ink-muted); }
    .pill.active { color: #fff; font-weight: 500; background: var(--ink); }

    /* ─── Format Tip — subtle hint below pills ──────────────────── */
    #format-tip {
      font-size: 11px;
      color: var(--ink-muted);
      text-align: center;
      padding: 0 40px 6px;
      opacity: 0.7;
      letter-spacing: 0.01em;
      transition: opacity 0.2s;
    }
    #format-tip:empty { display: none; }

    /* ─── Editor Toolbar — top-right editor popover ─────────────── */
    .editor-toolbar-shell {
      position: fixed;
      top: 62px;
      right: 434px;
      z-index: 35;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      max-width: 44px;
      transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.right-panel-collapsed .editor-toolbar-shell {
      right: 56px;
    }
    .editor-toolbar-toggle {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface-alt);
      color: var(--ink-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .editor-toolbar-toggle:hover,
    .editor-toolbar-shell[data-open="true"] .editor-toolbar-toggle {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
      box-shadow: 0 8px 18px rgba(26, 26, 24, 0.12);
    }
    .editor-toolbar-toggle:active { transform: translateY(1px); }
    .editor-toolbar-toggle svg { transition: transform 0.15s; }
    .editor-toolbar-shell[data-open="true"] .editor-toolbar-toggle svg { transform: rotate(-8deg); }
    #editor-toolbar {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 2px;
      width: 36px;
      max-height: min(520px, calc(100vh - 110px));
      padding: 6px 4px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 14px 34px rgba(26, 26, 24, 0.14);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow-y: auto;
      scrollbar-width: none;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px) scale(0.98);
      transition: opacity 0.14s ease, transform 0.14s ease;
    }
    .editor-toolbar-shell[data-open="true"] #editor-toolbar {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    #editor-toolbar::-webkit-scrollbar { display: none; }
    .tb-btn {
      width: 28px; height: 28px; padding: 0; border: none; background: none;
      font-size: 13px; font-family: inherit; color: var(--ink-muted);
      border-radius: 5px; cursor: pointer; line-height: 1;
      transition: background 0.1s, color 0.1s;
      display: flex; align-items: center; justify-content: center;
      white-space: nowrap;
    }
    .tb-btn:hover { background: var(--surface-alt); color: var(--ink); }
    .tb-btn.active { background: var(--surface-alt); color: var(--ink); font-weight: 600; }
    .tb-sep { width: 18px; height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; }
    @media (max-width: 900px) {
      .editor-toolbar-shell { right: 56px; }
    }
    @media (max-width: 600px) {
      .editor-toolbar-shell {
        top: 58px;
        right: 56px;
      }
      #editor-toolbar {
        -webkit-overflow-scrolling: touch;
        max-height: min(500px, calc(100vh - 104px));
      }
      .tb-btn { width: 28px; height: 28px; padding: 0; font-size: 12px; }
    }

    /* ─── Right Panel Collapse ───────────────────────────────────── */
    .panel-toggle-btn {
      width: 28px; height: 28px; border-radius: 6px;
      background: var(--surface-alt); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 20; color: var(--ink-muted);
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .panel-toggle-btn:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
      box-shadow: 0 8px 18px rgba(26, 26, 24, 0.12);
    }
    .panel-toggle-btn svg { transition: transform 0.25s; }
    #panel-collapse-btn { position: absolute; top: 14px; left: 14px; }
    #panel-right { position: relative; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; min-width: 0; }
    #panel-right.collapsed { width: 0 !important; opacity: 0; overflow: hidden; }
    #panel-expand-btn {
      display: none; position: fixed; top: 62px; right: 14px;
    }
    #panel-expand-btn.visible { display: flex; }
    #panel-expand-btn svg { transform: rotate(180deg); }

    /* ─── Editor formatted content ───────────────────────────────── */
    #editor h1 { font-size: 28px; font-weight: 700; margin: 16px 0 8px; line-height: 1.3; }
    #editor h2 { font-size: 22px; font-weight: 600; margin: 14px 0 6px; line-height: 1.35; }
    #editor h3 { font-size: 18px; font-weight: 600; margin: 12px 0 4px; line-height: 1.4; }
    #editor ul, #editor ol { padding-left: 24px; margin: 8px 0; }
    #editor li { margin: 4px 0; }
    #editor blockquote {
      border-left: 3px solid var(--border); padding-left: 16px;
      color: var(--ink-muted); margin: 12px 0; font-style: italic;
    }
    #editor code {
      background: var(--surface-alt); padding: 1px 5px; border-radius: 3px;
      font-family: 'SF Mono', 'Consolas', monospace; font-size: 14px;
    }
    #editor pre {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin: 12px 0;
      padding: 12px 14px;
      overflow-x: auto;
      white-space: pre-wrap;
    }
    #editor pre code {
      background: transparent;
      padding: 0;
      border-radius: 0;
      font-size: 13px;
      line-height: 1.55;
    }
    #editor hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
    #editor a { color: var(--accent); text-decoration: underline; }

    /* ─── Format Checklist — right panel ─────────────────────────── */
    #format-checklist {
      display: none;
      padding: 0 24px 16px;
      margin: 0 0 4px;
      border-bottom: 1px solid var(--border);
    }
    #format-checklist.visible { display: block; }
    .fc-title {
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
      margin-bottom: 10px;
    }
    .fc-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .fc-item:last-child { margin-bottom: 0; }
    .fc-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fc-icon.pass { color: #1A7A4A; }
    .fc-icon.fail { color: #C4441A; }
    .fc-label { flex: 1; }
    .fc-label.pass { color: var(--ink-muted); }
    .fc-label.fail { color: var(--ink); }

    /* ─── Writing Area ───────────────────────────────────────────── */
    #writing-area {
      flex: 1;
      overflow-y: auto;
      padding: 28px 48px 48px;
      background: var(--surface);
      position: relative;
    }
    #editor {
      min-height: 100%;
      max-width: 580px;
      margin: 0 auto;
      outline: none;
      font-family: 'Google Sans', sans-serif;
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink);
      white-space: pre-wrap;
      word-break: break-word;
      text-align: left;
    }
    #editor:empty::before {
      content: attr(data-placeholder);
      color: var(--border);
      pointer-events: none;
    }

    /* ─── Editor Footer — minimal ────────────────────────────────── */
    #editor-footer {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      align-items: center;
      padding: 9px 24px 12px;
      background: var(--surface);
      flex-shrink: 0;
      gap: 8px;
      overflow: visible;
    }
    #editor-footer::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 58px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface) 70%);
    }
    #word-count {
      position: static;
      max-width: min(640px, 100%);
      font-size: 12px;
      color: var(--border-hover);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    .editor-footer-actions {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex: 0 0 auto;
      flex-wrap: wrap;
      max-width: 100%;
      white-space: nowrap;
    }
    .editor-footer-actions > button {
      flex: 0 0 auto;
    }
    @media (max-width: 1320px) {
      #editor-footer {
        padding-inline: 18px;
      }
      .editor-footer-actions {
        gap: 10px;
      }
    }
    @media (max-width: 980px) {
      .editor-footer-actions {
        gap: 8px;
      }
    }
    #btn-run.loading {
      pointer-events: none;
      opacity: 0.7;
    }
    #btn-run.loading::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin-right: 6px;
      vertical-align: -2px;
    }
    #btn-run {
      padding: 8px 20px;
      min-height: 36px;
      border: 1px solid transparent;
      font-size: 13px;
      border-radius: var(--radius-pill);
      background: var(--ink);
      color: #fff;
      line-height: 1;
    }
    #btn-run:hover:not(:disabled) { opacity: 0.8; }
    #btn-deep {
      display: inline-block;
      padding: 8px 20px;
      font-size: 13px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--ink-muted);
      font-family: 'Google Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, opacity 0.15s;
    }
    #btn-deep:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
    #btn-deep:disabled { opacity: 0.5; cursor: not-allowed; }
    #btn-copy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 20px;
      min-height: 36px;
      font-size: 13px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--ink-muted);
      font-family: 'Google Sans', sans-serif;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    #btn-copy:hover { border-color: var(--ink); color: var(--ink); }

    /* ─── linkedin preview trigger + modal ───────────────────────── */
    .linkedin-preview-trigger {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 0 16px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(10, 102, 194, 0.28);
      background: rgba(10, 102, 194, 0.06);
      color: #075594;
      font-family: 'Google Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    .linkedin-preview-trigger[hidden] {
      display: none !important;
    }
    .linkedin-preview-trigger svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }
    .linkedin-preview-trigger:hover {
      transform: translateY(-1px);
      border-color: rgba(10, 102, 194, 0.46);
      background: rgba(10, 102, 194, 0.10);
      color: #064b82;
    }

    .linkedin-preview-backdrop {
      padding: 22px;
      background: rgba(26, 26, 24, 0.36);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .linkedin-preview-shell {
      width: min(680px, calc(100vw - 44px));
      max-height: calc(100vh - 44px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      background: var(--bg);
      border: 1px solid rgba(222, 218, 210, 0.95);
      border-radius: 14px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
      overflow: hidden;
    }
    .linkedin-preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    .linkedin-preview-header h2 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0;
    }
    .linkedin-preview-header p {
      margin: 3px 0 0;
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .linkedin-preview-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }
    .linkedin-preview-theme {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background: var(--bg);
    }
    .linkedin-preview-theme button {
      border: 0;
      border-radius: var(--radius-pill);
      padding: 6px 12px;
      background: transparent;
      color: var(--ink-muted);
      font-family: inherit;
      font-size: 12px;
      cursor: pointer;
      line-height: 1;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .linkedin-preview-theme button.active {
      background: var(--ink);
      color: var(--bg);
    }
    .linkedin-preview-close {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--bg);
      color: var(--ink-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .linkedin-preview-close:hover {
      border-color: rgba(26, 26, 24, 0.30);
      color: var(--ink);
      background: var(--surface-alt);
    }
    .linkedin-preview-device {
      --lp-bg: #ffffff;
      --lp-ink: #191919;
      --lp-muted: #666666;
      --lp-border: #d8dadd;
      --lp-canvas: #f3f2ef;
      --lp-hover: rgba(0, 0, 0, 0.055);
      --lp-linkedin: #0a66c2;
      min-height: 0;
      padding: 18px 28px 22px;
      background: var(--lp-canvas);
      overflow: auto;
      transition: background 0.18s ease;
    }
    .linkedin-preview-device.dark {
      --lp-bg: #1b1f23;
      --lp-ink: #f3f2ef;
      --lp-muted: #b5b8bc;
      --lp-border: #30363d;
      --lp-canvas: #0f1115;
      --lp-hover: rgba(255, 255, 255, 0.07);
    }
    .linkedin-preview-post {
      width: min(552px, 100%);
      margin: 0 auto;
      background: var(--lp-bg);
      color: var(--lp-ink);
      border: 1px solid var(--lp-border);
      border-radius: 10px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .linkedin-preview-post-head {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      padding: 12px 16px 6px;
    }
    .linkedin-preview-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 34% 32%, #f2d1bd 0 17%, transparent 18%),
        linear-gradient(145deg, #2f3a44 0 48%, var(--lp-linkedin) 49% 100%);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      text-transform: lowercase;
      overflow: hidden;
    }
    .linkedin-preview-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .linkedin-preview-identity {
      min-width: 0;
    }
    .linkedin-preview-name-row {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      color: var(--lp-ink);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }
    .linkedin-preview-name-row span:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .linkedin-preview-subtitle,
    .linkedin-preview-time {
      color: var(--lp-muted);
      font-size: 12px;
      line-height: 1.28;
      margin-top: 2px;
    }
    .linkedin-preview-menu {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      color: var(--lp-muted);
    }
    .linkedin-preview-menu span {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
    }
    .linkedin-preview-post-text {
      position: relative;
      padding: 20px 16px 16px;
      color: var(--lp-ink);
      font-size: 14px;
      line-height: 1.44;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .linkedin-preview-post.has-fold-marker .linkedin-preview-post-text::before,
    .linkedin-preview-post.has-fold-marker .linkedin-preview-post-text::after {
      position: absolute;
      top: calc(20px + 4.32em);
      height: 20px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.16s ease;
    }
    .linkedin-preview-post.has-fold-marker .linkedin-preview-post-text::before {
      content: "";
      right: 84px;
      width: 96px;
      background:
        linear-gradient(var(--lp-border), var(--lp-border)) center / 100% 1px no-repeat,
        linear-gradient(var(--lp-bg), var(--lp-bg));
    }
    .linkedin-preview-post.has-fold-marker .linkedin-preview-post-text::after {
      content: "...more";
      right: 16px;
      width: 72px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: var(--lp-muted);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      background: var(--lp-bg);
    }
    .linkedin-preview-post.has-fold-marker:hover .linkedin-preview-post-text::before,
    .linkedin-preview-post.has-fold-marker:hover .linkedin-preview-post-text::after,
    .linkedin-preview-post.has-fold-marker:focus-within .linkedin-preview-post-text::before,
    .linkedin-preview-post.has-fold-marker:focus-within .linkedin-preview-post-text::after {
      opacity: 1;
    }
    .linkedin-preview-post-text:empty::before {
      content: "start writing to preview your linkedin post";
      color: var(--lp-muted);
    }
    .linkedin-preview-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 0 16px;
      padding: 8px 0;
      border-bottom: 1px solid var(--lp-border);
      color: var(--lp-muted);
      font-size: 12px;
      line-height: 1;
    }
    .linkedin-preview-reactions {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }
    .linkedin-preview-reactions span:not(:last-child) {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid var(--lp-bg);
      background: var(--lp-linkedin);
      flex: 0 0 auto;
    }
    .linkedin-preview-reactions span:nth-child(2) {
      margin-left: -9px;
      background: #df704d;
    }
    .linkedin-preview-reactions span:nth-child(3) {
      margin-left: -9px;
      background: #6dae4f;
    }
    .linkedin-preview-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding: 5px 10px;
      color: var(--lp-muted);
    }
    .linkedin-preview-actions span {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1;
      white-space: nowrap;
    }
    .linkedin-preview-actions span:hover {
      background: var(--lp-hover);
    }
    .linkedin-preview-actions svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    @media (max-width: 720px) {
      .linkedin-preview-backdrop {
        align-items: flex-end;
        padding: 12px;
      }
      .linkedin-preview-shell {
        width: 100%;
        max-height: calc(100vh - 24px);
      }
      .linkedin-preview-header {
        align-items: flex-start;
        padding: 14px;
      }
      .linkedin-preview-header p {
        display: none;
      }
      .linkedin-preview-device {
        padding: 14px;
      }
      .linkedin-preview-actions span {
        font-size: 12px;
      }
    }

    /* Editor-header share button — structure matches #btn-copy so the
       two read as siblings. Hover fills with the mild beige/grey
       (--surface-alt) rather than darkening the border, so the pill
       visually "lights up" on hover instead of just thickening. */
    .share-btn {
      padding: 8px 20px;
      font-size: 13px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--ink-muted);
      font-family: 'Google Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s;
      display: inline-flex;
      align-items: center;
    }
    .share-btn:hover {
      background: var(--surface-alt);
      color: var(--ink);
      border-color: var(--border-hover);
    }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 20px;
      min-height: 36px;
      font-size: 13px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--ink-muted);
      font-family: 'Google Sans', sans-serif;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .btn-outline:hover { border-color: var(--ink); color: var(--ink); }

    /* ─── History Modal ─────────────────────────────────────────── */
    #history-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.4);
      justify-content: center;
      align-items: center;
    }
    #history-modal.open { display: flex; }
    #history-inner {
      background: var(--surface);
      border-radius: 16px;
      width: 600px;
      max-height: 70vh;
      overflow-y: auto;
      padding: 28px 32px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.15);
    }
    #history-inner h3 {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 20px;
      color: var(--ink);
    }
    .history-item {
      padding: 14px 16px;
      border-radius: 10px;
      background: var(--surface-alt);
      margin-bottom: 10px;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
      position: relative;
    }
    .history-item:hover { background: var(--border); }
    .history-item.active { border: 2px solid var(--ink); }
    .history-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .history-preview {
      font-size: 12px;
      color: var(--ink-muted);
      line-height: 1.4;
      max-height: 40px;
      overflow: hidden;
    }
    .history-time {
      font-size: 11px;
      color: var(--border-hover);
      margin-top: 4px;
    }
    .history-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }

    /* ─── Score Panel — big number + bar ─────────────────────────── */
    #scores-section {
      padding: 36px 32px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2px;
    }
    .score-primary {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin-bottom: 2px;
    }
    .score-big {
      font-size: 72px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }
    .score-big.empty { color: var(--border); }
    .score-denom {
      font-size: 22px;
      font-weight: 400;
      color: var(--ink-muted);
      font-variant-numeric: tabular-nums;
    }
    .score-meta-label {
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-muted);
      margin-bottom: 2px;
    }
    .score-meta-status {
      font-size: 13px;
      font-weight: 600;
      display: inline-block;
      padding: 5px 16px;
      border-radius: 20px;
      margin-bottom: 16px;
      transition: background-color 0.3s, color 0.3s;
    }
    .score-meta-status.status-red    { background: rgba(196,68,26,0.12); color: #C4441A; }
    .score-meta-status.status-yellow { background: rgba(255,180,0,0.20);  color: #9A7B00; }
    .score-meta-status.status-green  { background: rgba(26,122,74,0.12); color: #1A7A4A; }
    .score-meta-status.status-neutral { background: var(--surface-alt); color: var(--ink-muted); }
    .score-bar { display: none; }
    .panel-divider { display: none; }

    /* ─── Update notification banner ────────────────────────────── */
    #update-banner {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ink);
      color: var(--bg);
      border-radius: var(--radius);
      padding: 14px 20px;
      font-size: 14px;
      z-index: 300;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      display: none;
      align-items: center;
      gap: 16px;
      max-width: 480px;
      width: calc(100% - 48px);
    }
    #update-banner.visible { display: flex; }
    #update-banner-text { flex: 1; line-height: 1.4; }
    #update-banner-btn {
      white-space: nowrap;
      font-size: 13px;
      font-weight: 500;
      padding: 7px 14px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
    }
    #update-banner-dismiss {
      font-size: 20px;
      background: none;
      border: none;
      color: rgba(247,245,240,0.4);
      cursor: pointer;
      line-height: 1;
      padding: 0 2px;
    }
    #update-banner-dismiss:hover { color: var(--bg); }

    /* ─── Keyword update modal ───────────────────────────────────── */
    #kw-update-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,26,24,0.5);
      z-index: 400;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #kw-update-modal.visible { display: flex; }
    .kum-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 480px;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
    }
    .kum-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
    .kum-sub   { font-size: 14px; color: var(--ink-muted); margin-bottom: 24px; line-height: 1.5; }
    .kum-item  {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .kum-item:last-of-type { border-bottom: none; }
    .kum-action {
      font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 3px; flex-shrink: 0; margin-top: 2px;
    }
    .kum-action.strengthen { background: rgba(26,122,74,0.12); color: #1A7A4A; }
    .kum-action.soften     { background: rgba(138,98,0,0.12);   color: #8A6200; }
    .kum-action.remove     { background: rgba(196,68,26,0.12);  color: #C4441A; }
    .kum-action.add        { background: rgba(107,47,160,0.12); color: #6B2FA0; }
    .kum-info { flex: 1; }
    .kum-word   { font-size: 15px; font-weight: 500; color: var(--ink); }
    .kum-reason { font-size: 13px; color: var(--ink-muted); margin-top: 2px; line-height: 1.4; }
    .kum-btns   { display: flex; gap: 8px; margin-top: 6px; }
    .kum-approve, .kum-skip {
      font-size: 12px; padding: 5px 10px; border-radius: 4px;
      cursor: pointer; font-family: 'Google Sans', sans-serif; border: none;
    }
    .kum-approve { background: var(--ink); color: var(--surface); }
    .kum-skip    { background: var(--surface-alt); color: var(--ink-muted); }
    .kum-footer  { margin-top: 20px; display: flex; justify-content: flex-end; }

    /* ─── Issues List — colored cards ───────────────────────────── */
    /* Scrollable issues list. The header (.issues-header) inside
       this element is position:sticky top:0 so the ISSUES FOUND
       label + badge + "fix everything" + "no emdash" stay pinned
       at the top while the user scrolls the cards below.

       Top padding on the container is 0 — the sticky header
       carries its own top padding so when it pins at top:0 the
       breathing room stays built into the header box, not left
       behind as a dead gap above the pinned element. Horizontal
       padding stays on the container so cards stay inset from
       the panel edges. */
    #issues-section {
      flex: 1;
      overflow-y: auto;
      padding: 0 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* Smoother scroll-into-view lands cards below the sticky
         header instead of under it. Matches the header's pinned
         height (header padding 20+12 + content ~22 = ~54). */
      scroll-padding-top: 60px;
    }
    #issues-section .empty-state {
      font-size: 14px;
      color: var(--border-hover);
      text-align: center;
      padding: 40px 0;
      line-height: 1.6;
    }

    /* Color legend block removed — every tooltip now carries its
       own .tt-severity strip, so the bottom-docked grey-box
       legend that used to explain red/yellow/green/blue is
       redundant. Markup removed from app.html and the old CSS
       block deleted here. See .tt-severity below for the
       replacement and Tooltip._renderSeverity in js/tools.js
       for the runtime wiring. */

    /* ─── Brand Voice Profile Overlay ─────────────────────────────── */
    #screen-voice-profile {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 200;
      flex-direction: column;
      overflow: hidden;
    }
    #screen-voice-profile.open { display: flex; }

    .bv-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      height: 48px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .bv-body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 48px 24px 120px;
    }
    .bv-container { width: 100%; max-width: 900px; }

    .bv-greeting {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .bv-subtitle {
      font-size: 14px;
      color: var(--ink-muted);
      margin-bottom: 32px;
    }
    .bv-readiness-card {
      display: grid;
      grid-template-columns: minmax(130px, 180px) 1fr;
      gap: 24px;
      align-items: stretch;
      margin-bottom: 34px;
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(237,234,227,0.92), rgba(255,255,255,0.98));
      box-shadow: 0 12px 36px -28px rgba(26,26,24,0.35);
    }
    .bv-readiness-score {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 138px;
      padding-right: 20px;
      border-right: 1px solid var(--border);
    }
    .bv-readiness-kicker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
    }
    .bv-readiness-num {
      font-size: 54px;
      font-weight: 700;
      letter-spacing: -0.06em;
      color: var(--ink);
      line-height: 0.95;
      font-variant-numeric: tabular-nums;
    }
    .bv-readiness-state {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
    }
    .bv-readiness-state::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
    }
    .bv-readiness-main {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .bv-readiness-title {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .bv-readiness-copy {
      max-width: 62ch;
      color: var(--ink-muted);
      font-size: 13.5px;
      line-height: 1.6;
    }
    .bv-readiness-bar {
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--border);
    }
    .bv-readiness-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--ink);
      transition: width 0.25s ease;
    }
    .bv-readiness-checks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .bv-readiness-check {
      --readiness-accent: var(--ink-muted);
      --readiness-bg: rgba(255,255,255,0.62);
      --readiness-border: var(--border);
      --readiness-glow: rgba(107,107,100,0.08);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--readiness-border);
      border-radius: 10px;
      background:
        radial-gradient(circle at top right, var(--readiness-glow), transparent 40%),
        var(--readiness-bg);
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .bv-readiness-check:nth-child(1) {
      --readiness-accent: #1A7A4A;
      --readiness-bg: #F2F8F4;
      --readiness-border: rgba(26,122,74,0.24);
      --readiness-glow: rgba(26,122,74,0.13);
    }
    .bv-readiness-check:nth-child(2) {
      --readiness-accent: #2563EB;
      --readiness-bg: #F1F5FF;
      --readiness-border: rgba(37,99,235,0.22);
      --readiness-glow: rgba(37,99,235,0.11);
    }
    .bv-readiness-check:nth-child(3) {
      --readiness-accent: #A56D00;
      --readiness-bg: #FBF4DF;
      --readiness-border: rgba(165,109,0,0.24);
      --readiness-glow: rgba(165,109,0,0.12);
    }
    .bv-readiness-check:nth-child(4) {
      --readiness-accent: var(--accent);
      --readiness-bg: #FBF1EC;
      --readiness-border: rgba(196,68,26,0.24);
      --readiness-glow: rgba(196,68,26,0.12);
    }
    .bv-readiness-check::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--readiness-border);
      flex-shrink: 0;
    }
    .bv-readiness-check.done {
      color: var(--ink);
    }
    .bv-readiness-check.done::before {
      background: var(--readiness-accent);
    }
    @media (max-width: 720px) {
      .bv-readiness-card { grid-template-columns: 1fr; gap: 16px; }
      .bv-readiness-score {
        min-height: 0;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        gap: 10px;
      }
      .bv-readiness-checks { grid-template-columns: 1fr; }
    }

    /* ── Masonry grid of answer cards ────────────────────────────── */
    .bv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 36px;
    }
    .bv-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 18px 16px;
      cursor: default;
      transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    }
    .bv-card:hover {
      background: #ebebeb;
      border-color: #ddd;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .bv-card:hover .bv-card-question { color: var(--ink-muted); }
    .bv-card:hover .bv-card-answer   { color: var(--ink); }
    .bv-card:hover .bv-card-desc     { color: var(--ink-muted); }
    .bv-card-question {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 6px;
      line-height: 1.3;
      padding-right: 50px;
    }
    .bv-card-answer {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.25;
    }
    .bv-card-desc {
      font-size: 12px;
      color: var(--ink-muted);
      margin-top: 4px;
      line-height: 1.4;
    }
    .bv-card-edit {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 11px;
      font-weight: 600;
      color: var(--ink-muted);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 3px 10px;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      transition: border-color 0.18s, color 0.18s, background-color 0.18s;
    }
    .bv-card-edit:hover { border-color: var(--ink); color: var(--ink); }
    .bv-card:hover .bv-card-edit { color: var(--ink) !important; border-color: var(--ink) !important; background: transparent !important; }

    /* ── Edit popup (answer picker) ─────────────────────────────── */
    .bv-popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26,26,24,0.45);
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bvFadeIn 0.15s ease;
    }
    @keyframes bvFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .bv-popup {
      background: var(--bg);
      border-radius: 16px;
      padding: 28px 28px 24px;
      width: 90%;
      max-width: 440px;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 16px 48px rgba(0,0,0,0.18);
      animation: bvSlideUp 0.2s ease;
    }
    @keyframes bvSlideUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .bv-popup-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 6px;
    }
    .bv-popup-question {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 20px;
      line-height: 1.25;
    }

    .bv-divider {
      height: 1px;
      background: var(--border);
      margin: 0 0 32px;
    }
    .bv-voice-label {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .bv-voice-hint {
      font-size: 13px;
      color: var(--ink-muted);
      margin-bottom: 16px;
    }
    /* Brand inspiration input */
    .bv-brand-input-wrap {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .bv-brand-input {
      flex: 1;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }
    .bv-brand-input:focus { border-color: var(--ink); }
    .bv-brand-input::placeholder { color: var(--border-hover); }
    .bv-brand-fetch {
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 600;
      background: var(--ink);
      color: var(--bg);
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      white-space: nowrap;
      transition: opacity 0.15s;
    }
    .bv-brand-fetch:hover { opacity: 0.85; }
    .bv-brand-fetch:disabled { opacity: 0.4; cursor: not-allowed; }
    .bv-brand-summary {
      margin-top: 12px;
      padding: 14px 16px;
      background: var(--surface-alt);
      border-radius: var(--radius);
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink);
    }
    .bv-brand-summary-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-muted);
      margin-bottom: 6px;
    }

    .bv-summary-textarea {
      width: 100%;
      min-height: 180px;
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Google Sans', sans-serif;
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--surface);
      outline: none;
      resize: vertical;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .bv-summary-textarea:focus { border-color: var(--ink); }

    /* ── voice memory panel (slice 1.5) ─────────────────────── */
    .bv-memory-panel {
      margin-top: 16px;
      padding-bottom: 24px;
    }
    .bv-memory-loading,
    .bv-memory-empty {
      padding: 20px 20px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--ink-muted);
      font-size: 14px;
      line-height: 1.55;
    }
    .bv-memory-empty-title {
      color: var(--ink);
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 15px;
    }
    .bv-memory-stats {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .bv-memory-stat {
      flex: 1 1 0;
      min-width: 100px;
      padding: 14px 16px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .bv-memory-stat-num {
      font-size: 22px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.1;
    }
    .bv-memory-stat-label {
      font-size: 12px;
      color: var(--ink-muted);
      margin-top: 4px;
    }
    .bv-memory-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 720px) {
      .bv-memory-cols { grid-template-columns: 1fr; }
    }
    .bv-memory-col {
      position: relative;
      overflow: hidden;
      padding: 16px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .bv-memory-col::before {
      content: '';
      position: absolute;
      top: 16px;
      right: 16px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.88;
    }
    .bv-memory-col:first-child {
      color: #1A7A4A;
      background:
        radial-gradient(circle at top right, rgba(26,122,74,0.13), transparent 34%),
        #F2F8F4;
      border-color: rgba(26,122,74,0.24);
    }
    .bv-memory-col:last-child {
      color: var(--accent);
      background:
        radial-gradient(circle at top right, rgba(196,68,26,0.12), transparent 34%),
        #FBF1EC;
      border-color: rgba(196,68,26,0.24);
    }
    .bv-memory-col-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .bv-memory-col-sub {
      font-size: 12px;
      color: var(--ink-muted);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .bv-memory-col-empty {
      font-size: 12px;
      color: var(--ink-muted);
      padding: 8px 0;
      font-style: italic;
    }
    .bv-memory-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 8px 0;
      border-top: 1px solid var(--border);
      gap: 12px;
    }
    .bv-memory-row:first-of-type { border-top: none; }
    .bv-memory-row-rule {
      font-size: 13px;
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bv-memory-row-meta {
      font-size: 11px;
      color: var(--ink-muted);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .bv-memory-foot {
      margin-top: 14px;
      font-size: 12px;
      color: var(--ink-muted);
      line-height: 1.5;
    }

    .bv-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 32px;
      background: var(--bg);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: center;
      gap: 12px;
      z-index: 201;
    }
    .bv-save {
      padding: 12px 36px;
      font-size: 15px;
      font-weight: 600;
      background: var(--ink);
      color: var(--bg);
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      transition: opacity 0.15s;
    }
    .bv-save:hover { opacity: 0.85; }
    .bv-save:disabled { opacity: 0.4; cursor: not-allowed; }
    .bv-cancel {
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 500;
      background: transparent;
      color: var(--ink-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      transition: border-color 0.15s, color 0.15s;
    }
    .bv-cancel:hover { border-color: var(--ink); color: var(--ink); }

    .bv-loading, .bv-success {
      text-align: center;
      padding: 120px 0 80px;
    }
    .bv-loading-text {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      margin-top: 24px;
    }
    .bv-loading-sub {
      font-size: 14px;
      color: var(--ink-muted);
      margin-top: 6px;
    }
    .bv-success-check {
      width: 64px;
      height: 64px;
      margin: 0 auto 20px;
      animation: bvCheckIn 0.35s ease;
    }
    .bv-success-text {
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .bv-success-sub {
      font-size: 14px;
      color: var(--ink-muted);
      margin-bottom: 24px;
    }
    @keyframes bvCheckIn {
      from { opacity: 0; transform: scale(0.7); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes bvSpin {
      to { transform: rotate(360deg); }
    }
    .bv-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--border);
      border-top-color: var(--ink);
      border-radius: 50%;
      animation: bvSpin 0.7s linear infinite;
      margin: 0 auto;
    }

    /* Issues header — sticky to the top of the scrolling
       #issues-section so "ISSUES FOUND N · fix everything · no
       emdash" stays pinned while the cards below scroll.

       Layout rules:
       - #issues-section has padding:0 horizontally managed; the
         header sits flush left/right within the content width.
       - The header's own padding (18/0/14) carries the top
         breathing room so when it pins at top:0 the breathing
         room travels with it. No negative-margin bleed trick —
         that was leaving a visible gap above the pinned header
         when the scroll container was at the very top.
       - Opaque background + thin bottom divider marks the
         scroll boundary once content slides behind. */
    .issues-header {
      position: sticky;
      top: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 0 14px;
      margin: 0 0 4px;
      background: var(--surface);
      /* Soft bottom shadow marks the scroll boundary when cards
         slide up behind the pinned header. Subtle enough to be
         invisible when the list is at the top (the surface color
         hides it against the divider above), visible only once
         content starts scrolling under it. */
      box-shadow: 0 8px 8px -10px rgba(0,0,0,0.14);
    }
    .issues-header-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .issues-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 11px;
      font-size: 12px;
      font-weight: 600;
      background: var(--hl-red-bg);
      color: var(--hl-red-line);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .issues-count-badge.clean {
      background: var(--hl-grn-bg);
      color: var(--hl-grn-line);
    }

    /* Issue cards.
       - Bigger padding for breathing room (was 12×16 → now 16×20).
       - Explicit GPU layer via translateZ(0) + backface-visibility
         to prevent the text ghost/double-render artifact that
         appeared on hover. Without the persistent layer, the
         browser re-rasterises glyphs every time .issue-card:hover
         swaps transform state, and the subpixel shift during the
         80ms transition looked like a ghosted duplicate.
       - will-change: transform tells the compositor to keep the
         element on its own layer permanently. */
    .issue-card {
      padding: 16px 20px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: transform;
    }
    .issue-card:hover {
      transform: translate3d(0, -2px, 0);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .issue-card:active {
      transform: translate3d(0, 0, 0) scale(0.97);
      box-shadow: none;
    }
    .issue-card.red    { background: var(--hl-red-bg); color: var(--hl-red-line); }
    .issue-card.yellow { background: var(--hl-yel-bg); color: var(--hl-yel-line); }
    .issue-card.green  { background: var(--hl-grn-bg); color: var(--hl-grn-line); }
    .issue-card.purple { background: var(--hl-pur-bg); color: var(--hl-pur-line); }
    .issue-card.blue   { background: rgba(37,99,235,0.10); color: #2563EB; }
    .issue-card-label {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 2px;
    }
    .issue-card-text {
      font-weight: 400;
      font-size: 12px;
    }
    .issue-card-evidence {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .issue-card-evidence-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 100%;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid currentColor;
      background: rgba(255,255,255,0.42);
      color: inherit;
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.2;
    }
    .issue-card-evidence-chip::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.85;
      flex-shrink: 0;
    }

    /* ─── Highlight Marks in editor ───────────────────────────────── */
    mark[data-colour="red"]    { background: var(--hl-red-bg); border-bottom: 2px solid var(--hl-red-line); border-radius: 2px; padding-bottom: 1px; color: inherit; cursor: pointer; }
    mark[data-colour="yellow"] { background: var(--hl-yel-bg); border-bottom: 2px solid var(--hl-yel-line); border-radius: 2px; padding-bottom: 1px; color: inherit; cursor: pointer; }
    mark[data-colour="green"]  { background: var(--hl-grn-bg); border-bottom: 2px solid var(--hl-grn-line); border-radius: 2px; padding-bottom: 1px; color: inherit; cursor: pointer; }
    mark[data-colour="purple"] { background: var(--hl-pur-bg); border-bottom: 2px solid var(--hl-pur-line); border-radius: 2px; padding-bottom: 1px; color: inherit; cursor: pointer; }
    mark[data-colour="blue"]   { background: rgba(37,99,235,0.10); border-bottom: 2px solid #2563EB; border-radius: 2px; padding-bottom: 1px; color: inherit; cursor: default; }

    /* ─── Tooltip ────────────────────────────────────────────────── */
    /* Tooltip structure:
         #hl-tooltip  ← outer box, no padding (overflow: hidden so the
                         severity strip's tinted background clips to
                         the tooltip's rounded corners)
          .tt-severity   ← colored strip at the top (hidden by default,
                             shown by Tooltip._renderSeverity in JS)
          .tt-body       ← rule + reason (takes the padding the
                             tooltip used to have directly)
          .tt-actions    ← action row (its own padding)
          .tt-diff       ← diff view for the blue/resolved state
    */
    #hl-tooltip {
      position: fixed;
      z-index: 200;
      background: var(--ink);
      color: var(--bg);
      border-radius: 10px;
      overflow: hidden;
      padding: 0;
      font-size: 13px;
      max-width: 440px;
      line-height: 1.5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.12s;
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.06),
        0 14px 38px -12px rgba(0,0,0,0.30),
        0 4px 10px -3px rgba(0,0,0,0.14);
    }
    #hl-tooltip.visible { opacity: 1; pointer-events: auto; }
    #hl-tooltip.visible.has-actions { pointer-events: auto; }

    /* ── Severity strip ───────────────────────────────────────
       Sits at the top of the tooltip. Hidden by default (the
       [hidden] attribute), shown and styled by
       Tooltip._renderSeverity(colour) in js/tools.js.
       Structure: dot + icon + label on a single row. Each
       variant tints its own background as a muted version of
       the severity color. */
    .tt-severity {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .tt-severity[hidden] { display: none; }
    .tt-severity .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      animation: tt-dot-breath 2.4s ease-in-out infinite;
      transform-origin: center;
    }
    .tt-severity .icon {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .tt-severity .icon svg { width: 100%; height: 100%; }
    .tt-severity .label { flex-shrink: 0; }

    /* Severity colour variants — bright label on a stronger tint so the
       label reads cleanly against the dark tooltip background. Labels
       are pushed toward near-white with just enough hue to telegraph
       the severity without losing legibility. */
    .tt-severity.red    { background: rgba(196, 68, 26, 0.30); color: #FFD9C7; }
    .tt-severity.red    .dot { background: #C4441A; box-shadow: 0 0 0 3px rgba(196,68,26,0.22); }
    .tt-severity.yellow { background: rgba(212, 163, 42, 0.30); color: #FFEDB0; }
    .tt-severity.yellow .dot { background: #D4A32A; box-shadow: 0 0 0 3px rgba(212,163,42,0.22); }
    .tt-severity.green  { background: rgba(26, 122, 74, 0.32);  color: #B8F0D4; }
    .tt-severity.green  .dot { background: #1A7A4A; box-shadow: 0 0 0 3px rgba(26,122,74,0.22); }
    .tt-severity.blue   { background: rgba(37, 99, 235, 0.32);  color: #CADCFF; }
    .tt-severity.blue   .dot { background: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.22); }
    .tt-severity.purple { background: rgba(107, 47, 160, 0.32); color: #E8CEF5; }
    .tt-severity.purple .dot { background: #6B2FA0; box-shadow: 0 0 0 3px rgba(107,47,160,0.22); }

    /* Stagger the breathing cycles so if multiple tooltips
       appear in quick succession their dots don't pulse in
       lockstep. Purely aesthetic — creates a subtle wave. */
    .tt-severity.red    .dot { animation-delay: 0s;    }
    .tt-severity.yellow .dot { animation-delay: -0.5s; }
    .tt-severity.green  .dot { animation-delay: -1.0s; }
    .tt-severity.blue   .dot { animation-delay: -1.5s; }
    .tt-severity.purple .dot { animation-delay: -2.0s; }

    /* 2.4s scale + opacity cycle. 88% scale mid, 72% opacity mid,
       ease-in-out so the transition is smooth both ways. */
    @keyframes tt-dot-breath {
      0%, 100% { opacity: 1;    transform: scale(1);    }
      50%      { opacity: 0.72; transform: scale(0.88); }
    }
    /* Respect OS-level reduced motion preferences. */
    @media (prefers-reduced-motion: reduce) {
      .tt-severity .dot { animation: none !important; }
    }

    /* ── Tooltip body (rule + reason) ─────────────────────── */
    /* Typography matches _design/tooltip-severity.html exactly:
       - .tt-rule: quiet label at cream (247,245,240) @ 62%.
         That's a warm off-white, not a dim tan — it reads as
         a subtle section header, not a competing line of text.
         Lower visual weight than the reason below so the
         hierarchy is label → reason → actions.
       - .tt-reason: pure white @ normal weight. Against the
         dark #1A1A18 tooltip body this is 20:1 contrast —
         fully readable at 13px sans-serif without needing
         extra font-weight that would flatten the label
         distinction.
       - Body padding mirrors the preview's 14/16/12 so the
         rule + reason sit centred in their container. */
    .tt-body { padding: 14px 16px 12px; }
    .tt-rule {
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
      color: rgba(247,245,240,0.62);
      text-transform: uppercase;
    }
    .tt-reason {
      color: #ffffff;
      font-weight: 400;
      margin-bottom: 0;
    }
    .tt-reason b, .tt-reason strong { font-weight: 600; }
    .tt-profile-note {
      display: none;
      margin-top: 10px;
      padding: 8px 10px;
      border: 1px solid rgba(247,245,240,0.16);
      border-radius: 8px;
      background: rgba(247,245,240,0.07);
      color: rgba(247,245,240,0.82);
      font-size: 12px;
      line-height: 1.45;
    }
    .tt-profile-note.visible {
      display: block;
    }
    .tt-profile-note strong {
      color: #fff;
      font-weight: 600;
    }
    /* Action row — Fix with AI + three dismiss-style buttons on a
       single line. flex-wrap: nowrap locks them into one row;
       white-space: nowrap on each child prevents mid-label wrap;
       the fix button is primary (colored), the three dismiss
       links sit to the right as a secondary cluster, so we use
       a margin-left:auto on the first .tt-dismiss (implemented
       via the generalised rule below) to push them against the
       right edge. Short labels guaranteed by the JS ("Mute
       phrase", "Mute rule"). */
    .tt-actions {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;
      /* #hl-tooltip no longer has padding, so the row carries
         its own. Border-top marks the boundary between body
         and actions. */
      padding: 10px 16px 14px;
      border-top: 1px solid rgba(247,245,240,0.15);
      white-space: nowrap;
    }
    .tt-actions > .tt-fix { flex-shrink: 0; }
    .tt-actions > .tt-fix + .tt-dismiss { margin-left: auto; }
    .tt-fix {
      font-size: 12px;
      font-weight: 500;
      padding: 5px 10px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      transition: opacity 0.12s;
    }
    .tt-fix:hover:not([disabled]) { opacity: 0.85; }
    .tt-fix[disabled] {
      opacity: 0.55;
      cursor: wait;
      pointer-events: none;
    }
    .tt-fix[data-loading="1"]::after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 8px;
      border: 2px solid rgba(255,255,255,0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: hyv-spin 800ms linear infinite;
      vertical-align: -1px;
    }
    @keyframes hyv-spin { to { transform: rotate(360deg); } }

    /* ─── Selection toolbar ──────────────────────────────────────
       One pill, two buttons. The whole container is positioned by
       JS (Tooltip._showSelToolbar) so the buttons stay glued
       together. data-action attributes route clicks via delegation. */
    #sel-toolbar {
      position: fixed;
      z-index: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      background: #1c1c1c;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      animation: sel-fade-in 0.12s ease-out;
      white-space: nowrap;
    }
    #sel-toolbar[hidden] { display: none; }
    #sel-toolbar button {
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Google Sans', -apple-system, sans-serif;
      background: transparent;
      color: #fff;
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
    }
    #sel-toolbar button:hover { background: #333; }
    /* Compose form in the comments tab */
    .ecs-compose {
      padding: 14px 16px;
      background: var(--surface-alt);
      border-radius: 8px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
    }
    .ecs-compose textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      background: #fff;
      resize: vertical;
      min-height: 60px;
      outline: none;
      line-height: 1.5;
    }
    .ecs-compose textarea:focus { border-color: var(--ink); }
    .ecs-compose-actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      justify-content: flex-end;
    }
    .ecs-compose-actions button {
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      border: none;
    }
    .ecs-compose-post {
      background: var(--ink);
      color: #fff;
    }
    .ecs-compose-cancel {
      background: transparent;
      color: var(--ink-muted);
      border: 1px solid var(--border) !important;
    }
    @keyframes sel-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .tt-dismiss {
      font-size: 12px;
      color: rgba(247,245,240,0.5);
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      padding: 0;
      white-space: nowrap;
    }
    .tt-dismiss:hover { color: var(--bg); }

    /* ─── Diff view (Fix with AI result) ────────────────────────── */
    /* Diff view for the blue/resolved state. Like .tt-actions,
       owns its own horizontal padding now that #hl-tooltip has
       no inner padding. */
    .tt-diff { padding: 10px 16px 14px; border-top: 1px solid rgba(247,245,240,0.15); }
    .tt-diff-original {
      text-decoration: line-through;
      color: rgba(247,245,240,0.4);
      font-size: 13px;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .tt-diff-suggested {
      text-decoration: underline;
      color: #6DEBA8;
      font-size: 13px;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    .tt-diff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .tt-accept {
      font-size: 12px; font-weight: 500; padding: 5px 10px;
      background: #1A7A4A; color: #fff; border: none;
      border-radius: 4px; cursor: pointer; font-family: 'Google Sans', sans-serif;
    }
    .tt-regen {
      font-size: 12px; font-weight: 600; padding: 5px 12px;
      background: #fff; color: #1A1A18; border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px; cursor: pointer; font-family: 'Google Sans', sans-serif;
    }
    .tt-regen:hover { background: #f0f0ee; }
    .tt-decline {
      font-size: 12px; padding: 5px 10px;
      background: rgba(247,245,240,0.1); color: var(--bg); border: none;
      border-radius: 4px; cursor: pointer; font-family: 'Google Sans', sans-serif;
    }

    /* ─── Fix everything button ────────────────────────────────── */
    .btn-fix-all, .btn-no-emdash {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 14px;
      cursor: pointer;
      font-family: 'Google Sans', sans-serif;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .btn-fix-all {
      margin-left: auto;
      border: 1px solid #C4441A;
      background: transparent;
      color: #C4441A;
    }
    .btn-fix-all:hover { background: #C4441A; color: #fff; }
    .btn-fix-all:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-no-emdash {
      margin-left: 6px;
      border: 1px solid #6B2FA0;
      background: transparent;
      color: #6B2FA0;
    }
    .btn-no-emdash:hover { background: #6B2FA0; color: #fff; }
    .btn-no-emdash:disabled { opacity: 0.5; cursor: not-allowed; }

    /* (old issue-item styles removed — now using issue-card) */

    /* ─── Responsive: show mobile gate under 768px ───────────────── */
    /* On mobile we force #screen-mobile visible and force every other
       screen hidden with !important. #screen-auth used to be missing
       from this list, which meant a mobile user hitting "Sign Up Now"
       on the marketing site would see the signup form stacked on top
       of the mobile gate (Router.showAuth sets inline display:flex,
       which beats any non-!important CSS rule). Same for the collab
       banner — if we're not on the editor screen, there's no point
       surfacing the lock UI on mobile. */
    @media (max-width: 767px) {
      #screen-mobile     { display: flex !important; }
      #screen-auth       { display: none !important; }
      #screen-onboarding { display: none !important; }
      #screen-editor     { display: none !important; }
      #screen-dashboard  { display: none !important; }
      #screen-analysis   { display: none !important; }
      #screen-billing    { display: none !important; }
      #screen-teams      { display: none !important; }
      #screen-access     { display: none !important; }
      #screen-mykey      { display: none !important; }
      #screen-apikeys    { display: none !important; }
      #screen-quote      { display: none !important; }
      #collab-banner     { display: none !important; }
    }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   COLLAB SOFT-LOCK — persistent top-right banner + read-only mode
   Shown when another teammate holds the document's edit lock, or
   when the current lock holder receives a "request edit access"
   ping, or when a save conflict is detected.
═══════════════════════════════════════════════════════════════ */
.collab-banner {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9997;
  background: rgba(26, 26, 24, 0.96);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 300px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
  animation: collab-slide-in 0.22s ease-out;
  font-family: 'Google Sans', -apple-system, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.collab-banner .name {
  font-weight: 600;
  color: #fff;
}
.collab-banner button {
  display: inline-block;
  margin-top: 10px;
  background: #fff;
  color: #1A1A18;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.collab-banner button:hover:not(:disabled) {
  background: #DEDAD2;
}
.collab-banner button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Editor read-only mode — applied to <body> when CollabLock sees the
   doc is held by another teammate. Dims the editor and disables the
   toolbar without removing them from the page. */
body.editor-readonly #editor {
  background: #FAFAF8;
  cursor: not-allowed;
}
body.editor-readonly #editor:focus {
  outline: none;
}
body.editor-readonly .editor-toolbar button,
body.editor-readonly #btn-run-check,
body.editor-readonly .format-pills button {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes collab-slide-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL TAB BAR — analysis / comments toggle in the right panel
═══════════════════════════════════════════════════════════════ */
#panel-tab-bar {
  display: flex;
  gap: 4px;
  padding: 14px 20px 0;
  justify-content: center;
}
.panel-tab {
  padding: 7px 24px;
  border-radius: var(--radius-pill);
  /* Default outline matches #btn-copy / .share-btn so the tabs
     read as first-class pill buttons, not bare text toggles. */
  border: 1px solid var(--border);
  font-family: 'Google Sans', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.panel-tab:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--border-hover);
}
.panel-tab.active {
  color: #fff;
  font-weight: 500;
  background: var(--ink);
  border-color: var(--ink);
}
.tab-count {
  display: inline-block;
  min-width: 16px; height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px; font-weight: 600;
  border-radius: 99px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
  /* Notification badge on the comments tab is a filled black circle
     to match the rest of the monochrome editor chrome. When the tab
     itself becomes active (filled black pill), the badge flips to a
     translucent white so it stays visible on the dark background. */
  background: var(--ink);
  color: #fff;
}
.panel-tab.active .tab-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ── Comment badge on nav button ──────────────────────────── */
.comment-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: var(--accent, #C4441A);
  color: #fff;
  font-size: 10px; font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: 99px;
  padding: 0 4px;
  pointer-events: none;
}

/* ── Comments section (right panel tab content) ───────────── */
#comments-section {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
}

/* Comment card */
.ecs-comment {
  padding: 14px 16px;
  background: var(--surface-alt);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.12s;
}
.ecs-comment:hover { background: #E5E2DB; }
.ecs-comment.resolved { opacity: 0.45; }
.ecs-comment.focused { box-shadow: 0 0 0 2px var(--ink); }

.ecs-anchor {
  display: block;
  font-size: 11px;
  color: var(--accent, #C4441A);
  font-style: italic;
  margin-bottom: 8px;
  padding: 5px 10px;
  background: rgba(196, 68, 26, 0.06);
  border-radius: 4px;
  border-left: 2px solid var(--accent, #C4441A);
  word-break: break-word;
}
.ecs-meta {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.ecs-author {
  font-weight: 600; font-size: 12px; color: var(--ink);
}
.ecs-time {
  font-size: 11px; color: var(--ink-muted);
}
.ecs-body-text {
  color: var(--ink); word-break: break-word;
}

/* Reply list */
.ecs-reply {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
}

/* Actions */
.ecs-actions {
  display: flex; gap: 10px; margin-top: 8px;
}
.ecs-actions button {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--ink-muted);
  padding: 2px 0; font-family: inherit;
  transition: color 0.15s;
}
.ecs-actions button:hover { color: var(--ink); }
.ecs-actions .danger:hover { color: #c0392b; }

/* Reply form */
.ecs-reply-form {
  margin-top: 10px;
  display: flex; gap: 6px;
}
.ecs-reply-form input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  outline: none;
}
.ecs-reply-form input:focus { border-color: var(--ink); }
.ecs-reply-form button {
  padding: 7px 14px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

/* Empty state */
.ecs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Comment anchors in editor (mild gray, shown on comments tab) ── */
.comment-anchor {
  background: rgba(0,0,0,0.06);
  border-bottom: 1px dashed rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 1px;
  padding: 1px 0;
}
.comment-anchor:hover {
  background: rgba(0,0,0,0.10);
}
.comment-anchor.active {
  background: rgba(0,0,0,0.13);
  border-bottom-color: rgba(0,0,0,0.4);
}

/* ── Hide analysis marks on the comments tab ───────────────────
   When the user switches to the comments tab, ALL analysis
   highlights (red/yellow/green <mark> bg + underlines) become
   invisible so only comment anchors are highlighted. The marks
   stay in the DOM — they're just visually transparent — so
   comment anchors (which may be children of marks when the user
   has run analysis on the same text) still render their own bg.
   The !important is needed because mark[data-colour="red"] etc.
   selectors have higher specificity than this generic rule.
*/
body.comments-tab mark[data-colour] {
  background: transparent !important;
  border-bottom-color: transparent !important;
  cursor: text !important;
}
/* But comment anchors nested inside hidden marks MUST still show.
   Reassert the comment-anchor styling with higher specificity. */
body.comments-tab mark[data-colour] .comment-anchor {
  background: rgba(0,0,0,0.07);
  border-bottom: 1px dashed rgba(0,0,0,0.25);
}
body.comments-tab mark[data-colour] .comment-anchor:hover {
  background: rgba(0,0,0,0.11);
}
body.comments-tab mark[data-colour] .comment-anchor.active {
  background: rgba(0,0,0,0.14);
  border-bottom-color: rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING BANNER — 3-step guided tour on first session.
   Shown above the editor until the user completes their first
   run check (at which point `hyv_first_check_done` is set in
   localStorage and the banner hides permanently).
═══════════════════════════════════════════════════════════════ */
#onboarding-banner {
  margin: 0 auto 16px;
  padding: 14px 20px;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(135deg, #1A1A18 0%, #2b2b28 100%);
  color: #fff;
  border-radius: 10px;
  font-family: 'Google Sans', -apple-system, sans-serif;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  animation: ob-fade-in 0.3s ease-out;
}
.ob-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ob-steps {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.ob-step {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.ob-step.done .ob-num {
  background: #1A7A4A;
  color: #fff;
}
.ob-step.done .ob-text {
  text-decoration: line-through;
  opacity: 0.55;
}
.ob-step.active .ob-num {
  background: #C4441A;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(196,68,26,0.28);
}
.ob-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.ob-text {
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}
.ob-dismiss {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  font-family: inherit;
  transition: color 0.15s;
  flex-shrink: 0;
}
.ob-dismiss:hover { color: #fff; }
@keyframes ob-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  #onboarding-banner { margin: 0 16px 12px; padding: 12px 14px; }
  .ob-steps { gap: 14px; }
  .ob-text { font-size: 12px; }
}


/* ════════════════════════════════════════════════════════════════
   FLUID FUNCTIONALISM — design principles ported to vanilla CSS

   Source: https://github.com/mickadesign/fluid-functionalism
   Tech-stack mismatch note: the original is React + Tailwind +
   Framer Motion. We run vanilla HTML/CSS/JS. A literal adoption is
   a rewrite we're not doing. This block ports the PRINCIPLES as
   additive vanilla CSS at the end of the file so the cascade
   handles precedence and it's trivial to revert.

   What this block adds:
     1. Three spring motion tokens (fast / moderate / slow) as
        CSS variables + a canonical ease curve. Ready for any
        future rule that wants consistent motion.
     2. Scale-on-press on every interactive surface that didn't
        already have one. No transition — the :active scale snaps
        in and out, which is what gives buttons tactile feedback.
     3. Proximity hover on lists via :has(). When you hover one
        sibling in a list of exclusive choices, the others dim so
        you see where your click will land BEFORE committing.
        Applied to the 5 lists in the app where it matters most.
     4. Spring enter animation for modals that used to display-
        toggle with no transition (.share-overlay, #history-modal).
        Exit reverts to display:none which is instant — the
        "exit is crisper than enter" rule from the animation guide.

   Zero HTML changes. Zero class renames. Zero existing-rule
   replacements. New block only.
════════════════════════════════════════════════════════════════ */

:root {
  /* Three spring durations — the original library uses literal
     Framer-Motion springs. CSS has no real springs, so we pair
     short durations with a sharp ease-out curve that approximates
     the settle behaviour of a critically-damped spring. */
  --spring-fast:          0.08s;  /* hover, fade, micro-interactions */
  --spring-moderate:      0.16s;  /* dropdowns, tooltips, toast       */
  --spring-slow:          0.24s;  /* modals, side panels              */
  /* Exits are ~25% shorter than their enter counterpart so the
     interface feels responsive on dismiss (per the animation
     guide: "faster exits make the interface feel alive"). */
  --spring-exit-fast:     0.06s;
  --spring-exit-moderate: 0.12s;
  --spring-exit-slow:     0.18s;
  /* Canonical ease. cubic-bezier(0.2, 0, 0, 1) is the same curve
     shadcn/ui + Tailwind use for their `ease-out` — fast start,
     gentle settle. Interruption-friendly. */
  --ease-fluid: cubic-bezier(0.2, 0, 0, 1);
}


/* ── Scale-on-press ─────────────────────────────────────────────
   Every button that currently lacks an :active scale gets one now.
   0.96 matches the make-interfaces-feel-better rule #12. No
   transition: scale-on-press should snap in and out; transitioning
   it feels laggy, not tactile.

   Listed explicitly (not via a utility class) so we don't catch
   random buttons that intentionally opt out (e.g. nav items or
   segmented controls where the :active state collides with
   drag/scroll gestures). */
#btn-run:active,
#btn-deep:active,
#btn-copy:active,
.share-btn:active,
.btn-outline:active,
.btn-fix-all:active,
.btn-no-emdash:active,
.bv-save:active,
.bv-cancel:active,
.bv-card-edit:active,
.access-copy-btn:active,
.access-unshare-btn:active,
.tb-btn:active,
.panel-toggle-btn:active,
.share-mode-btn:active,
.panel-tab:active,
.pill:active {
  transform: scale(0.96);
}


/* ── Proximity hover ────────────────────────────────────────────
   When a list container is being hovered AND one of its children
   is the hovered target, every OTHER sibling fades to 0.55 opacity
   so the user sees where the click will land before committing.
   The hovered sibling stays at full opacity.

   Requires :has() — Safari 15.4+, Chrome 105+, Firefox 121+.
   Gracefully no-ops on older browsers (the underlying hover
   effects still work; only the proximity dim disappears).

   Applied to the 5 interactive lists where it has the highest
   signal-to-noise ratio:
     - Issues panel   — editor's red/yellow/green/purple cards
     - Share picker   — 3-mode segmented control (private/view/comment)
     - Panel tabs     — analysis / comments toggle
     - Format pills   — email / tweet / linkedin / etc.
     - History modal  — list of past analyses

   NOT applied to: blog cards (no list in the app), brand voice
   cards (each card has its own edit button inside, proximity dim
   would fight with that). */

/* Scope the opacity transition to the affected elements so the
   dim feels motion-matched with the rest of the block. Additive:
   doesn't replace any existing transition rule because none of
   these elements currently declare opacity in their transition
   property list. */
#issues-section > .issue-card,
.share-mode-picker > .share-mode-btn,
#panel-tab-bar > .panel-tab,
#format-pills > .pill,
#history-list > .history-item {
  transition-property: opacity, background-color, color, border-color, transform, box-shadow;
  transition-duration: var(--spring-fast);
  transition-timing-function: var(--ease-fluid);
}

#issues-section:has(.issue-card:hover)    > .issue-card:not(:hover),
.share-mode-picker:has(.share-mode-btn:hover) > .share-mode-btn:not(:hover),
#panel-tab-bar:has(.panel-tab:hover)      > .panel-tab:not(:hover),
#format-pills:has(.pill:hover)            > .pill:not(:hover),
#history-list:has(.history-item:hover)    > .history-item:not(:hover) {
  opacity: 0.55;
}


/* ── Modal enter animations ─────────────────────────────────────
   Both .share-overlay and #history-modal used to pop in via plain
   display:none → display:flex with no transition. Add a spring
   fade-up so the enter reads as intentional. Exit still uses
   display:none, which is instant — that's the "faster exit" rule.

   Keyframes (not transitions) because CSS transitions don't fire
   when the element is coming from display:none. */
@keyframes ff-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ff-fade-up {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.share-overlay.open,
#history-modal.open {
  animation: ff-fade-in var(--spring-slow) var(--ease-fluid);
}
/* The overlay fades; the card inside fades-and-lifts. Two
   animations in parallel so backdrop and card each feel correct.
   Target the direct child container rather than every descendant
   so we don't accidentally animate nested widgets. */
.share-overlay.open > .share-panel,
#history-modal.open > .history-content,
#history-modal.open > .history-panel {
  animation: ff-fade-up var(--spring-slow) var(--ease-fluid);
}

/* ═══════════════════════════════════════════════════════════════════
   ZEN MODE
   body.zen-on hides all chrome and re-skins the existing #editor
   in place — no DOM cloning, zero sync needed.
═══════════════════════════════════════════════════════════════════ */

.btn-zen-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.zen-mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.46;
  flex: 0 0 auto;
}

/* ── hide chrome when zen is on ── */
body.zen-on #editor-nav,
body.zen-on #panel-right,
body.zen-on #sidebar,
body.zen-on #sidebar-overlay,
body.zen-on #format-pills,
body.zen-on #format-tip,
body.zen-on #onboarding-banner,
body.zen-on #editor-toolbar,
body.zen-on #editor-toolbar-shell,
body.zen-on #editor-footer,
body.zen-on #update-banner,
body.zen-on #drift-popup,
body.zen-on .fb-popup,
body.zen-on #sel-toolbar,
body.zen-on #screen-mobile,
body.zen-on #style-mimicry-banner { display: none !important; }

body.editor-open #neetochat-root,
body.zen-on #neetochat-root { display: none !important; }

/* remove sidebar body padding */
body.zen-on { padding-left: 0 !important; transition: none !important; }

/* ── hide sidebar during onboarding ── */
body.onboarding-active #sidebar,
body.onboarding-active #sidebar-overlay { display: none !important; }
body.onboarding-active { padding-left: 0 !important; margin-left: 0 !important; }

/* ── zen scroll stage (the full-screen writing surface) ── */
#zen-scroll-stage {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  overflow-y: auto;
  padding: 96px 24px 200px;
  background: transparent;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4,0,0.2,1);
  /* mask the text itself so it dissolves into the page edge — no
     overlay sitting on top, no color band. text just fades out. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 88px,
    #000 calc(100% - 220px),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 88px,
    #000 calc(100% - 220px),
    transparent 100%);
}
body.zen-on #zen-scroll-stage { display: block; }
#zen-scroll-stage.revealed { opacity: 1; }

/* editor column inside scroll stage */
#zen-editor-col {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* doc title at the top of the zen column — synced to nav-doc-title */
#zen-doc-title {
  display: none;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(26,26,24,0.92);
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  caret-color: #C4441A;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
body.zen-on #zen-doc-title { display: block; }
#zen-doc-title:empty:before {
  content: attr(data-placeholder);
  color: rgba(26,26,24,0.22);
  pointer-events: none;
}
body.zen-focus #zen-doc-title {
  opacity: 0.18;
  filter: blur(0.5px);
  transition: opacity 0.5s, filter 0.5s;
}
body.zen-focus #zen-doc-title.zen-active-para,
body.zen-focus #zen-doc-title:focus {
  opacity: 1;
  filter: none;
}

/* the actual #editor gets moved into zen-editor-col by JS */
body.zen-on #editor {
  font-family: 'Google Sans', system-ui, sans-serif !important;
  font-size: 1.0625rem !important;
  line-height: 1.85 !important;
  color: rgba(26,26,24,0.80) !important;
  caret-color: #C4441A !important;
  min-height: 200px;
  outline: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* kill all analysis highlights/underlines in zen */
body.zen-on #editor mark,
body.zen-on #editor [class*="hi-"] {
  color: inherit !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none !important;
  cursor: inherit !important;
}
body.zen-on #editor u { text-decoration: none !important; }

/* headings in zen */
body.zen-on #editor h1,
body.zen-on #editor h2,
body.zen-on #editor h3 {
  font-family: 'Google Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: rgba(26,26,24,0.90) !important;
}

/* focus mode — dim every direct block child of #editor */
body.zen-focus #editor > * {
  opacity: 0.18;
  filter: blur(0.5px);
  transition: opacity 0.45s ease, filter 0.45s ease;
}
body.zen-focus #editor > .zen-active-para,
body.zen-focus #editor > *:focus-within {
  opacity: 1;
  filter: none;
}

/* ── breathing background ── */
#zen-bg-layer {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  pointer-events: none;
  overflow: hidden;
}
body.zen-on #zen-bg-layer { display: block; }
.zen-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.zen-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.zen-orb-warm {
  width: 600px; height: 600px;
  top: -160px; left: -200px;
  background: radial-gradient(circle, rgba(240,180,120,0.22) 0%, transparent 70%);
  filter: blur(80px);
  animation: zen-orb-a 26s ease-in-out infinite alternate;
}
.zen-orb-cool {
  width: 500px; height: 500px;
  bottom: -120px; right: -150px;
  background: radial-gradient(circle, rgba(180,200,240,0.15) 0%, transparent 70%);
  filter: blur(80px);
  animation: zen-orb-b 32s ease-in-out infinite alternate;
}
@keyframes zen-orb-a {
  from { transform: translate(0,0) translateZ(0); }
  to   { transform: translate(70px,50px) translateZ(0); }
}
@keyframes zen-orb-b {
  from { transform: translate(0,0) translateZ(0); }
  to   { transform: translate(-50px,35px) translateZ(0); }
}

/* body background in zen */
body.zen-on { background: #EDEAE3 !important; }
body.zen-on #screen-editor { background: transparent !important; }

/* ── portal overlay (opacity-only fade out = zero stutter) ── */
#zen-portal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 210;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,252,245,1) 0%,
    rgba(240,234,220,1) 60%,
    rgba(220,215,205,1) 100%
  );
  opacity: 1;
  pointer-events: none;
  transition: opacity 2.2s cubic-bezier(0.4,0,0.2,1);
}
body.zen-on #zen-portal-overlay { display: block; }
#zen-portal-overlay.revealed { opacity: 0; }

/* ── × exit button ── */
#btn-zen-exit {
  display: none;
  position: fixed; top: 22px; right: 26px; z-index: 220;
  width: 30px; height: 30px;
  border: none;
  background: rgba(26,26,24,0.06);
  border-radius: 50%;
  cursor: pointer;
  align-items: center; justify-content: center;
  color: rgba(26,26,24,0.32);
  transition: background 0.2s, color 0.2s, opacity 1.4s 1.6s;
  opacity: 0;
}
body.zen-on #btn-zen-exit { display: flex; }
#btn-zen-exit.revealed { opacity: 1; }
#btn-zen-exit:hover { background: rgba(26,26,24,0.10); color: rgba(26,26,24,0.75); }

/* legacy fade-overlay nodes — kept hidden (mask-image on the scroll
   stage replaces them). do not re-introduce overlays — they leave a
   visible band where overlay alpha != bg color. */
#zen-fade-top,
#zen-fade-bottom { display: none !important; }

/* ── bottom-right pill ── */
#zen-pill-bar {
  display: none;
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 220;
  align-items: center; gap: 0;
  white-space: nowrap;
  user-select: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(26,26,24,0.72);
  padding: 7px 8px 7px 18px;
  background: rgba(255,253,248,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(26,26,24,0.07);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}
body.zen-on #zen-pill-bar { display: flex; }
#zen-pill-bar.revealed { opacity: 0.92; }
#zen-pill-bar.awake    { opacity: 1 !important; }
#zen-pill-bar.hushed   { opacity: 0 !important; transition: opacity 1.2s ease; }
#zen-pill-bar:hover    { opacity: 1 !important; }
#zen-pill-wc, #zen-pill-read, #zen-pill-match {
  color: rgba(26,26,24,0.72);
}
.zen-pill-dot {
  color: rgba(26,26,24,0.28);
  padding: 0 9px;
}
/* hide the dot right before the focus button — it's now a real button */
.zen-pill-dot:nth-of-type(3) {
  display: none;
}
#zen-focus-btn {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(26,26,24,0.70);
  background: rgba(26,26,24,0.05);
  border: 1px solid rgba(26,26,24,0.06);
  padding: 4px 12px;
  margin-left: 12px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}
#zen-focus-btn:hover {
  background: rgba(26,26,24,0.09);
  color: var(--ink, #1A1A18);
  border-color: rgba(26,26,24,0.10);
}
#zen-focus-btn.active {
  color: var(--accent, #C4441A);
  background: rgba(196,68,26,0.10);
  border-color: rgba(196,68,26,0.22);
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────
   Samples uploader (V2 voice profile)
   Used by onboarding "show us how you actually write" step and
   the BrandVoice tab samples panel. See js/samples_uploader.js.
   ──────────────────────────────────────────────────────────────── */
.su-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink, #1A1A18);
}
.su-header { display: flex; flex-direction: column; gap: 4px; }
.su-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.su-sub { font-size: 14px; color: var(--ink-muted, #6B6B64); line-height: 1.55; }
.su-dropzone {
  border: 1.5px dashed var(--border, #DEDAD2);
  border-radius: 8px; padding: 20px; text-align: center;
  font-size: 13px; color: var(--ink-muted, #6B6B64);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.su-dropzone:hover, .su-dropzone.is-over {
  border-color: var(--ink, #1A1A18);
  background: var(--surface-alt, #EDEAE3);
}
.su-list { display: flex; flex-direction: column; gap: 12px; }
.su-card {
  border: 1px solid var(--border, #DEDAD2);
  border-radius: 8px; padding: 12px 14px;
  background: var(--bg, #FFFFFF);
}
.su-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.su-card-label { font-size: 13px; font-weight: 600; }
.su-wordcount { font-size: 12px; color: var(--ink-muted, #6B6B64); }
.su-wordcount-low { color: var(--accent, #C4441A); }
.su-remove {
  margin-left: auto; background: transparent; border: none;
  font-size: 12px; color: var(--ink-muted, #6B6B64);
  cursor: pointer; font-family: inherit; padding: 4px 8px;
}
.su-remove:hover { color: var(--accent, #C4441A); }
.su-textarea {
  width: 100%; min-height: 110px; padding: 10px 12px;
  border: 1px solid var(--border, #DEDAD2); border-radius: 6px;
  font-size: 13px; font-family: inherit; line-height: 1.55;
  color: var(--ink, #1A1A18); background: var(--bg, #FFFFFF);
  resize: vertical; outline: none;
}
.su-textarea:focus { border-color: var(--ink, #1A1A18); }
.su-add {
  align-self: flex-start; background: transparent;
  border: 1px dashed var(--border, #DEDAD2); border-radius: 6px;
  padding: 8px 14px; font-size: 13px;
  color: var(--ink-muted, #6B6B64); cursor: pointer; font-family: inherit;
}
.su-add:hover:not(:disabled) { border-color: var(--ink, #1A1A18); color: var(--ink, #1A1A18); }
.su-footer { display: flex; align-items: center; gap: 12px; padding-top: 6px; flex-wrap: wrap; }
.su-status { flex: 1 1 auto; font-size: 12px; color: var(--ink-muted, #6B6B64); min-width: 0; }
.su-submit {
  background: var(--ink, #1A1A18); color: #fff; border: none;
  border-radius: 20px; padding: 10px 22px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.12s, opacity 0.12s;
}
.su-submit:hover:not(:disabled) { background: #333; }
.su-submit:disabled { cursor: not-allowed; }
.su-skip {
  background: transparent; color: var(--ink-muted, #6B6B64);
  border: none; font-size: 13px; padding: 8px 12px;
  cursor: pointer; font-family: inherit;
}
.su-skip:hover { color: var(--ink, #1A1A18); }

/* V2 BrandVoice samples panel */
.bv-samples-panel { display: flex; flex-direction: column; gap: 14px; }
.bv-samples-counts {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.bv-samples-count { font-weight: 600; }
.bv-samples-hint, .bv-samples-hint-ok { font-size: 12px; color: var(--ink-muted, #6B6B64); }
.bv-samples-hint-ok { color: #1A7A4A; }
.bv-samples-list { display: flex; flex-direction: column; gap: 8px; }
.bv-sample-card {
  border: 1px solid var(--border, #DEDAD2);
  border-radius: 8px; padding: 10px 12px;
  background: var(--bg, #FFFFFF);
}
.bv-sample-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.bv-sample-meta { font-size: 11px; color: var(--ink-muted, #6B6B64); text-transform: lowercase; }
.bv-sample-remove {
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  font-size: 11px; color: var(--ink-muted, #6B6B64); padding: 2px 6px;
}
.bv-sample-remove:hover { color: var(--accent, #C4441A); }
.bv-sample-preview {
  font-size: 13px; color: var(--ink, #1A1A18); line-height: 1.5;
  max-height: 60px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.bv-samples-uploader { padding-top: 4px; }
.bv-samples-actions { padding-top: 4px; }
.bv-reanalyse {
  background: var(--ink, #1A1A18); color: #fff; border: none;
  border-radius: 20px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.12s;
}
.bv-reanalyse:hover:not(:disabled) { background: #333; }
.bv-reanalyse:disabled { cursor: not-allowed; }
.bv-samples-delete-all {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border, #DEDAD2);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--ink-muted, #6B6B64);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.bv-samples-delete-all:hover {
  color: var(--accent, #C4441A);
  border-color: var(--accent, #C4441A);
}
.bv-samples-banner {
  background: var(--surface-alt, #EDEAE3);
  border: 1px solid var(--border, #DEDAD2);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.bv-samples-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A1A18);
}
.bv-samples-banner-body {
  font-size: 13px;
  color: var(--ink-muted, #6B6B64);
  line-height: 1.5;
}
.bv-samples-banner-dismiss {
  align-self: flex-start;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--ink-muted, #6B6B64);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}
.bv-samples-banner-dismiss:hover { color: var(--ink, #1A1A18); }

/* V2: inline editor "use as voice sample" button. Mirrors share-btn
   styling so it sits cleanly next to share without visual noise. */
.editor-sample-btn {
  background: transparent;
  border: 1px solid var(--border, #DEDAD2);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #1A1A18);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
  display: inline-flex;
  align-items: center;
}
.editor-sample-btn:hover:not(:disabled) {
  border-color: var(--ink, #1A1A18);
  background: var(--surface-alt, #EDEAE3);
}
.editor-sample-btn:disabled { opacity: 0.5; cursor: progress; }

/* V2 drift-proposal card — recurring lesson signals */
.bv-drift-card {
  background: #FFF7E8;
  border: 1px solid #E8D8B0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-drift-text { font-size: 14px; color: var(--ink, #1A1A18); font-weight: 500; }
.bv-drift-meta { font-size: 11px; color: var(--ink-muted, #6B6B64); }
.bv-drift-ack {
  align-self: flex-start;
  background: var(--ink, #1A1A18); color: #fff; border: none;
  border-radius: 14px; padding: 5px 14px;
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  margin-top: 4px;
}
.bv-drift-ack:hover:not(:disabled) { background: #333; }

/* BrandVoice production workbench redesign */
#screen-voice-profile.open {
  display: flex;
}
body:not(.sidebar-collapsed) #screen-voice-profile.open {
  left: 240px;
}
#screen-voice-profile .bv-nav {
  display: none !important;
}
#screen-voice-profile .bv-nav .burger-btn {
  display: flex !important;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
#screen-voice-profile .bv-nav .an-nav-title {
  display: none;
}
#screen-voice-profile .bv-body {
  align-items: center;
  padding: 22px 28px 104px;
}
#screen-voice-profile .bv-container {
  width: 100%;
  max-width: 1040px;
}
.bv-page-head {
  max-width: 680px;
  margin-bottom: 28px;
}
.bv-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.bv-page-title,
.bv-section-title {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}
.bv-page-lead,
.bv-section-note {
  margin: 0;
  max-width: 64ch;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}
.bv-page-lead {
  font-size: 14px;
  line-height: 1.58;
}
.bv-section-head {
  display: block;
  max-width: 680px;
  margin: 34px 0 12px;
}
.bv-readiness-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  gap: 0;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: none;
}
.bv-readiness-score {
  grid-column: 2;
  grid-row: 1;
  min-height: auto;
  padding: 16px;
  border-right: 0;
  background: var(--ink);
  color: var(--bg);
  justify-content: center;
  gap: 14px;
}
.bv-readiness-kicker {
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.bv-readiness-num {
  color: var(--bg);
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: 0;
}
.bv-readiness-state {
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.35;
}
.bv-readiness-state::before { display: none; }
.bv-readiness-main {
  grid-column: 1;
  grid-row: 1;
  padding: 16px;
  border-right: 1px solid var(--border);
  gap: 14px;
}
.bv-readiness-title {
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}
.bv-readiness-copy {
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.5;
}
.bv-readiness-bar {
  height: 7px;
  background: rgba(255,255,255,0.18);
  order: 5;
}
.bv-readiness-score .bv-readiness-bar,
.bv-readiness-score + .bv-readiness-main .bv-readiness-bar { background: var(--border); }
.bv-readiness-fill {
  background: var(--accent);
}
.bv-readiness-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bv-readiness-check,
.bv-readiness-check:nth-child(1),
.bv-readiness-check:nth-child(2),
.bv-readiness-check:nth-child(3),
.bv-readiness-check:nth-child(4) {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(26,122,74,0.18);
  border-radius: 8px;
  background: var(--paper, #fbfaf7);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}
.bv-readiness-check.done { color: var(--ink-muted); }
.bv-readiness-check::before,
.bv-readiness-check.done::before {
  width: 7px;
  height: 7px;
  background: #1A7A4A;
}
.bv-answer-list {
  display: block;
  margin: 0;
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.bv-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: auto;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bv-card:first-child { border-top: 0; }
.bv-card:hover {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
.bv-card-question {
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.bv-card-main { min-width: 0; }
.bv-card-answer {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.28;
  font-weight: 700;
}
.bv-card-desc {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.42;
}
.bv-card-edit {
  position: static;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg);
}
.bv-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: stretch;
}
.bv-textarea-panel,
.bv-save-notes {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.bv-textarea-panel {
  min-height: 292px;
  padding: 14px;
}
.bv-summary-textarea {
  min-height: 264px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--bg) 31px, rgba(222,218,210,0.58) 32px);
  background-size: 100% 32px;
  color: var(--ink);
  font-size: 14px;
  line-height: 32px;
}
.bv-summary-textarea:focus { border-color: transparent; }
.bv-save-notes {
  padding: 14px;
  background: #fbfaf7;
}
.bv-note-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}
.bv-note-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}
.bv-note-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
}
.bv-note-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.bv-memory-panel {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.bv-memory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.bv-memory-stat {
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfaf7;
}
.bv-memory-stat-num {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.bv-memory-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bv-memory-col,
.bv-memory-col:first-child,
.bv-memory-col:last-child {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfaf7;
  color: var(--ink);
}
.bv-memory-col::before { display: none; }
.bv-memory-col-title { font-weight: 700; }
.bv-memory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 0;
}
.bv-memory-row:first-of-type { border-top: 1px solid var(--border); }
.bv-memory-row:last-child { padding-bottom: 0; }
.bv-memory-row-rule { white-space: normal; }
.bv-memory-foot { display: none; }
.bv-drift-card {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #E8D8B0;
  border-radius: 8px;
  background: #FFF7E8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.bv-drift-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9A6A00;
}
.bv-drift-title {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.bv-drift-text {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.42;
  font-weight: 400;
}
.bv-drift-meta {
  margin-top: 2px;
  color: var(--ink-muted);
}
.bv-drift-ack {
  align-self: center;
  margin: 0;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--bg);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}
.bv-samples-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.bv-samples-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.bv-samples-count {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bv-samples-hint-ok {
  color: #1A7A4A;
  font-weight: 700;
}
.bv-samples-delete-all {
  min-height: 34px;
  margin-left: auto;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--accent);
  font-size: 13px;
}
.bv-samples-list {
  display: grid;
  gap: 9px;
}
.bv-sample-card {
  padding: 10px 12px;
  border-radius: 8px;
}
.bv-sample-preview {
  max-height: none;
  white-space: normal;
}
.bv-samples-uploader {
  padding-top: 2px;
}
.bv-reanalyse {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
}
.bv-footer {
  left: 0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
}
.bv-footer::before {
  content: "voice profile changes stay local until saved";
  color: var(--ink-muted);
  font-size: 12px;
}
.bv-save,
.bv-cancel {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
}
.bv-loading,
.bv-success {
  padding: 100px 0 80px;
}
@media (max-width: 920px) {
  #screen-voice-profile.open {
    left: 0;
  }
  .bv-readiness-card,
  .bv-edit-grid {
    grid-template-columns: 1fr;
  }
  .bv-readiness-score {
    grid-column: 1;
    grid-row: 2;
  }
  .bv-readiness-main {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .bv-footer { left: 0; }
}
@media (max-width: 640px) {
  #screen-voice-profile .bv-body { padding: 18px 16px 108px; }
  .bv-card {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .bv-card-edit { width: 100%; }
  .bv-memory-stats,
  .bv-memory-cols {
    grid-template-columns: 1fr;
  }
  .bv-drift-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bv-drift-ack {
    grid-column: 1 / -1;
    width: 100%;
  }
  .bv-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .bv-footer::before { text-align: center; }
}

/* ────────────────────────────────────────────────────────────────
   Insights bento — /app/analysis top section.
   Lifted from _design/insights-bento.html (the approved mockup).
   Class prefix `ins-` to avoid collisions. Monochrome palette
   except the score-trend chart, which keeps a green tier ramp.
   ──────────────────────────────────────────────────────────────── */
.ins-wrap {
  --ins-ink:          #1A1A18;
  --ins-ink-muted:    #6B6B64;
  --ins-ink-subtle:   #9C9C94;
  --ins-ink-faint:    #BFBCB6;
  --ins-border:       #DEDAD2;
  --ins-surface-alt:  #EDEAE3;
  --ins-surface-soft: #F4F1EB;
  --ins-chart-1: #c5cfb8;
  --ins-chart-2: #a4b890;
  --ins-chart-3: #6e8e4f;
  --ins-chart-4: #1A7A4A;
  margin-bottom: 28px;
  font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ins-ink);
}
.ins-canvas {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid var(--ins-border);
}
.ins-header {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
}
.ins-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ins-ink);
}
.ins-subtitle {
  font-size: 13px;
  color: var(--ins-ink-muted);
  margin-top: 2px;
}
.ins-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.ins-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--ins-border);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ins-ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.ins-action-btn:hover { border-color: var(--ins-ink); background: var(--ins-surface-alt); }
.ins-action-btn.primary { background: var(--ins-ink); color: #fff; border-color: var(--ins-ink); }
.ins-action-btn.primary:hover { background: #2c2c2a; }
.ins-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.ins-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 10px;
}
.ins-card {
  background: var(--ins-surface-alt);
  border-radius: 12px;
  padding: 20px 22px;
  overflow: hidden;
  position: relative;
}
.ins-card-label {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ins-ink-muted);
  margin-bottom: 10px;
  font-weight: 600;
}

/* card 2 — voice profile (top-left, 2x2) */
.ins-card-voice-profile {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ins-surface-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 232px;
}
.ins-vp-archetype {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--ins-ink);
}
.ins-vp-paragraph {
  font-size: 14px;
  color: var(--ins-ink);
  line-height: 1.6;
  max-width: 38ch;
}

/* card 10 — peak time (top-right, 2x2) */
.ins-card-peak-time {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ins-surface-alt);
}
.ins-peak-headline {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.ins-peak-body {
  font-size: 14px;
  color: var(--ins-ink);
  line-height: 1.6;
  max-width: 38ch;
}

/* 1×1 stat cards */
.ins-stat-card { display: flex; flex-direction: column; }
.ins-stat-big {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ins-ink);
  line-height: 1.15;
  word-wrap: break-word;
}
.ins-stat-small {
  font-size: 12.5px;
  color: var(--ins-ink-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.ins-stat-quote .ins-stat-big {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* card 16 — ai accept % gauge (monochrome) */
.ins-gauge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}
.ins-gauge-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ins-ink);
}
.ins-gauge-pct {
  font-size: 16px;
  color: var(--ins-ink-muted);
  font-weight: 600;
}
.ins-gauge-bar {
  height: 5px;
  background: var(--ins-border);
  border-radius: 999px;
  overflow: hidden;
}
.ins-gauge-fill {
  height: 100%;
  background: var(--ins-ink);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* score trend (bottom-left, 2 cols) — keeps the green ramp */
.ins-card-score-trend {
  grid-column: span 2;
  background: var(--ins-surface-alt);
}
.ins-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.ins-chart-title {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ins-ink-muted);
  font-weight: 600;
}
.ins-chart-summary {
  font-size: 12px;
  color: var(--ins-ink-muted);
}
.ins-chart-summary b { color: var(--ins-chart-4); font-weight: 600; }
.ins-bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  align-items: end;
  height: 76px;
  margin-top: 4px;
}
.ins-bar { border-radius: 3px 3px 0 0; }
.ins-bar.t-1 { background: var(--ins-chart-1); }
.ins-bar.t-2 { background: var(--ins-chart-2); }
.ins-bar.t-3 { background: var(--ins-chart-3); }
.ins-bar.t-4 { background: var(--ins-chart-4); }

/* identity (bottom-right, 2 cols, dark anchor) */
.ins-card-identity {
  grid-column: span 2;
  background: var(--ins-ink);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 12px;
}
.ins-identity-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #2c2c2a;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12);
}
.ins-identity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ins-identity-text { min-width: 0; flex: 1; }
.ins-identity-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.ins-identity-stats {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  line-height: 1.4;
}

/* watermark — OUTSIDE the bento, bottom-left, subtle */
.ins-watermark {
  margin-top: 14px;
  padding-left: 4px;
  font-size: 11px;
  color: var(--ins-ink-subtle);
  letter-spacing: 0.01em;
}
.ins-watermark b { color: var(--ins-ink-muted); font-weight: 600; }

/* responsive */
@media (max-width: 760px) {
  .ins-bento { grid-template-columns: repeat(2, 1fr); }
  .ins-card-voice-profile,
  .ins-card-peak-time,
  .ins-card-score-trend,
  .ins-card-identity { grid-column: span 2; grid-row: auto; }
  .ins-canvas { padding: 22px; }
  .ins-locked-header { gap: 14px; }
  .ins-lock-seal { margin-left: 0; }
  .ins-canvas-locked .ins-progress-rows { grid-template-columns: 1fr; }
  .ins-progress-head { align-items: flex-start; }
}

/* ── locked state — final-grid preview + progress bars ── */
.ins-locked {
  background: #fff;
  border: 1px solid var(--ins-border);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.ins-locked-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ins-ink);
  margin-bottom: 6px;
}
.ins-locked-sub {
  font-size: 13px;
  color: var(--ins-ink-muted);
  margin-bottom: 22px;
}
.ins-progress-rows { display: flex; flex-direction: column; gap: 14px; }
.ins-canvas-locked .ins-progress-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: -4px 0 18px;
}
.ins-progress-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ins-canvas-locked .ins-progress-row {
  background:
    linear-gradient(135deg, rgba(196,68,26,0.10), rgba(255,255,255,0) 42%),
    #fff;
  border: 1px solid rgba(26,26,24,0.16);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(26,26,24,0.07);
  justify-content: space-between;
}
.ins-progress-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 36px;
  font-size: 14px;
}
.ins-progress-head .ins-progress-label {
  color: var(--ins-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-progress-head .ins-progress-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--ins-ink);
  background: var(--ins-surface-soft);
  border: 1px solid rgba(26,26,24,0.08);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ins-progress-bar {
  height: 8px;
  background: #DEDAD2;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(26,26,24,0.08);
}
.ins-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ins-ink), var(--accent, #C4441A));
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset;
}
.ins-locked-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ins-ink-subtle);
  line-height: 1.5;
}
.ins-canvas-locked {
  background:
    linear-gradient(180deg, rgba(244,241,235,0.72), rgba(255,255,255,0) 44%),
    #fff;
}
.ins-locked-header {
  align-items: flex-start;
}
.ins-lock-seal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(198,158,72,0.50);
  background: linear-gradient(135deg, #171512, #2a2113 62%, #171512);
  border-radius: 999px;
  color: #f5dfad;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(26,26,24,0.13), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.ins-lock-seal svg {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}
.ins-lock-seal span {
  position: relative;
  z-index: 1;
}
.ins-lock-seal::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -40%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(245,223,173,0.28), transparent);
  transform: rotate(18deg);
  animation: ins-lock-glint 3.8s ease-in-out infinite;
}
@keyframes ins-lock-glint {
  0%, 55% { left: -45%; opacity: 0; }
  68% { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-lock-seal::after { animation: none; display: none; }
}
.ins-bento-locked {
  position: relative;
}
.ins-card-locked {
  position: relative;
  border: 1px solid rgba(26,26,24,0.06);
}
.ins-card-locked .ins-vp-archetype,
.ins-card-locked .ins-vp-paragraph,
.ins-card-locked .ins-peak-headline,
.ins-card-locked .ins-peak-body,
.ins-card-locked .ins-stat-big,
.ins-card-locked .ins-stat-small,
.ins-card-locked .ins-gauge,
.ins-card-locked .ins-gauge-bar,
.ins-card-locked .ins-chart-summary,
.ins-card-locked .ins-bars,
.ins-card-locked .ins-identity-name,
.ins-card-locked .ins-identity-stats,
.ins-card-locked .ins-identity-avatar {
  opacity: 0.58;
  filter: blur(1.3px);
  user-select: none;
}
.ins-card-locked .ins-card-label,
.ins-card-locked .ins-chart-title {
  opacity: 0.92;
}
.ins-card-lock {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26,26,24,0.92);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(26,26,24,0.12);
  pointer-events: none;
}
.ins-card-lock svg {
  width: 14px;
  height: 14px;
}

/* unlock celebration banner */
.ins-unlocked-banner {
  background: var(--ins-ink);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ins-unlocked-banner-text { flex: 1; font-size: 13.5px; }
.ins-unlocked-banner-text b { font-weight: 600; }
.ins-unlocked-banner-dismiss {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.ins-unlocked-banner-dismiss:hover { background: rgba(255,255,255,0.08); }

/* V2 rewrite low-confidence badge inside the diff tooltip */
.tt-diff-lowconf {
  font-size: 11px;
  color: var(--accent, #C4441A);
  background: rgba(196, 68, 26, 0.08);
  border: 1px solid rgba(196, 68, 26, 0.20);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-weight: 500;
}

/* block grammarly + quillbot overlays inside the editor */
#writing-area grammarly-extension,
#writing-area grammarly-desktop-integration,
#writing-area [data-grammarly-shadow-root],
#writing-area .gr_-editor,
#writing-area [class*="qb-extension"],
#writing-area [id^="qb-"],
#writing-area [class*="quillbot-"] {
  display: none !important;
}