:root{
  --brand:#0d6efd; --brand2:#198754; --radius:16px;
  --app-max:560px; --nav-h:64px;
}
*{-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));}
.xsmall{font-size:.72rem}
.app-main{max-width:var(--app-max);margin:0 auto;min-height:60vh}

/* Splash */
#splash{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--brand),var(--brand2));color:#fff;transition:opacity .5s, visibility .5s}
#splash.hide{opacity:0;visibility:hidden}
.splash-inner{text-align:center}
.splash-inner > i{font-size:4rem;animation:pop .8s ease}
.splash-title{font-size:1.4rem;font-weight:800;margin-top:.5rem}
.splash-sub{opacity:.85;font-size:.9rem}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* App bar */
.appbar{position:sticky;top:0;z-index:1020;max-width:var(--app-max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;
  background:var(--bs-body-bg);border-bottom:1px solid var(--bs-border-color)}
.appbar-title{font-weight:700}
.appbar-icon{background:none;border:none;font-size:1.15rem;color:var(--bs-body-color);text-decoration:none;cursor:pointer}
.badge-dot{position:absolute;top:-6px;right:-8px;background:#dc3545;color:#fff;border-radius:10px;font-size:.6rem;padding:1px 5px}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);max-width:var(--app-max);margin:0 auto;z-index:1030;
  display:flex;justify-content:space-around;align-items:center;background:var(--bs-body-bg);
  border-top:1px solid var(--bs-border-color);box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.bottom-nav .nav-item{flex:1;text-align:center;color:var(--bs-secondary-color);text-decoration:none;font-size:.65rem;padding:.3rem 0;display:flex;flex-direction:column;gap:3px;align-items:center}
.bottom-nav .nav-item i{font-size:1.2rem}
.bottom-nav .nav-item.active{color:var(--brand);font-weight:600}

/* Cards / stats */
.stat-card{border-radius:var(--radius);padding:.9rem;text-align:center}
.stat-num{font-size:1.5rem;font-weight:800;line-height:1}
.stat-label{font-size:.72rem;opacity:.8}
.greeting h4{font-size:1.25rem}
.mini-stat{background:var(--bs-tertiary-bg);border-radius:12px;padding:.6rem}
.mini-stat b{display:block;font-size:1.2rem}
.mini-stat span{font-size:.7rem;color:var(--bs-secondary-color)}

/* Subjects */
.subject-scroll{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.3rem}
.subject-chip{flex:0 0 auto;width:84px;text-align:center;text-decoration:none;color:var(--bs-body-color);
  background:var(--bs-tertiary-bg);border-radius:14px;padding:.7rem .3rem}
.subject-chip i{font-size:1.4rem;color:var(--c,var(--brand))}
.subject-chip span{display:block;font-size:.65rem;margin-top:.3rem;line-height:1.1}
.subject-card{display:block;text-decoration:none;color:var(--bs-body-color);background:var(--bs-body-bg);
  border-radius:var(--radius);padding:1rem;box-shadow:0 2px 10px rgba(0,0,0,.06);height:100%;border-top:3px solid var(--c,var(--brand))}
.subject-card-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 15%,transparent);color:var(--c,var(--brand));font-size:1.3rem}
.subject-hero{display:flex;gap:.8rem;align-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 12%,transparent);
  border-radius:var(--radius);padding:1rem;color:var(--c,var(--brand))}
.subject-hero i{font-size:2rem}
.subject-hero h5{color:var(--bs-body-color)} .subject-hero small{color:var(--bs-secondary-color)}

/* Material rows */
.material-row{display:flex;align-items:center;gap:.7rem;padding:.6rem;border-radius:12px;text-decoration:none;color:var(--bs-body-color);background:var(--bs-body-bg);box-shadow:0 1px 6px rgba(0,0,0,.05);margin-bottom:.5rem}
.material-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.type-pdf{background:#dc3545}.type-video{background:#e8590c}.type-article{background:#0d6efd}.type-slide{background:#fd7e14}.type-image{background:#6f42c1}
.back-link{text-decoration:none;color:var(--bs-secondary-color);font-size:.85rem}
.article-body{line-height:1.7} .article-body img{max-width:100%}
.btn-bookmark{border:1px solid var(--bs-border-color);color:var(--bs-secondary-color)}
.btn-bookmark.active{color:#ffc107;border-color:#ffc107}

/* Quiz */
.quiz-header{display:flex;justify-content:space-between;align-items:center;background:var(--bs-body-bg);padding:.6rem 0;top:56px;z-index:1010;border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}
.quiz-timer{font-weight:700;color:var(--brand);background:var(--bs-tertiary-bg);padding:.3rem .7rem;border-radius:10px}
.quiz-timer.danger{color:#fff;background:#dc3545}
.q-num{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:0 0 auto}
.opt{display:flex;align-items:center;gap:.5rem;border:1px solid var(--bs-border-color);border-radius:10px;padding:.55rem .7rem;margin-bottom:.4rem;cursor:pointer}
.opt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}

/* Result */
.result-ring{width:130px;height:130px;border-radius:50%;margin:1rem auto;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.result-ring.pass{background:linear-gradient(135deg,#198754,#20c997)}
.result-ring.fail{background:linear-gradient(135deg,#dc3545,#fd7e14)}
.result-score{font-size:2.4rem;font-weight:800;line-height:1}
.result-badge{width:42px;height:42px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:0 0 auto}

/* Ranking */
.podium-item{text-align:center;background:var(--bs-tertiary-bg);border-radius:14px;padding:.6rem;width:90px}
.podium-item.rank1{transform:scale(1.12);background:color-mix(in srgb,#ffc107 25%,transparent)}
.podium-medal{font-size:1.6rem}.podium-name{font-size:.7rem;font-weight:600}.podium-score{font-weight:800;color:var(--brand)}
.rank-no{width:24px;text-align:center;font-weight:700;color:var(--bs-secondary-color)}

/* AI chat */
.chat-box{background:var(--bs-tertiary-bg);border-radius:14px;padding:.8rem;min-height:300px;max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem}
.chat-msg{display:flex;gap:.5rem;align-items:flex-start;max-width:90%}
.chat-msg i{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:0 0 auto}
.chat-msg > div{background:var(--bs-body-bg);padding:.5rem .7rem;border-radius:12px;font-size:.85rem;white-space:pre-wrap}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg.user i{background:var(--brand2)}
.chat-msg.user > div{background:var(--brand);color:#fff}
.ai-input{display:flex;gap:.5rem;margin-top:.6rem}
.quick-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* Certificate */
.certificate{background:#fff;color:#222;border-radius:8px;padding:8px}
.cert-border{border:6px double #c9a227;border-radius:6px;padding:1.4rem 1rem;text-align:center}
.cert-head i{font-size:2rem;color:#c9a227}
.cert-school{font-weight:800;font-size:1.05rem}.cert-sub{font-size:.8rem;color:#666}
.cert-title{letter-spacing:3px;font-weight:800;color:#c9a227;margin:1rem 0 .5rem}
.cert-text{font-size:.8rem;color:#555;margin-top:.5rem}
.cert-name{font-size:1.5rem;font-weight:800;border-bottom:2px solid #c9a227;display:inline-block;padding:0 1rem .2rem;margin:.3rem 0}
.cert-quiz{font-weight:600;margin:.4rem 0}.cert-score{margin:.5rem 0}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.5rem;font-size:.7rem}
.cert-line{width:90px;border-top:1px solid #333;margin-bottom:.2rem}
@media print{.appbar,.bottom-nav,.d-print-none{display:none!important}body{padding:0}}

/* Landing & Auth */
.landing-nav{background:var(--bs-body-bg);box-shadow:0 1px 8px rgba(0,0,0,.05)}
.hero{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 8%,transparent),color-mix(in srgb,var(--brand2) 8%,transparent))}
.feature-icon{width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.auth-page{background:linear-gradient(160deg,var(--brand),var(--brand2));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-card{background:var(--bs-body-bg);border-radius:20px;padding:1.8rem;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.auth-logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto}
.avatar-lg{width:88px;height:88px;border-radius:50%;background:var(--bs-tertiary-bg);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--bs-secondary-color);overflow:hidden}
.avatar-lg img{width:100%;height:100%;object-fit:cover}