:root{
  --teal:#0d9488; --teal-d:#0f766e; --navy:#0f2c46; --navy2:#1e4d74;
  --bg:#eef2f6; --card:#fff; --ink:#152233; --muted:#64748b; --line:#e3e8ee;
  --green:#15803d; --greenbg:#e8f7ee; --red:#dc2626; --redbg:#fdeceb;
  --amber:#d97706; --amberbg:#fef4e6; --shadow:0 2px 10px rgba(16,42,67,.07);
  --shadow-lg:0 12px 40px rgba(16,42,67,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--teal-d);text-decoration:none}
button{font-family:inherit}

/* header */
header.top{background:linear-gradient(100deg,var(--navy),var(--navy2));color:#fff;
  padding:0 20px;height:62px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;
  box-shadow:0 2px 14px rgba(15,44,70,.25)}
.logo{display:flex;align-items:center;gap:11px}
.logo .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--teal),#22c1a5);
  display:grid;place-items:center;font-size:20px;box-shadow:0 3px 10px rgba(13,148,136,.5)}
.logo .logo-img{height:40px;width:auto;display:block;background:#fff;border-radius:10px;
  padding:5px 11px;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.logo .logo-sub small{color:#fff}
.logo .logo-fallback{color:#fff;font-size:18px;font-weight:800;letter-spacing:.2px}
.logo b{font-size:18px;font-weight:800;letter-spacing:.2px;display:block;line-height:1.1}
.logo small{font-size:11px;opacity:.8;font-weight:500}
.top .spacer{flex:1}
.top .uinfo{font-size:13px;opacity:.9}
.btn{background:var(--teal);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:14px;
  cursor:pointer;font-weight:600;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--teal-d);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.22)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.gray{background:#eef2f6;color:var(--ink);border:1px solid var(--line)}
.btn.gray:hover{background:#e3e9f0}
.btn.danger{background:var(--red)} .btn.danger:hover{background:#b91c1c}
.btn.block{width:100%;justify-content:center;padding:12px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.container{max-width:900px;margin:0 auto;padding:22px 18px 60px}
.wrap{display:flex;max-width:1180px;margin:0 auto;gap:20px;padding:20px 18px 60px}

/* progress bar (free feed) */
.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero .t{flex:1;min-width:200px}
.hero h1{margin:0 0 3px;font-size:20px;color:var(--navy)}
.hero p{margin:0;color:var(--muted);font-size:14px}
.progress{width:100%;height:9px;background:#e6ecf2;border-radius:20px;overflow:hidden;margin-top:12px}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#22c1a5);border-radius:20px;transition:width .4s}
.badge{background:var(--tealbg,#e6f6f3);color:var(--teal-d);border:1px solid #b9e6de;border-radius:20px;
  padding:5px 13px;font-size:13px;font-weight:700}
.badge.free{background:#eef2f6;color:var(--muted);border-color:var(--line)}
.badge.member{background:var(--greenbg);color:var(--green);border-color:#b7e6c6}

/* question cards */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:16px}
.qhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:2px}
.qnum{font-weight:800;color:var(--teal-d);font-size:15px}
.qtags{display:flex;gap:6px;align-items:center}
.tag{font-size:11px;padding:3px 9px;border-radius:20px;background:#eef2f6;color:var(--muted);font-weight:600}
.tag.subject{background:#e6f6f3;color:var(--teal-d)}
.iconbtn{background:none;border:none;cursor:pointer;font-size:19px;line-height:1;padding:2px 4px;color:#b6c0cc;transition:.15s}
.iconbtn:hover{color:var(--teal)}
.iconbtn.on{color:var(--amber)}
.stem{margin:6px 0 14px;font-size:15.5px;font-weight:500}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;cursor:pointer;display:flex;gap:11px;
  align-items:flex-start;font-size:14.5px;background:#fbfcfe;transition:.12s}
.opt:hover{border-color:var(--teal);background:#f2fbf9}
.opt .lab{font-weight:800;color:var(--muted);flex-shrink:0}
.opt.correct{background:var(--greenbg);border-color:var(--green)} .opt.correct .lab{color:var(--green)}
.opt.wrong{background:var(--redbg);border-color:var(--red)} .opt.wrong .lab{color:var(--red)}
.opt.disabled{cursor:default}
.expl{margin-top:14px;padding:13px 15px;background:#f5f9fc;border-left:4px solid var(--teal);border-radius:0 8px 8px 0;
  font-size:14px;display:none;animation:fade .25s}
.expl.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.expl .ans{font-weight:800;color:var(--green);margin-bottom:5px}

.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:22px 0;flex-wrap:wrap}
.pager .pinfo{color:var(--muted);font-size:14px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* sidebar (member browser) */
aside{width:290px;flex-shrink:0}
.side{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.side h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--navy);font-weight:800}
.subj{border-bottom:1px solid var(--line)}
.subj>button{width:100%;text-align:left;background:none;border:none;padding:11px 16px;cursor:pointer;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink)}
.subj>button:hover{background:#f2fbf9}
.cnt{background:#eef2f6;color:var(--muted);border-radius:20px;padding:1px 9px;font-size:12px;font-weight:700}
.headings{display:none;padding:0 0 8px}
.subj.open .headings{display:block}
.headings button{width:100%;text-align:left;background:none;border:none;padding:7px 16px 7px 28px;cursor:pointer;
  font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.headings button:hover,.headings button.active{color:var(--teal-d);background:#eafaf7}
main{flex:1;min-width:0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.crumb{font-size:16px;font-weight:800;color:var(--navy)}
.crumb small{font-weight:500;color:var(--muted)}
input,select,textarea{border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
.search{flex:1;min-width:150px}

/* auth / cards */
.authcard{max-width:410px;margin:52px auto;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:30px}
.authcard h2{margin:0 0 6px;color:var(--navy)}
.field{margin:13px 0}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input,.field select{width:100%}
.req{color:var(--red)}
.msg{padding:11px 13px;border-radius:9px;font-size:14px;margin:10px 0}
.msg.err{background:var(--redbg);color:var(--red)} .msg.ok{background:var(--greenbg);color:var(--green)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,44,70,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:26px;max-width:460px;width:100%;
  animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 6px;color:var(--navy);font-size:20px}
.modal .lead{color:var(--muted);font-size:14px;margin:0 0 16px}
.modal .icon-big{width:56px;height:56px;border-radius:14px;background:var(--tealbg,#e6f6f3);color:var(--teal-d);
  display:grid;place-items:center;font-size:28px;margin-bottom:12px}

/* admin */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--navy);font-size:13px;font-weight:700}
.pill{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600}
.pill.green{background:var(--greenbg);color:var(--green)} .pill.gray{background:#eef2f6;color:var(--muted)}
.pill.amber{background:var(--amberbg);color:var(--amber)}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{background:#fff;border:1px solid var(--line);padding:9px 15px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px}
.tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.stat{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 20px;margin:0 12px 12px 0;box-shadow:var(--shadow)}
.stat b{display:block;font-size:26px;color:var(--teal-d)} .stat span{font-size:12px;color:var(--muted)}
@media(max-width:820px){.wrap{flex-direction:column}aside{width:100%}.side{position:static;max-height:none}}

/* ---------- mobile / small screens ---------- */
@media(max-width:640px){
  header.top{height:auto;min-height:56px;padding:8px 12px;gap:8px;flex-wrap:wrap}
  .logo{gap:9px}
  .logo .logo-img{height:34px;padding:4px 9px}
  .logo .logo-sub{display:none}
  .top .uinfo{display:none}
  .btn{padding:8px 13px}
  .btn.sm{padding:6px 10px;font-size:12px}
  .container{padding:16px 12px 48px}
  .wrap{padding:16px 12px 48px}
  .hero{padding:15px 16px;gap:12px}
  .hero h1{font-size:18px}
  .qcard{padding:16px 15px}
  .qhead{flex-wrap:wrap}
  .stem{font-size:15px}
  .opt{padding:11px 13px;font-size:14px}
  .authcard{margin:26px 12px;padding:22px 18px}
  .toolbar{gap:8px}
  .tabs{gap:6px}
  .tabs button{padding:8px 12px;font-size:13px}
  .stat{padding:12px 15px;margin:0 8px 8px 0}
  .stat b{font-size:22px}
  /* wide admin tables: let them scroll sideways instead of squashing */
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:540px}
}
@media(max-width:380px){
  .logo .logo-img{height:30px;padding:3px 8px}
  .btn.sm{padding:5px 9px;font-size:11px}
  .top{gap:6px;padding:8px 10px}
}

/* ---------- glass reveal + hover on answered options ---------- */
.opt.correct,.opt.wrong{position:relative;overflow:hidden;animation:opt-pop .32s ease}
.opt.correct::after,.opt.wrong::after{content:"";position:absolute;top:0;left:-70%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);
  animation:opt-shine .85s ease-out;pointer-events:none}
@keyframes opt-shine{to{left:135%}}
@keyframes opt-pop{0%{transform:scale(.97)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
.opt.correct:hover,.opt.wrong:hover{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 6px 22px rgba(16,42,67,.18)}

/* ---------- combo book popup ---------- */
.combo{position:relative;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);max-width:420px;width:100%;
  overflow:hidden;animation:pop .25s ease-out}
html.dark .combo{background:#16212e}
.combo-img{display:block;width:100%;height:auto}
.combo-x{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.combo-x:hover{background:rgba(0,0,0,.78)}
.combo-fallback{padding:26px;text-align:center}
.combo-fallback h3{margin:6px 0;color:var(--navy)}
html.dark .combo-fallback h3{color:#dbe7f2}
.combo-fallback p{color:var(--muted);margin:0 0 16px}

/* ---------- browse-subjects toggle (free view, mobile) ---------- */
.subj-toggle{display:none}
@media(max-width:820px){
  #freeAside{display:none;margin-bottom:4px}
  #freeAside.open{display:block}
  .subj-toggle{display:inline-block;margin-bottom:14px}
}

/* ---------- night mode ---------- */
html.dark{
  --bg:#0f1720; --card:#16212e; --ink:#e6eef6; --muted:#93a4b6; --line:#28353f;
  --greenbg:#123020; --redbg:#3a1b1b; --amberbg:#3a2a14;
  --shadow:0 2px 10px rgba(0,0,0,.45); --shadow-lg:0 14px 44px rgba(0,0,0,.6);
}
html.dark body{background:var(--bg);color:var(--ink)}
html.dark .hero h1,html.dark .side h3,html.dark .crumb,html.dark .authcard h2,
html.dark .modal h3,html.dark th{color:#dbe7f2}
html.dark .qnum,html.dark .stat b{color:#2dd4bf}
html.dark a{color:#5eead4}
html.dark input,html.dark select,html.dark textarea{background:#0f1a24;color:var(--ink);border-color:var(--line)}
html.dark .opt{background:#1b2735;border-color:var(--line)}
html.dark .opt:hover{background:#213141;border-color:var(--teal)}
html.dark .opt.correct{background:var(--greenbg)} html.dark .opt.wrong{background:var(--redbg)}
html.dark .opt .lab{color:var(--muted)}
html.dark .expl{background:#14212c}
html.dark .expl .ans{color:#4ade80}
html.dark .progress{background:#22303d}
html.dark .cnt,html.dark .tag,html.dark .badge.free,html.dark .pill.gray{background:#22303d;color:var(--muted);border-color:var(--line)}
html.dark .tag.subject{background:#123330;color:#2dd4bf}
html.dark .btn.gray{background:#22303d;color:var(--ink);border-color:var(--line)}
html.dark .btn.gray:hover{background:#2a3a48}
html.dark .tabs button{background:#16212e;color:var(--ink);border-color:var(--line)}
html.dark .tabs button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
html.dark .subj>button:hover{background:#1b2735}
html.dark .headings button:hover,html.dark .headings button.active{background:#12242c;color:#5eead4}
html.dark .modal{background:#16212e;color:var(--ink)}
html.dark .opt,html.dark .qcard,html.dark .hero,html.dark .side,html.dark .panel,html.dark .stat{border-color:var(--line)}