/* =========================================================
   ZapThru Academy — ISC Class 12 Prep
   Core design system (shared across all pages/subjects)
   ========================================================= */

:root{
  --brand-navy:   #10213d;
  --brand-blue:   #1d4fd7;
  --brand-blue-2: #3b7bff;
  --brand-gold:   #f2a916;
  --brand-green:  #1f9d63;
  --brand-red:    #d64545;
  --brand-amber:  #e0980c;

  --bg:           #f5f7fb;
  --bg-card:      #ffffff;
  --bg-soft:      #eef2fb;
  --border:       #dde3f0;
  --text:         #1b2436;
  --text-soft:    #55617a;
  --text-faint:   #8791a6;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 3px rgba(16,33,61,.08);
  --shadow-md: 0 6px 24px rgba(16,33,61,.10);
  --shadow-lg: 0 16px 40px rgba(16,33,61,.16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ padding:0; margin:0; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--brand-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.25; color:var(--brand-navy); }
p{ margin:0 0 1em; }
.container{ max-width:1080px; margin:0 auto; padding:0 20px; }
.container-narrow{ max-width:760px; margin:0 auto; padding:0 20px; }

/* ---------- Top nav ---------- */
.site-header{
  background: linear-gradient(120deg, var(--brand-navy), #16305c 65%);
  color:#fff;
  position: sticky; top:0; z-index: 50;
  box-shadow: var(--shadow-md);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:1080px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--brand-gold), #ffcf5c);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--brand-navy); font-size:18px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .name{ font-weight:800; font-size:17px; letter-spacing:.2px; }
.brand-text .tag{ font-size:11px; color:#b9c6e6; letter-spacing:.4px; text-transform:uppercase; }
.site-nav{ display:flex; gap:18px; align-items:center; font-size:14px; }
.site-nav a{ color:#dbe4fb; }
.site-nav a:hover{ color:#fff; }
.profile-chip{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:6px 12px; border-radius: 999px; font-size:13px;
}
.profile-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-green); }

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(1200px 400px at 80% -10%, #1e3a70 0%, transparent 60%), var(--brand-navy);
  color:#fff; padding: 46px 0 60px;
}
.hero h1{ color:#fff; font-size:32px; margin-bottom:8px; }
.hero p.lead{ color:#c7d3ef; font-size:16px; max-width:620px; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(242,169,22,.15); color: var(--brand-gold);
  border:1px solid rgba(242,169,22,.35);
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.3px; text-transform:uppercase; margin-bottom:14px;
}

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card.hoverable:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.subject-card{
  display:flex; flex-direction:column; gap:10px; position:relative;
}
.subject-card .badge{
  position:absolute; top:16px; right:16px;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
}
.badge-live{ background:#e4f7ec; color:var(--brand-green); }
.badge-soon{ background:#f1f2f6; color:var(--text-faint); }

.paper-card{ display:flex; flex-direction:column; gap:8px; }
.paper-card .meta{ display:flex; gap:14px; font-size:12.5px; color:var(--text-soft); flex-wrap:wrap; }
.paper-card .meta span{ display:flex; align-items:center; gap:5px; }
.paper-card .status-row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.tag-chip{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 9px;
  border-radius:999px; background: var(--bg-soft); color: var(--brand-blue);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius: 10px; font-weight:700; font-size:14px;
  border:1px solid transparent; cursor:pointer; transition:.15s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background: var(--brand-blue); color:#fff; box-shadow: 0 4px 14px rgba(29,79,215,.35); }
.btn-primary:hover{ background:#1743bd; }
.btn-gold{ background: var(--brand-gold); color:#39270a; }
.btn-gold:hover{ background:#e0980c; }
.btn-ghost{ background:transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ background: var(--bg-soft); }
.btn-outline-light{ background:transparent; border-color: rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); }
.btn-sm{ padding:6px 12px; font-size:13px; border-radius:8px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--text-soft); margin-bottom:6px; }
input[type=text], input[type=email], textarea, select{
  width:100%; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; font-size:14px; font-family:var(--font); background:#fff; color:var(--text);
}
textarea{ resize:vertical; min-height:120px; }
input[type=text]:focus, textarea:focus, select:focus{ outline:2px solid var(--brand-blue-2); outline-offset:1px; }

/* ---------- Timer ---------- */
.test-topbar{
  position: sticky; top:0; z-index:60;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.test-topbar .inner{
  max-width:1080px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.test-title{ font-weight:700; font-size:14px; color:var(--brand-navy); }
.test-title .sub{ display:block; font-size:11.5px; color:var(--text-faint); font-weight:500; }
.timer-box{
  display:flex; align-items:center; gap:10px;
  background: var(--brand-navy); color:#fff;
  padding:8px 16px; border-radius:12px; box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}
.timer-box .clock-icon{ font-size:16px; }
.timer-box .time{ font-size:20px; font-weight:800; letter-spacing:.5px; }
.timer-box.warn{ background: var(--brand-amber); }
.timer-box.danger{ background: var(--brand-red); animation: pulse 1s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(214,69,69,.6);} 70%{ box-shadow:0 0 0 10px rgba(214,69,69,0);} 100%{ box-shadow:0 0 0 0 rgba(214,69,69,0);} }

/* ---------- Test layout ---------- */
.test-layout{ display:grid; grid-template-columns: 230px 1fr; gap:24px; padding:24px 0 80px; }
@media (max-width: 800px){ .test-layout{ grid-template-columns: 1fr; } }
.qnav{ position: sticky; top:76px; align-self:start; }
.qnav-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:8px; margin-top:10px; }
@media (max-width: 800px){ .qnav-grid{ grid-template-columns: repeat(8,1fr); } }
.qnav-btn{
  width:100%; aspect-ratio:1; border-radius:8px; border:1px solid var(--border);
  background:#fff; font-size:12.5px; font-weight:700; color:var(--text-soft); cursor:pointer;
}
.qnav-btn.answered{ background:#e4f7ec; border-color:#bfe9d2; color:var(--brand-green); }
.qnav-btn.current{ outline:2px solid var(--brand-blue); }
.qnav-btn.flagged{ box-shadow: inset 0 0 0 2px var(--brand-gold); }
.qnav-legend{ font-size:11.5px; color:var(--text-faint); margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.legend-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }

.section-banner{
  background: var(--bg-soft); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:12px 16px; margin-bottom:16px; font-size:13.5px; color:var(--text-soft);
}
.section-banner b{ color: var(--brand-navy); }

.question-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding:24px; box-shadow: var(--shadow-sm); }
.question-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.question-num{ font-size:12px; font-weight:800; color: var(--brand-blue); text-transform:uppercase; letter-spacing:.4px; }
.question-marks{ font-size:12px; font-weight:700; color:var(--text-faint); background:var(--bg-soft); padding:3px 10px; border-radius:999px; white-space:nowrap; }
.question-prompt{ font-size:15.5px; color:var(--text); margin-bottom:14px; }
.passage-box{
  background: var(--bg-soft); border-left:4px solid var(--brand-blue-2);
  padding:16px 18px; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size:14.5px; color:var(--text); margin-bottom:18px; max-height:420px; overflow-y:auto;
}
.mcq-option{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; cursor:pointer; }
.mcq-option:hover{ background: var(--bg-soft); }
.mcq-option input{ margin-top:3px; }
.mcq-option.selected{ border-color: var(--brand-blue); background:#eef3ff; }

.test-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px; flex-wrap:wrap; }
.word-counter{ font-size:12px; color: var(--text-faint); }
.word-counter.over{ color: var(--brand-red); font-weight:700; }

/* ---------- Results ---------- */
.score-hero{
  background: linear-gradient(135deg, var(--brand-navy), #1b3a6d);
  color:#fff; border-radius: var(--radius-lg); padding:28px; display:flex; gap:30px; flex-wrap:wrap; align-items:center;
}
.score-ring{
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: conic-gradient(var(--brand-gold) calc(var(--pct,0) * 1%), rgba(255,255,255,.12) 0);
}
.score-ring .inner{
  width:94px; height:94px; border-radius:50%; background: var(--brand-navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring .big{ font-size:22px; font-weight:800; }
.score-ring .small{ font-size:11px; color:#b9c6e6; }

.result-item{ border:1px solid var(--border); border-radius: var(--radius-md); margin-bottom:14px; overflow:hidden; }
.result-item .r-head{ display:flex; justify-content:space-between; gap:10px; padding:12px 16px; cursor:pointer; background:#fafbfd; align-items:center; }
.result-item .r-body{ padding:16px; border-top:1px solid var(--border); display:none; }
.result-item.open .r-body{ display:block; }
.status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; }
.status-correct{ background: var(--brand-green); }
.status-partial{ background: var(--brand-amber); }
.status-incorrect{ background: var(--brand-red); }
.verdict-label{ font-size:12.5px; font-weight:700; }
.verdict-correct{ color: var(--brand-green); }
.verdict-partial{ color: var(--brand-amber); }
.verdict-incorrect{ color: var(--brand-red); }

.answer-compare{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin:10px 0; }
@media (max-width:700px){ .answer-compare{ grid-template-columns: 1fr; } }
.answer-box{ border-radius:10px; padding:12px 14px; font-size:13.5px; }
.answer-box.yours{ background:#fdf2f2; border:1px solid #f3d3d3; }
.answer-box.correct{ background:#eefaf3; border:1px solid #cdeedd; }
.answer-box .lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; display:block; color:var(--text-faint); }
.explain-box{ background: var(--bg-soft); border-radius:10px; padding:12px 14px; font-size:13.5px; margin-top:6px; }
.explain-box .lbl{ font-weight:800; color: var(--brand-blue); font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; display:block; }

.rubric-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13.5px; }
.rubric-row:last-child{ border-bottom:none; }
.self-score-input{ width:60px; text-align:center; }

/* ---------- Analytics ---------- */
.stat-card{ text-align:center; }
.stat-card .num{ font-size:30px; font-weight:800; color: var(--brand-navy); }
.stat-card .label{ font-size:12.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.3px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bar-row .lbl{ width:170px; font-size:13px; color:var(--text-soft); flex-shrink:0; }
.bar-track{ flex:1; height:10px; background: var(--bg-soft); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--brand-blue-2), var(--brand-blue)); }
.bar-pct{ width:42px; text-align:right; font-size:12.5px; font-weight:700; color:var(--text-soft); }

.trend-up{ color: var(--brand-green); font-weight:700; }
.trend-down{ color: var(--brand-red); font-weight:700; }
.trend-flat{ color: var(--text-faint); font-weight:700; }

.coach-note{
  background: #fff8ea; border:1px solid #f4e1ab; border-radius: var(--radius-md);
  padding:14px 16px; font-size:13.5px; color:#6b4d0c; display:flex; gap:10px;
}
.coach-note .icon{ font-size:18px; }

footer.site-footer{ padding:40px 0; text-align:center; color: var(--text-faint); font-size:12.5px; }

.empty-state{ text-align:center; padding:60px 20px; color: var(--text-faint); }
.empty-state .big-icon{ font-size:40px; margin-bottom:12px; }

.modal-overlay{ position:fixed; inset:0; background:rgba(16,33,61,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box{ background:#fff; border-radius: var(--radius-lg); padding:26px; max-width:440px; width:100%; box-shadow: var(--shadow-lg); }

.blank-current{ background: #fff3cf;