*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#0f172a;background:#f8fafc}body{margin:0}a{color:var(--primary,#2563eb);text-decoration:none}input,select,textarea,button{font:inherit}label{display:grid;gap:.45rem;font-weight:600;margin:.85rem 0}input,select,textarea{width:100%;padding:.8rem .9rem;border:1px solid #cbd5e1;border-radius:10px;background:white}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#2563eb);color:white;border:0;border-radius:10px;padding:.8rem 1rem;font-weight:700;cursor:pointer}.secondary{background:#e2e8f0;color:#0f172a}.ghost{border:0;background:transparent;cursor:pointer}.tiny{padding:.25rem .5rem}.muted,small{color:#64748b}.auth-body{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:linear-gradient(135deg,#eff6ff,#f8fafc)}.auth-card{width:min(440px,100%);background:white;border-radius:18px;padding:1.5rem;box-shadow:0 16px 40px rgba(15,23,42,.1)}.auth-card h1{margin-top:0}.auth-links{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.93rem}.password-wrap{display:flex;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden}.password-wrap input{border:0}.flash{padding:.8rem 1rem;border-radius:10px;margin:.75rem 0}.success{background:#dcfce7;color:#166534}.danger{background:#fee2e2;color:#991b1b}.warning{background:#fef3c7;color:#92400e}.topbar{position:fixed;top:0;left:0;right:0;height:64px;background:white;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;z-index:10}.brand{font-weight:800}.sidebar{display:none}.content{padding:84px 1rem 92px;max-width:1240px;margin:auto}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1rem 0}.card,.panel,.habit,.history-card{background:white;border:1px solid #e2e8f0;border-radius:16px;padding:1rem;box-shadow:0 4px 14px rgba(15,23,42,.04)}.card{display:grid;gap:.5rem}.card strong{font-size:1.35rem}.panel{margin:1rem 0}.habit{margin:1rem 0}.habit h2{font-size:1rem;color:var(--primary,#2563eb);margin-top:0}.choice{display:flex;gap:1rem}.choice label{display:flex;align-items:center;gap:.5rem}.choice input{width:auto}.preview{display:grid;gap:.35rem;margin-bottom:.5rem}.preview img{max-width:220px;max-height:180px;object-fit:cover;border-radius:10px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:white;border-top:1px solid #e2e8f0;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.bottom-nav a{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.1rem}.bottom-nav span{font-size:.72rem;color:#334155}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:.75rem;border-bottom:1px solid #e2e8f0;font-size:.9rem}.responsive-list{display:grid;gap:1rem}.history-card{display:grid;gap:.75rem}.history-card>div{display:flex;flex-wrap:wrap;gap:.8rem}.detail-grid{display:grid;gap:1rem}.detail-photo{width:100%;max-width:380px;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.avatar{width:92px;height:92px;border-radius:50%;object-fit:cover}.two-col{display:grid;gap:1rem}.inline-form,.filters,.actions,.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}.inline-form>*{flex:1 1 150px}.filters>*{flex:1 1 140px}.actions select{width:auto}.actions button{border:1px solid #cbd5e1;background:#fff;padding:.4rem;border-radius:6px;cursor:pointer}.toolbar{margin:1rem 0}.empty{padding:1.2rem;text-align:center;color:#64748b}.bar-chart{display:grid;gap:.75rem}.bar-row{display:grid;grid-template-columns:90px 1fr 40px;gap:.7rem;align-items:center}.bar-row>div{height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}.bar-row i{display:block;height:100%;background:var(--primary,#2563eb)}
@media(min-width:900px){.topbar{left:230px;padding:0 1.5rem}.sidebar{position:fixed;display:flex;flex-direction:column;gap:.35rem;top:0;bottom:0;left:0;width:230px;background:var(--secondary,#0f172a);padding:1rem}.sidebar a{color:white;padding:.75rem 1rem;border-radius:9px}.sidebar a:hover{background:rgba(255,255,255,.12)}.content{margin-left:230px;padding:88px 1.5rem 2rem}.bottom-nav{display:none}.detail-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr 1fr}}
@media print{.sidebar,.topbar,.bottom-nav,.toolbar,.filters,.btn{display:none!important}.content{margin:0;padding:0}.panel{box-shadow:none;border:0}}
.brand{display:flex;align-items:center;gap:.6rem}.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}.dark{color:#e2e8f0;background:#0f172a}.dark .topbar,.dark .panel,.dark .habit,.dark .card,.dark .history-card,.dark .bottom-nav{background:#111827;color:#e5e7eb;border-color:#334155}.dark input,.dark select,.dark textarea{background:#0f172a;color:#e5e7eb;border-color:#475569}.dark .muted,.dark small,.dark .bottom-nav span{color:#94a3b8}.dark .secondary{background:#334155;color:#e5e7eb}

/* Desktop dashboard & student identity upgrade */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.page-head h1{margin:.2rem 0}.eyebrow,.nav-title{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#64748b}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-head h2{margin:.2rem 0}.step-badge,.status-pill{display:inline-flex;padding:.25rem .55rem;border-radius:999px;background:#eff6ff;color:var(--primary,#2563eb);font-size:.75rem;font-weight:800}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}.identity-panel{border-top:4px solid var(--primary,#2563eb)}.habit-grid{display:grid;gap:1rem}.form-actions{position:sticky;bottom:.8rem;display:flex;justify-content:flex-end;padding:.75rem 0;z-index:4}.btn-lg{padding:.9rem 1.25rem}.dashboard-grid{display:grid;gap:1rem}.profile-summary,.progress-card{display:flex;align-items:center;gap:1rem}.profile-summary>div:nth-child(2){flex:1}.profile-summary h2,.progress-card h2{margin:.2rem 0}.profile-avatar{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary,#2563eb),#60a5fa);color:#fff;font-size:1.5rem;font-weight:900}.progress-ring{--p:0;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary,#2563eb) calc(var(--p)*1%),#e2e8f0 0);position:relative;flex:0 0 auto}.progress-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.progress-ring strong{position:relative}.stat-cards .card{min-height:118px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.gallery-card{overflow:hidden;background:white;border:1px solid #e2e8f0;border-radius:16px;color:#0f172a}.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.gallery-card div{display:grid;gap:.25rem;padding:.85rem}.identity-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.identity-detail>div{display:grid;gap:.25rem}.mobile-brand{display:flex;align-items:center;gap:.6rem}.topbar-user{display:flex;align-items:center;gap:.65rem}.topbar-user>div{display:grid}.topbar-user small{font-size:.72rem}.user-dot{width:10px;height:10px;background:#22c55e;border-radius:50%}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--primary,#2563eb);color:#fff;font-weight:900}.sidebar-brand{display:flex;align-items:center;gap:.7rem;color:#fff;padding:.25rem .35rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1rem}.sidebar-brand>div{display:grid}.sidebar-brand small{color:#94a3b8;font-size:.72rem}.nav-section{display:grid;gap:.25rem;margin-bottom:1rem}.nav-title{color:#94a3b8;padding:.35rem .75rem}.nav-link{display:flex;align-items:center;gap:.7rem}.nav-icon{width:20px;text-align:center;opacity:.85}.sidebar .nav-link.active{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--primary,#2563eb)}.nav-bottom{margin-top:auto}.dark .progress-ring:before,.dark .gallery-card{background:#111827}.dark .gallery-card{color:#e5e7eb;border-color:#334155}
@media(min-width:900px){.sidebar{width:270px;padding:1rem}.topbar{left:270px}.content{margin-left:270px;padding:92px 2rem 2.5rem}.dashboard-grid{grid-template-columns:1.35fr 1fr}.habit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.habit-grid .habit:last-child{grid-column:1/-1}.mobile-brand{display:none}.sidebar a{padding:.72rem .8rem}.content>h1{margin-top:0}}
@media(min-width:1280px){.content{padding-left:2.5rem;padding-right:2.5rem}.habit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.habit-grid .habit:last-child{grid-column:auto}}
@media(max-width:640px){.page-head,.section-head{display:grid}.page-head .btn{width:100%}.profile-summary,.progress-card{align-items:flex-start}.form-actions .btn{width:100%}}


/* v2.3 mobile UX, standard gallery file upload, password visibility and save progress */
.bottom-nav{grid-template-columns:repeat(5,1fr)}
.logout-mobile{color:#b91c1c!important}.logout-mobile span{color:#b91c1c!important}

.password-wrap{display:flex;align-items:center;background:#fff}.password-wrap input{flex:1;min-width:0}.password-eye{white-space:nowrap;padding:.5rem .7rem;color:#334155;font-weight:700}
.save-loading[hidden]{display:none}.save-loading{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.72);display:grid;place-items:center;padding:1rem}.save-loading-card{width:min(420px,100%);background:#fff;border-radius:18px;padding:1.5rem;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3)}.save-loading-card h3{margin:.7rem 0 .25rem}.loading-spinner{width:46px;height:46px;margin:auto;border:5px solid #e2e8f0;border-top-color:var(--primary,#2563eb);border-radius:50%;animation:spin .8s linear infinite}.progress-track{height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:.9rem 0 .45rem}.progress-fill{height:100%;background:var(--primary,#2563eb);transition:width .2s ease}.is-saving{overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}
.dark .password-wrap,.dark .save-loading-card{background:#111827;color:#e5e7eb}.dark .password-eye{color:#e5e7eb}


@media(max-width:480px){.bottom-nav a{font-size:1rem}.bottom-nav span{font-size:.66rem}}

.profile-avatar-photo{object-fit:cover;display:block;background:#e2e8f0}
.photo-input{display:block;width:100%;padding:.7rem;border:1px solid #cbd5e1;border-radius:10px;background:#fff}

/* v2.6 professional mobile bottom navigation */
@media(max-width:899px){
  .content{padding-bottom:108px}
  .bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    z-index:50!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch;
    gap:2px;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid #e2e8f0!important;
    border-radius:20px;
    box-shadow:0 12px 34px rgba(15,23,42,.16);
    overflow:hidden;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px)
  }
  .bottom-nav .mobile-nav-item{
    min-width:0;
    min-height:60px!important;
    padding:7px 2px 6px;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#64748b!important;
    border-radius:14px;
    font-size:inherit!important;
    line-height:1;
    position:relative;
    transition:background .18s ease,color .18s ease,transform .18s ease
  }
  .bottom-nav .mobile-nav-item:active{transform:scale(.96)}
  .bottom-nav .mobile-nav-item.active{color:var(--primary,#2563eb)!important;background:color-mix(in srgb,var(--primary,#2563eb) 9%,white)}
  .bottom-nav .mobile-nav-item.active:before{content:"";position:absolute;top:3px;width:18px;height:3px;border-radius:999px;background:currentColor}
  .mobile-nav-icon{width:23px;height:23px;display:grid;place-items:center;color:currentColor}
  .mobile-nav-icon svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .bottom-nav .mobile-nav-label,.bottom-nav .mobile-nav-item span.mobile-nav-label{font-size:11px!important;font-weight:650;color:currentColor!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:0}
  .bottom-nav .logout-mobile,.bottom-nav .logout-mobile span{color:#64748b!important}
  .bottom-nav .logout-mobile.active{color:var(--primary,#2563eb)!important}
}
@supports not (color:color-mix(in srgb,white 50%,black)){
  @media(max-width:899px){.bottom-nav .mobile-nav-item.active{background:#f1f5f9}}
}
.dark .bottom-nav{background:rgba(17,24,39,.96)!important;border-color:#334155!important;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.dark .bottom-nav .mobile-nav-item{color:#94a3b8!important}
.dark .bottom-nav .mobile-nav-item.active{color:#e2e8f0!important;background:#1f2937}

/* v2.7 admin mobile hamburger drawer */
.topbar-actions{display:flex;align-items:center;gap:.65rem}
.admin-menu-toggle{display:none;width:42px;height:42px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;color:#0f172a;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.admin-menu-toggle span{display:block;width:19px;height:2px;border-radius:999px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.admin-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.admin-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.admin-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.admin-drawer-backdrop,.admin-mobile-drawer{display:none}
@media(max-width:899px){
  .admin-menu-toggle{display:flex}
  .admin-drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(2px);z-index:80;opacity:0;transition:opacity .22s ease}
  .admin-drawer-backdrop[hidden]{display:none}
  .admin-drawer-backdrop.open{opacity:1}
  .admin-mobile-drawer{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);z-index:90;background:#fff;box-shadow:-18px 0 45px rgba(15,23,42,.2);transform:translateX(105%);transition:transform .24s ease;flex-direction:column;padding:18px 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto}
  .admin-mobile-drawer.open{transform:translateX(0)}
  .admin-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:6px 6px 16px;border-bottom:1px solid #e2e8f0}
  .admin-drawer-head>div{display:grid;gap:3px}.admin-drawer-head strong{font-size:1.15rem}
  .admin-drawer-close{width:40px;height:40px;border:0;border-radius:12px;background:#f1f5f9;color:#334155;font-size:26px;line-height:1;cursor:pointer}
  .admin-drawer-nav{display:grid;gap:6px;padding:16px 0}.admin-drawer-footer{margin-top:auto;padding-top:14px;border-top:1px solid #e2e8f0}
  .admin-drawer-link{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;color:#334155;font-weight:700;transition:background .18s ease,color .18s ease}
  .admin-drawer-link.active{background:#eff6ff;color:var(--primary,#2563eb)}
  .admin-drawer-link:active{background:#f1f5f9}
  .admin-drawer-icon{width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px;color:currentColor}
  .admin-drawer-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body.admin-drawer-open{overflow:hidden}
}
@media(max-width:560px){
  .topbar{padding:0 .75rem}.topbar-actions{gap:.45rem}.topbar-user{gap:.45rem}.topbar-user strong{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-user small{display:none}.user-dot{display:none}
  .mobile-brand strong{font-size:.88rem;line-height:1.12;max-width:145px}
}
.dark .admin-menu-toggle{background:#111827;border-color:#334155;color:#e5e7eb}.dark .admin-mobile-drawer{background:#111827;color:#e5e7eb}.dark .admin-drawer-head,.dark .admin-drawer-footer{border-color:#334155}.dark .admin-drawer-close{background:#1f2937;color:#e5e7eb}.dark .admin-drawer-link{color:#cbd5e1}.dark .admin-drawer-link.active{background:#1e293b;color:#e2e8f0}

/* v2.8 admin hamburger hotfix: robust hidden state + cache-safe drawer */
.admin-mobile-drawer[hidden]{display:none!important}
@media(max-width:899px){
  .admin-drawer-icon{width:30px!important;height:30px!important;flex:0 0 30px!important;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;color:currentColor;font-size:12px;font-weight:800;display:grid!important;place-items:center!important;line-height:1}
  .admin-drawer-link.active .admin-drawer-icon{border-color:currentColor;background:#fff}
}
.dark .admin-drawer-icon{background:#0f172a;border-color:#475569}