:root {
  --navy:#111a46;
  --navy-2:#17235f;
  --purple:#6543d9;
  --purple-soft:#f0ecff;
  --green:#12b76a;
  --green-dark:#079455;
  --green-soft:#e9f9f1;
  --orange:#f79009;
  --orange-soft:#fff4e5;
  --red:#f04438;
  --ink:#19213d;
  --muted:#667085;
  --line:#e4e7ec;
  --paper:#ffffff;
  --bg:#f6f7fb;
  --radius:22px;
  --shadow:0 12px 34px rgba(17,26,70,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.app-shell{max-width:1040px;margin:0 auto;min-height:100vh;background:var(--paper)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-size:27px;font-weight:900;letter-spacing:-1.5px;color:var(--navy)}
.brand span{color:var(--green)}
.tagline{font-size:12px;color:var(--muted)}
main{padding:18px;max-width:760px;margin:auto}
.hero{background:linear-gradient(145deg,var(--navy),#1e2b76);color:white;border-radius:30px;padding:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.hero:after{content:"✦";position:absolute;right:24px;top:18px;font-size:54px;color:#34d399;opacity:.9}
.hero h1{font-size:40px;line-height:1.02;margin:10px 0 12px;letter-spacing:-2px}
.hero p{max-width:520px;line-height:1.55;color:#dfe4ff}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 4px 16px rgba(17,26,70,.05)}
.card h2,.card h3{margin-top:0}
.action-card{display:flex;gap:14px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);background:white;padding:18px;border-radius:20px}
.action-card:hover{border-color:#c6baff;transform:translateY(-1px)}
.icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--purple-soft);font-size:25px}
.btn{border:0;border-radius:15px;padding:14px 18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.btn.primary{background:linear-gradient(135deg,var(--purple),#7a5ce3);color:#fff}
.btn.green{background:linear-gradient(135deg,var(--green),#20c47a);color:#fff}
.btn.secondary{background:white;color:var(--purple);border:1px solid #cfc6fb}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.danger{background:#fff0ef;color:var(--red)}
.btn:disabled{opacity:.48;cursor:not-allowed}
.btn.block{width:100%}
.section-title{margin:28px 0 12px}
.field{display:grid;gap:7px;margin:13px 0}
label{font-size:13px;font-weight:800;color:#344054}
input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:13px;padding:13px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(101,67,217,.14);border-color:var(--purple)}
.upload-zone{border:2px dashed #bfb6ee;background:#faf9ff;border-radius:22px;padding:30px;text-align:center}
.upload-zone input{display:none}
.preview-strip{display:flex;gap:10px;overflow:auto;padding:8px 0}
.preview-strip img{width:94px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.status-list{display:grid;gap:12px;margin-top:24px}
.status{display:flex;gap:10px;align-items:center}
.spinner{width:62px;height:62px;border:7px solid #ece8ff;border-top-color:var(--purple);border-radius:50%;animation:spin .9s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.question-card{display:grid;gap:13px;margin-bottom:15px}
.question-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:var(--purple-soft);color:var(--purple);font-weight:900}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.pill{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--purple-soft);color:var(--purple)}
.pill.green{background:var(--green-soft);color:var(--green-dark)}
.pill.orange{background:var(--orange-soft);color:#b54708}
.progress{height:11px;border-radius:99px;background:#eaecf0;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--green),#5ed99b);border-radius:99px;transition:width .35s}
.mission{text-align:center;padding-top:18px}
.mascot{font-size:76px;filter:drop-shadow(0 8px 12px rgba(17,26,70,.12))}
.question-text{font-weight:900;font-size:28px;line-height:1.25;text-align:center;margin:25px 0}
.options{display:grid;gap:11px}
.option{border:2px solid var(--line);background:white;border-radius:17px;padding:15px;text-align:left;font-weight:800}
.option.selected{border-color:var(--purple);background:var(--purple-soft)}
.feedback{border-radius:18px;padding:17px;margin:16px 0}
.feedback.hint{background:var(--orange-soft);border:1px solid #fedf89}
.feedback.good{background:var(--green-soft);border:1px solid #abefc6}
.feedback.learn{background:var(--purple-soft);border:1px solid #d9d1ff}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.score{padding:18px;border-radius:20px;text-align:center;background:#f8f9fc}
.score strong{display:block;font-size:32px}
.score.mastery{background:var(--green-soft);color:var(--green-dark)}
.confetti{font-size:45px;letter-spacing:8px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.notice{padding:13px 15px;border-radius:14px;background:#fffaeb;color:#7a2e0e;border:1px solid #fedf89}
.empty{text-align:center;padding:35px;color:var(--muted)}
.footer-note{text-align:center;color:var(--muted);font-size:12px;padding:26px}
@media(max-width:650px){
  .app-shell{width:100%}
  main{padding:14px}
  .grid.two{grid-template-columns:1fr}
  .hero{padding:24px 20px}
  .hero h1{font-size:34px}
  .question-text{font-size:25px}
  .topbar .tagline{display:none}
}