:root{--purple:#6f42c1;--purple-dark:#4c248d;--purple-light:#f1eaff;--ink:#1f1b2d;--muted:#706b7d;--bg:#f7f5fb;--white:#fff;--border:#e8e1f3;--shadow:0 12px 35px rgba(69,36,124,.10);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}a{color:var(--purple);text-decoration:none}img{max-width:100%}.topbar{height:74px;padding:0 max(20px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#8d5be5,#5a2aa5);color:#fff;font-weight:800}.brand small{display:block;color:var(--muted);font-size:.73rem}.top-actions{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--purple-light);font-weight:800}.page-wrap{max-width:1180px;margin:auto;padding:28px 20px 95px}.footer{text-align:center;padding:22px;color:var(--muted);font-size:.85rem}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{border:0;border-radius:13px;padding:12px 18px;font-weight:700;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.btn-primary{background:linear-gradient(135deg,var(--purple),#8c5ce0);color:#fff}.btn-light{background:#fff;color:var(--purple-dark)}.btn-soft{background:var(--purple-light);color:var(--purple-dark)}.btn-outline{border:1px solid var(--purple);background:#fff;color:var(--purple)}.btn-full{width:100%}.hidden{display:none!important}.eyebrow{font-size:.73rem;letter-spacing:.13em;font-weight:800;color:#8552dc}.muted,.tiny{color:var(--muted)}.tiny{font-size:.77rem}.center{text-align:center}.hero{border-radius:28px;padding:42px;display:flex;justify-content:space-between;align-items:center;gap:30px;color:#fff}.purple-gradient{background:linear-gradient(135deg,#4c248d,#7f4dd0 60%,#a276ea)}.hero h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:.35em 0}.hero p{max-width:650px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.stat{padding:22px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center}.stat span{font-size:1.8rem;grid-row:1/3}.stat strong{font-size:1.65rem}.stat small{color:var(--muted)}.section-head{display:flex;align-items:end;justify-content:space-between;margin:34px 0 16px}.section-head h2{margin:0}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.resource-card{padding:22px;color:var(--ink);transition:.2s}.resource-card:hover{transform:translateY(-4px)}.resource-card h3{margin:10px 0 6px}.resource-card p{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.resource-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--purple-light);font-size:1.5rem;margin-bottom:14px}.resource-icon.big{width:70px;height:70px;font-size:2rem}.pill{display:inline-flex;padding:5px 10px;border-radius:999px;background:var(--purple-light);color:var(--purple-dark);font-size:.75rem;font-weight:700}.announcement-list{display:grid;gap:14px}.announcement{padding:20px;display:flex;gap:14px}.announcement h3{margin:0}.announcement p{margin:.4em 0;color:var(--muted)}.page-title{margin:10px 0 25px}.page-title h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0}.page-title p{color:var(--muted)}.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.subject-card{display:flex;gap:20px;padding:22px;color:var(--ink)}.subject-cover{min-width:100px;height:125px;border-radius:18px;background:linear-gradient(145deg,#ede3ff,#cbb2f5);display:grid;place-items:center;font-size:2.5rem}.filter-bar{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;padding:14px;margin-bottom:20px}input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}label{display:grid;gap:7px;font-weight:650;margin-bottom:14px}.check{display:flex;align-items:center}.check input{width:auto}.detail{padding:30px}.detail-head{display:flex;justify-content:space-between;gap:20px}.detail h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.1}.video-wrap{position:relative;padding-top:56.25%;margin:24px 0;border-radius:18px;overflow:hidden}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.file-panel{padding:20px;background:var(--purple-light);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0}.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.meta-grid div{padding:16px;border:1px solid var(--border);border-radius:15px}.meta-grid small,.meta-grid strong{display:block}.auth-shell{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:55px}.auth-copy h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.02;margin:.25em 0}.auth-copy p{font-size:1.1rem;color:var(--muted)}.feature-row{display:flex;gap:10px;flex-wrap:wrap}.feature-row span{padding:9px 12px;background:#fff;border:1px solid var(--border);border-radius:999px}.auth-card,.form-card{padding:28px}.auth-card h2{margin-bottom:0}.alert{padding:12px;border-radius:12px;margin:14px 0}.error{background:#ffe9ee;color:#9c203e}.profile-card{max-width:520px;margin:50px auto;padding:35px;text-align:center}.profile-avatar{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8c5ce0,#5a2aa5);color:#fff;font-size:2.4rem;font-weight:800;margin:auto}.profile-card .btn{display:flex;margin-top:20px}.admin-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.admin-links a{padding:24px;display:flex;gap:15px;color:var(--ink)}.admin-links span{font-size:2rem}.admin-links h2{margin:0}.admin-links p{color:var(--muted)}.two-col{display:grid;grid-template-columns:380px 1fr;gap:22px}.wide-left{grid-template-columns:450px 1fr}.table-card{padding:22px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border)}th{font-size:.8rem;color:var(--muted)}.empty{padding:30px;text-align:center;color:var(--muted)}.mobile-nav{display:none}
@media(max-width:800px){.topbar{height:66px;padding:0 16px}.brand small{display:none}.page-wrap{padding:18px 14px 92px}.hero{padding:28px 22px;display:block}.hero .btn{margin-top:12px}.stats-grid{grid-template-columns:repeat(2,1fr)}.resource-grid,.subject-grid,.admin-links{grid-template-columns:1fr}.resource-card{padding:18px}.filter-bar{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr;gap:20px}.auth-copy{padding-top:12px}.auth-copy h1{font-size:2.6rem}.two-col,.wide-left{grid-template-columns:1fr}.detail{padding:20px}.detail-head{display:block}.meta-grid{grid-template-columns:1fr}.file-panel{align-items:flex-start;flex-direction:column}.subject-cover{min-width:80px;height:100px}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom))}.mobile-nav a{display:flex;flex-direction:column;align-items:center;font-size:1.15rem;color:var(--ink)}.mobile-nav span{font-size:.68rem}.footer{display:none}.top-actions .btn{font-size:.75rem;padding:9px 10px}}



/* =========================================================
   COMPACT RESPONSIVE SIDEBAR
   ========================================================= */
:root{
  --sidebar-width:220px;
}

.sidebar-topbar{
  padding-left:18px;
  padding-right:22px;
}

.sidebar-toggle{
  display:none;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
  color:var(--purple-dark);
  font-size:1.25rem;
  cursor:pointer;
}

.app-shell{
  display:flex;
  min-height:calc(100vh - 74px);
}

.app-sidebar{
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
  position:fixed;
  top:74px;
  left:0;
  bottom:0;
  z-index:18;
  display:flex;
  flex-direction:column;
  padding:17px 12px 14px;
  background:rgba(255,255,255,.97);
  border-right:1px solid var(--border);
  box-shadow:8px 0 28px rgba(69,36,124,.055);
  overflow-y:auto;
}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px 15px;
  margin-bottom:6px;
  border-bottom:1px solid var(--border);
  min-width:0;
}

.sidebar-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#8d5be5,#5a2aa5);
}

.sidebar-user > div:last-child{
  min-width:0;
}

.sidebar-user strong,
.sidebar-user small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-user strong{
  font-size:.84rem;
}

.sidebar-user small{
  color:var(--muted);
  font-size:.68rem;
  margin-top:1px;
}

.sidebar-menu{
  display:grid;
  gap:4px;
}

.sidebar-label{
  display:block;
  padding:13px 10px 5px;
  color:#93899f;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.13em;
}

.admin-label{
  margin-top:4px;
}

.sidebar-link,
.sidebar-logout{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 11px;
  border-radius:12px;
  color:#514b5d;
  transition:.18s ease;
}

.sidebar-link span,
.sidebar-logout span{
  width:22px;
  flex:0 0 22px;
  text-align:center;
  font-size:1rem;
}

.sidebar-link b,
.sidebar-logout b{
  font-size:.82rem;
  font-weight:720;
}

.sidebar-link:hover{
  color:var(--purple-dark);
  background:#f6f1ff;
  transform:translateX(2px);
}

.sidebar-link.active{
  color:#fff;
  background:linear-gradient(135deg,var(--purple),#8c5ce0);
  box-shadow:0 8px 20px rgba(111,66,193,.2);
}

.sidebar-logout{
  margin-top:auto;
  color:#8e3151;
  background:#fff4f7;
}

.sidebar-logout:hover{
  background:#ffe9f0;
}

.app-content{
  width:calc(100% - var(--sidebar-width));
  margin-left:var(--sidebar-width);
  min-width:0;
}

.page-wrap.with-sidebar{
  max-width:1240px;
  padding-top:24px;
}

.footer-sidebar{
  margin-left:var(--sidebar-width);
}

.sidebar-overlay{
  display:none;
}

.mobile-nav{
  display:none !important;
}

@media(max-width:900px){
  :root{
    --sidebar-width:218px;
  }

  .sidebar-toggle{
    display:grid;
    place-items:center;
  }

  .sidebar-topbar{
    gap:10px;
  }

  .sidebar-topbar .brand{
    margin-right:auto;
  }

  .app-sidebar{
    transform:translateX(-105%);
    transition:transform .24s ease;
    box-shadow:16px 0 40px rgba(40,20,72,.18);
  }

  .app-sidebar.open{
    transform:translateX(0);
  }

  .sidebar-overlay{
    display:block;
    position:fixed;
    inset:74px 0 0;
    z-index:17;
    background:rgba(31,20,48,.34);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
  }

  .sidebar-overlay.show{
    opacity:1;
    visibility:visible;
  }

  body.sidebar-open{
    overflow:hidden;
  }

  .app-content{
    width:100%;
    margin-left:0;
  }

  .footer-sidebar{
    margin-left:0;
  }
}

@media(max-width:520px){
  .sidebar-topbar{
    height:68px;
    padding:0 12px;
  }

  .app-sidebar{
    top:68px;
    width:min(82vw,230px);
  }

  .sidebar-overlay{
    inset:68px 0 0;
  }

  .brand-copy small{
    display:none;
  }

  .brand-mark{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .top-actions #installBtn{
    display:none !important;
  }

  .page-wrap.with-sidebar{
    padding:18px 14px 55px;
  }
}