#demo-banner {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 9000;
      background: linear-gradient(90deg, #6c63ff, #48b1bf);
      color: #fff;
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 20px; font-size: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    #demo-banner.hidden { display: none; }
    .demo-banner-cta {
      background: #fff; color: #6c63ff;
      border: none; border-radius: 20px;
      padding: 6px 18px; font-weight: 700; cursor: pointer; flex-shrink: 0;
    }
    .demo-banner-cta:hover { background: #f0eeff; }
    #demo-signup-overlay { z-index: 9100; }
    .demo-signup-perks { list-style: none; margin: 14px 0; padding: 0; text-align: left; }
    .demo-signup-perks li::before { content: "✓ "; color: #6c63ff; font-weight: 700; }
    .demo-signup-perks li { margin: 8px 0; font-size: 14px; color: #555; }
    body.demo-active { padding-top: 44px; }

    /* ── Flashcards ── */
    .flash-view { display:flex; flex-direction:column; height:100%; background:var(--bg-secondary,#f7f7f6); }
    .flash-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; }
    .flash-counter { margin-left:auto; font-size:13px; color:var(--muted); font-weight:500; }
    .flash-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; gap:20px; overflow:auto; }
    .flash-card-wrap { perspective:900px; width:100%; max-width:540px; min-height:220px; cursor:pointer; }
    .flash-card { width:100%; min-height:220px; position:relative; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.4,0,.2,1); border-radius:16px; }
    .flash-card.flipped { transform:rotateY(180deg); }
    .flash-face { position:absolute; width:100%; min-height:220px; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.10); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 24px; box-sizing:border-box; }
    .flash-front { background:var(--bg); }
    .flash-back  { background:var(--accent,#4f46e5); color:#fff; transform:rotateY(180deg); }
    .flash-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; opacity:.45; margin-bottom:14px; }
    .flash-back .flash-label { opacity:.7; }
    .flash-text  { font-size:17px; font-weight:500; text-align:center; line-height:1.5; }
    .flash-hint  { font-size:12px; color:var(--muted); margin-top:6px; }
    .flash-nav   { display:flex; gap:12px; align-items:center; }
    .flash-nav-btn { border:none; background:var(--bg); border-radius:10px; padding:10px 22px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.08); transition:opacity .15s; }
    .flash-nav-btn:disabled { opacity:.3; cursor:default; }
    .flash-progress { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
    .flash-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .2s; }
    .flash-dot.seen { background:var(--accent,#4f46e5); }
    .flash-gen-btn { border:none; background:var(--accent,#4f46e5); color:#fff; border-radius:10px; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .15s; white-space:nowrap; }
    .flash-gen-btn:disabled { opacity:.5; cursor:default; }
    .flash-empty { text-align:center; color:var(--muted); font-size:15px; padding:20px; }