:root {
      --bg: #0f172a;           /* slate-900 */
      --panel: #111827;        /* gray-900 */
      --card: #0b1220;         /* custom dark */
      --muted: #94a3b8;        /* slate-400 */
      --text: #e5e7eb;         /* gray-200 */
      --accent: #60a5fa;       /* blue-400 */
      --accent-2: #34d399;     /* emerald-400 */
      --danger: #f87171;       /* red-400 */
      --radius: 16px;
      --shadow: 0 10px 25px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
      --shadow-soft: 0 6px 16px rgba(0,0,0,.25);
      --gap: 1rem;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 20% -10%, #1e293b 0%, var(--bg) 60%);
      color: var(--text);
    }

    header {
      position: sticky; top: 0; z-index: 10;
      background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6));
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
    .bar { display:flex; align-items:center; gap: 1rem; }
    .title { font-weight: 800; letter-spacing: .2px; }
    .title span { color: var(--accent); }
    .spacer { flex: 1; }

    button, input, textarea {
      font: inherit; color: inherit; border: none; outline: none;
    }
    .btn {
      display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
      background: linear-gradient(180deg, #1f2937, #111827);
      color: var(--text); border: 1px solid rgba(255,255,255,.08);
      padding:.6rem .9rem; border-radius: 999px; box-shadow: var(--shadow-soft);
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn.primary { background: linear-gradient(180deg, #2563eb, #1d4ed8); box-shadow: 0 8px 24px rgba(37,99,235,.35); }
    .btn.success { background: linear-gradient(180deg, #10b981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,.35); }
    .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.14); }

    .controls { display:flex; gap:.5rem; flex-wrap: wrap; }

    .new-card {
      display:grid; grid-template-columns: 1fr; gap:.75rem; margin-top: .75rem;
      background: linear-gradient(180deg, #0b1220, #0a0f1a);
      border: 1px solid rgba(255,255,255,.06);
      padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow-soft);
    }
    .new-card label { font-size:.9rem; color: var(--muted); }
    .new-card textarea, .new-card input[type="text"] {
      width: 100%; background: #0d1424; border: 1px solid rgba(255,255,255,.06);
      padding:.75rem .8rem; border-radius: 12px; min-height: 64px; resize: vertical;
    }
    .new-card .row { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
    @media (max-width: 720px) { .new-card .row { grid-template-columns: 1fr; } }

    .grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--gap); padding: 1rem; max-width: 1100px; margin: 0 auto 4rem;
    }

    .flip {
      perspective: 1200px; position: relative; height: 180px; cursor: pointer;
      user-select: none; -webkit-tap-highlight-color: transparent;
    }
    .card {
      position: absolute; inset: 0; border-radius: var(--radius);
      transform-style: preserve-3d; transition: transform 640ms cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
      background: var(--card); border: 1px solid rgba(255,255,255,.06);
      box-shadow: var(--shadow);
    }
    .card:hover { box-shadow: 0 14px 32px rgba(0,0,0,.5); }
    .card.is-flipped { transform: rotateY(180deg); }

    .side {
      position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
      padding: 1rem; backface-visibility: hidden; border-radius: var(--radius);
    }
    .front { background: radial-gradient(600px 400px at -10% -20%, rgba(96,165,250,.18), transparent), var(--card); }
    .back  { background: radial-gradient(600px 400px at 110% 120%, rgba(52,211,153,.18), transparent), var(--card); transform: rotateY(180deg); }
    .q, .a { font-size: 1.05rem; line-height: 1.4; text-align:center; }
    .meta { position:absolute; bottom: .6rem; left:.8rem; right:.8rem; display:flex; justify-content:space-between; font-size:.78rem; color: var(--muted); pointer-events: none; }

    .toolbar { position:absolute; top: .5rem; right:.5rem; display:flex; gap:.35rem; }
    .icon-btn { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); cursor: pointer; }
    .icon-btn:hover { background: rgba(255,255,255,.1); }
    .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space: nowrap; }

    .empty { opacity: .75; text-align:center; max-width: 700px; margin: 6vh auto; }

    footer { text-align:center; color: var(--muted); padding: 2rem 1rem 3rem; }

    @media (prefers-reduced-motion: reduce) {
      .card { transition: transform 0.001s linear; }
    }