:root{
  --navy-950:#102638;
  --navy-900:#17324d;
  --navy-800:#21425f;
  --navy-700:#2b526f;
  --slate-900:#253442;
  --slate-700:#526371;
  --slate-500:#7f8c96;
  --slate-300:#ccd4da;
  --slate-200:#dde3e7;
  --slate-100:#edf1f3;
  --paper:#ffffff;
  --canvas:#f4f6f7;
  --rose-600:#9b6076;
  --rose-500:#b1768c;
  --rose-400:#c894a7;
  --rose-200:#ead6de;
  --rose-100:#f5eaee;
  --gold:#b89b61;
  --ok:#4d7a67;
  --danger:#9d4d5c;
  --shadow-sm:0 8px 24px rgba(24,50,72,.07);
  --shadow:0 20px 55px rgba(24,50,72,.10);
  --radius:16px;
  --radius-lg:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--slate-900);
  background:
    linear-gradient(180deg,rgba(23,50,77,.035),transparent 240px),
    var(--canvas);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:4px;z-index:999;
  background:linear-gradient(90deg,var(--navy-900) 0 63%,var(--rose-500) 63% 88%,var(--gold) 88%);
  pointer-events:none;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.page{width:min(1180px,100%);margin:auto;padding:34px 18px 52px}
.auth-wrap{width:min(590px,100%);margin:6vh auto 0}
.surface{
  background:rgba(255,255,255,.985);
  border:1px solid var(--slate-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:surfaceIn .62s cubic-bezier(.22,.8,.25,1) both;
}
.accent{height:5px;background:linear-gradient(90deg,var(--navy-900),var(--navy-700) 72%,var(--rose-500))}
.pad{padding:34px}

.brand{text-align:center;margin-bottom:26px}
.brand::before{
  content:"INOVASI PENDIDIKAN";
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;padding:6px 11px;border:1px solid var(--slate-200);border-radius:999px;
  color:var(--navy-700);background:#f8fafb;font-size:9px;font-weight:850;letter-spacing:.15em;
}
.brand h1{margin:0;color:var(--navy-900);font-size:clamp(30px,5vw,42px);letter-spacing:-.8px;font-weight:850}
.brand p{margin:8px 0 0;color:var(--slate-500);font-size:12px;font-weight:650;letter-spacing:.02em}

.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:var(--slate-100);padding:5px;border:1px solid var(--slate-200);
  border-radius:13px;margin-bottom:22px
}
.tab{
  border:0;background:transparent;border-radius:9px;padding:12px 10px;
  color:var(--slate-500);font-size:11px;font-weight:850;letter-spacing:.035em;
  transition:background .28s ease,color .28s ease,box-shadow .28s ease,transform .28s ease
}
.tab:hover{color:var(--navy-900);transform:translateY(-1px)}
.tab.active{background:var(--paper);color:var(--navy-900);box-shadow:0 5px 15px rgba(23,50,77,.08)}

.auth-panel{transform-origin:top center}
.auth-panel.panel-in{animation:panelIn .38s cubic-bezier(.22,.8,.25,1) both}
.auth-panel.panel-out{animation:panelOut .16s ease both}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{color:var(--slate-700);font-size:11px;font-weight:800;letter-spacing:.018em}
.field small{font-size:11px;color:var(--slate-500)}
input,textarea,select{
  width:100%;border:1px solid var(--slate-300);outline:none;border-radius:11px;
  background:#fff;color:var(--slate-900);padding:11px 12px;
  transition:border-color .24s ease,box-shadow .24s ease,transform .24s ease,background .24s ease
}
textarea{min-height:76px;resize:vertical;line-height:1.52}
input:hover,textarea:hover,select:hover{border-color:#aab6be}
input:focus,textarea:focus,select:focus{
  border-color:var(--navy-700);box-shadow:0 0 0 4px rgba(43,82,111,.10);transform:translateY(-1px)
}
input[readonly]{background:#f5f7f8;color:var(--slate-700)}

.row2,.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:14px}

.btn{
  min-height:42px;border:1px solid var(--slate-300);border-radius:10px;
  background:#fff;color:var(--navy-900);padding:10px 15px;
  font-size:11px;font-weight:850;letter-spacing:.025em;
  transition:transform .24s cubic-bezier(.22,.8,.25,1),box-shadow .24s ease,border-color .24s ease,background .24s ease,color .24s ease
}
.btn:hover{transform:translateY(-2px);border-color:var(--navy-700);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.btn.primary:hover{background:var(--navy-800);border-color:var(--navy-800)}
.btn.danger{color:var(--danger);border-color:#e4c5cc;background:#fff}
.btn.danger:hover{background:#fbf2f4;border-color:#cf98a5}
.btn.full{width:100%}
.linkbtn{display:block;margin:13px auto 0;border:0;background:transparent;color:var(--rose-600);font-size:11px;font-weight:800}

.notice{
  border:1px solid var(--slate-200);border-left:4px solid var(--rose-500);
  border-radius:10px;background:#fafbfc;padding:13px 14px;color:var(--slate-700);
  font-size:12px;line-height:1.55
}
.suggestions{margin:-7px 0 14px;border:1px solid var(--slate-200);border-radius:11px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.suggestion{padding:11px 12px;border-bottom:1px solid var(--slate-100);font-size:12px;cursor:pointer;transition:background .2s ease,padding-left .2s ease}
.suggestion:last-child{border-bottom:0}.suggestion:hover{background:#f6f8f9;padding-left:16px}

.footer{margin-top:24px;padding-top:17px;border-top:1px solid var(--slate-200);text-align:center;color:var(--slate-500);font-size:10px;font-weight:700;letter-spacing:.035em}

.topbar{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;padding:0 4px;animation:topbarIn .5s ease both
}
.mini-brand{display:flex;align-items:center;gap:11px;color:var(--navy-900);font-size:14px;font-weight:850;letter-spacing:-.1px}
.dot{width:10px;height:10px;border-radius:2px;background:var(--rose-500);box-shadow:0 0 0 5px var(--rose-100)}
.school-chip{
  max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:8px 12px;border:1px solid var(--slate-200);border-radius:999px;background:#fff;
  color:var(--slate-700);font-size:10px;font-weight:800;box-shadow:0 4px 14px rgba(23,50,77,.04)
}

.dashboard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.side{padding:16px;position:sticky;top:18px;animation:sideIn .54s .07s cubic-bezier(.22,.8,.25,1) both}
.nav-title{padding:4px 8px 12px;color:var(--slate-500);font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.navbtn{
  width:100%;border:0;border-left:3px solid transparent;border-radius:8px;background:transparent;
  padding:12px 11px;text-align:left;color:var(--slate-700);font-size:11px;font-weight:800;
  transition:background .24s ease,color .24s ease,border-color .24s ease,transform .24s ease
}
.navbtn:hover{background:var(--slate-100);color:var(--navy-900);transform:translateX(2px)}
.navbtn.active{background:#eef3f6;color:var(--navy-900);border-left-color:var(--rose-500)}

.content{padding:26px;animation:contentIn .58s .11s cubic-bezier(.22,.8,.25,1) both}
.hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin:-2px -2px 22px;padding:4px 2px 18px;border-bottom:1px solid var(--slate-200)
}
.hero h2{margin:0;color:var(--navy-900);font-size:22px;letter-spacing:-.35px}
.hero p{margin:6px 0 0;color:var(--slate-500);font-size:11px;line-height:1.5}

.section{
  margin-top:16px;border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:18px;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease
}
.section:hover{transform:translateY(-1px);border-color:#c5cfd5;box-shadow:0 12px 28px rgba(23,50,77,.045)}
.section-title{
  display:flex;align-items:center;gap:9px;margin-bottom:15px;
  color:var(--navy-900);font-size:11px;font-weight:900;letter-spacing:.065em;text-transform:uppercase
}
.section-title::before{content:"";width:3px;height:16px;border-radius:999px;background:var(--rose-500)}

.saaka{display:grid;gap:9px}
.saaka-row{
  display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start;
  padding:11px;border:1px solid transparent;border-radius:11px;
  transition:background .24s ease,border-color .24s ease,transform .24s ease
}
.saaka-row:hover{background:#f8fafb;border-color:var(--slate-200);transform:translateX(2px)}
.badge{
  width:39px;height:39px;display:grid;place-items:center;border-radius:8px;
  background:var(--navy-900);color:#fff;font-weight:900;font-size:14px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09)
}
.saaka-row:nth-child(2) .badge,.saaka-row:nth-child(5) .badge{background:var(--rose-500)}
.saaka-row:nth-child(3) .badge{background:#b89b61}
.saaka-row:nth-child(4) .badge{background:#678676}
.q{margin:2px 0 7px;color:var(--slate-700);font-size:11px;font-weight:800}

.lesson{display:grid;grid-template-columns:auto 1fr auto 1.45fr;gap:9px;align-items:center;color:var(--slate-700);font-size:12px}
.rating{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--slate-100)}
.star{border:0;background:transparent;padding:0 2px;color:#cad2d7;font-size:27px;line-height:1;transition:color .2s ease,transform .2s ease}
.star:hover{transform:translateY(-2px) scale(1.08)}.star.active{color:var(--rose-500)}

.upload{
  min-height:92px;position:relative;display:flex;align-items:center;justify-content:center;
  border:1px dashed #aeb9c0;border-radius:11px;background:#f8fafb;color:var(--slate-500);
  font-size:11px;text-align:center;overflow:hidden;transition:border-color .22s ease,background .22s ease
}
.upload:hover{border-color:var(--navy-700);background:#f2f6f8}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sig{display:none;max-width:145px;max-height:70px;object-fit:contain}.sig.show{display:block}
.actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:9px;margin-top:18px}

.searchbar{display:grid;grid-template-columns:1fr auto;gap:9px}
.records{display:grid;gap:9px;margin-top:14px}
.record{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 14px;border:1px solid var(--slate-200);border-radius:11px;background:#fff;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease
}
.record:hover{transform:translateY(-2px);border-color:#bdc8ce;box-shadow:var(--shadow-sm)}
.record-title{color:var(--navy-900);font-size:12px;font-weight:850}
.record-meta{margin-top:4px;color:var(--slate-500);font-size:10px;font-weight:700}
.record-actions{display:flex;gap:7px}

.stat{
  min-height:104px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--slate-200);border-radius:13px;background:#fff;padding:17px 18px;
  box-shadow:0 5px 18px rgba(23,50,77,.035)
}
.stat b{color:var(--navy-900);font-size:29px;letter-spacing:-.7px}
.stat span{margin-top:5px;color:var(--slate-500);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

.tablewrap{overflow:auto;border:1px solid var(--slate-200);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 13px;border-bottom:1px solid var(--slate-100);text-align:left;font-size:11px}
th{background:#f5f7f8;color:var(--navy-900);font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
tr:last-child td{border-bottom:0}

.loading{
  position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:rgba(244,246,247,.78);backdrop-filter:blur(7px);opacity:0;transition:opacity .22s ease
}
.loading.show{display:flex;opacity:1}
.loader-card{
  display:flex;align-items:center;gap:11px;padding:14px 17px;border:1px solid var(--slate-200);
  border-radius:12px;background:#fff;box-shadow:var(--shadow);color:var(--navy-900);font-size:11px;font-weight:800;
  animation:loaderPop .26s ease both
}
.spinner{width:19px;height:19px;border:2px solid var(--slate-200);border-top-color:var(--rose-500);border-radius:50%;animation:spin .72s linear infinite}
.toasts{position:fixed;right:18px;bottom:18px;z-index:600;display:grid;gap:8px}
.toast{
  min-width:250px;max-width:360px;padding:12px 14px;border-radius:10px;
  background:var(--navy-900);color:#fff;font-size:11px;font-weight:650;box-shadow:var(--shadow);
  animation:toastIn .28s ease both
}
.toast.err{background:#883f50}.toast.ok{background:#385e51}

.view-enter{animation:viewEnter .42s cubic-bezier(.22,.8,.25,1) both}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes surfaceIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes panelOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-5px)}}
@keyframes topbarIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes sideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes contentIn{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes viewEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes loaderPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .dashboard{grid-template-columns:1fr}.side{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .nav-title{display:none}.navbtn{text-align:center;border-left:0;border-bottom:3px solid transparent}
  .navbtn.active{border-left:0;border-bottom-color:var(--rose-500)}
}
@media(max-width:680px){
  .page{padding:22px 10px 38px}.pad,.content{padding:20px}
  .row2,.grid2,.grid3{grid-template-columns:1fr}.lesson{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr}.record{align-items:flex-start;flex-direction:column}.record-actions{width:100%}.record-actions .btn{flex:1}
  .topbar{align-items:flex-start;flex-direction:column}.school-chip{max-width:100%}
}
@media(max-width:480px){
  .auth-wrap{margin-top:3vh}.brand h1{font-size:30px}.tabs{grid-template-columns:1fr 1fr}
  .side{grid-template-columns:1fr}.navbtn{text-align:left;border-bottom:0;border-left:3px solid transparent}
  .navbtn.active{border-bottom:0;border-left-color:var(--rose-500)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}