/* ── Shared study-page engine styles ──────────────────────────────
   Consumed by ccaf_2026.html, aws_saa_study.html, clf_c02_study.html.
   Each page overrides --accent/--accent2/--accent-rgb and .td1..td4
   in its own inline <style> before this file is loaded. */
:root{--bg:#0f1117;--bg2:#1a1d27;--bg3:#22263a;--border:#2e3250;--green:#34d399;--yellow:#fbbf24;--red:#f87171;--blue:#60a5fa;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--r:10px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.7;display:flex;min-height:100vh;}
#sidebar{width:260px;min-width:260px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
#sh{padding:20px 16px 12px;border-bottom:1px solid var(--border);}
#sh h1{font-size:15px;font-weight:700;color:var(--accent2);}
#sh p{font-size:11px;color:var(--text3);margin-top:2px;}
.ns{padding:10px 8px 4px;}
.nst{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:0 8px 6px;}
.ni{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .15s;}
.ni:hover{background:var(--bg3);color:var(--text);}
.ni.active{background:rgba(var(--accent-rgb),.18);color:var(--accent2);font-weight:600;}
.ni .dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex-shrink:0;}
.nb{margin-left:auto;font-size:10px;background:var(--bg3);padding:1px 6px;border-radius:99px;color:var(--text3);}
#main{flex:1;overflow-y:auto;}
#topbar{position:sticky;top:0;z-index:50;background:rgba(15,17,23,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:10px 28px;display:flex;align-items:center;gap:16px;}
#topbar h2{font-size:14px;font-weight:600;}
.pp{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);}
.pbw{width:120px;height:6px;background:var(--bg3);border-radius:99px;overflow:hidden;}
.pbf{height:100%;background:var(--accent);border-radius:99px;transition:width .4s;}
#content{padding:28px 32px;max-width:900px;}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;margin-bottom:20px;}
.ct{font-size:17px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px;}
.cs{font-size:13px;color:var(--text2);margin-bottom:16px;}
.hero{background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(96,165,250,.08));border:1px solid rgba(var(--accent-rgb),.3);border-radius:var(--r);padding:28px;margin-bottom:24px;}
.hero h1{font-size:22px;font-weight:800;background:linear-gradient(90deg,var(--accent2),#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero p{color:var(--text2);margin-top:6px;font-size:14px;}
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0;}
.ii{background:var(--bg3);border-radius:8px;padding:14px;}
.ii .lb{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);font-weight:600;}
.ii .vl{font-size:16px;font-weight:700;color:var(--text);margin-top:4px;}
.dbi{margin-bottom:14px;}
.dbh{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;}
.dbt{height:10px;background:var(--bg3);border-radius:99px;overflow:hidden;}
.dbf{height:100%;border-radius:99px;transition:width 1s .2s;}
.al{border-radius:8px;padding:12px 16px;margin:12px 0;font-size:13.5px;border-left:3px solid;}
.aw{background:rgba(251,191,36,.08);border-color:var(--yellow);color:#fde68a;}
.at{background:rgba(52,211,153,.08);border-color:var(--green);color:#a7f3d0;}
.ai{background:rgba(96,165,250,.08);border-color:var(--blue);color:#bfdbfe;}
table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0;}
th{background:var(--bg3);color:var(--text2);font-weight:600;text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);}
td{padding:8px 12px;border-bottom:1px solid rgba(46,50,80,.5);}
tr:last-child td{border-bottom:none;}
.qo{padding:11px 16px;border-radius:8px;cursor:pointer;font-size:13.5px;border:1px solid var(--border);background:var(--bg3);color:var(--text);transition:all .15s;text-align:left;width:100%;margin-bottom:8px;}
.qo:hover:not(.correct):not(.wrong){border-color:var(--accent);background:rgba(var(--accent-rgb),.1);}
.qo.correct{background:rgba(52,211,153,.15);border-color:var(--green);color:#a7f3d0;}
.qo.wrong{background:rgba(248,113,113,.15);border-color:var(--red);color:#fecaca;}
.qfb{margin-top:14px;padding:12px 16px;border-radius:8px;font-size:13.5px;display:none;}
.qfb.show{display:block;}
.qfb.ok{background:rgba(52,211,153,.1);color:#a7f3d0;border:1px solid rgba(52,211,153,.3);}
.qfb.bad{background:rgba(248,113,113,.1);color:#fecaca;border:1px solid rgba(248,113,113,.3);}
.qnav{display:flex;align-items:center;gap:10px;margin-top:16px;}
.btn{padding:8px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;}
.bp{background:var(--accent);color:#fff;}
.bp:hover{opacity:.9;}
.bg{background:var(--bg3);color:var(--text2);border:1px solid var(--border);}
.bg:hover{background:var(--border);color:var(--text);}
.qc{font-size:12px;color:var(--text3);margin-left:auto;}
.fcw{perspective:1000px;height:200px;cursor:pointer;margin-bottom:16px;}
.fc{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s;border-radius:var(--r);}
.fc.flipped{transform:rotateY(180deg);}
.cf{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;border:1px solid var(--border);flex-direction:column;}
.cf.front{background:var(--bg2);}
.cf.back{background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(96,165,250,.08));transform:rotateY(180deg);}
.cf .hint{position:absolute;bottom:10px;right:14px;font-size:11px;color:var(--text3);}
.fc-known-controls{display:flex;gap:8px;margin-bottom:16px;}
.fc-known-controls .btn{flex:1;}
.fbt-unknown{background:rgba(248,113,113,.12);color:#fecaca;border:1px solid rgba(248,113,113,.35);}
.fbt-unknown:hover{background:rgba(248,113,113,.2);}
.fbt-known{background:rgba(52,211,153,.12);color:#a7f3d0;border:1px solid rgba(52,211,153,.35);}
.fbt-known:hover{background:rgba(52,211,153,.2);}
.fc-due-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(251,191,36,.18);color:var(--yellow);margin-left:8px;vertical-align:middle;}
.chi{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(46,50,80,.4);cursor:pointer;}
.chi:last-child{border-bottom:none;}
.chb{width:20px;height:20px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;color:transparent;}
.chi.ck .chb{background:var(--green);border-color:var(--green);color:#fff;}
.chi.ck .cht{text-decoration:line-through;color:var(--text3);}
.cht{font-size:13.5px;}
.cp{height:8px;background:var(--bg3);border-radius:99px;overflow:hidden;margin:16px 0 8px;}
.cpf{height:100%;background:var(--green);border-radius:99px;transition:width .4s;}
.td{font-size:52px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px;color:var(--accent2);text-align:center;margin:10px 0;}
.page{display:none;}
.page.active{display:block;}
h2.sh{font-size:20px;font-weight:700;margin-bottom:6px;}
h3.sbh{font-size:15px;font-weight:700;color:var(--accent2);margin:18px 0 8px;}
p{margin-bottom:10px;color:var(--text2);}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;}
.exam-header{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 24px;margin-bottom:20px;display:flex;align-items:center;gap:20px;}
.exam-timer{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--yellow);}
.exam-prog{flex:1;}
.exam-qnum{font-size:13px;color:var(--text3);margin-bottom:4px;}
.exam-bar{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden;}
.exam-bf{height:100%;background:var(--accent);border-radius:99px;transition:width .3s;}
.exam-q{font-size:15px;font-weight:600;margin-bottom:16px;line-height:1.6;}
.exam-domain{font-size:11px;color:var(--text3);margin-bottom:8px;}
.exam-nav{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.exam-flag{padding:6px 14px;border-radius:7px;font-size:12px;cursor:pointer;border:1px solid var(--yellow);background:rgba(251,191,36,.08);color:var(--yellow);}
.result-bar{height:16px;background:var(--bg3);border-radius:99px;overflow:hidden;margin:8px 0;}
.result-fill{height:100%;border-radius:99px;transition:width 1s;}
.rcard{background:var(--bg3);border-radius:8px;padding:12px 16px;margin-bottom:8px;font-size:13px;border-left:3px solid var(--border);}
.rcard.rc{border-color:var(--green);}
.rcard.rw{border-color:var(--red);}
.hist-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(46,50,80,.4);font-size:13px;}
.hist-row:last-child{border-bottom:none;}
.hist-score{font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;}
.hist-date{color:var(--text3);font-size:12px;}
.hist-empty{color:var(--text3);font-size:13px;padding:8px 0;}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}

/* ── RESPONSIVE ─────────────────────────────────────── */
#hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:6px;color:var(--text);font-size:22px;line-height:1;flex-shrink:0;}
#hamburger:hover{background:var(--bg3);}
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:98;}
#overlay.open{display:block;}
@media(max-width:768px){
  body{display:block;}
  #sidebar{position:fixed!important;left:-290px;top:0;height:100%!important;width:270px!important;min-width:0!important;z-index:99;transition:left .28s ease;box-shadow:6px 0 32px rgba(0,0,0,.5);overflow-y:auto;}
  #sidebar.open{left:0!important;}
  #hamburger{display:inline-flex!important;align-items:center;justify-content:center;}
  #main{width:100%;overflow-x:hidden;}
  #topbar{padding:10px 12px;gap:8px;}
  #topbar h2{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pp{display:none!important;}
  #content{padding:14px 12px!important;max-width:100%!important;box-sizing:border-box;}
  .card{padding:14px 12px;margin-bottom:14px;}
  .hero{padding:18px 14px;}
  .hero h1{font-size:18px;}
  .hero p{font-size:13px;}
  .ig{grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;}
  .ii{padding:10px 12px;}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px;}
  .qo{padding:11px 12px;font-size:14px;}
  .qt{font-size:15px;}
  .fcw{height:200px;}
  .cf.front .fq{font-size:15px;padding:16px;}
  .cf.back{font-size:13px;padding:14px;}
  .fcc{flex-wrap:wrap;gap:6px;justify-content:center;}
  .fbt{min-width:80px;}
  .fdom{flex-wrap:wrap;gap:6px;}
  .etime{font-size:20px;}
  .eqn{font-size:12px;}
  .eco{padding:9px 10px;font-size:13px;}
  .epb{width:28px;height:28px;font-size:11px;}
  .chi{padding:9px 10px;gap:8px;font-size:13.5px;}
  .chb{width:18px;height:18px;min-width:18px;}
  .certsafari-card{padding:14px 16px;gap:12px;}
  .certsafari-icon{font-size:28px;}
  .certsafari-text h3{font-size:14px;}
  .certsafari-text p{font-size:12px;}
}
@media(max-width:480px){
  .ig{grid-template-columns:1fr;}
  .hero h1{font-size:16px;}
  #content{padding:12px 10px!important;}
  .qo{font-size:13px;}
  .eco{font-size:12px;}
}

/* CertSafari card */
.certsafari-card{background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(248,113,113,.08));border:1px solid rgba(251,191,36,.3);border-radius:var(--r);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;gap:20px;text-decoration:none;cursor:pointer;transition:all .2s;}
.certsafari-card:hover{border-color:rgba(251,191,36,.6);background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(248,113,113,.12));}
.certsafari-icon{font-size:36px;flex-shrink:0;}
.certsafari-text h3{font-size:16px;font-weight:700;color:var(--yellow);margin-bottom:4px;}
.certsafari-text p{font-size:13px;color:var(--text2);line-height:1.5;}
.certsafari-arrow{margin-left:auto;font-size:20px;color:var(--yellow);flex-shrink:0;}

/* ── CHECKLIST LINKS ── */
.chi-link { display:inline-block; margin-left:8px; font-size:10px; color:var(--accent2);
            opacity:0.55; text-decoration:none; vertical-align:middle; padding:1px 5px;
            border-radius:3px; border:1px solid transparent; transition:all .2s; }
.chi-link:hover { opacity:1; background:rgba(99,102,241,.15); border-color:var(--accent2); }