/* ============================================================
   AMPLICUE TECH — CBT PLATFORM  style.css  v4  (3D Edition)
   Fonts: Exo 2 / Rajdhani / Orbitron / Nunito Sans
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700;900&family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;600;700;900&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
  --bg:#03080f; --bg2:#050c18; --bg3:#070e1e;
  --surface:#0a1428; --surface2:#0e1c38;
  --border:rgba(0,210,255,.1); --border2:rgba(0,210,255,.25);
  --neon:#00d2ff; --neon2:#0099cc; --neon3:#00ffcc;
  --gold:#ffd700; --green:#00e676; --red:#ff5252;
  --text:#e8f4f8; --text2:#8bafc8; --text3:#4a7a99;
  --wa:#25d366;
  --shadow-neon:0 0 24px rgba(0,210,255,.32);
  --shadow:0 8px 40px rgba(0,0,0,.7);
  --shadow-3d:0 20px 60px rgba(0,0,0,.8),0 8px 20px rgba(0,0,0,.5);
  --r:16px; --rsm:10px;
  --tr:all .3s cubic-bezier(.4,0,.2,1);
  --fd:'Nunito Sans',sans-serif;
  --fu:'Rajdhani',sans-serif;
  --fa:'Exo 2',sans-serif;
  --fd2:'Orbitron',monospace;
  --depth-light:rgba(255,255,255,.07);
  --depth-dark:rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fd);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  perspective:1200px;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--neon2);border-radius:3px}

/* ── 3D CARD MIXIN ────────────────────────────────────────── */
/* Applied via .card-3d class — deep plate with bevel edges */
.card-3d {
  position:relative;
  transform-style:preserve-3d;
  transition:transform .35s ease,box-shadow .35s ease;
}
.card-3d::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,var(--depth-light) 0%,transparent 40%,var(--depth-dark) 100%);
  pointer-events:none;
  z-index:1;
}
.card-3d::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.08),
    inset -1px -1px 0 rgba(0,0,0,.5),
    inset 2px 2px 4px rgba(255,255,255,.04),
    inset -2px -2px 4px rgba(0,0,0,.3);
  pointer-events:none;
  z-index:2;
}
.card-3d:hover {
  transform:translateY(-8px) rotateX(2deg) rotateY(-1deg);
  box-shadow:
    0 30px 70px rgba(0,0,0,.8),
    0 10px 30px rgba(0,0,0,.5),
    0 0 40px rgba(0,210,255,.15);
}

/* PARTICLES */
#particles-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}

/* PAGES */
.page{display:none;position:relative;z-index:1;min-height:100vh;animation:fadeIn .4s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(24px) rotateX(3deg)}to{opacity:1;transform:none}}

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.8);
  z-index:999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  backdrop-filter:blur(8px);
}
.modal-box{
  background:linear-gradient(145deg,#0d1e35,#070f20);
  border:1px solid var(--border2);
  border-radius:var(--r);
  max-width:460px;
  width:100%;
  overflow:hidden;
  box-shadow:
    var(--shadow-neon),
    var(--shadow-3d),
    inset 1px 1px 0 rgba(255,255,255,.06),
    inset -1px -1px 0 rgba(0,0,0,.5);
  transform-style:preserve-3d;
  animation:modalPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop{from{transform:scale(.85) translateY(30px) rotateX(8deg);opacity:0}to{transform:none;opacity:1}}
.modal-header{padding:28px 28px 20px;background:linear-gradient(135deg,rgba(0,210,255,.1),rgba(0,210,255,.03));border-bottom:1px solid var(--border)}
.modal-course-code{font-family:var(--fd2);font-size:.62rem;color:var(--neon);letter-spacing:3px;margin-bottom:6px}
.modal-title{font-family:var(--fa);font-size:1.2rem;font-weight:700;color:var(--text)}
.modal-body{padding:22px 28px}
.modal-field{margin-bottom:20px}
.modal-label{font-family:var(--fu);font-size:.8rem;font-weight:600;color:var(--text2);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:10px}
.q-count-options{display:flex;gap:8px;flex-wrap:wrap}
.q-count-btn{
  padding:8px 18px;
  background:linear-gradient(145deg,#0d1e35,#060f1e);
  border:1px solid var(--border);
  border-radius:50px;
  color:var(--text2);
  cursor:pointer;
  font-family:var(--fu);
  font-size:.85rem;
  font-weight:600;
  transition:var(--tr);
  box-shadow:2px 2px 6px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.05);
}
.q-count-btn:hover,.q-count-btn.active{
  background:linear-gradient(145deg,rgba(0,210,255,.2),rgba(0,210,255,.08));
  border-color:var(--neon);
  color:var(--neon);
  box-shadow:4px 4px 12px rgba(0,0,0,.5),0 0 12px rgba(0,210,255,.2),inset 1px 1px 0 rgba(0,210,255,.1);
  transform:translateY(-2px);
}
.duration-display{font-family:var(--fd2);font-size:1.1rem;font-weight:700;color:var(--gold);text-shadow:0 0 12px rgba(255,215,0,.4)}
.modal-instructions{list-style:none;padding:0}
.modal-instructions li{font-size:.85rem;color:var(--text2);padding:4px 0;padding-left:16px;position:relative;font-family:var(--fd)}
.modal-instructions li::before{content:'▸';position:absolute;left:0;color:var(--neon)}
.modal-actions{padding:16px 28px 24px;display:flex;gap:12px;border-top:1px solid var(--border)}
.btn-modal-cancel{
  flex:1;padding:11px;
  background:linear-gradient(145deg,#0a1428,#060e1c);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fu);
  font-size:.9rem;
  font-weight:600;
  transition:var(--tr);
  box-shadow:2px 2px 8px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-modal-cancel:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 14px rgba(255,82,82,.2),2px 2px 8px rgba(0,0,0,.4)}
.btn-modal-start{
  flex:2;padding:11px;
  background:linear-gradient(145deg,#00bfed,#008ab0,#004d66);
  border:none;
  color:#fff;
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fd2);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:2px;
  transition:var(--tr);
  box-shadow:
    4px 4px 12px rgba(0,0,0,.5),
    -1px -1px 4px rgba(255,255,255,.08),
    0 0 18px rgba(0,210,255,.3),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-modal-start:hover{
  background:linear-gradient(145deg,#00d2ff,#009fc4,#006080);
  box-shadow:6px 6px 18px rgba(0,0,0,.6),0 0 28px rgba(0,210,255,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-3px);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(3,8,15,.95);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 1px 0 rgba(0,210,255,.08);
}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap;padding:8px 0}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon svg{width:38px;height:38px}
.logo-main{font-family:var(--fd2);font-size:.75rem;font-weight:900;color:var(--neon);letter-spacing:3px;line-height:1;text-shadow:0 0 14px rgba(0,210,255,.6);display:block}
.logo-sub{font-family:var(--fu);font-size:.68rem;color:var(--text2);letter-spacing:.5px;display:block}
.header-whatsapp{display:flex;gap:8px;flex-wrap:wrap}
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;
  border-radius:50px;
  font-family:var(--fu);
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
  transition:var(--tr);
  white-space:nowrap;
}
.btn-wa-dev{
  background:linear-gradient(145deg,rgba(37,211,102,.15),rgba(37,211,102,.05));
  border:1px solid rgba(37,211,102,.35);
  color:var(--wa);
  box-shadow:2px 2px 8px rgba(0,0,0,.3),inset 1px 1px 0 rgba(37,211,102,.08);
}
.btn-wa-dev:hover{
  background:linear-gradient(145deg,#25d366,#1da851);
  color:#000;
  box-shadow:0 0 20px rgba(37,211,102,.45),3px 3px 10px rgba(0,0,0,.4);
  transform:translateY(-2px);
}
.btn-wa-channel{
  background:linear-gradient(145deg,rgba(0,210,255,.1),rgba(0,210,255,.03));
  border:1px solid var(--border2);
  color:var(--neon);
  box-shadow:2px 2px 8px rgba(0,0,0,.3),inset 1px 1px 0 rgba(0,210,255,.06);
}
.btn-wa-channel:hover{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  box-shadow:var(--shadow-neon),3px 3px 10px rgba(0,0,0,.4);
  transform:translateY(-2px);
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero-section{max-width:900px;margin:0 auto;padding:60px 24px 40px;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px;
  background:linear-gradient(145deg,rgba(0,210,255,.1),rgba(0,210,255,.03));
  border:1px solid var(--border2);
  border-radius:50px;
  font-family:var(--fd2);font-size:.6rem;color:var(--neon);letter-spacing:3px;
  margin-bottom:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.4),inset 1px 1px 0 rgba(0,210,255,.1);
  animation:fadeIn .5s ease;
}
.badge-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-title{
  font-family:var(--fa);
  font-size:clamp(1.8rem,5vw,3.2rem);
  font-weight:900;
  line-height:1.15;
  margin-bottom:18px;
  animation:fadeIn .5s .1s ease both;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}
.gradient-text{
  background:linear-gradient(135deg,var(--neon),var(--neon3),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(0,210,255,.5));
}
.hero-subtitle{font-size:1.05rem;color:var(--text2);line-height:1.7;margin-bottom:20px;font-family:var(--fd);animation:fadeIn .5s .2s ease both}

/* Doctor Dominion credit */
.doctor-credit{
  max-width:640px;margin:0 auto 28px;
  background:linear-gradient(145deg,rgba(0,210,255,.07),rgba(0,210,255,.02));
  border:1px solid var(--border2);
  border-radius:var(--rsm);
  padding:14px 20px;
  display:flex;align-items:flex-start;gap:10px;text-align:left;
  animation:fadeIn .5s .25s ease both;
  box-shadow:4px 4px 14px rgba(0,0,0,.4),inset 1px 1px 0 rgba(0,210,255,.08),inset -1px -1px 0 rgba(0,0,0,.3);
}
.credit-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.doctor-credit p{font-size:.88rem;color:var(--text2);line-height:1.6;font-family:var(--fd)}
.doctor-credit strong{color:var(--neon)}

.btn-join-group{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;
  background:linear-gradient(145deg,rgba(37,211,102,.18),rgba(37,211,102,.06));
  border:1px solid rgba(37,211,102,.4);
  border-radius:50px;
  color:var(--wa);
  font-family:var(--fu);font-size:.95rem;font-weight:700;
  text-decoration:none;
  margin-bottom:48px;
  transition:var(--tr);
  animation:fadeIn .5s .3s ease both;
  box-shadow:
    4px 6px 18px rgba(0,0,0,.5),
    -1px -1px 4px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(37,211,102,.1);
}
.btn-join-group:hover{
  background:linear-gradient(145deg,#2ecc71,#25d366,#1da851);
  color:#000;
  box-shadow:0 0 32px rgba(37,211,102,.5),6px 8px 24px rgba(0,0,0,.6);
  transform:translateY(-4px);
}

/* NAV CARDS */
.nav-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;animation:fadeIn .5s .35s ease both}
.nav-card{
  position:relative;
  background:linear-gradient(145deg,#0e1c35,#070f1e);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:28px 22px;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
  text-align:left;
  overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:
    6px 8px 20px rgba(0,0,0,.6),
    -1px -1px 4px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4);
}
.nav-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(0,0,0,.3) 100%);
  pointer-events:none;
}
.nav-card:hover{
  border-color:var(--neon);
  transform:translateY(-10px) rotateX(3deg) rotateY(-2deg);
  box-shadow:
    0 30px 70px rgba(0,0,0,.8),
    0 10px 30px rgba(0,0,0,.5),
    0 0 40px rgba(0,210,255,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.nav-card.featured{
  border-color:rgba(0,210,255,.4);
  background:linear-gradient(145deg,#0f2040,#071428);
  box-shadow:
    6px 8px 24px rgba(0,0,0,.7),
    0 0 32px rgba(0,210,255,.15),
    inset 0 1px 0 rgba(0,210,255,.1);
}
.card-glow{position:absolute;top:-40px;right:-40px;width:110px;height:110px;background:radial-gradient(circle,rgba(0,210,255,.18),transparent 70%);opacity:0;transition:var(--tr)}
.nav-card:hover .card-glow,.nav-card.featured .card-glow{opacity:1}
.card-badge{
  display:inline-block;
  background:linear-gradient(135deg,var(--neon),var(--neon3));
  color:var(--bg);
  font-family:var(--fd2);font-size:.55rem;font-weight:900;letter-spacing:2px;
  padding:3px 10px;
  border-radius:50px;
  margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,210,255,.3);
}
.card-icon{font-size:2rem;margin-bottom:12px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.card-title{font-family:var(--fa);font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:7px}
.card-desc{font-size:.88rem;color:var(--text2);line-height:1.5;font-family:var(--fd)}
.card-arrow{position:absolute;bottom:18px;right:20px;color:var(--neon);font-size:1.1rem;opacity:0;transform:translateX(-6px);transition:var(--tr)}
.nav-card:hover .card-arrow{opacity:1;transform:none}

/* ADMIN BIO */
.admin-bio-section{max-width:900px;margin:0 auto;padding:0 24px 20px;animation:fadeIn .6s .4s ease both}
.admin-bio-inner{
  background:linear-gradient(145deg,#0d1e35,#060f22);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:28px;
  position:relative;
  overflow:hidden;
  box-shadow:
    8px 10px 30px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4);
}
.admin-bio-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--neon),var(--neon3),var(--gold))}
.admin-bio-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.admin-avatar{
  width:54px;height:54px;
  border-radius:50%;
  background:linear-gradient(145deg,#00d2ff,#00a0c0,#006080);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd2);font-size:1.5rem;font-weight:900;color:#fff;
  flex-shrink:0;
  box-shadow:
    4px 5px 14px rgba(0,0,0,.5),
    -1px -1px 4px rgba(255,255,255,.1),
    0 0 20px rgba(0,210,255,.4);
}
.admin-badge-label{font-family:var(--fd2);font-size:.58rem;color:var(--neon);letter-spacing:3px;margin-bottom:3px}
.admin-name{font-family:var(--fa);font-size:1.15rem;font-weight:700;color:var(--text)}
.admin-bio-text{font-family:var(--fd);font-size:.92rem;color:var(--text2);line-height:1.75;margin-bottom:12px}
.admin-bio-text strong{color:var(--text);font-weight:600}
.admin-bio-highlights{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.admin-highlight{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(145deg,rgba(0,210,255,.08),rgba(0,210,255,.02));
  border:1px solid var(--border);
  border-radius:50px;
  padding:6px 14px;
  font-family:var(--fu);font-size:.8rem;font-weight:600;color:var(--text);
  transition:var(--tr);
  box-shadow:2px 3px 8px rgba(0,0,0,.3),inset 1px 1px 0 rgba(255,255,255,.04);
}
.admin-highlight:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)}
.admin-bio-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

/* STATS */
.stats-strip{max-width:900px;margin:0 auto;padding:0 24px 60px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;animation:fadeIn .6s .45s ease both}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:18px 32px}
.stat-num{
  font-family:var(--fd2);font-size:1.7rem;font-weight:900;
  color:var(--neon);
  text-shadow:0 0 18px rgba(0,210,255,.6),0 4px 8px rgba(0,0,0,.4);
}
.stat-label{font-size:.75rem;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.stat-sep{width:1px;height:36px;background:var(--border)}

/* PAGE HEADERS */
.page-header{max-width:1200px;margin:0 auto;padding:36px 24px 20px}
.page-title{font-family:var(--fa);font-size:clamp(1.3rem,4vw,2rem);font-weight:900;color:var(--text);margin:10px 0 7px}
.page-sub{color:var(--text2);font-size:.95rem;font-family:var(--fd)}
.btn-back{
  background:linear-gradient(145deg,rgba(0,210,255,.1),rgba(0,210,255,.03));
  border:1px solid var(--border2);
  color:var(--neon);
  padding:7px 18px;
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fu);font-size:.85rem;font-weight:600;
  transition:var(--tr);
  box-shadow:2px 3px 8px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-back:hover{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  transform:translateY(-2px);
  box-shadow:4px 5px 14px rgba(0,0,0,.5),0 0 18px rgba(0,210,255,.3);
}

/* FACULTY GRID */
.faculty-grid{max-width:1200px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.faculty-card{
  background:linear-gradient(145deg,#0e1c35,#060f1e);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px 20px;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
  position:relative;
  overflow:hidden;
  box-shadow:
    5px 7px 18px rgba(0,0,0,.6),
    -1px -1px 3px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.faculty-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.04) 0%,transparent 50%,rgba(0,0,0,.25) 100%);
  pointer-events:none;
}
.faculty-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--neon),var(--neon3));transform:scaleX(0);transition:var(--tr)}
.faculty-card:hover{
  border-color:var(--neon);
  transform:translateY(-8px) rotateX(2deg);
  box-shadow:
    0 24px 60px rgba(0,0,0,.8),
    0 0 30px rgba(0,210,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.faculty-card:hover::after{transform:scaleX(1)}
.faculty-icon{font-size:1.9rem;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.faculty-name{font-family:var(--fa);font-size:.82rem;font-weight:700;margin-bottom:5px;color:var(--text)}
.faculty-desc{font-size:.82rem;color:var(--text2);font-family:var(--fd)}
.faculty-arrow{color:var(--neon);margin-top:12px;font-size:.85rem}

/* FACULTY DETAIL */
#faculty-detail-content{max-width:1100px;margin:0 auto;padding:0 24px 60px}
.level-section{margin-bottom:32px}
.level-title{font-family:var(--fd2);font-size:.9rem;font-weight:700;color:var(--neon);padding:10px 0;border-bottom:1px solid var(--border2);margin-bottom:14px;letter-spacing:2px}
.course-list{display:flex;flex-direction:column;gap:10px}
.course-item{
  background:linear-gradient(145deg,#0d1e35,#070f1e);
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:3px 4px 12px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
}
.course-item:hover{
  border-color:var(--border2);
  background:linear-gradient(145deg,#0f2040,#08121e);
  transform:translateX(4px) translateY(-2px);
  box-shadow:5px 6px 18px rgba(0,0,0,.6),0 0 14px rgba(0,210,255,.1);
}
.course-code{font-family:var(--fd2);font-size:.68rem;color:var(--neon);letter-spacing:2px;margin-bottom:2px}
.course-title-text{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:2px;font-family:var(--fu)}
.course-file{font-size:.76rem;color:var(--text3);font-family:var(--fd)}
.btn-download{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;
  background:linear-gradient(145deg,rgba(0,210,255,.12),rgba(0,210,255,.04));
  border:1px solid var(--border2);
  border-radius:50px;
  color:var(--neon);
  text-decoration:none;
  font-family:var(--fu);font-size:.82rem;font-weight:600;
  transition:var(--tr);white-space:nowrap;flex-shrink:0;
  box-shadow:2px 3px 8px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-download:hover{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  transform:translateY(-2px);
  box-shadow:4px 5px 14px rgba(0,0,0,.5),var(--shadow-neon);
}

/* CBT COURSE SELECT */
.cbt-course-grid{max-width:1200px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.cbt-course-card{
  background:linear-gradient(145deg,#0d1e35,#07101f);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
  transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:
    5px 7px 20px rgba(0,0,0,.6),
    -1px -1px 4px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
}
.cbt-course-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.04) 0%,transparent 50%);
  pointer-events:none;
}
.cbt-course-card:hover{
  border-color:var(--neon);
  transform:translateY(-10px) rotateX(3deg) rotateY(-1deg);
  box-shadow:
    0 28px 65px rgba(0,0,0,.8),
    0 0 35px rgba(0,210,255,.2),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.cbt-code{font-family:var(--fd2);font-size:.68rem;color:var(--neon);letter-spacing:3px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cbt-q-badge{
  background:linear-gradient(145deg,rgba(0,210,255,.12),rgba(0,210,255,.04));
  border:1px solid var(--border2);
  border-radius:50px;padding:2px 10px;
  font-size:.62rem;color:var(--text2);font-family:var(--fu);
  box-shadow:1px 2px 4px rgba(0,0,0,.3);
}
.cbt-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3;font-family:var(--fu)}
.cbt-meta{font-size:.8rem;color:var(--text3);margin-bottom:16px;font-family:var(--fd)}
.btn-start-cbt{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;
  background:linear-gradient(145deg,#00bfed,#0088ae,#004d66);
  color:#fff;
  border:none;border-radius:var(--rsm);
  font-family:var(--fd2);font-size:.72rem;font-weight:700;letter-spacing:1.5px;
  cursor:pointer;
  transition:var(--tr);
  box-shadow:
    3px 4px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 0 16px rgba(0,210,255,.2);
}
.btn-start-cbt:hover{
  background:linear-gradient(145deg,#00d2ff,#00a8cc,#006080);
  box-shadow:5px 6px 20px rgba(0,0,0,.6),0 0 28px rgba(0,210,255,.4),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-3px);
}

/* EXAM */
.exam-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(3,8,15,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:10px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.exam-course-label{font-family:var(--fd2);font-size:.72rem;color:var(--neon);letter-spacing:2px;font-weight:700;white-space:nowrap}
.exam-timer{font-family:var(--fd2);font-size:1rem;color:var(--gold);font-weight:700;min-width:88px;text-shadow:0 0 14px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.3)}
.exam-timer.warning{color:var(--red);text-shadow:0 0 14px rgba(255,82,82,.6),0 2px 4px rgba(0,0,0,.3);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.5}}
.exam-progress-wrap{flex:1;display:flex;align-items:center;gap:10px;min-width:150px}
.exam-progress-wrap span{font-family:var(--fd2);font-size:.68rem;color:var(--text2);white-space:nowrap}
.exam-progress-bar{
  flex:1;height:6px;
  background:linear-gradient(145deg,#050c18,#07101e);
  border-radius:3px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:inset 1px 1px 4px rgba(0,0,0,.5);
}
.exam-progress-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--neon3));border-radius:3px;transition:width .4s ease;box-shadow:0 0 8px rgba(0,210,255,.5)}
.exam-body{max-width:820px;margin:0 auto;padding:32px 22px 16px}

/* QUESTION CARD */
.question-card{
  background:linear-gradient(145deg,#0d1e35,#070f1e);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:28px;
  animation:fadeIn .25s ease;
  box-shadow:
    8px 12px 30px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.4);
  position:relative;
}
.question-card::before{
  content:'';
  position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(145deg,rgba(255,255,255,.03) 0%,transparent 40%,rgba(0,0,0,.2) 100%);
  pointer-events:none;
}
.q-number{font-family:var(--fd2);font-size:.68rem;color:var(--neon);letter-spacing:3px;margin-bottom:14px}
.q-text{font-size:1.08rem;font-weight:500;color:var(--text);line-height:1.7;margin-bottom:24px;font-family:var(--fd)}
.options-grid{display:flex;flex-direction:column;gap:10px}
.option-btn{
  display:flex;align-items:center;gap:13px;
  padding:13px 18px;
  background:linear-gradient(145deg,#09152a,#060c1a);
  border:1px solid var(--border);
  border-radius:var(--rsm);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  text-align:left;width:100%;color:var(--text);
  font-family:var(--fd);font-size:.93rem;
  box-shadow:
    3px 4px 12px rgba(0,0,0,.5),
    inset 1px 1px 0 rgba(255,255,255,.04),
    inset -1px -1px 0 rgba(0,0,0,.3);
}
.option-letter{
  width:30px;height:30px;
  border-radius:50%;
  background:linear-gradient(145deg,#0d1e35,#060f1e);
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd2);font-size:.68rem;color:var(--neon);font-weight:700;
  flex-shrink:0;
  transition:var(--tr);
  box-shadow:2px 2px 6px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.06);
}
.option-btn:hover:not(.disabled){
  border-color:var(--neon);
  background:linear-gradient(145deg,rgba(0,210,255,.1),rgba(0,210,255,.03));
  transform:translateX(5px) translateY(-2px);
  box-shadow:
    5px 6px 18px rgba(0,0,0,.6),
    0 0 16px rgba(0,210,255,.15),
    inset 1px 1px 0 rgba(0,210,255,.08);
}
.option-btn:hover:not(.disabled) .option-letter{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  box-shadow:2px 2px 8px rgba(0,0,0,.4),0 0 10px rgba(0,210,255,.3);
}
.option-btn.selected{
  border-color:var(--neon);
  background:linear-gradient(145deg,rgba(0,210,255,.12),rgba(0,210,255,.04));
  box-shadow:
    4px 5px 16px rgba(0,0,0,.6),
    0 0 18px rgba(0,210,255,.2),
    inset 1px 1px 0 rgba(0,210,255,.1);
}
.option-btn.selected .option-letter{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  box-shadow:2px 2px 8px rgba(0,0,0,.4),0 0 12px rgba(0,210,255,.4);
}
.option-btn.correct{
  border-color:var(--green);
  background:linear-gradient(145deg,rgba(0,230,118,.12),rgba(0,230,118,.04));
  box-shadow:4px 5px 16px rgba(0,0,0,.6),0 0 18px rgba(0,230,118,.2);
}
.option-btn.correct .option-letter{
  background:linear-gradient(145deg,#00e676,#00b05a);
  color:var(--bg);border-color:var(--green);
  box-shadow:2px 2px 8px rgba(0,0,0,.4),0 0 10px rgba(0,230,118,.4);
}
.option-btn.wrong{
  border-color:var(--red);
  background:linear-gradient(145deg,rgba(255,82,82,.12),rgba(255,82,82,.04));
  box-shadow:4px 5px 16px rgba(0,0,0,.6),0 0 18px rgba(255,82,82,.2);
}
.option-btn.wrong .option-letter{
  background:linear-gradient(145deg,#ff5252,#c0392b);
  color:#fff;border-color:var(--red);
  box-shadow:2px 2px 8px rgba(0,0,0,.4),0 0 10px rgba(255,82,82,.4);
}
.option-btn.disabled{cursor:default}

.exam-nav{max-width:820px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.btn-exam-nav{
  padding:11px 24px;
  background:linear-gradient(145deg,#0d1e35,#070f1e);
  border:1px solid var(--border2);
  color:var(--neon);
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fu);font-size:.9rem;font-weight:700;
  transition:var(--tr);
  box-shadow:3px 4px 12px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.05);
}
.btn-exam-nav:hover:not(:disabled){
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  box-shadow:5px 6px 18px rgba(0,0,0,.6),var(--shadow-neon);
  transform:translateY(-3px);
}
.btn-exam-nav:disabled{opacity:.3;cursor:not-allowed}
.btn-palette{
  padding:8px 18px;
  background:linear-gradient(145deg,rgba(255,215,0,.1),rgba(255,215,0,.03));
  border:1px solid rgba(255,215,0,.3);
  color:var(--gold);
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fu);font-size:.82rem;font-weight:600;
  transition:var(--tr);
  box-shadow:2px 3px 8px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,215,0,.06);
}
.btn-palette:hover{
  background:linear-gradient(145deg,#ffd700,#cc9900);
  color:var(--bg);
  box-shadow:0 0 20px rgba(255,215,0,.35),3px 4px 12px rgba(0,0,0,.5);
  transform:translateY(-2px);
}
.exam-submit-wrap{max-width:820px;margin:18px auto 38px;padding:0 22px;text-align:center}
.btn-submit-exam{
  padding:14px 48px;
  background:linear-gradient(145deg,#ff7043,#e64a19,#bf360c);
  border:none;color:#fff;
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fd2);font-size:.82rem;font-weight:700;letter-spacing:2px;
  transition:var(--tr);
  box-shadow:
    5px 6px 20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 0 20px rgba(255,107,53,.3);
}
.btn-submit-exam:hover{
  background:linear-gradient(145deg,#ff8a65,#ff7043,#e64a19);
  box-shadow:7px 8px 26px rgba(0,0,0,.7),0 0 30px rgba(255,107,53,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-4px);
}

/* Q PALETTE */
.q-palette{
  position:fixed;top:0;right:0;
  width:290px;height:100vh;
  background:linear-gradient(180deg,#050c18,#03080f);
  border-left:1px solid var(--border2);
  z-index:200;
  transform:translateX(100%);
  transition:var(--tr);
  overflow-y:auto;padding:22px;
  box-shadow:-6px 0 30px rgba(0,0,0,.6);
}
.q-palette.open{transform:none}
.palette-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.palette-header span{font-family:var(--fd2);font-size:.75rem;color:var(--neon);letter-spacing:1px}
.palette-header button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:.95rem;transition:var(--tr)}
.palette-header button:hover{color:var(--red)}
.palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:18px}
.palette-btn{
  width:100%;aspect-ratio:1;
  border-radius:7px;
  border:1px solid var(--border);
  background:linear-gradient(145deg,#0a1428,#060d1c);
  color:var(--text2);
  font-family:var(--fd2);font-size:.62rem;
  cursor:pointer;
  transition:var(--tr);
  box-shadow:2px 2px 5px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.03);
}
.palette-btn:hover{
  border-color:var(--neon);color:var(--neon);
  transform:translateY(-2px);
  box-shadow:3px 4px 10px rgba(0,0,0,.5),0 0 8px rgba(0,210,255,.2);
}
.palette-btn.answered{
  background:linear-gradient(145deg,rgba(0,230,118,.2),rgba(0,230,118,.08));
  border-color:var(--green);color:var(--green);
  box-shadow:2px 2px 5px rgba(0,0,0,.4),0 0 6px rgba(0,230,118,.2);
}
.palette-btn.current{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);border-color:var(--neon);
  box-shadow:2px 2px 8px rgba(0,0,0,.5),0 0 10px rgba(0,210,255,.4);
}
.palette-legend{display:flex;gap:14px;font-size:.74rem;color:var(--text3);flex-wrap:wrap}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:3px}
.legend-dot.answered{background:var(--green)}
.legend-dot.unanswered{background:var(--surface);border:1px solid var(--border)}
.legend-dot.current{background:var(--neon)}

/* RESULTS */
.results-container{max-width:700px;margin:0 auto;padding:56px 24px 36px;text-align:center}
.results-trophy{font-size:3.8rem;margin-bottom:14px;animation:bounceIn .6s ease;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
@keyframes bounceIn{0%{transform:scale(0) rotateX(30deg);opacity:0}60%{transform:scale(1.2) rotateX(-5deg)}100%{transform:scale(1);opacity:1}}
.results-title{font-family:var(--fa);font-size:clamp(1.4rem,4vw,2.3rem);font-weight:900;color:var(--text);margin-bottom:7px;text-shadow:0 4px 16px rgba(0,0,0,.4)}
.results-course{font-size:.78rem;color:var(--neon);letter-spacing:2px;font-family:var(--fd2);margin-bottom:32px}
.score-circle-wrap{position:relative;width:154px;height:154px;margin:0 auto 32px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.score-ring{width:154px;height:154px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--surface);stroke-width:8}
.ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 8px rgba(0,210,255,.7))}
.score-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.score-pct{display:block;font-family:var(--fd2);font-size:1.75rem;font-weight:900;color:var(--neon);line-height:1;text-shadow:0 0 18px rgba(0,210,255,.6)}
.score-label{font-size:.68rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase}
.score-breakdown{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}
.score-stat{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(145deg,#0e1c35,#07101f);
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:16px 24px;
  min-width:100px;
  box-shadow:
    5px 6px 16px rgba(0,0,0,.6),
    inset 1px 1px 0 rgba(255,255,255,.05),
    inset -1px -1px 0 rgba(0,0,0,.3);
}
.score-stat.correct{border-color:rgba(0,230,118,.35);box-shadow:5px 6px 16px rgba(0,0,0,.6),0 0 16px rgba(0,230,118,.1)}
.score-stat.wrong{border-color:rgba(255,82,82,.35);box-shadow:5px 6px 16px rgba(0,0,0,.6),0 0 16px rgba(255,82,82,.1)}
.ss-num{font-family:var(--fd2);font-size:1.7rem;font-weight:900;line-height:1;margin-bottom:5px}
.score-stat.correct .ss-num{color:var(--green);text-shadow:0 0 12px rgba(0,230,118,.4)}
.score-stat.wrong .ss-num{color:var(--red);text-shadow:0 0 12px rgba(255,82,82,.4)}
.score-stat.skipped .ss-num{color:var(--text2)}
.ss-label{font-size:.8rem;color:var(--text2)}

/* RESULT ACTION BUTTONS */
.results-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-action{
  padding:12px 28px;
  border-radius:50px;
  cursor:pointer;
  font-family:var(--fu);font-size:.95rem;font-weight:700;
  transition:var(--tr);border:none;
}
.btn-action.primary{
  background:linear-gradient(145deg,#00bfed,#0088ae,#004d66);
  color:#fff;
  box-shadow:4px 5px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15),0 0 18px rgba(0,210,255,.25);
}
.btn-action.primary:hover{
  background:linear-gradient(145deg,#00d2ff,#00a8cc,#006080);
  box-shadow:6px 7px 22px rgba(0,0,0,.7),var(--shadow-neon),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-4px);
}
.btn-action.secondary{
  background:linear-gradient(145deg,#0d1e35,#070f1e);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:4px 5px 14px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-action.secondary:hover{
  border-color:var(--neon);color:var(--neon);
  transform:translateY(-3px);
  box-shadow:5px 6px 18px rgba(0,0,0,.6),0 0 14px rgba(0,210,255,.15);
}
.btn-action.outline{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--neon);
}
.btn-action.outline:hover{
  background:rgba(0,210,255,.08);
  transform:translateY(-2px);
}

/* REVIEW */
.review-section{max-width:820px;margin:0 auto;padding:0 24px 60px}
.review-title{font-family:var(--fd2);font-size:1rem;color:var(--neon);margin-bottom:20px;letter-spacing:2px;padding-top:28px;border-top:1px solid var(--border)}
.review-item{
  background:linear-gradient(145deg,#0d1e35,#070f1e);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  margin-bottom:14px;
  box-shadow:4px 5px 16px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease;
}
.review-item:hover{transform:translateX(3px)}
.review-item.r-correct{border-left:4px solid var(--green);box-shadow:4px 5px 16px rgba(0,0,0,.5),0 0 12px rgba(0,230,118,.08)}
.review-item.r-wrong{border-left:4px solid var(--red);box-shadow:4px 5px 16px rgba(0,0,0,.5),0 0 12px rgba(255,82,82,.08)}
.review-item.r-skipped{border-left:4px solid var(--text3)}
.review-q-num{font-family:var(--fd2);font-size:.62rem;color:var(--text3);letter-spacing:2px;margin-bottom:7px}
.review-q-text{font-size:.93rem;color:var(--text);line-height:1.6;margin-bottom:12px;font-family:var(--fd)}
.review-answers{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:.82rem}
.rev-your{color:var(--red)}
.rev-your.was-correct{color:var(--green)}
.rev-correct{color:var(--green)}
.review-explanation{
  background:linear-gradient(145deg,rgba(0,210,255,.06),rgba(0,210,255,.02));
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:10px 14px;
  font-size:.84rem;color:var(--text2);line-height:1.6;
  font-family:var(--fd);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.3);
}
.review-explanation strong{color:var(--neon);font-family:var(--fu)}

/* TRACKING */
.tracking-summary{max-width:1100px;margin:0 auto;padding:0 24px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.track-card{
  background:linear-gradient(145deg,#0d1e35,#060f1e);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:
    5px 7px 18px rgba(0,0,0,.6),
    inset 1px 1px 0 rgba(255,255,255,.05),
    inset -1px -1px 0 rgba(0,0,0,.3);
}
.track-card:hover{
  border-color:var(--border2);
  transform:translateY(-6px) rotateX(3deg);
  box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 20px rgba(0,210,255,.1),inset 1px 1px 0 rgba(255,255,255,.07);
}
.track-card.highlight{
  border-color:var(--neon);
  box-shadow:5px 7px 20px rgba(0,0,0,.7),0 0 24px rgba(0,210,255,.15);
}
.track-icon{font-size:1.7rem;margin-bottom:9px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.track-num{font-family:var(--fd2);font-size:1.9rem;font-weight:900;color:var(--neon);margin-bottom:5px;text-shadow:0 0 18px rgba(0,210,255,.5),0 4px 8px rgba(0,0,0,.4)}
.track-label{font-size:.78rem;color:var(--text3);letter-spacing:1px;text-transform:uppercase}

.history-section{max-width:1100px;margin:0 auto;padding:0 24px 60px}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.history-header h3{font-family:var(--fd2);font-size:.85rem;color:var(--text);letter-spacing:2px}
.btn-clear-history{
  padding:6px 16px;
  background:linear-gradient(145deg,rgba(255,82,82,.1),rgba(255,82,82,.04));
  border:1px solid rgba(255,82,82,.3);
  color:var(--red);
  border-radius:50px;cursor:pointer;
  font-family:var(--fu);font-size:.8rem;font-weight:600;
  transition:var(--tr);
  box-shadow:2px 2px 6px rgba(0,0,0,.4);
}
.btn-clear-history:hover{
  background:linear-gradient(145deg,#ff5252,#c0392b);
  color:#fff;
  box-shadow:0 0 16px rgba(255,82,82,.3),3px 4px 10px rgba(0,0,0,.5);
  transform:translateY(-2px);
}
.empty-history{text-align:center;padding:56px 22px;color:var(--text2)}
.empty-icon{font-size:2.8rem;margin-bottom:14px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.empty-history p{margin-bottom:22px;font-size:.95rem;font-family:var(--fd)}
.history-item{
  background:linear-gradient(145deg,#0d1e35,#060f1e);
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:14px 18px;
  margin-bottom:9px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:transform .2s ease,box-shadow .2s ease;flex-wrap:wrap;
  box-shadow:3px 4px 12px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
}
.history-item:hover{
  border-color:var(--border2);
  transform:translateX(4px);
  box-shadow:5px 6px 16px rgba(0,0,0,.6),0 0 10px rgba(0,210,255,.08);
}
.history-course{font-family:var(--fd2);font-size:.66rem;color:var(--neon);letter-spacing:2px;margin-bottom:2px}
.history-date{font-size:.78rem;color:var(--text3);font-family:var(--fd)}
.history-score-wrap{display:flex;align-items:center;gap:10px}
.history-score-bar{
  width:76px;height:6px;
  background:linear-gradient(145deg,#050c18,#070e1a);
  border-radius:3px;overflow:hidden;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.5);
}
.history-score-fill{height:100%;border-radius:3px;transition:width .6s ease}
.history-score-pct{font-family:var(--fd2);font-size:.82rem;font-weight:700;min-width:46px;text-align:right}

/* FOOTER */
.site-footer{
  background:linear-gradient(180deg,#050c18,#03080f);
  border-top:1px solid var(--border);
  position:relative;z-index:1;
  box-shadow:0 -4px 20px rgba(0,0,0,.4);
}
.footer-dev-link{max-width:1100px;margin:0 auto;padding:36px 24px;text-align:center}
.footer-dev-link p{font-size:.9rem;color:var(--text2);margin-bottom:14px;font-family:var(--fd)}
.btn-dev-website{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 26px;
  background:linear-gradient(145deg,rgba(0,210,255,.12),rgba(0,210,255,.04));
  border:1px solid var(--border2);
  border-radius:50px;color:var(--neon);text-decoration:none;
  font-family:var(--fu);font-size:.9rem;font-weight:600;
  transition:var(--tr);
  box-shadow:3px 4px 12px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-dev-website:hover{
  background:linear-gradient(145deg,#00d2ff,#0099cc);
  color:var(--bg);
  box-shadow:var(--shadow-neon),5px 6px 18px rgba(0,0,0,.6);
  transform:translateY(-3px);
}
.footer-divider{height:1px;background:var(--border);max-width:1100px;margin:0 auto}
.footer-bottom{max-width:1100px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-copy{font-size:.8rem;color:var(--text3);font-family:var(--fd)}
.footer-copy strong{color:var(--neon)}
.footer-links{display:flex;gap:14px}
.footer-links a{color:var(--text3);text-decoration:none;font-size:.8rem;transition:var(--tr);font-family:var(--fu)}
.footer-links a:hover{color:var(--neon)}

/* RESPONSIVE */
@media(max-width:768px){
  .header-inner{height:auto}
  .stats-strip{flex-wrap:wrap}
  .stat-sep{display:none}
  .stat-item{padding:14px 18px}
  .nav-cards{grid-template-columns:1fr}
  .results-actions{flex-direction:column;align-items:center}
  .exam-topbar{gap:8px}
  .question-card{padding:20px 16px}
  .q-palette{width:270px}
  .footer-bottom{flex-direction:column;text-align:center}
  .modal-box{margin:0 12px}
  .score-breakdown{gap:8px}
  .score-stat{min-width:88px;padding:13px 16px}
  .card-3d:hover{transform:translateY(-4px)}
}
@media(max-width:480px){
  .btn-whatsapp span{display:none}
  .doctor-credit{flex-direction:column}
}

/* ── APK DOWNLOAD HERO BUTTON ───────────────────────────────── */
.apk-hero-wrap{margin-bottom:36px;animation:fadeIn .5s .32s ease both}
.btn-apk-hero{
  display:inline-flex;align-items:center;gap:16px;
  padding:18px 36px;
  background:linear-gradient(145deg,#1a1a2e,#0f3460,#16213e);
  border:none;
  border-radius:18px;
  cursor:pointer;position:relative;
  transition:var(--tr);text-align:left;overflow:hidden;
  box-shadow:
    0 0 0 2px rgba(0,210,255,.35),
    8px 12px 32px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-apk-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.08) 0%,transparent 50%,rgba(0,0,0,.2) 100%);pointer-events:none}
.btn-apk-hero:hover{
  transform:translateY(-6px) rotateX(3deg);
  box-shadow:
    0 0 0 2px var(--neon),
    0 30px 60px rgba(0,0,0,.8),
    0 0 40px rgba(0,210,255,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.apk-glow-border{position:absolute;inset:-2px;background:linear-gradient(135deg,var(--neon),var(--neon3),var(--gold),var(--neon));background-size:300% 300%;border-radius:20px;z-index:-1;animation:gradientShift 3s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.apk-btn-icon{font-size:2.4rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));flex-shrink:0}
.apk-btn-text{display:flex;flex-direction:column;gap:2px}
.apk-btn-label{font-family:var(--fa);font-size:1.25rem;font-weight:900;color:#fff;letter-spacing:.5px;line-height:1.1}
.apk-btn-sub{font-family:var(--fu);font-size:.82rem;color:var(--neon);font-weight:500;letter-spacing:1px}
.apk-btn-badge{
  background:linear-gradient(145deg,#ffd700,#cc9900);
  color:#000;
  font-family:var(--fd2);font-size:.72rem;font-weight:900;letter-spacing:2px;
  padding:5px 12px;border-radius:50px;flex-shrink:0;
  box-shadow:2px 3px 10px rgba(0,0,0,.4),0 0 14px rgba(255,215,0,.35);
  animation:pulse 2s infinite;
}

/* APK MODAL */
.apk-modal-box{text-align:center;max-width:420px;padding:32px 28px}
.apk-modal-icon{font-size:3.5rem;margin-bottom:12px;animation:bounceIn .5s ease;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.apk-modal-title{font-family:var(--fa);font-size:1.35rem;font-weight:900;color:var(--text);margin-bottom:10px}
.apk-modal-badge{display:inline-block;background:linear-gradient(145deg,#3ddc84,#2ecc71);color:#000;font-family:var(--fd2);font-size:.68rem;font-weight:900;letter-spacing:2px;padding:4px 14px;border-radius:50px;margin-bottom:16px;box-shadow:2px 2px 8px rgba(0,0,0,.4),0 0 12px rgba(61,220,132,.3)}
.apk-modal-msg{font-family:var(--fd);font-size:.95rem;color:var(--text2);line-height:1.65;margin-bottom:20px;padding:0 8px}
.apk-modal-msg strong{color:var(--text)}
.apk-modal-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.apk-feat{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(145deg,rgba(0,210,255,.08),rgba(0,210,255,.02));
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:8px 14px;
  font-family:var(--fu);font-size:.82rem;font-weight:600;color:var(--text);
  box-shadow:2px 3px 8px rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.04);
}
.apk-modal-actions{display:flex;flex-direction:column;gap:10px}
.btn-apk-confirm{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;
  background:linear-gradient(145deg,#3ddc84,#2ecc71,#1a9e53);
  border:none;border-radius:50px;color:#000;
  font-family:var(--fa);font-size:.92rem;font-weight:900;letter-spacing:.5px;
  cursor:pointer;text-decoration:none;
  transition:var(--tr);
  box-shadow:4px 5px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2),0 0 20px rgba(61,220,132,.35);
}
.btn-apk-confirm:hover{
  background:linear-gradient(145deg,#4ef090,#3ddc84,#2ecc71);
  box-shadow:6px 7px 22px rgba(0,0,0,.6),0 0 30px rgba(61,220,132,.5),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-3px);
}

/* ── STA 101 TABLE STYLES ─────────────────────────────────── */
.sta-question{line-height:1}
.sta-qnum{font-family:var(--fd2);font-size:.68rem;color:var(--neon);letter-spacing:2px;margin-bottom:10px;text-transform:uppercase}
.sta-qtext{font-family:var(--fd);font-size:1.05rem;font-weight:500;color:var(--text);line-height:1.7}
.sta-table{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:.85rem;font-family:var(--fd);border-radius:8px;overflow:hidden;border:1px solid var(--border2);box-shadow:3px 4px 12px rgba(0,0,0,.4)}
.sta-table th{background:linear-gradient(145deg,rgba(0,210,255,.18),rgba(0,210,255,.08));color:var(--neon);font-family:var(--fu);font-weight:700;padding:9px 12px;text-align:center;border:1px solid var(--border2);font-size:.82rem;letter-spacing:.5px}
.sta-table td{padding:8px 12px;text-align:center;border:1px solid var(--border);color:var(--text);background:linear-gradient(145deg,#09152a,#060c18)}
.sta-table tr:nth-child(even) td{background:linear-gradient(145deg,rgba(0,210,255,.05),rgba(0,210,255,.02))}
.sta-table tr:hover td{background:linear-gradient(145deg,rgba(0,210,255,.1),rgba(0,210,255,.04))}
#q-text{font-size:1.05rem;font-weight:500;line-height:1.7}
#q-text .sta-question{display:block}
.review-explanation table{margin:8px 0}
.review-explanation .sta-table{font-size:.8rem}
.review-explanation .sta-table th{padding:6px 10px}
.review-explanation .sta-table td{padding:5px 10px}

/* STA card gold theme */
.cbt-course-card.sta-card{
  border-color:rgba(255,215,0,.3);
  background:linear-gradient(145deg,#181200,#0e0d00,#0d1e35);
  box-shadow:5px 7px 20px rgba(0,0,0,.6),0 0 20px rgba(255,215,0,.06);
}
.cbt-course-card.sta-card:hover{
  border-color:var(--gold);
  box-shadow:0 28px 65px rgba(0,0,0,.8),0 0 32px rgba(255,215,0,.2);
}
.cbt-course-card.sta-card .btn-start-cbt{
  background:linear-gradient(145deg,#ffd700,#cc9900,#805e00);
  color:#000;
  box-shadow:3px 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2),0 0 14px rgba(255,215,0,.2);
}
.cbt-course-card.sta-card .btn-start-cbt:hover{
  background:linear-gradient(145deg,#ffe033,#ffd700,#cc9900);
  box-shadow:5px 6px 20px rgba(0,0,0,.6),0 0 24px rgba(255,215,0,.4);
}
.cbt-course-card.sta-card .cbt-code{color:var(--gold)}
.ordered-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(145deg,rgba(255,215,0,.12),rgba(255,215,0,.04));
  border:1px solid rgba(255,215,0,.3);
  border-radius:50px;padding:3px 10px;
  font-family:var(--fu);font-size:.68rem;font-weight:700;color:var(--gold);
  margin-bottom:12px;
  box-shadow:1px 2px 6px rgba(0,0,0,.4);
}

/* ── LOGO & AVATAR ──────────────────────────────────────────── */
.logo-img{width:38px;height:38px;object-fit:contain;border-radius:8px;display:block;filter:drop-shadow(0 2px 8px rgba(0,210,255,.3))}
.logo-icon{display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:38px;height:38px}
.admin-avatar{
  width:58px;height:58px;
  border-radius:50%;
  background:linear-gradient(145deg,#00d2ff,#0099cc,#005577);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
  box-shadow:
    4px 5px 14px rgba(0,0,0,.5),
    -1px -1px 4px rgba(255,255,255,.08),
    0 0 22px rgba(0,210,255,.4);
}
.admin-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.admin-avatar-fallback{font-family:var(--fa);font-size:1.5rem;font-weight:900;color:#fff;display:flex;align-items:center;justify-content:center}

/* ── SUBMIT CONFIRMATION MODAL ───────────────────────────────── */
.submit-modal-box{
  text-align:center;max-width:440px;padding:36px 32px 28px;
  background:linear-gradient(145deg,#0d1e35,#060f22);
  border:1px solid rgba(255,215,0,.35);
  box-shadow:
    0 0 40px rgba(255,215,0,.12),
    var(--shadow-3d),
    inset 1px 1px 0 rgba(255,255,255,.06);
}
.submit-modal-icon{width:64px;height:64px;margin:0 auto 16px;animation:bounceIn .5s ease}
.submit-modal-icon svg{width:64px;height:64px;filter:drop-shadow(0 0 14px rgba(255,215,0,.5))}
.submit-modal-title{font-family:var(--fa);font-size:1.35rem;font-weight:900;color:var(--text);margin-bottom:4px}
.submit-modal-subtitle{font-family:var(--fu);font-size:.82rem;font-weight:700;color:var(--red);letter-spacing:1px;text-transform:uppercase;margin-bottom:18px}
.submit-modal-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin-bottom:18px}
.submit-modal-body{font-family:var(--fd);font-size:.93rem;color:var(--text2);line-height:1.7;margin-bottom:18px;padding:0 4px}
.submit-modal-body strong{color:var(--text)}
.submit-modal-stats{display:flex;justify-content:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.sms-item{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(145deg,#070f1e,#050c18);
  border:1px solid var(--border);
  border-radius:var(--rsm);
  padding:10px 20px;min-width:90px;
  box-shadow:3px 4px 10px rgba(0,0,0,.5),inset 1px 1px 0 rgba(255,255,255,.04);
}
.sms-num{font-family:var(--fd2);font-size:1.4rem;font-weight:900;line-height:1;margin-bottom:3px}
.sms-label{font-size:.72rem;color:var(--text3);font-family:var(--fu);letter-spacing:.5px}
.sms-answered .sms-num{color:var(--green);text-shadow:0 0 10px rgba(0,230,118,.3)}
.sms-unanswered .sms-num{color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,.3)}
.submit-modal-actions{display:flex;flex-direction:column;gap:10px}
.btn-submit-go{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;
  background:linear-gradient(145deg,#ff7043,#e64a19,#bf360c);
  border:none;border-radius:50px;color:#fff;
  font-family:var(--fa);font-size:.9rem;font-weight:900;letter-spacing:.5px;
  cursor:pointer;
  transition:var(--tr);
  box-shadow:4px 5px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15),0 0 18px rgba(255,107,53,.3);
}
.btn-submit-go:hover{
  background:linear-gradient(145deg,#ff8a65,#ff7043,#e64a19);
  box-shadow:6px 7px 22px rgba(0,0,0,.7),0 0 28px rgba(255,107,53,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-3px);
}
.btn-submit-back{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;
  background:linear-gradient(145deg,rgba(0,210,255,.08),rgba(0,210,255,.02));
  border:1px solid var(--border2);
  border-radius:50px;color:var(--neon);
  font-family:var(--fu);font-size:.88rem;font-weight:600;
  cursor:pointer;transition:var(--tr);
  box-shadow:2px 3px 8px rgba(0,0,0,.4);
}
.btn-submit-back:hover{
  background:rgba(0,210,255,.12);
  border-color:var(--neon);
  transform:translateY(-2px);
  box-shadow:4px 5px 14px rgba(0,0,0,.5);
}

/* ============================================================
   FIREBASE AUTH & PROFILE STYLES
============================================================ */

/* ── AUTH PAGE ──────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(145deg, #0d1e35, #060f22);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 36px 32px 28px;
  box-shadow:
    10px 14px 40px rgba(0,0,0,.8),
    -2px -2px 8px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 0 60px rgba(0,210,255,.08);
  animation: modalPop .4s cubic-bezier(.34,1.56,.64,1);
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  justify-content: center;
}
.auth-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 2px 8px rgba(0,210,255,.4));
}
.auth-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-tabs {
  display: flex;
  background: linear-gradient(145deg, #07101f, #050c18);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 4px;
  margin-bottom: 26px;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,.4);
}
.auth-tab {
  flex: 1;
  padding: 9px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--fu);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50px;
  transition: var(--tr);
}
.auth-tab.active {
  background: linear-gradient(145deg, #00bfed, #0088ae, #004d66);
  color: #fff;
  box-shadow:
    2px 3px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 14px rgba(0,210,255,.25);
}
.auth-field {
  margin-bottom: 16px;
}
.auth-label {
  display: block;
  font-family: var(--fu);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.auth-input-wrap {
  position: relative;
}
.auth-input {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(145deg, #06101f, #040c18);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  color: var(--text);
  font-family: var(--fd);
  font-size: .93rem;
  outline: none;
  transition: var(--tr);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,.4), inset -1px -1px 3px rgba(255,255,255,.02);
}
.auth-input:focus {
  border-color: var(--neon);
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.4),
    0 0 14px rgba(0,210,255,.2);
}
.auth-input::placeholder { color: var(--text3); }
.auth-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text2);
  padding: 4px;
}
.auth-error {
  background: linear-gradient(145deg, rgba(255,82,82,.1), rgba(255,82,82,.04));
  border: 1px solid rgba(255,82,82,.3);
  border-radius: var(--rsm);
  padding: 10px 14px;
  font-family: var(--fd);
  font-size: .85rem;
  color: var(--red);
  margin-bottom: 14px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.4);
}
.btn-auth-submit {
  width: 100%;
  padding: 13px;
  background: linear-gradient(145deg, #00bfed, #0088ae, #004d66);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-family: var(--fd2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--tr);
  margin-bottom: 16px;
  box-shadow:
    4px 5px 16px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 0 18px rgba(0,210,255,.25);
}
.btn-auth-submit:hover:not(:disabled) {
  background: linear-gradient(145deg, #00d2ff, #00a8cc, #006080);
  box-shadow: 6px 7px 22px rgba(0,0,0,.7), 0 0 28px rgba(0,210,255,.45), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-3px);
}
.btn-auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--text3);
  font-size: .8rem;
  font-family: var(--fu);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn-google-auth {
  width: 100%;
  padding: 12px;
  background: linear-gradient(145deg, #0d1e35, #07101f);
  border: 1px solid var(--border2);
  border-radius: 50px;
  color: var(--text);
  font-family: var(--fu);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--tr);
  box-shadow: 3px 4px 12px rgba(0,0,0,.5), inset 1px 1px 0 rgba(255,255,255,.04);
}
.btn-google-auth:hover {
  background: linear-gradient(145deg, #14274a, #0a1a30);
  border-color: rgba(255,255,255,.2);
  box-shadow: 5px 6px 18px rgba(0,0,0,.6);
  transform: translateY(-2px);
}
.auth-footer-note {
  text-align: center;
  font-family: var(--fd);
  font-size: .78rem;
  color: var(--text3);
  margin-top: 20px;
  line-height: 1.6;
}

/* ── HEADER USER BUTTON ─────────────────────────────────────── */
.header-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(145deg, rgba(0,210,255,.1), rgba(0,210,255,.03));
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 5px 14px 5px 5px;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: 2px 3px 8px rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.04);
}
.header-user-btn:hover {
  background: linear-gradient(145deg, rgba(0,210,255,.18), rgba(0,210,255,.08));
  border-color: var(--neon);
  box-shadow: 3px 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(0,210,255,.2);
  transform: translateY(-1px);
}
.header-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #00d2ff, #0099cc);
  color: var(--bg);
  font-family: var(--fd2);
  font-size: .82rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 2px 6px rgba(0,0,0,.4), 0 0 8px rgba(0,210,255,.3);
  flex-shrink: 0;
}
.header-user-name {
  font-family: var(--fu);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PROFILE PAGE ───────────────────────────────────────────── */
.profile-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile-card {
  background: linear-gradient(145deg, #0d1e35, #060f22);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 36px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    8px 12px 32px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 40px rgba(0,210,255,.07);
}
.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), var(--neon3), var(--gold));
}
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(145deg, #00d2ff, #0099cc, #005577);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd2);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  box-shadow:
    6px 8px 20px rgba(0,0,0,.6),
    -2px -2px 6px rgba(255,255,255,.08),
    0 0 30px rgba(0,210,255,.4);
}
.profile-online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg2);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}
/* ── PROFILE PICTURE UPLOAD BUTTON ── */
.profile-avatar-upload-btn {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--bg2);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .2s, background .2s;
  z-index: 2;
  font-size: .75rem;
}
.profile-avatar-upload-btn:hover {
  transform: scale(1.15);
  background: #ffe066;
}
.profile-name {
  font-family: var(--fa);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 5px;
}
.profile-email {
  font-family: var(--fd);
  font-size: .9rem;
  color: var(--text2);
  margin-bottom: 5px;
}
.profile-since {
  font-family: var(--fu);
  font-size: .78rem;
  color: var(--text3);
  margin-bottom: 20px;
}
.profile-edit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.profile-edit-wrap .auth-input {
  max-width: 280px;
  text-align: center;
}
.profile-edit-btns {
  gap: 10px;
  justify-content: center;
}
.btn-edit-name {
  background: linear-gradient(145deg, rgba(0,210,255,.08), rgba(0,210,255,.02));
  border: 1px solid var(--border2);
  border-radius: 50px;
  color: var(--neon);
  padding: 8px 20px;
  font-family: var(--fu);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.4);
}
.btn-edit-name:hover {
  background: rgba(0,210,255,.14);
  border-color: var(--neon);
  transform: translateY(-2px);
  box-shadow: 3px 4px 12px rgba(0,0,0,.5);
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-logout {
  padding: 12px 28px;
  background: linear-gradient(145deg, rgba(255,82,82,.1), rgba(255,82,82,.04));
  border: 1px solid rgba(255,82,82,.35);
  border-radius: 50px;
  color: var(--red);
  font-family: var(--fu);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: 3px 4px 12px rgba(0,0,0,.5);
}
.btn-logout:hover {
  background: linear-gradient(145deg, #ff5252, #c0392b);
  color: #fff;
  box-shadow: 0 0 24px rgba(255,82,82,.35), 5px 6px 16px rgba(0,0,0,.6);
  transform: translateY(-3px);
}

@media(max-width: 600px) {
  .auth-card { padding: 28px 20px 22px; }
  .profile-container { padding: 0 16px 40px; }
}

/* ═══════════════════════════════════════════════════════════
   CHAT ROOM
═══════════════════════════════════════════════════════════ */
#page-chat { padding: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.chat-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  background: var(--bg2);
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg3);
  border-bottom: 1px solid rgba(0,210,255,.15);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.chat-header .btn-back {
  background: none;
  border: 1px solid rgba(0,210,255,.3);
  color: var(--neon);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-title {
  font-family: var(--fa);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-live-dot {
  width: 8px; height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ff88;
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}
.chat-header-sub {
  font-size: .73rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-badge {
  font-size: .65rem;
  font-weight: 800;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .06em;
}

/* Notice */
.chat-notice {
  background: rgba(0,210,255,.06);
  border-bottom: 1px solid rgba(0,210,255,.1);
  text-align: center;
  font-size: .73rem;
  color: var(--muted);
  padding: 7px 16px;
  flex-shrink: 0;
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(0,210,255,.2); border-radius: 4px; }

.chat-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .85rem;
  margin: auto;
}
.chat-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(0,210,255,.15);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.chat-empty {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  margin: auto;
  padding: 40px 20px;
}

/* Date Divider */
.chat-date-divider {
  text-align: center;
  font-size: .7rem;
  color: var(--muted);
  margin: 12px 0 6px;
  position: relative;
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: rgba(255,255,255,.07);
}
.chat-date-divider::before { left: 0; }
.chat-date-divider::after  { right: 0; }

/* Message Wrap */
.chat-msg-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
  margin-bottom: 6px;
}
.chat-msg-wrap.own   { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-wrap.other { align-self: flex-start; }

/* Avatar */
.chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--gold));
  color: #0a0e1a;
  font-weight: 900;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--fa);
}

/* Bubble Column */
.chat-bubble-col { display: flex; flex-direction: column; gap: 3px; max-width: 100%; }

.chat-sender-name {
  font-size: .7rem;
  font-weight: 700;
  color: var(--neon);
  margin-left: 4px;
  margin-bottom: 1px;
}

/* Bubble */
.chat-bubble {
  position: relative;
  padding: 9px 38px 9px 12px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
}
.chat-msg-wrap.other .chat-bubble {
  background: var(--bg3);
  border: 1px solid rgba(0,210,255,.12);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg-wrap.own .chat-bubble {
  background: linear-gradient(135deg, rgba(0,210,255,.2), rgba(0,153,204,.25));
  border: 1px solid rgba(0,210,255,.3);
  color: var(--text);
  border-bottom-right-radius: 4px;
}

.chat-time {
  position: absolute;
  bottom: 5px; right: 8px;
  font-size: .62rem;
  color: var(--muted);
  white-space: nowrap;
}

/* React button on bubble */
.btn-react-msg {
  display: none;
  position: absolute;
  top: -10px; right: -10px;
  background: var(--bg3);
  border: 1px solid rgba(0,210,255,.2);
  border-radius: 12px;
  font-size: .65rem;
  padding: 2px 5px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  z-index: 3;
}
.chat-bubble:hover .btn-react-msg { display: block; }

/* Reactions */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  margin-left: 4px;
}
.chat-reaction-badge {
  background: rgba(0,210,255,.1);
  border: 1px solid rgba(0,210,255,.2);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: .78rem;
  cursor: pointer;
  transition: background .2s;
  color: var(--text);
}
.chat-reaction-badge:hover { background: rgba(0,210,255,.2); }

/* Reaction Picker */
.reaction-picker {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg3);
  border-top: 1px solid rgba(0,210,255,.1);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.reaction-picker button {
  font-size: 1.3rem;
  background: none;
  border: 1px solid rgba(0,210,255,.15);
  border-radius: 10px;
  padding: 4px 8px;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.reaction-picker button:hover {
  transform: scale(1.25);
  background: rgba(0,210,255,.1);
}

/* Input Bar */
.chat-input-bar {
  padding: 10px 14px 14px;
  background: var(--bg3);
  border-top: 1px solid rgba(0,210,255,.12);
  flex-shrink: 0;
}
.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid rgba(0,210,255,.2);
  border-radius: 16px;
  padding: 8px 10px;
  transition: border-color .2s;
}
.chat-input-wrap:focus-within { border-color: rgba(0,210,255,.5); }

.chat-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--fd);
  font-size: .9rem;
  resize: none;
  max-height: 120px;
  line-height: 1.5;
}
.chat-input::placeholder { color: var(--muted); }

.btn-chat-emoji {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-chat-send {
  background: var(--neon);
  border: none;
  color: #0a0e1a;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
.btn-chat-send:hover { background: var(--gold); transform: scale(1.08); }
.btn-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .chat-msg-wrap { max-width: 92%; }
  .chat-bubble { font-size: .83rem; padding: 8px 34px 8px 10px; }
  .chat-sender-name { font-size: .67rem; }
}