:root {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --surface2: #222;
  --border: #2e2e2e;
  --text: #e8e4dc;
  --muted: #6b6760;
  --accent: #c8b97a;
  --accent-dim: #3a3220;
  --green: #6fcf97;
  --green-dim: #1a2e22;
  --red: #eb5757;
  --red-dim: #2e1a1a;
  --blue: #56b3f5;
  --blue-dim: #1a2433;
  --purple: #b57bee;
  --purple-dim: #251a33;
  --radius: 10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;min-height:100vh;display:flex;flex-direction:column;align-items:center}
header{width:100%;max-width:820px;padding:2.5rem 1.5rem 0;display:flex;justify-content:space-between;align-items:flex-end}
.logo{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--accent);letter-spacing:-.02em}
.logo span{font-style:italic;color:var(--text)}
.score-pill{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:5px 14px;border-radius:20px}
.score-pill em{color:var(--green)}
nav{width:100%;max-width:820px;padding:1.5rem 1.5rem 0;display:flex;gap:8px;flex-wrap:wrap}
.nav-tab{padding:5px 14px;border:1px solid var(--border);border-radius:20px;font-size:12px;font-family:'DM Mono',monospace;cursor:pointer;background:transparent;color:var(--muted);transition:all .15s}
.nav-tab:hover{color:var(--text);border-color:#444}
.nav-tab.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
main{width:100%;max-width:820px;padding:2rem 1.5rem 5rem;flex:1}

/* filters */
.filters-toggle{font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;font-family:'DM Mono',monospace;padding:0;margin-bottom:1rem;display:flex;align-items:center;gap:6px;transition:color .15s}
.filters-toggle:hover{color:var(--text)}
.filters-toggle .arr{display:inline-block;transition:transform .2s}
.filters-toggle.open .arr{transform:rotate(90deg)}
.filters-panel{display:none;margin-bottom:1.2rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.filters-panel.open{display:block}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:.6rem}
.filter-row:last-child{margin-bottom:0}
.filter-label{font-size:11px;color:var(--muted);margin-bottom:.4rem}
.ftag{padding:4px 12px;border:1px solid var(--border);border-radius:20px;font-size:11px;font-family:'DM Mono',monospace;cursor:pointer;background:transparent;color:var(--muted);transition:all .15s}
.ftag:hover{color:var(--text);border-color:#444}
.ftag.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}

/* exercise card */
.exercise-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2.5rem 2rem;margin-bottom:1rem;position:relative;overflow:hidden}
.exercise-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.card-fonctions::before{background:var(--red)}
.card-vecteurs::before{background:var(--blue)}

.ex-meta{display:flex;gap:8px;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap}
.badge{padding:2px 10px;border-radius:12px;font-size:11px}
.badge-chapter-f{background:rgba(235,87,87,.15);color:var(--red)}
.badge-chapter-v{background:rgba(86,179,245,.15);color:var(--blue)}
.badge-type{background:var(--surface2);color:var(--muted)}

.ex-prompt{font-family:'DM Serif Display',serif;font-size:1.9rem;color:var(--text);margin-bottom:.5rem;line-height:1.35}
.ex-prompt em{color:var(--accent);font-style:normal}
.ex-sub{font-size:13px;color:var(--muted);margin-bottom:1.8rem;line-height:1.6}

/* sign table in question */
.q-table{border-collapse:collapse;margin:1rem 0;font-size:13px;width:100%}
.q-table th,.q-table td{border:1px solid #333;padding:.45rem .9rem;text-align:center;white-space:nowrap}
.q-table th{background:#1f1f1f;color:var(--accent);font-size:11px;letter-spacing:.08em}
.q-table td:first-child{text-align:left;color:var(--muted);font-size:12px}
.q-table .pos{color:var(--green)}
.q-table .neg{color:var(--red)}
.q-table .zer{color:var(--text)}
.q-table .vb{background:#111;color:var(--text)}

/* input */
.input-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.answer-input{flex:1;min-width:160px;padding:14px 18px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:17px;font-family:'DM Mono',monospace;color:var(--text);outline:none;transition:border-color .15s}
.answer-input:focus{border-color:#555}
.answer-input.correct{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.answer-input.wrong{border-color:var(--red);background:var(--red-dim);color:var(--red)}
.check-btn{padding:14px 24px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:'DM Mono',monospace;color:var(--text);cursor:pointer;white-space:nowrap;transition:all .15s}
.check-btn:hover{border-color:#555}

/* multi-choice */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.choice-btn{padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:'DM Mono',monospace;color:var(--text);cursor:pointer;text-align:left;transition:all .15s;line-height:1.4}
.choice-btn:hover:not([disabled]){border-color:#555;background:#2a2a2a}
.choice-btn.correct{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.choice-btn.wrong{border-color:var(--red);background:var(--red-dim);color:var(--red)}
.choice-btn.reveal{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.choice-btn[disabled]{cursor:default}

/* fill blanks */
.fill-expr{font-family:'DM Serif Display',serif;font-size:1.6rem;color:var(--text);margin:1rem 0 1.5rem;line-height:1.5}
.fill-expr .blank-inp{font-family:'DM Mono',monospace;font-size:1rem;width:90px;padding:4px 8px;background:var(--surface2);border:none;border-bottom:2px solid var(--accent);color:var(--text);outline:none;text-align:center;vertical-align:middle}
.fill-expr .blank-inp.correct{border-color:var(--green);color:var(--green)}
.fill-expr .blank-inp.wrong{border-color:var(--red);color:var(--red)}

/* feedback */
.feedback{margin-top:14px;padding:12px 16px;border-radius:var(--radius);font-size:13px;display:none;line-height:1.7}
.feedback.show{display:block}
.feedback.ok{background:var(--green-dim);color:var(--green);border:1px solid #2a4a35}
.feedback.ko{background:var(--red-dim);color:var(--red);border:1px solid #4a2a2a}
.feedback strong{color:inherit}

/* explanation box */
.expl-box{margin-top:10px;padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--muted);line-height:1.8;display:none}
.expl-box.show{display:block}
.expl-box em{color:var(--accent);font-style:normal}

/* next btn */
.next-btn{display:none;margin-top:1rem;padding:12px 24px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:'DM Mono',monospace;color:var(--muted);cursor:pointer;transition:all .15s}
.next-btn.show{display:inline-block}
.next-btn:hover{color:var(--text);border-color:#555}

/* reference page */
.ref-section{margin-bottom:2.5rem}
.ref-title{font-family:'DM Serif Display',serif;font-size:1.4rem;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.ref-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:.8rem}
.ref-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.ref-formula{font-size:15px;color:var(--text);margin-bottom:.4rem;line-height:1.8}
.ref-formula em{color:var(--accent);font-style:normal}
.ref-ex{font-size:12px;color:var(--muted);line-height:1.7}
.ref-rule{border-left:2px solid var(--accent);padding-left:1rem;margin:.5rem 0}

@media(max-width:520px){
  .ex-prompt{font-size:1.5rem}
  .choices{grid-template-columns:1fr}
  .exercise-card{padding:1.5rem 1.2rem 1.5rem}
}

/* ── Draft / Brouillon ── */
.draft-toggle-row{margin-top:1.2rem}
.draft-toggle{
  font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;
  font-family:'DM Mono',monospace;padding:0;display:flex;align-items:center;gap:6px;
  transition:color .15s;
}
.draft-toggle:hover{color:var(--text)}
.draft-toggle .draft-arr{display:inline-block;transition:transform .2s}
.draft-toggle.open .draft-arr{transform:rotate(90deg)}

.draft-panel{
  display:none;margin-top:.8rem;
  padding:1.2rem 1.4rem;
  background:#131313;
  border:1px dashed #2a2a2a;
  border-radius:var(--radius);
}
.draft-panel.open{display:block}

.draft-label{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);opacity:.6;margin-bottom:1rem;
}

/* sign tables */
.draft-table{border-collapse:collapse;font-size:13px;width:100%;margin-bottom:.8rem}
.draft-table th{
  background:#1a1a1a;color:var(--muted);font-size:11px;
  border:1px solid #2e2e2e;padding:.4rem .8rem;text-align:center;
}
.draft-table td{border:1px solid #2a2a2a;padding:.5rem .8rem;text-align:center;min-width:32px}
.draft-row-label{text-align:left!important;color:var(--muted);font-size:12px;white-space:nowrap;padding-right:1rem!important}
.draft-zero{color:var(--accent);font-weight:bold}
.draft-forbidden{color:var(--red);font-weight:bold;font-size:15px}
.draft-empty{background:#0e0e0e}
.draft-product-row td{background:#111}

/* formula workarea */
.draft-formulas{margin-bottom:.9rem;padding:.6rem .8rem;background:#111;border-radius:6px}
.draft-formula-row{
  font-size:13px;color:var(--text);line-height:2.4;
}
.draft-formula-row em{color:var(--accent);font-style:normal}

/* blanks — editable underlined space */
.draft-blank{
  display:inline-block;
  min-width:40px;
  padding:0 4px 2px;
  border-bottom:1.5px solid #555;
  vertical-align:baseline;
  margin:0 3px;
  outline:none;
  cursor:text;
  color:var(--accent);
  white-space:nowrap;
  overflow:visible;
  transition:border-color .15s;
}
.draft-blank:focus{
  border-bottom:1.5px solid var(--accent);
  background:rgba(200,185,122,.07);
  border-radius:2px 2px 0 0;
}
.draft-blank:empty::before{
  content:'···';
  color:#3a3a3a;
  pointer-events:none;
}

.draft-workarea{margin-top:.4rem}
.draft-step{
  font-size:13px;color:var(--text);line-height:2.4;
  padding-left:.6rem;border-left:2px solid #2a2a2a;
  margin-bottom:.2rem;
}

/* editable table cells */
.draft-cell[contenteditable]{
  cursor:text;
  outline:none;
  color:var(--accent);
  min-width:32px;
  transition:background .15s;
}
.draft-cell[contenteditable]:focus{
  background:rgba(200,185,122,.1);
}
.draft-cell[contenteditable]:empty::before{
  content:'?';
  color:#333;
  pointer-events:none;
}
/* clear button */
.draft-clear{
  margin-top:.8rem;
  font-size:11px;color:var(--muted);
  background:none;border:none;
  font-family:'DM Mono',monospace;
  cursor:pointer;padding:0;
  opacity:.6;transition:opacity .15s;
}
.draft-clear:hover{opacity:1;color:var(--red)}