/* v3 — Login + Challenge Mode + Streaks + Dynamic Backgrounds */
: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);min-height:100vh;}

/* Category-driven brand color */
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; }

/* Dynamic scene layer */
.bg-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background: radial-gradient(800px 400px at 10% 20%, rgba(58,134,255,0.10), transparent),
              radial-gradient(800px 400px at 90% 30%, rgba(255,214,10,0.10), transparent);
  transition: background 0.6s ease, filter .6s ease;
}
/* Scene presets (CSS-only, lightweight) */
body[data-theme="Earth & Space"] .bg-layer{
  background: radial-gradient(1000px 600px at 20% 20%, rgba(114,9,183,0.25), transparent),
              radial-gradient(800px 400px at 80% 60%, rgba(0,0,0,0.45), transparent),
              repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0 2px, transparent 2px 6px);
  filter: saturate(1.2);
}
body[data-theme="Plants"] .bg-layer{
  background: radial-gradient(900px 500px at 15% 30%, rgba(56,176,0,0.20), transparent),
              radial-gradient(800px 400px at 85% 70%, rgba(130,219,75,0.18), transparent);
}
body[data-theme="Animals"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(255,183,3,0.20), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(255,111,0,0.18), transparent);
}
body[data-theme="Matter & Materials"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(58,134,255,0.20), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(144,202,249,0.18), transparent);
}
body[data-theme="Energy & Forces"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(255,214,10,0.25), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(255,255,255,0.2), transparent);
}
body[data-theme="Weather & Climate"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(0,180,216,0.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(173,232,244,0.2), transparent);
}
body[data-theme="Simple Machines"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(251,133,0,0.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(255,204,128,0.18), transparent);
}
body[data-theme="Habitats & Food Chains"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(45,106,79,0.25), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(88,129,87,0.2), transparent);
}
body[data-theme="Human Body & Health"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(255,107,107,0.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(255,179,186,0.18), transparent);
}
body[data-theme="Safety & Lab Skills"] .bg-layer{
  background: radial-gradient(900px 500px at 25% 25%, rgba(108,117,125,0.22), transparent),
              radial-gradient(800px 400px at 75% 65%, rgba(206,212,218,0.18), 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,0.7);
  border-bottom:1px solid #e6eef8;backdrop-filter:blur(8px)
}
.brand{display:flex;gap:12px;align-items:center}
.crest{width:46px;height:46px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.08);background:#fff;padding:4px}
.crest-small{width:64px;height:auto;margin-bottom:8px}
h1{font-size:20px;margin:0}
.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;transition:transform .15s, box-shadow .2s;
}
button:hover{transform:translateY(-1px)}
button.accent{background:var(--brand);border-color:var(--brand);color:#001b2e}
button.secondary{background:#fff;border-color:#d4e6fb}

#main{max-width:980px;margin:22px auto;padding:0 16px;position:relative;z-index:1}
.panel{background:rgba(255,255,255,0.9);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}

.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;transition:transform .1s}
#options-list li:hover{transform:translateY(-2px)}
#options-list li button{flex:1;text-align:left;border:none;background:transparent;box-shadow:none;padding:0;font-weight:600}
#options-list li.correct{background:#e7f7ed;border-color:#b6ebc8}
#options-list li.incorrect{background:#fdecec;border-color:#f5b7b7}

.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;color:#0e2433}

.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}

.overlay{
  position:fixed;inset:0;background:rgba(14,36,51,0.65);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:999;
}
.modal{background:#fff;border-radius:16px;box-shadow:0 12px 28px rgba(9,30,66,0.10);padding:20px;max-width:420px;width:92%}
.modal h2{margin:6px 0}
.modal .hint{color:var(--muted);font-size:12px;margin-top:8px}
.modal input{width:100%;margin:8px 0}
.row{display:flex;gap:8px;justify-content:flex-end}