:root{
  --nuit:#0B1F3A;
  --profond:#123C69;
  --clair:#EAF3FF;
  --blanc:#FFFFFF;
  --or:#D4AF37;
  --txt:#0F172A;
  --txt2:#64748B;
  --vert:#15803D;
  --vert-bg:#DCFCE7;
  --rouge:#B91C1C;
  --rouge-bg:#FEE2E2;
  --ombre:0 4px 18px rgba(11,31,58,.10);
  --ombre-fort:0 8px 30px rgba(11,31,58,.18);
  --r:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--clair);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  overscroll-behavior-y:none;
}
#app{
  max-width:560px;margin:0 auto;
  padding:calc(var(--safe-t) + 16px) 16px calc(92px + var(--safe-b)) 16px;
  min-height:100vh;
}
h1,h2,h3{margin:0;letter-spacing:-.02em}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.hidden{display:none!important}

/* ---- Top header ---- */
.appbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.appbar .back{
  width:40px;height:40px;border-radius:12px;background:var(--blanc);
  box-shadow:var(--ombre);color:var(--profond);font-size:22px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.appbar h2{font-size:20px;color:var(--nuit)}
.appbar .sub{font-size:13px;color:var(--txt2);margin-top:2px}

/* ---- Dashboard ---- */
.hero{
  background:linear-gradient(160deg,var(--nuit),var(--profond));
  border-radius:24px;padding:24px 22px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--ombre-fort);
}
.hero::after{content:"";position:absolute;left:22px;right:22px;bottom:18px;height:2px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.7}
.hero .brand{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:600}
.hero h1{font-size:28px;margin:6px 0 4px;font-weight:800}
.hero p{margin:0 0 4px;color:#cfe0f5;font-size:14px}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.quick{
  background:var(--blanc);border-radius:var(--r);padding:18px 16px;text-align:left;
  box-shadow:var(--ombre);border:1px solid #e4ecf7;display:flex;flex-direction:column;gap:4px;
  transition:transform .12s;
}
.quick:active{transform:scale(.97)}
.quick .big{font-size:22px;font-weight:800;color:var(--profond)}
.quick .lbl{font-size:13px;color:var(--txt2)}
.quick.errs{background:linear-gradient(150deg,#fff,#fff7e6);border-color:#f0e2bd}
.quick.errs .big{color:var(--or)}

.section-title{font-size:13px;font-weight:700;color:var(--txt2);text-transform:uppercase;
  letter-spacing:.1em;margin:26px 4px 12px}

.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.stat{background:var(--blanc);border-radius:14px;padding:14px 12px;box-shadow:var(--ombre);text-align:center}
.stat .v{font-size:22px;font-weight:800;color:var(--nuit)}
.stat .k{font-size:11px;color:var(--txt2);margin-top:2px}

.row-links{display:flex;gap:10px;margin-top:16px}
.row-links button{
  flex:1;background:var(--blanc);border-radius:14px;padding:14px 8px;box-shadow:var(--ombre);
  color:var(--profond);font-weight:600;font-size:13px;display:flex;flex-direction:column;
  align-items:center;gap:4px;border:1px solid #e4ecf7;
}
.row-links .ri{font-size:18px}

/* ---- generic card ---- */
.card{background:var(--blanc);border-radius:var(--r);padding:18px;box-shadow:var(--ombre);
  border:1px solid #e9eff7;margin-bottom:12px}
.card .meta{font-size:12px;color:var(--or);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.card h3{font-size:17px;color:var(--nuit);margin:6px 0 6px}
.card p{margin:0;color:var(--txt2);font-size:14px}
.gold-edge{border-left:3px solid var(--or)}

/* ---- buttons ---- */
.btn{
  width:100%;background:var(--profond);color:#fff;border-radius:14px;padding:16px;
  font-size:16px;font-weight:700;box-shadow:var(--ombre);transition:transform .1s,opacity .1s;
}
.btn:active{transform:scale(.98)}
.btn.gold{background:linear-gradient(120deg,var(--profond),var(--nuit));border:1px solid var(--or)}
.btn.ghost{background:var(--blanc);color:var(--profond);border:1px solid #d7e3f4;box-shadow:none}
.btn.danger{background:var(--rouge)}
.btn.sm{padding:12px;font-size:14px}
.btn:disabled{opacity:.45}

.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ---- chips / pills ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.chip{
  padding:10px 14px;border-radius:999px;background:var(--blanc);border:1.5px solid #d7e3f4;
  font-size:14px;color:var(--profond);font-weight:600;
}
.chip.on{background:var(--profond);color:#fff;border-color:var(--profond)}
.chip.on.gold{border-color:var(--or)}

.opt-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.opt{display:flex;align-items:center;justify-content:space-between;background:var(--blanc);
  padding:14px 16px;border-radius:14px;box-shadow:var(--ombre);border:1px solid #e9eff7;font-size:15px;font-weight:600;color:var(--txt)}
.opt .sw{width:46px;height:28px;border-radius:999px;background:#cdd9ea;position:relative;transition:.2s;flex-shrink:0}
.opt .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.opt.on .sw{background:var(--profond)}
.opt.on .sw::after{transform:translateX(18px)}

.search{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #d7e3f4;
  font-size:16px;background:var(--blanc);color:var(--txt);margin-bottom:14px;box-shadow:var(--ombre)}
.search:focus{outline:none;border-color:var(--profond)}

.list-item{background:var(--blanc);border-radius:14px;padding:16px;box-shadow:var(--ombre);
  margin-bottom:10px;border:1px solid #e9eff7;border-left:3px solid var(--or)}
.list-item .t{font-weight:700;color:var(--nuit);font-size:16px}
.list-item .s{font-size:12px;color:var(--or);font-weight:600;text-transform:uppercase;margin-bottom:4px;letter-spacing:.05em}
.list-item .d{font-size:13px;color:var(--txt2);margin-top:4px}

/* ---- QCM session ---- */
.qhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qprog{font-size:14px;font-weight:700;color:var(--profond)}
.qtimer{font-size:14px;font-weight:700;color:var(--txt2);font-variant-numeric:tabular-nums}
.pbar{height:8px;background:#dbe6f5;border-radius:999px;overflow:hidden;margin-bottom:18px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--profond),var(--or));transition:width .25s}
.qtext{font-size:19px;font-weight:700;color:var(--nuit);margin:6px 0 18px;line-height:1.35}
.qtag{font-size:12px;color:var(--or);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.answers{display:flex;flex-direction:column;gap:12px}
.ans{
  display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--blanc);
  border:2px solid #dde7f4;border-radius:14px;padding:16px;font-size:16px;color:var(--txt);
  box-shadow:var(--ombre);transition:.12s;font-weight:500;
}
.ans:active{transform:scale(.99)}
.ans .k{width:30px;height:30px;border-radius:9px;background:var(--clair);color:var(--profond);
  font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.ans.sel{border-color:var(--profond);background:#f3f8ff}
.ans.sel .k{background:var(--profond);color:#fff}
.ans.good{border-color:var(--vert);background:var(--vert-bg)}
.ans.good .k{background:var(--vert);color:#fff}
.ans.bad{border-color:var(--rouge);background:var(--rouge-bg)}
.ans.bad .k{background:var(--rouge);color:#fff}
.feedback{margin-top:16px;background:var(--clair);border-radius:14px;padding:16px;border-left:3px solid var(--or)}
.feedback .verdict{font-weight:800;font-size:16px;margin-bottom:6px}
.feedback .verdict.ok{color:var(--vert)}
.feedback .verdict.no{color:var(--rouge)}
.feedback .exp{font-size:14px;color:var(--txt);margin-bottom:8px}
.feedback .trap{font-size:13px;color:#92400e;background:#fef3c7;padding:8px 10px;border-radius:8px}
.qfoot{display:flex;gap:10px;margin-top:18px}
.qfoot .btn{flex:1}

/* ---- results ---- */
.score-ring{width:150px;height:150px;margin:8px auto 4px;position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .pct b{font-size:34px;color:var(--nuit)}
.score-ring .pct span{font-size:12px;color:var(--txt2)}
.res-stats{display:flex;justify-content:space-around;text-align:center;margin:16px 0}
.res-stats .v{font-size:20px;font-weight:800;color:var(--profond)}
.res-stats .k{font-size:11px;color:var(--txt2)}

/* ---- flashcards ---- */
.flash-wrap{perspective:1200px;margin:10px 0 18px}
.flash{position:relative;width:100%;min-height:300px;transition:transform .5s;transform-style:preserve-3d}
.flash.flip{transform:rotateY(180deg)}
.flash .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:var(--ombre-fort)}
.flash .front{background:linear-gradient(160deg,var(--nuit),var(--profond));color:#fff;border:1px solid var(--or)}
.flash .back{background:var(--blanc);color:var(--txt);transform:rotateY(180deg);border:1px solid #e4ecf7}
.flash .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;opacity:.7}
.flash .front .lbl{color:var(--or)}
.flash .back .lbl{color:var(--or)}
.flash .body{font-size:24px;font-weight:700;line-height:1.3}
.flash .back .body{font-size:19px;font-weight:600}
.flash-rate{display:flex;gap:8px}
.flash-rate .btn{flex:1}
.flash-rate .again{background:var(--rouge)}
.flash-rate .revoir{background:var(--or);color:#3a2e00}
.flash-rate .know{background:var(--vert)}

/* ---- cours / memo detail ---- */
.box{border-radius:14px;padding:14px 16px;margin:12px 0}
.box .bt{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.box ul{margin:0;padding-left:18px}
.box li{margin:4px 0;font-size:14px}
.box.know{background:var(--clair);border-left:3px solid var(--profond)}.box.know .bt{color:var(--profond)}
.box.traps{background:#fef3c7;border-left:3px solid var(--or)}.box.traps .bt{color:#92400e}
.box.check{background:#f0fdf4;border-left:3px solid var(--vert)}.box.check .bt{color:var(--vert)}
.box.summary{background:linear-gradient(150deg,var(--nuit),var(--profond));color:#dbeafe;border-left:3px solid var(--or)}
.box.summary .bt{color:var(--or)}
.box.ex{background:#fff;border:1px solid #e4ecf7}.box.ex .bt{color:var(--profond)}

.cq{background:var(--blanc);border-radius:14px;padding:16px;box-shadow:var(--ombre);margin-bottom:10px;border:1px solid #e9eff7}
.cq .q{font-weight:700;color:var(--nuit);font-size:15px}
.cq .a{font-size:14px;color:var(--txt);margin-top:10px;padding-top:10px;border-top:1px solid #eef3fa}
.cq .reveal{margin-top:10px;background:var(--clair);color:var(--profond);padding:10px;border-radius:10px;font-weight:700;font-size:14px;width:100%}
.cq-rate{display:flex;gap:8px;margin-top:10px}
.cq-rate button{flex:1;padding:10px;border-radius:10px;font-weight:700;font-size:13px}
.cq-rate .m{background:var(--vert-bg);color:var(--vert)}
.cq-rate .r{background:#fef3c7;color:#92400e}

/* favorite star */
.fav{font-size:22px;color:#cdd9ea;background:none}
.fav.on{color:var(--or)}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--clair);color:var(--profond);margin-left:6px}
.badge.done{background:var(--vert-bg);color:var(--vert)}
.badge.todo{background:#fef3c7;color:#92400e}

/* import dropzone */
.dropzone{border:2.5px dashed #b9cbe6;border-radius:20px;padding:40px 20px;text-align:center;
  background:var(--blanc);color:var(--txt2);transition:.15s;margin-bottom:14px}
.dropzone.hot{border-color:var(--or);background:#fffbed;color:var(--profond)}
.dropzone .di{font-size:40px;color:var(--profond)}
.dropzone .dt{font-size:15px;font-weight:600;margin-top:8px}
textarea.json{width:100%;min-height:120px;border-radius:14px;border:1.5px solid #d7e3f4;padding:14px;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--blanc);color:var(--txt);margin-bottom:12px;resize:vertical}
.import-report{background:var(--clair);border-radius:14px;padding:14px;font-size:14px;border-left:3px solid var(--or);margin-bottom:14px}
.import-report.err{background:var(--rouge-bg);border-color:var(--rouge);color:var(--rouge)}

.empty{text-align:center;color:var(--txt2);padding:50px 20px}
.empty .ei{font-size:44px;opacity:.4}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translateX(-50%) translateY(20px);
  background:var(--nuit);color:#fff;padding:13px 20px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:var(--ombre-fort);opacity:0;transition:.25s;z-index:200;pointer-events:none;border:1px solid var(--or);max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- tabbar ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;justify-content:space-around;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid #e2e9f3;
  padding:8px 0 calc(8px + var(--safe-b));
  box-shadow:0 -4px 20px rgba(11,31,58,.06);
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--txt2);
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;flex:1;min-width:0}
.tab .ti{font-size:20px;line-height:1}
.tab.on{color:var(--profond)}
.tab.on .ti{color:var(--or)}

/* number stepper */
.stepper{display:flex;align-items:center;gap:14px;background:var(--blanc);border-radius:14px;
  padding:12px 16px;box-shadow:var(--ombre);margin-bottom:14px}
.stepper button{width:42px;height:42px;border-radius:12px;background:var(--clair);color:var(--profond);font-size:24px;font-weight:700}
.stepper .val{flex:1;text-align:center;font-size:22px;font-weight:800;color:var(--nuit)}
.stepper .cap{font-size:13px;color:var(--txt2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}