/* ===== Colors & basics ===== */
:root{--bg:#f1f5f9;--card:#ffffff;--card2:#f8fafc;--line:#e2e8f0;--tx:#0f172a;--mut:#64748b;--red:#0ea5e9;--gold:#0284c7;--ok:#12a36b;--bl:#0ea5e9;--bl2:#0284c7;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;color:var(--tx);font-family:Tajawal,system-ui,sans-serif;min-height:100vh;background:radial-gradient(900px 400px at 85% -5%,rgba(14,165,233,.12),transparent),radial-gradient(700px 400px at 0% 100%,rgba(34,197,94,.07),transparent),var(--bg)}
.wrap{max-width:860px;margin:0 auto;padding:16px 16px 90px}
/* ===== Cards ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 6px 22px rgba(15,23,42,.07);animation:up .35s both}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
h2{margin:0 0 14px;font-size:20px}
.top{border-top:3px solid var(--bl);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:800;box-shadow:0 6px 18px rgba(14,165,233,.35)}
.brand h1{margin:0;font-size:23px}.brand small{color:var(--bl2);font-weight:700}
/* ===== Inputs & buttons ===== */
input,textarea,select{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:12px;padding:13px 14px;font:inherit;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--bl);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 22px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0ea5e9,#0284c7);transition:.15s}
button:hover{transform:translateY(-1px);filter:brightness(1.1)}
button.sec{background:#fff;color:var(--tx);border:1px solid #cbd5e1}
button.ok{background:linear-gradient(135deg,#12a36b,#0d7f53)}
button.sm{padding:6px 12px;font-size:13px}
.err{color:#dc2626;min-height:22px;font-size:14px}.note{color:var(--mut);font-size:14px;line-height:1.7}
/* ===== Gate & modal ===== */
.center{max-width:420px;margin:12vh auto 0;text-align:center}.center .logo{margin:0 auto 16px;width:72px;height:72px;font-size:36px}
.center input{margin:14px 0;text-align:center}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;z-index:20}
.modal .card{width:100%;max-width:400px;margin:0}
/* ===== Quiz list ===== */
.qz{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px;background:var(--card2);border:1px solid var(--line);border-radius:14px;margin-top:12px;transition:.2s}
.qz:hover{border-color:var(--bl);transform:translateY(-2px)}.qz b{font-size:17px}.qz small{color:var(--mut)}
/* ===== Inside the quiz ===== */
.sticky{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;gap:14px;align-items:center;background:rgba(14,23,41,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:16px}
.timer{background:#050912;border:1px solid var(--line);border-radius:12px;padding:6px 16px;text-align:center}
.timer span{display:block;color:var(--mut);font-size:11px}.timer b{color:var(--gold);font-size:22px}
.timer.low b{color:var(--red);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}
.pg{flex:1}.prog{color:var(--mut);font-weight:700;font-size:14px}
.bar{height:10px;background:#050912;border:1px solid var(--line);border-radius:9px;margin-top:8px;overflow:hidden}
.bar div{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:.3s}
.q{font-size:18px;font-weight:700;line-height:1.9;margin-bottom:14px}.q em{color:var(--red);font-style:normal}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card2);border:1px solid var(--line);border-radius:14px;cursor:pointer;font-weight:700;transition:.15s}
.opt:hover{border-color:var(--mut)}.opt .l{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-size:14px}
.opt.sel{border-color:var(--bl);background:#e0f2fe}.opt.sel .l{background:var(--bl);border-color:var(--bl);color:#fff}
.opt.right{border-color:var(--ok);background:#dcfce7}.opt.wrong{border-color:#dc2626;background:#fee2e2}
.score{font-size:68px;font-weight:800;color:var(--bl2);text-align:center}
/* ===== WhatsApp ===== */
.wa{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:18px;background:#25d366;color:#fff;text-decoration:none;font-weight:800;padding:13px 20px;border-radius:99px;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:9;transition:.2s}
.wa:hover{transform:scale(1.05)}
/* ===== Owner panel ===== */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tabs .on{background:linear-gradient(135deg,#0ea5e9,#0284c7);border:0}
.ed{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px;background:var(--card2)}
.ed .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.row2{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:10px;border-bottom:1px solid var(--line);text-align:start}th{color:var(--mut)}
.badge{display:inline-block;background:#e0f2fe;color:#0284c7;border:1px solid #bae6fd;border-radius:99px;padding:2px 12px;font-size:12px;font-weight:700}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;border:1px solid #0f172a;padding:10px 20px;border-radius:12px;z-index:30}
@media(max-width:640px){.opts{grid-template-columns:1fr}.sticky{flex-wrap:wrap}}

/* ===== Main page ===== */
.nav{direction:ltr;display:flex;justify-content:space-between;align-items:center;padding:6px 2px 18px}
.nav .brand{direction:rtl}
.hero{text-align:center;padding:44px 22px;background:radial-gradient(500px 220px at 50% 0,rgba(14,165,233,.18),transparent),var(--card)}
.hero h1{font-size:clamp(28px,6vw,44px);line-height:1.5;margin:14px 0}.hero h1 b{color:var(--bl2)}
.hero p{color:var(--mut);max-width:600px;margin:0 auto 24px;line-height:2;font-size:17px}
.cta{display:inline-block;background:#25d366;color:#fff;text-decoration:none;font-weight:800;padding:15px 30px;border-radius:99px;box-shadow:0 10px 26px rgba(37,211,102,.35);transition:.2s}
.cta:hover{transform:translateY(-2px) scale(1.03)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}.feat .card{margin:0}
.ic{font-size:32px;margin-bottom:8px}
.price{text-align:center;border-color:#7dd3fc}
.amt{font-size:56px;font-weight:800;color:var(--gold);margin:10px 0}.amt small{font-size:15px;color:var(--mut);font-weight:500}

/* ===== Aqsam (PDF files) & polish ===== */
.seg{display:flex;gap:8px;margin-bottom:16px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:6px}
.seg button{flex:1}.seg .sec{background:transparent;border:0;color:var(--mut)}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.file{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;transition:.2s;animation:up .35s both}
.file:hover{border-color:var(--bl);transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,165,233,.15)}
.file b{font-size:17px}.file small{color:var(--mut)}.file button{width:100%}
.pdf{width:64px;height:76px;border-radius:10px;background:linear-gradient(135deg,#e63946,#a4161a);display:grid;place-items:end center;padding-bottom:10px;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(230,57,70,.35);position:relative}
.pdf:before{content:"";position:absolute;top:0;right:0;border:10px solid;border-color:#fff #fff #ffb3b9 #ffb3b9;border-radius:0 0 0 6px}
.feat .card:hover,.qz:hover{border-color:var(--bl)}.feat .card{transition:.2s}.feat .card:hover{transform:translateY(-4px)}
.logo{background:linear-gradient(135deg,#0ea5e9,#0284c7)}

.qimg{display:block;width:100%;max-width:520px;border-radius:12px;background:#fff;margin:0 0 14px}


/* ===== Exam screen (same layout as the real test, our own colors) ===== */
body:has(.exam){background:#e8edf5;overflow:hidden}
body:has(.exam) .wa{display:none}
.wrap:has(.exam){max-width:none;width:100%;padding:0}
.exam{--navy:#0f1b33;--ink:#14233d;--line2:#d5deec;height:100vh;height:100dvh;display:flex;flex-direction:column;color:var(--ink);font-family:Tajawal,system-ui,sans-serif;animation:none}
.topline{height:5px;background:linear-gradient(90deg,#e63946,#f5b93a);flex:none}
.topstats{flex:none;background:#fff;display:flex;gap:26px;padding:7px 18px;font-size:13px;color:#3a4a66;border-bottom:1px solid var(--line2)}
.topstats b{color:var(--navy);margin-inline-start:4px}
.ebody{flex:1;min-height:0;display:flex;gap:10px;padding:10px}
.side{width:260px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0}
.usercard{background:#fff;border:1px solid var(--line2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px;font-size:13px;box-shadow:0 2px 8px rgba(15,27,51,.06)}
.usercard small{color:#7d8da8;margin-top:6px}.usercard b{font-size:14px}.usercard .qt{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);color:#c1121f}
.avatar{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#1d3a5c,#0f1b33);display:grid;place-items:center;margin:0 auto 6px}
.gridcard{background:#fff;border:1px solid var(--line2);border-radius:14px;padding:12px;flex:1;min-height:0;overflow:auto;box-shadow:0 2px 8px rgba(15,27,51,.06)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.qn{position:relative;padding:9px 0;border-radius:8px;background:#eef2f8;border:1px solid var(--line2);color:var(--ink);font-size:14px;font-weight:800}
.qn:hover{transform:none;filter:none;border-color:#8fa0bf}
.qn.seen{background:#f39a2d;border-color:#f39a2d;color:#fff}
.qn.done{background:#12a36b;border-color:#12a36b;color:#fff}
.qn.cur{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--navy)}
.qn.mk::after{content:'⚑';position:absolute;top:-6px;inset-inline-start:-4px;font-size:12px;color:#e63946}
.sidebtns{display:flex;flex-direction:column;gap:8px}.sidebtns .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.b1{background:var(--navy);padding:11px 6px;font-size:13px;border-radius:10px}
.b2{background:linear-gradient(135deg,#e63946,#a4161a);padding:12px;font-size:15px;border-radius:10px}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;background-color:#f6f8fc;border:1px solid var(--line2);border-radius:14px;padding:12px;box-shadow:0 2px 8px rgba(15,27,51,.06)}
.infobar{display:flex;justify-content:flex-start;gap:12px;align-items:center;font-size:13px;color:#3a4a66;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 14px;flex:none}
.chip{background:#eef2f8;border:1px solid var(--line2);border-radius:99px;padding:2px 12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 14px;flex:none}
.qno{font-weight:800;font-size:15px}
.tools{display:flex;gap:8px;direction:ltr}.tools button{background:#2f7bf0;padding:6px 12px;border-radius:8px;font-size:15px}.tools button sup{font-size:10px}
.tools .pen{background:#98a6bf}.tools .pen.on{background:#2f7bf0}
.hintbox{flex:none;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:14px;color:#3a4a66}
.tpill{flex:none;align-self:flex-start;background:#fff;border:1px solid var(--line2);border-radius:99px;padding:5px 16px;font-size:13px;color:#3a4a66}
.tpill b{font-family:ui-monospace,Menlo,monospace;font-size:16px;color:#0f7a54;direction:ltr;display:inline-block;margin-inline-start:6px}
.tpill.low b{color:#e63946;animation:pulse 1s infinite}
.content{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.content.nob{grid-template-columns:1fr}.content.nob .board{display:none}
.qcol{min-height:0;overflow:auto;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:10px 10px 16px;display:flex;flex-direction:column}
.qbox{text-align:center}.qbox .q{color:var(--ink);text-align:start;font-size:20px}
.qcol .qimg{display:block;max-width:none;height:auto;margin:0 auto;border-radius:0}
.radios{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:10px 14px 0}
.rb{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:20px;font-weight:800;padding:6px 14px;border-radius:12px;border:2px solid transparent;transition:.12s}
.rb:hover{background:#eef2f8}.rb .rd{width:26px;height:26px;border-radius:50%;border:2px solid #7d8da8;flex:none;background:#fff}
.rb.sel{background:#e9f8f1;border-color:#12a36b}.rb.sel .rd{border-color:#12a36b;background:radial-gradient(#12a36b 48%,#fff 52%)}
.rb .ot{font-weight:600;font-size:17px}
.board{min-height:0;background:#fff;border:1px solid var(--line2);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.bhead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f1f5fb;border-bottom:1px solid var(--line2);font-size:13px}
.bhead .bt{cursor:pointer;color:#3a4a66}.bhead small{color:#7d8da8}
.trash{background:none;color:#e63946;padding:2px 6px;font-size:16px}
.bwrap{position:relative;flex:1;min-height:0;background:#fff}
.bwrap canvas{position:absolute;inset:0;touch-action:none;background:
 linear-gradient(#0000,#0000)}
.bundo{position:absolute;top:12px;inset-inline-start:12px;display:flex;gap:2px;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:3px;box-shadow:0 3px 10px rgba(15,27,51,.12)}
.bundo button,.btools button,.bzoom button{background:transparent;color:#3a4a66;padding:6px 9px;font-size:16px;border-radius:8px}
.btools{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:4px;box-shadow:0 4px 14px rgba(15,27,51,.18);direction:ltr;max-width:96%;overflow:auto}
.btools button.on{background:#dfe6ff;color:#2f4fd8}
.bzoom{position:absolute;bottom:14px;inset-inline-end:12px;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:3px 6px;font-size:12px;direction:ltr}
.bottombar{flex:none;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 12px}
.bottombar .sp{flex:1}
.bottombar button{padding:11px 22px;border-radius:10px;font-size:15px}
.bottombar .ok{background:linear-gradient(135deg,#12a36b,#0d7f53)}
.bottombar .sec{background:#fff;color:var(--navy);border:1px solid #bfcce2}
.bottombar .sec.on{background:#fff3df;border-color:#f39a2d;color:#a55d00}
.bottombar button:disabled{opacity:.4;cursor:default;transform:none}
.foot{flex:none;display:flex;justify-content:space-between;padding:4px 16px;font-size:11px;color:#7d8da8}
.opts.l4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.main{order:1}.side{order:2}body:has(.exam){overflow:auto}.exam{height:auto;min-height:100dvh}.ebody{flex-direction:column}.side{width:auto}.grid{grid-template-columns:repeat(6,1fr)}.content{grid-template-columns:1fr;height:auto}.qcol{overflow:visible}.board{height:420px}.main{min-height:0}.bottombar{flex-wrap:wrap}.bottombar button{flex:1;padding:10px 8px;font-size:13px}.bottombar .sp{display:none}.topstats{gap:12px;font-size:11px;flex-wrap:wrap}}

/* ===== Telegram login ===== */
.badge.ok{background:#dcfce7;color:#15803d;border-color:#86efac}
.steps{margin:10px 0 16px;padding-inline-start:22px;line-height:2;color:var(--mut)}
.steps b{color:var(--tx)}

/* ===== Home chooser (تأسيس / محوسب) ===== */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.pk{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:38px 18px;border-radius:22px;border:1px solid var(--line);color:var(--tx);background:var(--card);box-shadow:0 6px 22px rgba(15,23,42,.07)}
.pk .pi{font-size:50px;line-height:1}.pk b{font-size:30px}.pk small{color:var(--mut);font-weight:500;line-height:1.7}.pk em{font-style:normal;background:#e0f2fe;border:1px solid #bae6fd;border-radius:99px;padding:4px 14px;font-size:13px;color:var(--bl2);font-weight:700}
.pk.tasees{border-top:4px solid #12a36b}.pk.mahsoob{border-top:4px solid #1da1f2}
.pk:hover{transform:translateY(-4px);filter:none;border-color:var(--bl);box-shadow:0 14px 30px rgba(14,165,233,.18)}
.pkf{width:100%;padding:16px}
@media(max-width:640px){.pick{grid-template-columns:1fr}.pk{padding:28px 16px}}

/* ===== Course page (light, like the reference) ===== */
body:has(.crs){background:#f1f5f9}
body:has(.crs) .wa{display:none}
.wrap:has(.crs){max-width:none;width:100%;padding:0}
.crs{--b:#0ea5e9;--b2:#0284c7;--ink:#0f172a;--mu:#64748b;--ln:#e2e8f0;color:var(--ink);min-height:100vh;animation:none}
.ctop{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid var(--ln);padding:10px 20px}
.cbrand{display:flex;align-items:center;gap:10px}.logo2{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.cpill{background:#e0f2fe;color:var(--b2);font-weight:800;border-radius:99px;padding:4px 14px;font-size:14px}
.cact{display:flex;gap:8px}
.cb{background:#fff;color:var(--ink);border:1px solid var(--ln);padding:8px 14px;font-size:14px;border-radius:10px}.cb:hover{background:#f8fafc;filter:none}
.cbody{display:flex;gap:20px;align-items:flex-start;padding:20px;max-width:1500px;margin:0 auto}
.cmain{flex:1;min-width:0}
.cside{width:340px;flex:none;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px;position:sticky;top:70px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;gap:12px}
.sh{display:flex;justify-content:space-between;align-items:center;font-size:16px}.sh span{color:var(--b2);font-size:13px;font-weight:700}
.lsrch{background:#f8fafc;border:1px solid var(--ln);color:var(--ink);padding:10px 12px;font-size:14px}.lsrch:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.prog{background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;padding:10px 12px}
.pr1{display:flex;justify-content:space-between;font-size:14px;font-weight:700}.pr1 b{color:var(--b2)}
.bar{height:7px;background:#dbeafe;border-radius:9px;margin:8px 0;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--b),#22c55e);border-radius:9px;transition:width .4s}
.prog small{color:var(--mu);font-size:12px}
.ll{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:80px}
.lsn{display:flex;align-items:center;gap:10px;width:100%;text-align:right;background:#f8fafc;color:var(--ink);border:1px solid var(--ln);padding:11px 12px;border-radius:12px;font-weight:600}
.lsn:hover{background:#f0f9ff;transform:none;filter:none}.lsn b{flex:1;font-size:14px}.lsn small{color:var(--mu);font-weight:500;font-size:12px}
.lsn .lic{width:26px;height:26px;border-radius:50%;background:#e2e8f0;color:#64748b;display:grid;place-items:center;font-size:11px;flex:none}
.lsn.on{background:#e0f2fe;border-color:var(--b)}.lsn.on .lic{background:var(--b);color:#fff}
.lsn.dn .lic{background:#22c55e;color:#fff}
.vid{position:relative;aspect-ratio:16/9;background:#0f172a;border-radius:16px;overflow:hidden;border:1px solid var(--ln)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vid.empty{background:linear-gradient(135deg,#f8fafc,#e0f2fe)}
.soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#64748b}
.lg2{width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;display:grid;place-items:center;font-size:46px;font-weight:800;opacity:.85}
.lbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fffbeb;border:1px solid #fde68a;border-radius:14px 14px 0 0;margin-top:14px;padding:12px 16px;font-size:17px}
.lic2{width:30px;height:30px;border-radius:50%;background:#fef3c7;color:#d97706;display:grid;place-items:center;font-size:13px}
.nx{background:linear-gradient(135deg,var(--b),var(--b2));padding:8px 18px;font-size:14px}
.markdone{width:100%;background:#fffbeb;color:var(--b2);border:1px solid #fde68a;border-top:0;border-radius:0 0 14px 14px;padding:12px;font-size:14px}
.markdone.on{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}.markdone:hover{transform:none;filter:none;background:#fef9c3}
.cc2{margin-top:16px}
.ccard,.cbox{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:18px;margin-top:16px}
.cc2 .ccard{margin-top:0}
.chd{display:flex;align-items:center;gap:12px;margin-bottom:12px}.chd h3{margin:0;font-size:22px}.chd small{color:var(--mu)}
.cic{width:48px;height:48px;border-radius:14px;background:#e0f2fe;display:grid;place-items:center;font-size:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.tags span{background:#f0f9ff;border:1px solid #bae6fd;color:var(--b2);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:600}
.go{width:100%;background:linear-gradient(135deg,var(--b),var(--b2));padding:14px;font-size:17px;border-radius:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;margin-bottom:12px}
.stats b{display:block;font-size:22px}.stats small{color:var(--mu)}.stats .g,.pc.g{color:#16a34a}.stats .o,.pc.o{color:#ea580c}.pc.r{color:#dc2626}
.atb{width:100%;border-collapse:collapse;font-size:14px}.atb th{color:var(--mu);font-weight:600;text-align:right;padding:8px;border-bottom:1px solid var(--ln)}.atb td{padding:10px 8px;border-bottom:1px solid #f1f5f9}
.pc{display:inline-block;background:#f1f5f9;border-radius:8px;padding:3px 10px;font-weight:800}
@media(max-width:900px){.cbody{flex-direction:column;padding:12px}.cside{width:100%;position:static;max-height:420px;order:2}.cmain{width:100%}.ctop{padding:8px 12px}.stats{grid-template-columns:repeat(2,1fr)}.cbrand b{display:none}}

/* lesson number badge can hold 2-3 digits */
.lsn .lic{min-width:26px;width:auto;padding:0 7px;border-radius:99px;height:26px;font-weight:800}
.lsn.on .lic,.lsn.dn .lic{color:#fff}
.pkf{background:#fff}
.nav button{padding:11px 22px}

/* ===== track tabs in the course top bar ===== */
.ctabs{display:flex;gap:6px;margin-inline-end:auto;margin-inline-start:14px;overflow:auto}
.ct{background:#f1f5f9;color:var(--ink);border:1px solid var(--ln);padding:8px 16px;font-size:14px;border-radius:99px;white-space:nowrap}
.ct:hover{background:#e0f2fe;transform:none;filter:none}.ct.on{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border-color:transparent}
.pick{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pk.banks{border-top:4px solid #f59e0b}
@media(max-width:900px){.ctop{flex-wrap:wrap}.ctabs{order:3;width:100%;margin:0}}

.subs{display:flex;gap:4px;background:#f1f5f9;border:1px solid var(--ln);border-radius:99px;padding:3px}
.sb{background:transparent;color:var(--mu);padding:5px 14px;font-size:13px;border-radius:99px}
.sb:hover{transform:none;filter:none;background:#e0f2fe}.sb.on{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff}

/* ===== timer choice ===== */
.tmode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.tm{display:flex;flex-direction:column;gap:2px;background:#fff;color:var(--tx);border:2px solid #cbd5e1;padding:12px 8px;border-radius:12px;font-size:15px}
.tm small{font-weight:500;color:var(--mut);font-size:12px}.tm:hover{transform:none;filter:none;border-color:var(--bl)}
.tm.on{border-color:var(--bl);background:#e0f2fe}

/* ===== owner: quiz list + editor ===== */
.oh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.badge.un{background:#fef3c7;color:#b45309;border-color:#fde68a}
.fl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fb2{background:#f1f5f9;color:var(--tx);border:1px solid var(--line);padding:7px 14px;font-size:13px;border-radius:99px}
.fb2:hover{transform:none;filter:none;background:#e0f2fe}.fb2.on{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border-color:transparent}
.osrch{margin-bottom:12px}
.olist{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;padding:2px}
.orow{display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:#fff;color:var(--tx);border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-weight:600}
.orow:hover{transform:none;filter:none;border-color:var(--bl);background:#f0f9ff;box-shadow:0 4px 14px rgba(14,165,233,.12)}
.onum{min-width:42px;height:42px;padding:0 8px;border-radius:12px;background:#e0f2fe;color:#0284c7;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.otl{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.otl b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.otl small{color:var(--mut);font-weight:500;font-size:12px}
.chev{color:#94a3b8;font-size:24px}
.ebar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:rgba(241,245,249,.92);backdrop-filter:blur(8px);padding:10px 0;margin-bottom:8px}
.sp{flex:1}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.chipinfo{background:#f0f9ff;border:1px solid #bae6fd;color:#0284c7;border-radius:12px;padding:13px 14px;font-weight:700}
label.note{display:block;margin:10px 0 4px}
.qg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.qc{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.qh{display:flex;align-items:center;gap:6px}
.ib{background:#fff;color:var(--tx);border:1px solid var(--line);padding:4px 10px;font-size:14px;border-radius:8px}.ib:hover{transform:none;filter:none;background:#e0f2fe}.ib.del:hover{background:#fee2e2}
.qthumb{width:100%;border-radius:10px;border:1px solid var(--line);background:#fff;max-height:240px;object-fit:contain}
.qo{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qo input{padding:9px 10px;font-size:14px}
.ap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.ab{background:#fff;color:var(--tx);border:2px solid #cbd5e1;width:42px;height:42px;padding:0;border-radius:50%;font-size:17px}
.ab:hover{transform:none;filter:none;border-color:var(--bl)}.ab.on{background:#16a34a;border-color:#16a34a;color:#fff}
.danger{background:#fff;color:#dc2626;border:1px solid #fca5a5}.danger:hover{background:#fee2e2}
@media(max-width:640px){.g2{grid-template-columns:1fr}.qg{grid-template-columns:1fr}.olist{max-height:none}}

.proof{margin:26px 0;text-align:center}
.proof h2{margin-bottom:6px}
.pgrid{columns:2 160px;column-gap:12px;margin-top:16px}
.pgrid img{width:100%;display:block;margin:0 0 12px;border-radius:12px;border:1px solid #dbe4f3;box-shadow:0 4px 14px rgba(30,64,175,.08);cursor:zoom-in;break-inside:avoid;background:#fff}
@media(min-width:760px){.pgrid{columns:4 160px}}
.zoom{position:fixed;inset:0;background:rgba(15,23,42,.88);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;border-radius:10px;background:#fff}