:root{
  --bg:#f7faf9;
  --card:#ffffff;
  --ink:#0b1b18;
  --muted:#2b4d43;
  --brand:#0a7f5a;
  --brand-2:#0fa072;
  --warn:#b53a3a;
  --ok:#157a3e;
  --focus:#005fcc;
  --ring: 0 0 0 3px rgba(0,95,204,.25);
  --shadow:0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.app-header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:12px 16px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:.75rem}
.badge{
  width:44px;height:44px;border-radius:12px;background:#fff1;border:2px solid #fff6;
  display:grid;place-items:center;font-weight:700;letter-spacing:.5px
}
.titles h1{margin:0;font-size:1.25rem}
.subtitle{margin:.15rem 0 0 0;opacity:.9;font-size:.9rem}
.header-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{
  border:0;border-radius:12px;padding:.6rem .9rem;font-weight:600;cursor:pointer;
  background:var(--brand);color:#fff;box-shadow:var(--shadow)
}
.btn.primary{background:var(--brand)}
.btn.ghost{background:#ffffff20;color:#fff;border:2px solid #ffffff55}
.btn.warn{background:var(--warn)}
.btn:focus{outline:none;box-shadow:var(--ring)}
.container{max-width:1100px;margin:16px auto;padding:0 12px}
.card{
  background:var(--card);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);margin-bottom:16px
}
.grid.two{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}
.table-wrap{overflow:auto}
table.mini{border-collapse:collapse;width:100%}
table.mini th, table.mini td{border:1px solid #d7e4df;padding:.5rem;text-align:left}
.pill-list{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:.5rem 0 0 0;list-style:none}
.pill-list li{background:#eaf5f1;color:#0b3c2e;padding:.35rem .6rem;border-radius:999px;border:1px solid #cfe9df}
.note{margin-top:.5rem;color:var(--muted)}
.progress-row{display:flex;align-items:center;gap:12px}
.progress-label{font-weight:700}
.progress-bar{flex:1;background:#e2efe9;border-radius:999px;height:14px;overflow:hidden;border:1px solid #cfe3da}
#progress-fill{height:100%;width:0;background:linear-gradient(90deg,#19b47b,#62d8ad)}
.progress-text{font-variant-numeric:tabular-nums}
.stars{font-weight:700}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.tab{
  background:#eaf5f1;border:1px solid #cfe9df;color:#0b3c2e;
  border-radius:12px;padding:.5rem .75rem;cursor:pointer;font-weight:700
}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.panel{display:none}
.panel.active{display:block}
.quiz .q{margin-bottom:12px}
.quiz .q h4{margin:0 0 8px 0}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.choice{
  background:#fff;border:2px solid #cfe9df;border-radius:12px;padding:.65rem .75rem;cursor:pointer;
  box-shadow:var(--shadow);text-align:left
}
.choice:focus{outline:none;box-shadow:var(--ring)}
.choice.correct{border-color:#37a46a;background:#e9f8f0}
.choice.wrong{border-color:#d96e6e;background:#fdeeee}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--muted)}
.footer{opacity:.9;text-align:center;padding:16px 0}
#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  padding:.8rem 1rem;background:#111;color:#fff;border-radius:12px;opacity:0;pointer-events:none;
}
#toast.show{opacity:1;animation:fadeout 1.6s 0.8s forwards}
@keyframes fadeout{to{opacity:0;transform:translateX(-50%) translateY(10px)}}

/* Star confetti */
@keyframes fall{to{transform:translateY(100vh) rotate(360deg);opacity:0}}
.star{
  position:fixed;top:-10px;font-size:18px;animation:fall 2.4s linear forwards;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}
.star:nth-child(3n){font-size:14px}
.star:nth-child(5n){font-size:20px}

/* Printing */
@media print{
  .header-actions,.tabs,.start-btn,#toast,.pwa-hint{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}
}