:root{
  --green:#2e7d32;
  --green-600:#1b5e20;
  --mint:#e8f5e9;
  --bg:#ffffff;
  --card:#f7faf7;
  --accent:#81c784;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--mint);color:#123;}
.header{
  background:#fff;
  border-bottom:2px solid var(--accent);
  position:sticky;top:0;z-index:10;
}
.container{max-width:1200px;margin:0 auto;padding:10px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:44px}
.brand h1{margin:0;color:var(--green)}
.controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.controls input,.controls select,.controls button{
  padding:10px 12px;border:1px solid #cfd8dc;border-radius:12px;background:#fff
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:20px 0}
.card{background:var(--card);border:1px solid #cfd8dc;border-radius:16px;padding:14px;box-shadow:0 2px 6px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:8px}
.card h3{margin:6px 0 0 0;color:var(--green-600)}
.card .tag{font-size:12px;color:#555}
.card button{margin-top:auto;padding:10px;border-radius:12px;border:0;background:var(--green);color:#fff;cursor:pointer}
.badge{display:inline-block;background:#fff;border:1px solid var(--accent);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--green-600)}
.footer{padding:24px;text-align:center;color:#456}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex}
.panel{background:#fff;max-width:1000px;width:100%;border-radius:18px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.panel header{background:var(--green);color:#fff;padding:16px}
.panel header h2{margin:0}
.panel .content{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.panel .content{grid-template-columns:1fr}}
.lang-tabs{display:flex;gap:8px;margin-bottom:8px}
.lang-tabs button{padding:8px 10px;border-radius:10px;border:1px solid #cfd8dc;background:#f9f9f9;cursor:pointer}
.lang-tabs button.active{background:var(--mint);border-color:var(--green);color:var(--green-600);font-weight:600}
.section{border:1px solid #e0e0e0;border-radius:14px;padding:12px;background:#fcfffc}
.section h4{margin:0 0 8px 0;color:var(--green-600)}
.qa .question{margin:8px 0;padding:10px;border-radius:10px;background:#f8fff8;border:1px solid #e0f2f1}
.qa label{display:block;margin:6px 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:12px;border-top:1px solid #e0e0e0;background:#fafafa}
.actions button{padding:10px 12px;border-radius:12px;border:0;background:var(--green);color:#fff;cursor:pointer}
.actions .ghost{background:#fff;color:var(--green);border:1px solid var(--green)}
.summary{background:#fff8e1;border:1px solid #ffe082}
.note{width:100%;min-height:120px}
.score{font-weight:700;color:var(--green-600)}
.print-only{display:none}
@media print{
  .header,.controls,.modal{display:none !important}
  .print-only{display:block}
  body{background:#fff}
}
.small{font-size:12px;color:#666}

.header .brand h1{font-size:1.25rem; line-height:1.2; font-weight:700}
.header .small{font-size:.85rem}
.controls{gap:8px}
.controls input,.controls select,.controls button{padding:8px 10px}
@media (max-width:900px){
  .brand img{height:38px}
  .header .brand h1{font-size:1.05rem}
}

/* Ensure modal overlays sticky header */
.modal{z-index:9999}
.panel{max-height:90vh}
.panel .content{overflow:auto}
body.no-scroll{overflow:hidden}

/* Scoreboard */
.scorebar{display:flex;align-items:center;gap:10px;margin-left:auto}
#global-score{font-weight:700;color:var(--green-600)}

/* Certificate modal */
.cert-wrap{background:#fff; padding:24px}
.cert{max-width:850px; margin:0 auto; border:6px double var(--green); border-radius:20px; padding:28px; background:#ffffff}
.cert h2{font-size:2rem; text-align:center; margin:0 0 8px 0; color:var(--green-600)}
.cert .subtitle{text-align:center; margin:0 0 16px 0}
.cert .name-line{margin:20px 0; text-align:center; font-size:1.4rem}
.cert .stats{display:flex; justify-content:center; gap:20px; margin:16px 0}
.cert .stamp{margin-top:16px; text-align:right; color:#555}
.cert .laurel{font-size:2rem; text-align:center; margin:10px 0}
.cert input[name="learner"]{padding:10px 12px; border-radius:12px; border:1px solid #cfd8dc; width:280px}
.cert-controls{display:flex; gap:10px; justify-content:center; margin-top:12px}
@media print{
  .cert-controls, .header, .controls, .actions, #modal, #cert-modal{display:none !important}
  .print-certificate{display:block}
}
.print-certificate{display:none}

/* Confetti */
.confetti{position:fixed; top:-10px; width:8px; height:14px; background:var(--accent); opacity:.9; transform:rotate(15deg); animation:fall 3s linear forwards}
@keyframes fall{ to { transform:translateY(110vh) rotate(360deg);} }

/* Solutions modal */
.solutions{padding:16px}
.sol-item{border:1px solid #e0e0e0; border-radius:12px; padding:12px; margin:10px 0; background:#fcfffc}
.sol-item h4{margin:0 0 8px 0; color:var(--green-600)}
.sol-q{margin:6px 0}
.sol-opt{margin-left:14px; padding:2px 0}
.sol-correct{font-weight:700}
.sol-correct::after{content:" ✅";}