/* ===== RCW Certification Exam Simulator ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0f172a; --bg2:#111c33; --card:#1a2742; --card2:#1f2f50;
  --ink:#e8edf7; --muted:#94a3b8; --line:#2b3c60;
  --acc:#4f8cff; --acc2:#7c5cff;
  --ok:#22c55e; --okbg:rgba(34,197,94,.12);
  --bad:#ef4444; --badbg:rgba(239,68,68,.12);
  --warn:#f59e0b;
  --radius:16px;
}
html,body{ height:100%; }
body{
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #1c2c52 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink); line-height:1.55;
}
.hidden{ display:none !important; }
#app{ min-height:100vh; }

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(15,23,42,.85); backdrop-filter:blur(10px); z-index:20;
}
.logo{ font-size:1.25rem; font-weight:800; letter-spacing:.3px; }
.logo span{ color:var(--acc); font-weight:600; }
.top-nav a{ color:var(--muted); text-decoration:none; margin-left:22px; font-weight:600; }
.top-nav a:hover{ color:var(--ink); }

/* Hero */
.hero{ text-align:center; padding:64px 24px 28px; max-width:880px; margin:0 auto; }
.hero h1{ font-size:2.7rem; line-height:1.15; font-weight:800; }
.hero h1 em{ background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal; }
.hero p{ color:var(--muted); margin:18px auto 0; max-width:680px; font-size:1.05rem; }
.hero-badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.badge{ background:var(--card); border:1px solid var(--line); color:var(--ink); padding:7px 14px; border-radius:999px; font-size:.86rem; font-weight:600; }

/* Exam grid */
.exam-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; padding:34px 32px 60px; max-width:1200px; margin:0 auto; }
.exam-card{
  background:linear-gradient(160deg, var(--card), var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.exam-card:hover{ transform:translateY(-4px); border-color:var(--acc); box-shadow:0 18px 40px -18px rgba(79,140,255,.45); }
.exam-card .vendor{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; color:var(--acc); }
.exam-card h3{ font-size:1.35rem; }
.exam-card .code{ color:var(--muted); font-weight:600; font-size:.9rem; }
.exam-card p{ color:var(--muted); font-size:.92rem; flex:1; }
.exam-stats{ display:flex; gap:16px; font-size:.86rem; color:var(--ink); }
.exam-stats span{ background:rgba(79,140,255,.12); border:1px solid rgba(79,140,255,.3); padding:4px 10px; border-radius:8px; font-weight:600; }
.exam-config{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.exam-config label{ font-size:.82rem; color:var(--muted); font-weight:600; }
.select-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
select{
  width:100%; background:var(--bg2); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font-size:.92rem; font-weight:600; cursor:pointer;
}
select:focus{ outline:2px solid var(--acc); }
.mode-toggle{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mode-toggle button{ background:transparent; border:0; color:var(--muted); padding:10px 8px; font-weight:700; font-size:.88rem; cursor:pointer; }
.mode-toggle button.active{ background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; }
.btn{
  border:0; border-radius:11px; padding:12px 20px; font-size:.95rem; font-weight:700;
  cursor:pointer; transition:filter .15s, transform .1s; font-family:inherit;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; width:100%; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-secondary{ background:var(--card2); color:var(--ink); border:1px solid var(--line); }
.btn-secondary:hover{ border-color:var(--acc); }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); padding:8px 14px; }
.btn-ghost:hover{ color:var(--bad); border-color:var(--bad); }
.btn-block{ width:100%; margin-top:14px; }
.btn-flag{ background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:9px; cursor:pointer; font-weight:700; font-size:.85rem; }
.btn-flag.flagged{ background:rgba(245,158,11,.15); border-color:var(--warn); color:var(--warn); }

.site-footer{ border-top:1px solid var(--line); padding:26px 32px; color:var(--muted); font-size:.82rem; text-align:center; }

/* ===== Quiz ===== */
.quiz-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--line); gap:14px; background:rgba(15,23,42,.9); position:sticky; top:0; z-index:20; }
.quiz-meta{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.quiz-title{ font-weight:800; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mode-chip{ background:rgba(124,92,255,.18); border:1px solid rgba(124,92,255,.4); color:#c4b5fd; padding:3px 12px; border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.quiz-timer{ font-variant-numeric:tabular-nums; font-weight:800; font-size:1.05rem; background:var(--card); border:1px solid var(--line); padding:6px 14px; border-radius:10px; min-width:86px; text-align:center; }
.quiz-timer.low{ color:var(--bad); border-color:var(--bad); animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.6; } }
.progress-wrap{ height:6px; background:var(--card2); }
.progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .25s; }

.quiz-main{ display:grid; grid-template-columns:1fr 300px; gap:24px; max-width:1150px; margin:0 auto; padding:28px; align-items:start; }
.question-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.q-topline{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.q-number{ background:var(--card2); border:1px solid var(--line); color:var(--acc); font-weight:800; padding:4px 12px; border-radius:8px; font-size:.9rem; }
.q-category{ color:var(--muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; flex:1; }
.q-text{ font-size:1.18rem; font-weight:700; line-height:1.45; margin-bottom:22px; }
.options{ display:flex; flex-direction:column; gap:12px; }
.option{
  display:flex; align-items:flex-start; gap:13px; padding:15px 17px; border-radius:12px;
  background:var(--bg2); border:1.5px solid var(--line); cursor:pointer; transition:border-color .12s, background .12s;
  font-weight:600; font-size:.98rem;
}
.option:hover{ border-color:var(--acc); }
.option .letter{
  width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:var(--card2);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--muted);
}
.option.selected{ border-color:var(--acc); background:rgba(79,140,255,.1); }
.option.selected .letter{ background:var(--acc); color:#fff; }
.option.correct{ border-color:var(--ok); background:var(--okbg); }
.option.correct .letter{ background:var(--ok); color:#fff; }
.option.wrong{ border-color:var(--bad); background:var(--badbg); }
.option.wrong .letter{ background:var(--bad); color:#fff; }
.option.disabled{ cursor:default; }
.option.disabled:hover{ border-color:var(--line); }
.option.correct:hover,.option.wrong:hover{ cursor:default; }

.explanation{ margin-top:20px; border-radius:12px; padding:16px 18px; border:1px solid var(--line); background:var(--bg2); }
.explanation.good{ border-color:var(--ok); background:var(--okbg); }
.explanation.bad{ border-color:var(--bad); background:var(--badbg); }
.exp-head{ font-weight:800; margin-bottom:6px; }
.explanation.good .exp-head{ color:var(--ok); }
.explanation.bad .exp-head{ color:var(--bad); }
.explanation p{ color:var(--ink); font-size:.93rem; }

.palette-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:sticky; top:86px; }
.palette-legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:.76rem; color:var(--muted); margin-bottom:14px; }
.palette-legend span{ display:flex; align-items:center; gap:6px; }
.dot{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.dot-current{ background:var(--acc); }
.dot-answered{ background:var(--ok); }
.dot-flagged{ background:var(--warn); }
.dot-unseen{ background:var(--card2); border:1px solid var(--line); }
.palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; max-height:260px; overflow-y:auto; padding:2px; }
.pal-cell{
  aspect-ratio:1; border-radius:8px; border:1px solid var(--line); background:var(--bg2);
  color:var(--muted); font-size:.78rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.pal-cell.answered{ background:rgba(34,197,94,.22); border-color:var(--ok); color:#bbf7d0; }
.pal-cell.current{ outline:2px solid var(--acc); outline-offset:1px; }
.pal-cell.flagged::after{ content:'⚑'; position:absolute; top:-6px; right:-4px; color:var(--warn); font-size:.7rem; }

.quiz-footer{
  position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; border-top:1px solid var(--line); background:rgba(15,23,42,.92);
  backdrop-filter:blur(8px); z-index:20; gap:14px;
}
.answered-count{ color:var(--muted); font-weight:600; font-size:.9rem; }
.quiz-footer .btn{ width:auto; padding:12px 26px; }

/* ===== Results ===== */
.results-wrap{ max-width:900px; margin:0 auto; padding:40px 24px 80px; }
.score-hero{ text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:44px 28px; }
.score-ring{
  width:180px; height:180px; margin:0 auto 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ok) 0deg, var(--card2) 0deg);
  border:6px solid var(--bg2);
}
.score-ring.fail{ background:conic-gradient(var(--bad) 0deg, var(--card2) 0deg); }
.score-inner{ width:136px; height:136px; border-radius:50%; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-inner span{ font-size:2.3rem; font-weight:800; }
.score-inner small{ color:var(--muted); font-weight:600; }
.score-hero h1{ font-size:1.9rem; margin-bottom:6px; }
#result-sub{ color:var(--muted); margin-bottom:22px; }
.result-stats{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.result-stats .rs{ background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 20px; min-width:110px; }
.result-stats .rs b{ display:block; font-size:1.35rem; }
.result-stats .rs small{ color:var(--muted); font-weight:600; }
.result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.result-actions .btn{ width:auto; padding:13px 26px; }

.category-report{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-top:26px; }
.category-report h2{ font-size:1.15rem; margin-bottom:18px; }
.cat-row{ margin-bottom:14px; }
.cat-row .cat-label{ display:flex; justify-content:space-between; font-size:.88rem; font-weight:600; margin-bottom:5px; }
.cat-row .cat-label .pct{ color:var(--muted); }
.cat-track{ height:10px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.cat-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--acc),var(--acc2)); }
.cat-fill.weak{ background:linear-gradient(90deg,var(--bad),#f97316); }

.review-section{ margin-top:30px; }
.review-section h2{ font-size:1.2rem; margin-bottom:14px; }
.review-filters{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.filter-btn{ background:var(--card); border:1px solid var(--line); color:var(--muted); padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:700; font-size:.85rem; }
.filter-btn.active{ background:var(--acc); border-color:var(--acc); color:#fff; }
.review-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:12px; }
.review-item .ri-head{ display:flex; gap:10px; align-items:center; margin-bottom:10px; font-size:.85rem; }
.ri-tag{ font-weight:800; padding:3px 10px; border-radius:8px; }
.ri-tag.ok{ background:var(--okbg); color:var(--ok); }
.ri-tag.no{ background:var(--badbg); color:var(--bad); }
.ri-tag.flag{ background:rgba(245,158,11,.15); color:var(--warn); }
.ri-cat{ color:var(--muted); font-weight:600; }
.review-item h4{ font-size:1rem; margin-bottom:10px; line-height:1.45; }
.ri-opt{ padding:8px 12px; border-radius:8px; margin-bottom:5px; font-size:.9rem; font-weight:600; background:var(--bg2); border:1px solid transparent; }
.ri-opt.is-correct{ border-color:var(--ok); background:var(--okbg); }
.ri-opt.is-wrong{ border-color:var(--bad); background:var(--badbg); }
.ri-opt .mark{ font-weight:800; margin-right:8px; }
.ri-exp{ color:var(--muted); font-size:.88rem; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }

@media (max-width: 900px){
  .quiz-main{ grid-template-columns:1fr; }
  .palette-card{ position:static; }
  .hero h1{ font-size:2rem; }
  .palette{ grid-template-columns:repeat(10,1fr); max-height:none; }
}