/* ============ Fonts (offline, latin + arabic) ============ */
@font-face { font-family:'Cairo'; font-weight:400; font-display:swap; src:url('fonts/cairo-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC; }
@font-face { font-family:'Cairo'; font-weight:400; font-display:swap; src:url('fonts/cairo-arabic-400.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-weight:600; font-display:swap; src:url('fonts/cairo-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Cairo'; font-weight:600; font-display:swap; src:url('fonts/cairo-arabic-600.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-weight:700; font-display:swap; src:url('fonts/cairo-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Cairo'; font-weight:700; font-display:swap; src:url('fonts/cairo-arabic-700.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-weight:800; font-display:swap; src:url('fonts/cairo-latin-800.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Cairo'; font-weight:800; font-display:swap; src:url('fonts/cairo-arabic-800.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }

/* ============ Design tokens ============ */
:root {
  --bg:#0E0D0B;
  --bg-grad:radial-gradient(1200px 700px at 80% -10%, #262017 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #1D1812 0%, transparent 55%);
  --surface:rgba(255,255,255,.045);
  --surface-solid:#1B1916;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --gold:#E3B23C;
  --gold-strong:#F5C84C;
  --gold-deep:#9C7420;
  --gold-grad:linear-gradient(135deg,#F5C84C 0%,#D9A62E 55%,#B8860B 100%);
  --on-gold:#221703;
  --text:#FAF7F0;
  --muted:#B3ACA0;
  --success:#34D178;
  --danger:#F16A5D;
  --danger-soft:rgba(241,106,93,.14);
  --success-soft:rgba(52,209,120,.14);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --focus:0 0 0 3px rgba(245,200,76,.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme:dark; }
body {
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  background:var(--bg-grad), var(--bg);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  font-size:16px;
}
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; font-size:1rem; }
button:focus-visible, input:focus-visible, a:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--radius-sm); }
input, select { font-family:inherit; font-size:1rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

#app { max-width:1100px; margin:0 auto; padding:20px 20px 60px; }

/* ============ Header ============ */
.topbar { display:flex; align-items:center; gap:14px; padding:14px 0 22px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; margin-inline-end:auto; cursor:pointer; }
.brand-badge { width:46px; height:46px; border-radius:13px; background:var(--gold-grad); display:grid; place-items:center; box-shadow:0 4px 14px rgba(212,160,23,.35); flex:none; }
.brand-badge svg { width:26px; height:26px; color:var(--on-gold); }
.brand h1 { font-size:1.15rem; font-weight:800; letter-spacing:.4px; line-height:1.25; }
.brand .sub { font-size:.8rem; color:var(--gold); font-weight:600; }
.topbar .actions { display:flex; gap:8px; }

.icon-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; min-height:44px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; transition:background .2s,border-color .2s; }
.icon-btn:hover { background:rgba(255,255,255,.09); border-color:var(--border-strong); }
.icon-btn svg { width:18px; height:18px; flex:none; }
.icon-btn.active { border-color:var(--gold); color:var(--gold-strong); }

/* ============ Cards / Home ============ */
.hero { margin:6px 0 26px; padding:26px 28px; border-radius:20px; border:1px solid var(--border); background:linear-gradient(160deg,rgba(245,200,76,.08),rgba(255,255,255,.02) 45%); position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; inset-inline-end:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(245,200,76,.16),transparent 70%); pointer-events:none; }
.hero h2 { font-size:1.6rem; font-weight:800; margin-bottom:4px; }
.hero p { color:var(--muted); max-width:60ch; }
.hero .gold { color:var(--gold-strong); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:12px; transition:transform .2s, border-color .2s, background .2s; }
.card:hover { border-color:rgba(245,200,76,.4); background:rgba(255,255,255,.06); }
.card .num { width:52px; height:52px; border-radius:14px; background:var(--gold-grad); color:var(--on-gold); display:grid; place-items:center; font-size:1.35rem; font-weight:800; box-shadow:0 4px 12px rgba(212,160,23,.3); }
.card h3 { font-size:1.15rem; font-weight:700; }
.card .meta { color:var(--muted); font-size:.86rem; display:flex; align-items:center; gap:6px; }
.card .meta svg { width:15px; height:15px; }
.card .row { display:flex; gap:8px; margin-top:auto; }
.card .row .btn { flex:1 1 0; min-width:0; padding:11px 8px; font-size:.9rem; white-space:nowrap; }
.badge-part { font-size:.72rem; font-weight:700; color:var(--gold-strong); background:rgba(245,200,76,.12); border:1px solid rgba(245,200,76,.3); padding:2px 8px; border-radius:99px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; min-height:44px; border-radius:12px; font-weight:700; transition:filter .2s, background .2s, border-color .2s; }
.btn svg { width:17px; height:17px; flex:none; }
.btn-gold { background:var(--gold-grad); color:var(--on-gold); box-shadow:0 4px 14px rgba(212,160,23,.28); }
.btn-gold:hover { filter:brightness(1.08); }
.btn-ghost { border:1px solid var(--border-strong); color:var(--text); background:rgba(255,255,255,.03); }
.btn-ghost:hover { background:rgba(255,255,255,.08); }
.btn-danger { background:var(--danger-soft); color:var(--danger); border:1px solid rgba(241,106,93,.4); }
.btn.full { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ============ Player (exam / training) ============ */
.player-top { display:flex; align-items:center; gap:16px; padding:10px 0 14px; flex-wrap:wrap; }
.player-top .title { font-weight:800; font-size:1.05rem; }
.player-top .qcount { color:var(--muted); font-size:.9rem; }
.progress { flex:1 1 160px; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; min-width:120px; }
.progress i { display:block; height:100%; border-radius:99px; background:var(--gold-grad); transition:width .3s ease; }

.timer-ring { position:relative; width:64px; height:64px; flex:none; }
.timer-ring svg { transform:rotate(-90deg); }
.timer-ring .track { stroke:rgba(255,255,255,.1); }
.timer-ring .arc { stroke:var(--gold-strong); transition:stroke-dashoffset 1s linear, stroke .3s; }
.timer-ring.warn .arc { stroke:var(--danger); }
.timer-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:1.15rem; font-weight:800; }
.timer-ring.warn b { color:var(--danger); }

.stage { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
@media (max-width:900px) { .stage { grid-template-columns:1fr; } }
.qimg-wrap { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:#000; box-shadow:var(--shadow); }
.qimg-wrap img { width:100%; height:auto; }

.side { display:flex; flex-direction:column; gap:14px; }
.panel { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px; }
.panel h4 { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:10px; }

.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ans { min-height:56px; border-radius:12px; border:1.5px solid var(--border-strong); background:rgba(255,255,255,.03); font-size:1.3rem; font-weight:800; transition:background .15s,border-color .15s,color .15s; }
.ans:hover { background:rgba(255,255,255,.09); }
.ans.sel { background:var(--gold-grad); border-color:var(--gold-strong); color:var(--on-gold); box-shadow:0 3px 12px rgba(212,160,23,.3); }
.ans.correct { background:var(--success-soft); border-color:var(--success); color:var(--success); }
.ans.wrong { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }

.audio-row { display:flex; align-items:center; gap:10px; }
.audio-row .btn { flex:1; }
.eq { display:flex; gap:3px; align-items:flex-end; height:22px; width:30px; flex:none; }
.eq i { flex:1; background:var(--gold); border-radius:2px; height:30%; }
.eq.on i { animation:eq .9s ease-in-out infinite; }
.eq.on i:nth-child(2) { animation-delay:.2s; } .eq.on i:nth-child(3) { animation-delay:.4s; }
@keyframes eq { 0%,100% { height:25%; } 50% { height:100%; } }

.nav-row { display:flex; gap:10px; }

/* ============ Results ============ */
.result-hero { text-align:center; padding:34px 20px 26px; }
.score-circle { position:relative; width:170px; height:170px; margin:0 auto 18px; }
.score-circle svg { transform:rotate(-90deg); }
.score-circle .track { stroke:rgba(255,255,255,.09); }
.score-circle .arc { transition:stroke-dashoffset 1s ease; }
.score-circle .val { position:absolute; inset:0; display:grid; place-items:center; }
.score-circle .val b { font-size:2.3rem; font-weight:800; line-height:1; }
.score-circle .val span { color:var(--muted); font-size:.9rem; }
.verdict { font-size:1.35rem; font-weight:800; }
.verdict.pass { color:var(--success); } .verdict.fail { color:var(--danger); }
.result-hero p { color:var(--muted); }

.qgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; margin-top:14px; }
.qcell { min-height:48px; border-radius:10px; font-weight:800; font-size:1rem; border:1.5px solid; transition:filter .15s; }
.qcell:hover { filter:brightness(1.25); }
.qcell.ok { background:var(--success-soft); border-color:var(--success); color:var(--success); }
.qcell.ko { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.qcell.skip { background:rgba(255,255,255,.04); border-color:var(--border-strong); color:var(--muted); }

.legend { display:flex; gap:18px; color:var(--muted); font-size:.85rem; margin-top:12px; flex-wrap:wrap; }
.legend b { display:inline-block; width:12px; height:12px; border-radius:3px; margin-inline-end:6px; }

/* ============ Review / correction ============ */
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; font-size:.85rem; font-weight:700; }
.pill.ok { background:var(--success-soft); color:var(--success); }
.pill.ko { background:var(--danger-soft); color:var(--danger); }
.kv { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.kv .tag { padding:6px 14px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); font-weight:700; }
.kv .tag.gold { border-color:rgba(245,200,76,.5); color:var(--gold-strong); }

/* ============ Forms / admin / modal ============ */
.field { margin-bottom:16px; }
.field label { display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.field input[type=text], .field input[type=password], .field input[type=number] {
  width:100%; padding:11px 14px; border-radius:12px; border:1.5px solid var(--border-strong);
  background:rgba(0,0,0,.3); color:var(--text); transition:border-color .2s;
}
.field input:focus { border-color:var(--gold); }
.check-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.check-row:last-child { border-bottom:none; }
.check-row label { flex:1; cursor:pointer; font-weight:600; }
.switch { position:relative; width:44px; height:24px; flex:none; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; z-index:1; }
.switch i { position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,.12); transition:background .2s; }
.switch i::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.switch input:checked + i { background:var(--gold); }
.switch input:checked + i::after { transform:translateX(20px); }
[dir=rtl] .switch input:checked + i::after { transform:translateX(-20px); }

.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; z-index:50; }
.modal { width:100%; max-width:440px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:20px; padding:26px; box-shadow:var(--shadow); }
.modal h3 { font-size:1.25rem; font-weight:800; margin-bottom:14px; }

table.results { width:100%; border-collapse:collapse; }
table.results th, table.results td { text-align:start; padding:10px 12px; border-bottom:1px solid var(--border); font-size:.92rem; }
table.results th { color:var(--muted); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.8px; }
table.results tr:hover td { background:rgba(255,255,255,.03); }
.tbl-wrap { overflow-x:auto; }

.empty { text-align:center; color:var(--muted); padding:40px 20px; }
.empty svg { width:44px; height:44px; margin:0 auto 12px; opacity:.5; }

.toast { position:fixed; bottom:24px; inset-inline-start:50%; transform:translateX(-50%); background:var(--surface-solid); border:1px solid var(--gold); color:var(--text); padding:12px 22px; border-radius:12px; box-shadow:var(--shadow); z-index:60; font-weight:700; animation:pop .25s ease; }
[dir=rtl] .toast { transform:translateX(50%); }
@keyframes pop { from { opacity:0; transform:translate(-50%,10px); } }

.section-title { display:flex; align-items:center; gap:10px; margin:26px 0 14px; font-size:1.05rem; font-weight:800; }
.section-title svg { width:20px; height:20px; color:var(--gold); }

/* ============ Login ============ */
.login-wrap { min-height:88vh; display:grid; place-items:center; padding:20px; }
.login-card { width:100%; max-width:400px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:22px; padding:34px 30px; text-align:center; box-shadow:var(--shadow); }
.login-logo { width:64px; height:64px; margin:0 auto 14px; border-radius:18px; }
.login-logo svg { width:34px; height:34px; }
.login-card h2 { font-size:1.5rem; font-weight:800; }
.login-sub { color:var(--gold-strong); font-weight:700; margin-bottom:6px; }
.login-hint { color:var(--muted); font-size:.9rem; margin-bottom:18px; }
.login-card form { text-align:start; }
.form-error { background:var(--danger-soft); border:1px solid rgba(241,106,93,.4); color:var(--danger); font-weight:700; border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:.92rem; }
.lang-link { margin-top:18px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.lang-link svg { width:16px; height:16px; }
.lang-link:hover { color:var(--gold-strong); }

/* ============ User chip / tabs / admin ============ */
.user-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; min-height:44px; border-radius:12px; background:rgba(245,200,76,.1); border:1px solid rgba(245,200,76,.35); color:var(--gold-strong); font-weight:700; max-width:180px; }
.user-chip svg { width:17px; height:17px; flex:none; }
.user-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab { padding:10px 20px; min-height:44px; border-radius:12px; border:1px solid var(--border); background:var(--surface); font-weight:700; transition:background .2s,border-color .2s,color .2s; }
.tab:hover { background:rgba(255,255,255,.08); }
.tab.active { background:var(--gold-grad); color:var(--on-gold); border-color:var(--gold-strong); }
.inline-form { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.inline-form select { padding:11px 14px; border-radius:12px; border:1.5px solid var(--border-strong); background:rgba(0,0,0,.3); color:var(--text); }
.mini-btn { padding:6px 12px; min-height:34px; border-radius:9px; border:1px solid var(--border-strong); background:rgba(255,255,255,.04); font-size:.82rem; font-weight:700; transition:background .15s; }
.mini-btn:hover { background:rgba(255,255,255,.1); }
.mini-btn.danger { color:var(--danger); border-color:rgba(241,106,93,.4); }
.mini-btn.danger:hover { background:var(--danger-soft); }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.row-dim td { opacity:.5; }
.gen-pass { margin-top:14px; padding:12px 16px; border-radius:12px; background:rgba(245,200,76,.1); border:1px solid rgba(245,200,76,.4); font-weight:700; }
.gen-pass code, .pin-code { background:rgba(0,0,0,.4); padding:3px 10px; border-radius:8px; color:var(--gold-strong); font-size:1.05rem; letter-spacing:1px; }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.stat { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px; text-align:center; }
.stat b { display:block; font-size:1.7rem; font-weight:800; }
.stat span { color:var(--muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }

/* ============ Real-exam kiosk (check-in + prep) ============ */
.kiosk { min-height:80vh; display:grid; place-items:center; padding:10px; }
.kiosk-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; width:100%; max-width:900px; }
@media (max-width:760px) { .kiosk-grid { grid-template-columns:1fr; } }
.id-card { display:flex; flex-direction:column; gap:18px; }
.id-photo { background:linear-gradient(170deg,#f2f0ec,#c9c5bd); border-radius:14px; min-height:200px; display:grid; place-items:center; color:#8a857b; }
.id-rows { display:flex; flex-direction:column; gap:8px; }
.id-row { display:flex; align-items:center; gap:10px; }
.id-lbl { flex:0 0 130px; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-weight:800; font-size:.85rem; text-align:center; }
.id-val { flex:1; background:linear-gradient(135deg,rgba(245,200,76,.16),rgba(245,200,76,.05)); border:1px solid rgba(245,200,76,.3); border-radius:9px; padding:8px 14px; font-weight:700; }
.pad-card { text-align:center; }
.pad-title { font-weight:800; font-size:1.15rem; margin-bottom:14px; line-height:1.4; }
.pad-title span { color:var(--gold-strong); }
.pin-slots { display:flex; justify-content:center; gap:12px; margin-bottom:16px; }
.slot { width:34px; height:44px; border-radius:9px; background:rgba(0,0,0,.4); border:1.5px solid var(--border-strong); position:relative; }
.slot::after { content:''; position:absolute; left:6px; right:6px; bottom:6px; height:3px; border-radius:2px; background:var(--danger); opacity:.7; }
.slot.filled { border-color:var(--gold-strong); }
.slot.filled::before { content:'●'; position:absolute; inset:0; display:grid; place-items:center; color:var(--gold-strong); font-size:1.2rem; }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:260px; margin:0 auto 14px; }
.pad-btn { min-height:56px; border-radius:14px; font-size:1.5rem; font-weight:800; background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1.5px solid var(--border-strong); transition:background .15s,border-color .15s; }
.pad-btn:hover { background:rgba(245,200,76,.15); border-color:var(--gold); }
.pad-btn:active { background:var(--gold-grad); color:var(--on-gold); }
.pad-btn.zero { grid-column:1 / -1; }
.pad-actions { display:flex; gap:10px; justify-content:center; }
.prep-card { text-align:center; max-width:520px; width:100%; padding:44px 30px; }
.prep-icon { color:var(--gold-strong); margin-bottom:18px; }
.prep-line { font-size:1.3rem; font-weight:800; }
.prep-line.ar { color:var(--gold-strong); margin-top:6px; }
.prep-count { font-size:3rem; font-weight:800; color:var(--gold-strong); margin-top:14px; animation:pop .3s ease; }

/* ============ Real-exam vertical timer bar ============ */
.qimg-row { display:flex; gap:10px; align-items:stretch; }
.vbar { width:22px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid var(--border); overflow:hidden; display:flex; align-items:flex-end; }
.vbar i { display:block; width:100%; background:linear-gradient(180deg,var(--gold-strong),var(--gold-deep)); transition:height 1s linear; border-radius:0 0 7px 7px; }
.vbar i.warn { background:linear-gradient(180deg,var(--danger),#b3362b); }