/* kuwait exams and banks — shared stylesheet (offline, no external deps) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f3f5fa; --card:#ffffff; --ink:#1e293b; --mut:#64748b; --line:#e2e8f0;
  --good:#16a34a; --good-bg:#dcfce7; --bad:#dc2626; --bad-bg:#fee2e2;
  --acc:#2563eb; --acc-soft:#dbeafe; --radius:14px;
  --shadow:0 6px 18px rgba(15,23,42,.08);
}
/* subject accent colors */
body[data-subject="math"]   {--acc:#2563eb; --acc-soft:#dbeafe}
body[data-subject="physics"]{--acc:#7c3aed; --acc-soft:#ede9fe}
body[data-subject="chem"]   {--acc:#059669; --acc-soft:#d1fae5}
body[data-subject="bio"]    {--acc:#0d9488; --acc-soft:#ccfbf1}
body[data-subject="arabic"] {--acc:#b45309; --acc-soft:#fef3c7}
body[data-subject="english"]{--acc:#be123c; --acc-soft:#ffe4e6}

html[lang="ar"] body{font-family:"Segoe UI",Tahoma,"Noto Kufi Arabic",Geeza Pro,Arial,sans-serif}
html[lang="en"] body{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{background:var(--bg);color:var(--ink);line-height:1.8;font-size:16.5px}

/* top bar */
.topbar{background:linear-gradient(135deg,var(--acc),#0f172a);color:#fff;padding:.8rem 1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.topbar .brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:.2px}
.topbar nav a{color:#e2e8f0;text-decoration:none;margin-inline-start:1rem;font-weight:600;font-size:.95rem}
.topbar nav a:hover{color:#fff;text-decoration:underline}

.container{max-width:900px;margin:1.4rem auto 3rem;padding:0 1rem}
.footer{color:var(--mut);text-align:center;font-size:.85rem;padding:1.4rem 1rem;border-top:1px solid var(--line)}

h1.page-title{font-size:1.5rem;margin:.2rem 0 .4rem}
.subtitle{color:var(--mut);margin-bottom:1rem}

/* meta chips */
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1rem}
.chip{background:var(--acc-soft);color:#0f172a;border-radius:999px;padding:.25rem .8rem;font-size:.85rem;font-weight:700}
.chip.tag{background:#f1f5f9;color:var(--mut);font-weight:600}

/* buttons */
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:700;
  border-radius:12px;padding:.7rem 1.6rem;background:var(--acc);color:#fff;transition:.15s;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--acc);border:2px solid var(--acc)}
.btn.small{padding:.35rem .9rem;font-size:.85rem;border-radius:9px}

/* quiz card */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.5rem;margin:.8rem 0}
.qcard h3{font-size:1.12rem;margin:.4rem 0 1rem;line-height:2}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--mut);font-size:.9rem;font-weight:700}

/* options */
.opt{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;font-family:inherit;font-size:1rem;
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:.5rem 0;cursor:pointer;transition:.15s;line-height:1.7}
.opt:hover{border-color:var(--acc);background:#f8faff}
.opt .letter{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--acc-soft);color:#0f172a;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .letter{background:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .letter{background:var(--bad);color:#fff}
.opt.dim{opacity:.55}
.opt:disabled{cursor:default}

/* feedback */
.feedback{border-radius:12px;padding:1rem 1.1rem;margin-top:1rem;border:1px solid var(--line)}
.feedback.good{background:var(--good-bg);border-color:var(--good)}
.feedback.bad{background:var(--bad-bg);border-color:var(--bad)}
.feedback .verdict{font-weight:800;margin-bottom:.3rem}
.feedback .explain{background:#fff;border-radius:10px;padding:.7rem .9rem;margin-top:.5rem;border:1px dashed var(--line);line-height:1.9}

/* quiz toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.timerchip{background:#0f172a;color:#fff;border-radius:999px;padding:.35rem .9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
.timerchip.low{background:var(--bad)}

/* palette */
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:.45rem;margin:.7rem 0}
.pal{border:2px solid var(--line);background:#fff;border-radius:10px;padding:.4rem 0;font-weight:800;cursor:pointer;font-family:inherit}
.pal.done{background:var(--acc);color:#fff;border-color:var(--acc)}
.pal.cur{outline:3px solid var(--acc);outline-offset:1px}
.pal.flag{border-color:var(--warn);color:var(--warn)}

/* progress bar */
.progress{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:.5rem 0}
.progress>div{height:100%;background:var(--acc);border-radius:999px;transition:width .3s}

/* rules / instructions panel */
.rules{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.6rem}
.rules ol{margin:1rem 0 1.4rem;padding-inline-start:1.4rem}
.rules li{margin:.4rem 0}

/* results */
.result-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;margin:.8rem 0}
.score-row{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.donut{flex:0 0 auto}
.grade-badge{background:var(--acc-soft);color:#0f172a;border-radius:14px;padding:.6rem 1.2rem;font-weight:800;font-size:1.25rem}
.eval-msg{color:var(--mut);margin-top:.3rem;max-width:34rem}
.stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.stat{border-radius:10px;padding:.4rem .9rem;font-weight:700;font-size:.95rem;border:1px solid var(--line)}
.stat.good{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.stat.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.stat.na{background:#f1f5f9;color:var(--mut)}
.topicbar{margin:.4rem 0 .9rem}
.topicbar .lbl{display:flex;justify-content:space-between;font-size:.88rem;color:var(--mut);font-weight:700}
.topicbar .bar{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.topicbar .bar>div{height:100%;background:var(--acc)}

/* review cards */
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:.8rem 0}
.rev .rev-head{display:flex;justify-content:space-between;gap:.6rem;align-items:center;font-weight:800;font-size:.92rem;color:var(--mut);flex-wrap:wrap}
.rev .qtext{margin:.5rem 0 .7rem;font-weight:700}
.opt-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:10px;padding:.4rem .8rem;margin:.3rem 0;font-size:.98rem}
.opt-row.good{background:var(--good-bg);border-color:var(--good)}
.opt-row.bad{background:var(--bad-bg);border-color:var(--bad)}
.opt-row .mark{font-weight:800;font-size:.82rem;white-space:nowrap}
.opt-row.good .mark{color:var(--good)}
.opt-row.bad .mark{color:var(--bad)}
.rev .explain{background:#f8fafc;border-radius:10px;padding:.6rem .9rem;margin-top:.5rem;border:1px dashed var(--line);line-height:1.9}

/* bank guide */
.bank-guide{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.7rem;margin-bottom:1.3rem;box-shadow:var(--shadow)}
.bank-guide>h2{color:var(--acc);font-size:1.3rem;margin-bottom:.4rem}
.guide-note{color:var(--mut);font-size:.95rem;margin-bottom:.9rem}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.2rem 2rem;margin:.6rem 0}
.notes li{margin:.45rem 0;padding-inline-start:1.5rem;position:relative;list-style:none}
.notes li::before{content:"✔";color:var(--acc);position:absolute;inset-inline-start:0;font-weight:800}
.notes code{background:var(--acc-soft);border-radius:6px;padding:.05rem .4rem;font-size:.9em;direction:ltr;display:inline-block}
.ig-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.2rem}
.ig{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.ig h4{margin-bottom:.6rem;color:var(--acc);font-size:1rem}
.ig svg{width:100%;height:auto;display:block}
.fc-title{color:var(--acc);font-size:1rem;margin:1.2rem 0 .5rem}
.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.fcard{background:var(--acc-soft);border-radius:12px;padding:.8rem;text-align:center}
.fcard b{display:block;font-size:1.05rem;color:#0f172a}
.fcard span{font-size:.82rem;color:var(--mut)}
table.cmp{width:100%;border-collapse:collapse;margin-top:.6rem}
.cmp th,.cmp td{border:1px solid var(--line);padding:.5rem .7rem;text-align:start;font-size:.92rem}
.cmp th{background:var(--acc-soft);color:#0f172a}
.cmp tr:nth-child(even) td{background:#f8fafc}

/* directory / index pages */
.hero{background:linear-gradient(135deg,#0f172a,var(--acc));color:#fff;border-radius:20px;padding:2.2rem 2rem;margin-bottom:1.5rem}
.hero h1{font-size:1.7rem;margin-bottom:.5rem}
.hero p{color:#cbd5e1;max-width:44rem}
.bigcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-bottom:1.8rem}
.bigcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow)}
.bigcard h2{color:var(--acc);margin-bottom:.5rem}
.grade-section{margin-top:1.6rem}
.grade-section h2{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;margin-bottom:.8rem}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.9rem}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.45rem}
.scard .ico{font-size:1.6rem}
.scard .nm{font-weight:800}
.scard a{color:var(--acc);font-weight:700;text-decoration:none;font-size:.92rem}
.scard a:hover{text-decoration:underline}
.scard .desc{color:var(--mut);font-size:.85rem}
.notice{background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;padding:.9rem 1.1rem;font-size:.92rem;margin:1rem 0}

.fade{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* formal exam paper header */
.head-org{text-align:center;color:var(--mut);font-weight:800;font-size:.95rem;letter-spacing:.5px}
.head-title{text-align:center;font-size:1.45rem;margin:.25rem 0 .6rem}
.greet{text-align:center;font-weight:800;color:var(--acc);font-size:1.1rem;margin-top:1.1rem}
.rules .cmp{margin-top:.6rem}

@media (max-width:640px){
  body{font-size:15.5px}
  .qcard,.rules,.result-wrap{padding:1rem}
}
@media print{
  .topbar,.footer,.btn,.toolbar,.palette,.timerchip{display:none!important}
  body{background:#fff}
  .qcard,.rev,.result-wrap,.bank-guide{box-shadow:none;break-inside:avoid}
}