/* PREVIEW STYLE v2 (owner-only). CSS only: no JS, scoring, API, storage or navigation change.
   Base: pure black. Bento = dashboard grid + stats. Clay = choice icons. Minimalism = question/review screens.
   Neumorphism = timer + progress. Glass = dialogs/overlays + result card. Brutalism = bold titles + stat numbers. */
:root{--pv-bg:#000;--pv-head:#0a0a0a;--pv-card:#111;--pv-edge:#2a2a2a;--pv-ink:#f3f4f6;--pv-muted:#b8c0cc;--pv-accent:#91d5c1}
html,body{background:#000;color:var(--pv-ink)}
.muted,label{color:var(--pv-muted)}
header{background:var(--pv-head);border-bottom:1px solid var(--pv-edge)}
button{background:#161616;border-color:#333}button:hover{background:#202020}
button.primary{background:var(--pv-accent);border-color:var(--pv-accent);color:#04110c}
input,select{background:#0d0d0d;border-color:#333;color:var(--pv-ink)}
.card,.choice-card,.stat,.callout{background:var(--pv-card);border:1px solid var(--pv-edge);border-radius:20px;box-shadow:none}
.goodluck{background:#000;border-color:var(--pv-edge)}
.pill{background:#1b1b1b;color:#d6dce4;border:1px solid #2f2f2f}
/* Bento */
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.dashboard-grid>.dashboard-card{min-width:0;padding:20px}
.dashboard-grid>.dashboard-card:first-child{grid-column:1/-1;background:#0f1a16;border-color:#2c4a40}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.choice-grid{gap:14px}
/* Claymorphism: choice icons */
.choice-icon{min-width:52px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;background:#1f3a31;color:#e6fff6;border:1px solid #3d6b5c;box-shadow:inset 3px 3px 6px #ffffff1c,inset -4px -4px 8px #00000066,0 6px 10px #00000099}
.choice-card{background:#111;border-color:var(--pv-edge)}.choice-card:hover{background:#161616;border-color:var(--pv-accent)}
/* Brutalism: titles and stat numbers */
h1{font-weight:900;letter-spacing:.01em;border-left:6px solid var(--pv-accent);padding-left:12px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.stat strong,.bigscore{font-weight:900;color:var(--pv-accent)}
.stat{border:2px solid #333;box-shadow:4px 4px 0 #1d3a31}
/* Minimalism: question, test and review screens */
#app:has(.question) .card,#app:has(.question) .reviewcard,.reviewcard{background:transparent;border:0;border-bottom:1px solid var(--pv-edge);border-radius:0;box-shadow:none}
#app .question{line-height:1.85;font-weight:600}
.options .option,#app:has(.question) .option{background:#0b0b0b;border:1px solid #303030;border-radius:14px;box-shadow:none}
.option.selected,.option[aria-pressed=true]{background:#0f1f1a;border-color:var(--pv-accent)}
.option.correct{background:#0f1f1a;border:2px solid var(--pv-accent)}.option.wrong{background:#1f0f12;border:2px solid #ff9aa0}
.reviewcard .solution-box,.detailed-explanation,.solution-box{background:#0a0a0a;border:1px solid var(--pv-edge);box-shadow:none;line-height:1.85}
.quizbar{background:#0a0a0a;border-top:1px solid var(--pv-edge)}
/* Neumorphism: timer and progress */
.timer{background:#0b0b0b;border-radius:14px;padding:6px 14px;box-shadow:inset 3px 3px 6px #000,inset -3px -3px 6px #1c1c1c,3px 3px 7px #000,-2px -2px 5px #151515}
.progress{background:#0b0b0b;height:10px;border-radius:10px;box-shadow:inset 2px 2px 4px #000,inset -2px -2px 4px #1c1c1c}
.progress>span{border-radius:10px;box-shadow:0 0 6px #91d5c155}
.palette button{background:#0b0b0b;box-shadow:3px 3px 6px #000,-2px -2px 5px #151515;border-color:#262626}
/* Glassmorphism: overlays and result sheet only (solid fallback first) */
.dialogback{background:#000000c0}
.dialog{background:#141414f0;border:1px solid #ffffff26;box-shadow:0 10px 40px #000}
@supports (backdrop-filter:blur(1px)){.dialogback{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.dialog{background:#1414148c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--pv-accent);outline-offset:3px}
@media(max-width:600px){.dashboard-grid{grid-template-columns:1fr}h1{font-size:25px}.card,.choice-card{padding:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}