/* ExamForge — Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d1117; --surface:#161b24; --surface2:#1e2533; --border:#2a3245;
  --amber:#e8a844; --amber-dim:#a3762e; --text:#e2e8f0; --muted:#7c8ba1;
  --green:#3dd68c; --red:#f87171; --blue:#60a5fa;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
  --r:12px;
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;min-height:100vh}

/* Screens */
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column}

/* ── SETUP ── */
#screen-setup{
  align-items:center;justify-content:center;padding:40px 20px;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,#1a2540 0%,transparent 70%),var(--bg);
}
.brand{text-align:center;margin-bottom:44px}
.brand h1{
  font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900;letter-spacing:-1px;
  background:linear-gradient(135deg,#e8a844 0%,#f5d07a 50%,#a3762e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.1;margin-bottom:8px;
}
.brand .tagline{color:var(--muted);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}

.setup-card{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:40px;width:100%;max-width:540px;box-shadow:0 24px 80px rgba(0,0,0,.5);
}

.upload-zone{
  border:2px dashed var(--border);border-radius:var(--r);padding:38px 20px;
  text-align:center;cursor:pointer;transition:border-color .22s,background .22s;
  position:relative;background:var(--bg);user-select:none;
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--amber);background:rgba(232,168,68,.04)}
.upload-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{width:52px;height:52px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:rgba(232,168,68,.12);border-radius:11px;font-size:23px}
.upload-zone h3{font-size:1rem;font-weight:600;margin-bottom:5px}
.upload-zone .sub{color:var(--muted);font-size:.82rem}
.file-chosen{display:none;color:var(--amber);font-family:var(--mono);font-size:.78rem;margin-top:9px;word-break:break-all}
.file-chosen.visible{display:block}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.form-group input[type="number"]{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:var(--mono);font-size:1.1rem;
  padding:11px 14px;outline:none;transition:border-color .2s;width:100%;
  -moz-appearance:textfield;
}
.form-group input::-webkit-outer-spin-button,.form-group input::-webkit-inner-spin-button{opacity:.4}
.form-group input:focus{border-color:var(--amber)}
.hint{font-size:.72rem;color:var(--muted)}

.error-box{
  display:none;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.35);
  border-radius:9px;padding:12px 16px;color:var(--red);font-size:.84rem;margin-top:16px;line-height:1.55;
}
.error-box.visible{display:block}

.btn-primary{
  width:100%;margin-top:22px;background:var(--amber);color:#0d1117;border:none;border-radius:10px;
  font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.04em;
  padding:14px 20px;cursor:pointer;transition:background .2s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:hover:not(:disabled){background:#f5c462;transform:translateY(-1px)}
.btn-primary:disabled{opacity:.38;cursor:not-allowed;transform:none}

/* ── LOADING ── */
#screen-loading{align-items:center;justify-content:center;background:var(--bg)}
.loading-inner{text-align:center;max-width:400px;padding:40px 20px}
.loading-inner h2{font-family:var(--serif);font-size:1.7rem;margin-bottom:10px}
.loading-inner>p{color:var(--muted);font-size:.9rem;margin-bottom:30px}
.spinner{width:50px;height:50px;margin:0 auto 24px;border:3px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-track{height:4px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:14px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--amber),#f5d07a);border-radius:99px;width:0%;transition:width .5s ease}
.load-status{font-family:var(--mono);font-size:.76rem;color:var(--muted);min-height:1.2em}

/* ── TEST ── */
#screen-test{background:var(--bg)}
.test-header{
  position:sticky;top:0;z-index:100;background:rgba(13,17,23,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.test-title{font-family:var(--serif);font-size:1.05rem;font-weight:700}
.test-meta{display:flex;align-items:center;gap:16px}
.progress-pill{font-family:var(--mono);font-size:.74rem;color:var(--muted);background:var(--surface2);border-radius:99px;padding:4px 12px;white-space:nowrap}
.timer-wrap{font-family:var(--mono);font-size:1.2rem;font-weight:500;color:var(--amber);display:flex;align-items:center;gap:5px;transition:color .3s}
.timer-wrap.warn{color:var(--red);animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.48}}

.test-body{flex:1;overflow-y:auto;padding:36px 20px 20px;display:flex;justify-content:center}
.questions-list{width:100%;max-width:700px}

.q-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;margin-bottom:18px}
.q-num{font-family:var(--mono);font-size:.7rem;color:var(--amber);text-transform:uppercase;letter-spacing:.12em;margin-bottom:9px}
.q-text{font-size:.96rem;font-weight:500;line-height:1.75;margin-bottom:17px}
.options{list-style:none;display:flex;flex-direction:column;gap:9px}
.opt-item label{
  display:flex;align-items:flex-start;gap:11px;width:100%;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:11px 15px;cursor:pointer;transition:border-color .14s,background .14s;font-size:.9rem;
}
.opt-item label:hover{border-color:var(--amber-dim);background:rgba(232,168,68,.04)}
.opt-item input[type="radio"]{display:none}
.opt-item input:checked+label{border-color:var(--amber);background:rgba(232,168,68,.08);color:var(--amber)}
.opt-letter{font-family:var(--mono);font-size:.76rem;color:var(--muted);min-width:19px;flex-shrink:0;margin-top:2px}
.opt-item input:checked+label .opt-letter{color:var(--amber)}

.test-footer{border-top:1px solid var(--border);padding:17px 24px;display:flex;justify-content:center;align-items:center;gap:18px;background:var(--bg);flex-shrink:0}
.answered-lbl{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.btn-submit{background:var(--amber);color:#0d1117;border:none;border-radius:10px;font-family:var(--sans);font-weight:700;font-size:.92rem;padding:13px 34px;cursor:pointer;transition:background .2s;letter-spacing:.03em}
.btn-submit:hover{background:#f5c462}

/* ── VIOLATION ── */
.violation-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(13,17,23,.97);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.violation-overlay.visible{display:flex}
.v-icon{font-size:3.5rem;margin-bottom:14px}
.violation-overlay h2{font-family:var(--serif);font-size:1.9rem;color:var(--red);margin-bottom:12px}
.violation-overlay p{color:var(--muted);max-width:420px;line-height:1.7;margin-bottom:24px}
.v-cd{font-family:var(--mono);font-size:1.1rem;color:var(--amber)}

/* ── RESULTS ── */
#screen-results{
  align-items:center;padding:48px 20px;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,#1a2540 0%,transparent 60%),var(--bg);
}
.results-inner{width:100%;max-width:700px}
.results-header{text-align:center;margin-bottom:38px}
.results-header h2{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900;margin-bottom:7px}
.results-header p{color:var(--muted);font-size:.9rem}

.ring-wrap{display:flex;justify-content:center;margin-bottom:38px}
.ring-svg{transform:rotate(-90deg);display:block}
.ring-bg{fill:none;stroke:var(--border);stroke-width:8}
.ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.ring-pct{font-family:var(--serif);font-weight:900;font-size:2.2rem;dominant-baseline:middle;text-anchor:middle}
.ring-word{font-family:var(--mono);font-size:.76rem;fill:var(--muted);dominant-baseline:middle;text-anchor:middle}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:30px}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;text-align:center}
.stat-val{font-family:var(--mono);font-size:1.5rem;font-weight:500}
.stat-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

.review-heading{font-family:var(--mono);font-size:.7rem;color:var(--amber);text-transform:uppercase;letter-spacing:.14em;margin:30px 0 14px}
.all-correct{text-align:center;padding:22px 0;color:var(--green);font-family:var(--mono);font-size:.88rem;display:none}

.rc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:13px}
.rc-card.bad{border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.03)}
.rc-top{display:flex;gap:9px;margin-bottom:11px;align-items:flex-start}
.rc-badge{font-size:.67rem;font-weight:600;padding:3px 9px;border-radius:99px;flex-shrink:0;font-family:var(--mono);letter-spacing:.06em;margin-top:2px}
.rc-badge.wrong{background:rgba(248,113,113,.15);color:var(--red)}
.rc-badge.skipped{background:rgba(124,139,161,.15);color:var(--muted)}
.rc-question{font-size:.92rem;font-weight:500;line-height:1.65}
.rc-answers{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.rc-row{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;padding:8px 12px;border-radius:7px}
.rc-row.bad-ans{background:rgba(248,113,113,.09);color:var(--red)}
.rc-row.good-ans{background:rgba(61,214,140,.09);color:var(--green)}
.rc-lbl{font-size:.7rem;font-family:var(--mono);opacity:.62;white-space:nowrap}

.btn-retry{display:block;width:100%;margin-top:30px;background:transparent;border:1px solid var(--amber);color:var(--amber);border-radius:10px;font-family:var(--sans);font-weight:600;font-size:.92rem;padding:13px;cursor:pointer;transition:background .2s;text-align:center}
.btn-retry:hover{background:rgba(232,168,68,.08)}

@media(max-width:520px){
  .setup-card{padding:24px 18px}
  .form-row{grid-template-columns:1fr}
  .test-header{padding:10px 14px}
  .test-title{font-size:.88rem}
  .timer-wrap{font-size:1rem}
  .q-card{padding:18px}
  .stats-grid{gap:8px}
  .stat-box{padding:12px 6px}
  .stat-val{font-size:1.15rem}
  #screen-results{padding:28px 14px}
}