:root {
      --bg: #0b1020;
      --bg-2: #121932;
      --card: #0f1830;
      --text: #e8eefc;
      --muted: #a8b2d8;
      --accent: #7aa1ff;
      --accent-2: #59e1ff;
      --ok: #2ecc71;
      --warn: #f1c40f;
      --bad: #ff6b6b;
      --shadow: 0 10px 25px rgba(0,0,0,.35);
      --radius: 18px;
      --pad: 12px;
      --tap: 48px; /* Mindest-Touchziel */
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f5f7ff;
        --bg-2: #edf1ff;
        --card: #ffffff;
        --text: #0b1020;
        --muted: #4b556b;
        --accent: #335dff;
        --accent-2: #00b8ff;
        --shadow: 0 10px 25px rgba(20,30,80,.12);
      }
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1200px 800px at 100% -20%, rgba(122,161,255,.25), transparent 55%),
                  radial-gradient(1100px 700px at -10% 120%, rgba(89,225,255,.15), transparent 45%),
                  var(--bg);
      min-height: 100dvh;
    }
    @supports (height: 100svh) {
      body { min-height: 100svh; }
    }

    /* App Shell */
    .app { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
    header {
      position: sticky; top: 0; z-index: 10;
      backdrop-filter: saturate(1.2) blur(8px);
      background: linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.65));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    @media (prefers-color-scheme: light) {
      header { background: linear-gradient(180deg, rgba(245,247,255,.9), rgba(245,247,255,.65)); border-bottom-color: rgba(0,0,0,.06); }
    }
    .bar { display:flex; align-items:center; gap:.75rem; padding: .70rem max(var(--pad), env(safe-area-inset-left)) .70rem max(var(--pad), env(safe-area-inset-right)); }
    .title { font-weight: 800; letter-spacing: .2px; font-size: 1.12rem; display:flex; align-items:center; gap:.5rem; }
    .title .logo { width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 20px rgba(90, 162, 255, .45); display:grid; place-items:center; color:white; font-weight:800; }
    .spacer { flex: 1; }
    .deck-select { display:flex; align-items:center; gap:.4rem; max-width: 60vw; margin-right: max(var(--pad), env(safe-area-inset-right)); }
    select, button, input[type="file"], input[type="text"], .chip {
      font: inherit; color: var(--text);
      background: var(--card);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px; padding: .6rem .85rem;
      outline: none;
      min-height: var(--tap);
      box-shadow: var(--shadow);
    }
    select { padding-right: 2rem; }
    button { cursor: pointer; transition: transform .05s ease, filter .2s ease; }
    button:active { transform: translateY(1px) scale(.99); }
    .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #00122e; border: none; font-weight: 700; }
    .btn-subtle { background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12); }
    main { padding: .6rem; display:grid; align-content: start; justify-items: center; gap: .5rem; }
    .info { width: min(820px, 100%); backdrop-filter: blur(6px) saturate(1.1); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: .9rem; text-align:center; color: var(--muted); }

    /* Card */
    .stage { 
      width: 100%; 
      padding: .25rem; 
      display: flex; 
      justify-content: center; 
      padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
    }
    .card-wrap { /* No 3D to keep text crisp on mobile */ }
    .card {
      position: relative; 
      inline-size: clamp(280px, 92vw, 640px); /* <= macht die Karte im Portrait nie zu breit */
      min-height: clamp(320px, 56svh, 68svh); 
      display:grid; 
      place-items:center; 
      padding: 1rem; 
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    /* Two layers – fade switch for perfect readability */
    .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; overflow:auto; -webkit-overflow-scrolling: touch; }
    .face > div { max-inline-size: 100%; width: 100%; }
    .front { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
    .back  { opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; }

    .card .face { transition: opacity .18s ease, visibility .18s ease; }
    @media (prefers-reduced-motion: reduce) { .card .face { transition: none; } }
    .card.flipped .front { opacity: 0; visibility: hidden; pointer-events: none; }
    .card.flipped .back  { opacity: 1; visibility: visible; pointer-events: auto; }

    .prompt, .answer { font-size: clamp(1.05rem, 3.6vw + .5rem, 1.6rem); line-height: 1.4; text-wrap: balance; text-align: center; padding-inline: .25rem; }
    .answer { color: var(--accent-2); font-weight: 700; }

    .tags { position: absolute; top: .6rem; left: .6rem; display:flex; gap:.35rem; flex-wrap: wrap; }
    .chip { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; opacity: .95; }

    /* Portrait hardening: niemals breiter als das Sichtfenster */
    @media (orientation: portrait) {
      .card { inline-size: min(92svw, 640px); }
      .face > div { max-inline-size: 88svw; }
    }

    /* Safety: kein horizontales Scrollen */
    html, body { overflow-x: hidden; }
    .progress { display:flex; align-items:center; gap:.6rem; color: var(--muted); width: min(820px, 96%); margin-top: .25rem; }
    .bar-outer { flex: 1; height: 8px; background: rgba(255,255,255,.10); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
    .bar-inner { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }
    .progress .top-view { margin-left: auto; min-width: 160px; }

    /* Footer */
    footer { position: sticky; bottom: 0; backdrop-filter: blur(8px); background: linear-gradient(0deg, rgba(11,16,32,.9), rgba(11,16,32,.65)); border-top: 1px solid rgba(255,255,255,.06); overflow: visible; }
    @media (prefers-color-scheme: light) { footer { background: linear-gradient(0deg, rgba(245,247,255,.9), rgba(245,247,255,.65)); border-top-color: rgba(0,0,0,.06);} }
    .foot { display:flex; gap:.6rem; padding: .6rem max(var(--pad), env(safe-area-inset-left)) max(calc(var(--pad) + env(safe-area-inset-bottom)), var(--pad)) max(var(--pad), env(safe-area-inset-right)); justify-content:center; overflow: visible; flex-wrap: wrap; }
    .foot button { flex:1; }
    .foot .inline { flex: 0 1 auto; min-width: 180px; }
    :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

    /* Compact UI */
    body.compact footer { display: none; }
    /* Keep progress bar visible in compact mode, and use a clear chip */
    #progressPill { background: rgba(255,255,255,.08); padding: .25rem .6rem; border-radius: 999px; font-weight: 600; }

    /* FAB and rating sheet */
    .fab { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 20; border-radius: 999px; padding: .75rem 1.1rem; font-weight: 700; box-shadow: var(--shadow); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #00122e; border: none; }
    .sheet { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 21; display: grid; grid-template-columns: repeat(3, auto); gap: .5rem; background: var(--bg-2); padding: .5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; box-shadow: var(--shadow); }
    .sheet button { border-radius: 999px; }
    @media (max-width: 420px) { .sheet { grid-template-columns: 1fr; } }

    /* Hide deck controls in compact header for small screens */
    body.compact .deck-select select, body.compact #btnManage { display: none; }

    /* Dialogs */
    dialog { border: 1px solid rgba(255,255,255,.12); background: var(--bg-2); color: var(--text); border-radius: 16px; padding: 0; box-shadow: var(--shadow); width: min(720px, 96vw); max-height: 90svh; overflow: hidden; }
    dialog::backdrop { background: rgba(0,8,16,.45); backdrop-filter: blur(2px); }
    .dlg-head { padding: .9rem 1rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); display:flex; justify-content: space-between; align-items:center; }
    .dlg-body { padding: 1rem; overflow:auto; max-height: calc(90svh - 56px); }
    .row { display:flex; gap:.5rem; align-items:center; flex-wrap: wrap; }
    .grid { display:grid; grid-template-columns: 1fr 1fr; gap:.5rem; }
    .grid > * { min-width: 0; }
    .mt { margin-top: .75rem; }
    .muted { color: var(--muted); }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

    /* Mobile tweaks */
    @media (max-width: 640px) {
      .controls { grid-template-columns: 1fr 1fr; }
      .title { font-size: 1.05rem; }
      .prompt, .answer { font-size: clamp(1rem, 4.2vw + .45rem, 1.45rem); }
      .bar { padding: .6rem max(var(--pad), env(safe-area-inset-left)) .6rem max(var(--pad), env(safe-area-inset-right)); }
    }
    @media (max-width: 420px) {
      .controls { grid-template-columns: 1fr; }
      .controls button { font-size: 1.05rem; }
      .chip { font-size: .74rem; }
      .face > div { max-width: 95%; }
    }
  
    /* --- Header width fixes (mobile) --- */
    header { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.2) blur(8px); background: linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.65)); border-bottom: 1px solid rgba(255,255,255,.06); overflow: visible; }
    .bar { display:flex; align-items:center; gap:.75rem; padding: .70rem max(var(--pad), env(safe-area-inset-left)) .70rem max(var(--pad), env(safe-area-inset-right)); overflow: visible; }
    .title, .deck-select { min-width: 0; }
    .title > div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
    .deck-select { display:flex; align-items:center; gap:.4rem; max-width: 60vw; }
    #deckSelect { display:none;flex: 1 1 auto; min-width: 0; max-width: 100%; }
    #btnManage { flex: 0 0 auto; margin-right: 0; }

    @media (max-width: 640px) {
      .title > div:last-child { max-width: 48vw; }
      .deck-select { max-width: 56vw; }
    }
    @media (max-width: 420px) {
      .bar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
      .title > div:last-child { max-width: 44vw; }
      .deck-select { max-width: 54vw; }
    }