/* v4 adds PWA, AI Coach, new categories & question types */
:root{ --bg:#f6fbff; --panel:#ffffff; --ink:#0e2433; --muted:#5b7b99; --brand:#3a86ff; --shadow:0 12px 28px rgba(9,30,66,0.10); }
body{margin:0;padding:0;font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}

/* brand by category (same tokens as v3) */
body[data-theme="Human Body & Health"]{ --brand:#ff6b6b; }
body[data-theme="Plants"]{ --brand:#38b000; }
body[data-theme="Animals"]{ --brand:#ffb703; }
body[data-theme="Matter & Materials"]{ --brand:#3a86ff; }
body[data-theme="Energy & Forces"]{ --brand:#ffd60a; }
body[data-theme="Earth & Space"]{ --brand:#7209b7; }
body[data-theme="Weather & Climate"]{ --brand:#00b4d8; }
body[data-theme="Simple Machines"]{ --brand:#fb8500; }
body[data-theme="Habitats & Food Chains"]{ --brand:#2d6a4f; }
body[data-theme="Safety & Lab Skills"]{ --brand:#6c757d; }
body[data-theme="Science Grade 7"]{ --brand:#6f42c1; }
body[data-theme="Social Studies (Jamaica)"]{ --brand:#1d4ed8; }
body[data-theme="World Capitals"]{ --brand:#14b8a6; }
body[data-theme="Caribbean Capitals"]{ --brand:#0ea5e9; }

.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background .6s, filter .6s}
body[data-theme="World Capitals"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(20,184,166,.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(16,185,129,.2), transparent);
}
body[data-theme="Caribbean Capitals"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(14,165,233,.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(59,130,246,.2), transparent);
}

.app-header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid #e6eef8}
.brand{display:flex;gap:12px;align-items:center}
.crest{width:46px;height:46px;border-radius:12px;background:#fff;padding:4px;box-shadow:0 8px 18px rgba(9,30,66,0.08)}
.subtitle{margin:2px 0 0 0;color:var(--muted);font-size:13px}
.controls{display:flex;gap:8px;align-items:center}
button, select, input{border:1px solid #cfe2f7;background:#fff;color:var(--ink);padding:10px 12px;border-radius:12px;box-shadow:0 8px 18px rgba(9,30,66,0.08);font-weight:600;cursor:pointer}
button.accent{background:var(--brand);border-color:var(--brand);color:#001b2e}
button.secondary{background:#fff;border-color:#d4e6fb}
label.upload{display:inline-block;cursor:pointer}

#main{max-width:980px;margin:22px auto;padding:0 16px;position:relative;z-index:1}
.panel{background:rgba(255,255,255,.92);border:1px solid #e6eef8;border-radius:20px;box-shadow:0 12px 28px rgba(9,30,66,0.10);padding:18px;margin-bottom:16px}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel-actions{display:flex;gap:10px;align-items:center}
.hidden{display:none}

.login-grid{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:center}

.profile-left{display:flex;gap:16px;align-items:flex-start}
.avatar{font-size:40px;background:#fff;border-radius:14px;padding:10px;box-shadow:0 8px 18px rgba(9,30,66,0.08)}
.profile-right{display:flex;gap:14px;align-items:stretch}
.stat{background:#f8fbff;border:1px solid #e6eef8;border-radius:14px;padding:10px 12px;min-width:120px;text-align:center}
.stat strong{font-size:20px}
.muted{color:var(--muted)}
.xp-bar{width:260px;height:12px;border-radius:999px;background:#e7f1fb;border:1px solid #d1e4fb;overflow:hidden;margin-top:8px}
.xp-fill{height:100%;width:0;background:var(--brand);transition:width .4s}

.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar .day{background:#fff;border:1px solid #e6eef8;border-radius:10px;padding:10px;text-align:center;color:#5b7b99}
.calendar .day.on{background:#d1f7d6;border-color:#a2e3ad;color:#0a6e1f}
.calendar .day.today{border-color:var(--brand)}

.card{position:relative;border:1px dashed #d7e7fb;border-radius:16px;padding:24px;min-height:180px;background:linear-gradient(180deg,#fff, #f4f9ff)}
.fc-front,.fc-back{font-size:18px;line-height:1.6}
.fc-back{margin-top:10px;color:var(--muted)}

.question-area{padding:6px 4px}
#question-text{font-size:20px;margin:10px 0 14px}
#options-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#options-list li{border:1px solid #d3e6fb;border-radius:12px;padding:12px;background:#fff;display:flex;justify-content:space-between;align-items:center}
#options-list li.correct{background:#e7f7ed;border-color:#b6ebc8}
#options-list li.incorrect{background:#fdecec;border-color:#f5b7b7}

#input-wrap input{width:100%;padding:12px;border:1px solid #d3e6fb;border-radius:12px;font-weight:600}

.explanation{margin-top:10px;padding:10px;border-left:4px solid var(--brand);background:rgba(124,197,255,0.15);border-radius:8px}
#progress-bar{width:220px;height:10px;background:#e7f1fb;border-radius:999px;overflow:hidden;border:1px solid #d1e4fb}
#progress-fill{height:100%;width:0;background:var(--brand);transition:width .35s ease}
#score-chip{font-weight:800;border:1px solid #d1e4fb;padding:6px 10px;border-radius:999px;background:#fff}
.chip{border:1px solid #d1e4fb;background:#fff;border-radius:999px;padding:6px 10px;font-weight:700}

.stars{display:flex;gap:4px}
.stars .star{filter:grayscale(1);opacity:.4}
.stars .star.on{filter:none;opacity:1}

.quiz-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.missed{display:grid;gap:10px;margin-top:10px}
.missed .missed-card{border:1px solid #f2d1d1;background:#fff8f8;border-radius:12px;padding:10px}

.app-footer{max-width:980px;margin:14px auto 30px;padding:0 16px;color:var(--muted);font-size:12px;text-align:center}