*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f4f8;--surface:#ffffff;--surface2:#f8fafc;--border:#e2e8f0;
  --accent:#1a56db;--accent-l:#eff4ff;
  --ok:#059669;--ok-l:#ecfdf5;--err:#dc2626;--err-l:#fef2f2;
  --warn:#d97706;--warn-l:#fffbeb;
  --tx:#0f172a;--tx2:#64748b;--tx3:#94a3b8;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh2:0 8px 24px rgba(0,0,0,.1);
  --r:12px;--f:'Segoe UI',system-ui,-apple-system,sans-serif;
}
body{background:var(--bg);color:var(--tx);font-family:var(--f);min-height:100vh;display:flex;flex-direction:column;align-items:center}

/* Screens */
.screen{display:none;width:100%;max-width:680px;padding:28px 20px;flex-direction:column;gap:16px}
.screen.on{display:flex}

/* Header */
.app-header{text-align:center;margin-bottom:4px}
.app-logo{width:56px;height:56px;background:linear-gradient(135deg,#1a56db,#0891b2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px}
.app-header h1{font-size:22px;font-weight:800;color:var(--tx)}
.app-header p{font-size:13px;color:var(--tx2);margin-top:4px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.ct{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--tx)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:.12s;width:100%}
.bp{background:var(--accent);color:#fff;box-shadow:0 2px 4px rgba(26,86,219,.3)}.bp:hover:not(:disabled){background:#1649b8}
.bs{background:var(--surface);color:var(--tx);border:1.5px solid var(--border)}.bs:hover{background:var(--bg)}
.bd{background:var(--err);color:#fff}.bd:hover{background:#b91c1c}
.bg{background:var(--ok);color:#fff}.bg:hover{background:#047857}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:7px 16px;font-size:13px;width:auto;border-radius:7px}

/* Forms */
.fg{margin-bottom:16px}
label{display:block;font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:11px 14px;font-size:14px;color:var(--tx);outline:none;transition:.12s;font-family:var(--f)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.1)}

/* Alerts */
.al{padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.ae{background:var(--err-l);border:1px solid #fca5a5;color:#991b1b}
.as{background:var(--ok-l);border:1px solid #a7f3d0;color:#065f46}
.ai{background:var(--accent-l);border:1px solid #bfdbfe;color:#1e40af}
.aw{background:var(--warn-l);border:1px solid #fde68a;color:#92400e}

/* Timer bar — sticky top */
#timerbar{display:none;position:sticky;top:0;z-index:100;width:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh)}
.tbinner{max-width:680px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
#tdisp{font-size:24px;font-weight:800;font-family:monospace;color:var(--tx);min-width:80px}
#tdisp.warn{color:var(--warn)}
#tdisp.crit{color:var(--err);animation:pulse .6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.tinfo{font-size:12px;color:var(--tx2);text-align:right;line-height:1.6}

/* Progress */
.pbar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:20px}
.pfill{height:100%;background:linear-gradient(90deg,var(--accent),#0891b2);transition:.3s;border-radius:3px}

/* Question card */
.qnum{font-size:12px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.qtext{font-size:16px;line-height:1.65;color:var(--tx);margin-bottom:22px;font-weight:500}

/* Options */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:.12s;background:var(--surface);user-select:none}
.opt:hover{border-color:var(--accent);background:var(--accent-l)}
.opt.sel{border-color:var(--accent);background:var(--accent-l)}
.oltr{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;transition:.12s;color:var(--tx2);background:var(--surface2)}
.opt.sel .oltr{background:var(--accent);border-color:var(--accent);color:#fff}
.otxt{font-size:14px;line-height:1.5;color:var(--tx);flex:1}

/* Nav panel */
.navp{display:flex;flex-wrap:wrap;gap:7px}
.nb{width:38px;height:38px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.nb.ans{background:var(--accent-l);border-color:var(--accent);color:var(--accent)}
.nb.flg{background:var(--warn-l);border-color:var(--warn);color:var(--warn)}
.nb.cur{border-color:var(--tx);color:var(--tx);box-shadow:0 0 0 2px var(--tx)}
.nb:hover{border-color:var(--accent)}

/* Receipt */
.receipt{font-size:36px;font-weight:800;font-family:monospace;letter-spacing:6px;color:var(--ok);text-align:center;padding:22px;background:var(--ok-l);border-radius:10px;border:1.5px solid #a7f3d0}

/* Status check row */
.sr{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.sr:last-child{border:none}
.sd{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:.3s}
.sg{background:var(--ok)}.sy{background:var(--warn)}.sr2{background:var(--tx3)}.se{background:var(--err)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Exam footer nav */
.enav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.enav .center{text-align:center}

/* Confirm table */
.ctbl{width:100%;font-size:14px;border-collapse:collapse}
.ctbl td{padding:9px 0;border-bottom:1px solid var(--border);color:var(--tx2)}
.ctbl td:last-child{font-weight:700;color:var(--tx);text-align:right;border:none}
.ctbl tr:last-child td{border:none}

/* Visibility warn */
#vw{display:none;position:fixed;top:0;left:0;right:0;z-index:999;background:var(--err);color:#fff;text-align:center;padding:10px 16px;font-size:13px;font-weight:700}
/* Offline badge */
#ofb{display:none;position:fixed;bottom:14px;left:14px;background:var(--warn);color:#fff;padding:5px 13px;border-radius:20px;font-size:12px;font-weight:700;z-index:200;box-shadow:var(--sh2)}
/* PWA install banner */
#pwa-banner{display:none;position:fixed;bottom:14px;right:14px;background:var(--surface);border:1.5px solid var(--accent);border-radius:12px;padding:14px 16px;width:280px;box-shadow:var(--sh2);z-index:199}
#pwa-banner h3{font-size:13px;font-weight:700;margin-bottom:4px}
#pwa-banner p{font-size:12px;color:var(--tx2);margin-bottom:10px}

/* Sync progress */
#sync-wrap{display:none}

/* Rules list */
.rules li{font-size:13px;color:var(--tx2);padding:5px 0;border-bottom:1px solid var(--border);display:flex;gap:8px}
.rules li:last-child{border:none}
.rules li::before{content:'›';color:var(--accent);font-weight:700;flex-shrink:0}

/* ── EXAM IDENTITY HEADER ── */
#exam-header{background:var(--surface);border-bottom:1px solid var(--border);width:100%}
.exam-hdr-inner{max-width:680px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px}
.exam-hdr-logo{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px}
.exam-hdr-text{flex:1;min-width:0}
.exam-hdr-inst{font-size:13px;font-weight:700;color:var(--tx1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-hdr-sub{font-size:11px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-hdr-title{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ── RESPONSIVE: 520px ── */
@media(max-width:520px){
  .tbinner{padding:8px 12px}
  #tdisp{font-size:22px}
  .exam-hdr-inner{padding:8px 12px;gap:8px}
  .exam-hdr-logo{width:36px;height:36px;font-size:22px}
  .exam-hdr-inst{font-size:12px}
  .exam-hdr-title{font-size:11px}
  .card{padding:16px}
  .qtext{font-size:15px}
  .opt{font-size:14px;padding:10px 12px}
  .btn{font-size:13px;padding:10px 14px}
  .nav-btns{gap:6px}
  #navp{flex-wrap:wrap;gap:4px}
  .npb{min-width:28px;height:28px;font-size:11px}
}

/* ── RESPONSIVE: 420px ── */
@media(max-width:420px){
  .tbinner{padding:6px 10px}
  #tdisp{font-size:18px}
  .exam-hdr-inner{padding:6px 10px;gap:6px}
  .exam-hdr-logo{width:30px;height:30px;font-size:18px}
  .exam-hdr-inst{font-size:11px}
  .exam-hdr-sub,.exam-hdr-title{font-size:10px}
  .card{padding:12px}
  .qnum{font-size:11px}
  .qtext{font-size:14px;line-height:1.4}
  .opt{font-size:13px;padding:9px 10px;gap:8px}
  .btn{font-size:12px;padding:9px 12px}
  body{overflow-x:hidden}
}



/* === Generated from inline style="" attributes === */
.s9cfc01 { display:none;position:fixed;top:0;left:0;right:0;z-index:998;background:#d97706;color:#fff;text-align:center;padding:12px 16px;font-size:13px;font-weight:700 }
.s6fece5 { margin-left:14px;background:#fff;color:#d97706;border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer }
.s9c6869 { display:flex;gap:8px }
.s3ceb9d { font-size:11px;color:var(--tx2);margin-top:2px }
.s8e65d5 { height:70px;width:auto;object-fit:contain;margin:0 auto 4px;display:block }
.s2c62de { text-transform:uppercase;font-weight:700;letter-spacing:1px }
.sc451fd { position:relative }
.s447f69 { font-size:10px;color:var(--tx3);font-weight:400;text-transform:none }
.s25ad8a { text-transform:uppercase;letter-spacing:2px;font-weight:700 }
.s2f2c14 { display:none;margin-bottom:14px }
.s3044b6 { font-size:13px }
.s8e58cc { width:48px;height:48px;object-fit:contain;margin:0 auto 4px;display:block }
.s71ce37 { display:none;margin-top:14px }
.scb4589 { display:none }
.s278c38 { width:auto;align-self:center }
.s2bc268 { width:32px;height:32px;object-fit:contain }
.s552757 { margin-top:14px;display:flex;gap:8px;align-items:center }
.sc024aa { font-size:12px;color:var(--warn);display:none }
.s023630 { font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px }
.s8693af { font-size:11px;color:var(--tx2);margin-top:10px;display:flex;gap:14px }
.s483c78 { color:var(--accent);font-weight:700 }
.s4114e0 { color:var(--warn);font-weight:700 }
.s36f364 { color:var(--tx3);font-weight:700 }
.s4f1589 { width:auto }
.se2374a { width:auto;padding:7px 18px }
.sf6e3d7 { text-align:right }
.sb0043e { margin-top:16px }
.s402439 { background:linear-gradient(135deg,#059669,#0891b2) }
.s13076d { text-align:center }
.s7569de { font-size:42px;margin-bottom:12px }
.sf061e9 { font-size:13px;color:var(--tx2) }
.s935ad1 { color:var(--tx2);font-size:13px;margin-bottom:16px }
.sf80883 { font-size:12px;color:var(--tx2);margin-top:14px }
.s260420 { font-size:13px;color:var(--tx2);margin-top:12px }