:root{
  --navy-950:#06142F;--navy-900:#0B132B;--navy-800:#0B2557;--navy-700:#123A75;
  --blue:#1976FF;--blue-2:#3B82F6;--tosca:#22E0C7;--tosca-2:#76F1DF;--white:#fff;
  --text:#F7FBFF;--muted:#AFC2D9;--line:rgba(112,170,255,.22);--panel:rgba(10,31,68,.78);
  --danger:#FB7185;--warning:#FBBF24;--success:#2DD4BF;--shadow:0 24px 70px rgba(0,0,0,.32);
  --r:24px;--r-sm:16px;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Poppins,system-ui,sans-serif;background:var(--navy-950);color:var(--text)}
body{min-height:100vh;background:
 radial-gradient(circle at 85% 5%,rgba(25,118,255,.24),transparent 26%),
 radial-gradient(circle at 12% 88%,rgba(34,224,199,.10),transparent 24%),
 linear-gradient(135deg,#06142F 0%,#082451 52%,#06142F 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.34;background-image:linear-gradient(120deg,transparent 0 48%,rgba(25,118,255,.08) 49% 51%,transparent 52%),linear-gradient(120deg,transparent 0 72%,rgba(34,224,199,.06) 73% 74%,transparent 75%);background-size:520px 520px,780px 780px}
button,input,select,textarea{font:inherit}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-root{min-height:100vh}.screen{min-height:100vh;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center}
.shell{width:min(1180px,100%);position:relative}.glass{background:linear-gradient(180deg,rgba(13,39,81,.84),rgba(6,24,54,.78));border:1px solid rgba(87,167,255,.28);box-shadow:var(--shadow);backdrop-filter:blur(20px);border-radius:var(--r)}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:48px;height:48px}.brand-word{font-size:26px;font-weight:800;font-style:italic;letter-spacing:-1.2px}.brand-word .ku{background:linear-gradient(110deg,var(--tosca),var(--tosca-2));background-clip:text;-webkit-background-clip:text;color:transparent}.brand-sub{font-size:10px;color:var(--muted);margin-top:-3px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--tosca);font-weight:700}.title{font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 18px}.title .accent,.accent{background:linear-gradient(100deg,var(--tosca),#63f0da);background-clip:text;-webkit-background-clip:text;color:transparent}.copy{font-size:15px;line-height:1.8;color:var(--muted)}
.btn{border:0;cursor:pointer;border-radius:15px;padding:14px 18px;font-weight:700;display:inline-flex;gap:9px;align-items:center;justify-content:center;transition:.2s var(--ease);text-decoration:none}.btn:hover{transform:translateY(-1px)}.btn-primary{color:#041a28;background:linear-gradient(100deg,#72F2B8,var(--tosca));box-shadow:0 10px 30px rgba(34,224,199,.22)}.btn-secondary{color:var(--text);background:rgba(13,45,91,.72);border:1px solid rgba(74,162,255,.35)}.btn-ghost{color:var(--muted);background:transparent;border:1px solid rgba(255,255,255,.12)}.btn-block{width:100%}.link{color:var(--tosca);font-weight:600;cursor:pointer}.muted{color:var(--muted)}
.logo-hero{width:min(160px,32vw);filter:drop-shadow(0 18px 30px rgba(0,0,0,.2))}.loader{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--tosca);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.splash-card{width:min(920px,100%);min-height:620px;display:grid;place-items:center;text-align:center;padding:60px;overflow:hidden;position:relative}.splash-card:after{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-160px;background:radial-gradient(circle,rgba(25,118,255,.3),transparent 65%)}.splash-inner{z-index:1;display:grid;justify-items:center;gap:20px}.splash-word{font-size:48px;font-weight:800;font-style:italic}.splash-word .ku{color:var(--tosca)}.splash-tag{font-size:18px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px}.intro-panel{padding:42px}.content-panel{padding:34px}.progress{display:flex;gap:8px;margin:22px 0}.dot{width:9px;height:9px;border-radius:99px;background:#315386}.dot.active{width:28px;background:var(--tosca)}
.onboard-art{min-height:250px;border-radius:22px;background:radial-gradient(circle at 50% 44%,rgba(34,224,199,.18),transparent 32%),linear-gradient(135deg,rgba(25,118,255,.14),rgba(8,20,47,.4));display:grid;place-items:center;border:1px solid var(--line);position:relative;overflow:hidden}.orb{width:130px;height:130px;border-radius:32px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(25,118,255,.95),rgba(11,37,87,.8));box-shadow:0 22px 45px rgba(0,0,0,.3)}.orb .icon{width:66px;height:66px;color:var(--tosca)}
.form-card{width:min(560px,100%);padding:34px}.field{display:grid;gap:8px;margin:16px 0}.field label{font-size:13px;font-weight:600;color:#DCE9F8}.control{width:100%;border:1px solid rgba(93,169,255,.27);background:rgba(5,20,47,.72);color:var(--text);border-radius:14px;padding:14px 15px;outline:none}.control:focus{border-color:var(--tosca);box-shadow:0 0 0 3px rgba(34,224,199,.08)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.form-help{font-size:12px;color:var(--muted)}
.status-card{display:flex;gap:14px;padding:16px;border-radius:18px;background:rgba(3,20,49,.62);border:1px solid rgba(90,171,255,.2);margin:12px 0}.status-icon{width:46px;height:46px;border-radius:14px;background:rgba(34,224,199,.10);color:var(--tosca);display:grid;place-items:center;flex:0 0 auto}.status-icon .icon{width:24px;height:24px}.status-title{font-weight:700}.status-copy{font-size:12px;color:var(--muted);line-height:1.6;margin-top:3px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.setup-card{padding:22px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(17,61,123,.5),rgba(5,20,47,.72))}.setup-card .status-icon{margin-bottom:26px;width:58px;height:58px}.checklist{display:grid;gap:9px;margin:18px 0}.checkline{display:flex;gap:9px;font-size:13px;color:#CFE0F2}.checkline .icon{color:var(--tosca);width:17px;height:17px;flex:0 0 auto}
.alert{padding:13px 15px;border-radius:14px;font-size:13px;border:1px solid rgba(251,191,36,.28);background:rgba(251,191,36,.07);color:#FDE68A;margin:12px 0}.alert.success{border-color:rgba(45,212,191,.28);background:rgba(45,212,191,.08);color:#99F6E4}.alert.danger{border-color:rgba(251,113,133,.28);background:rgba(251,113,133,.08);color:#FDA4AF}
.dashboard{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:22px 18px;background:rgba(5,19,45,.88);border-right:1px solid var(--line);backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:24px}.nav{display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:13px;color:var(--muted);text-decoration:none;font-size:14px}.nav-item.active{background:linear-gradient(90deg,rgba(34,224,199,.16),rgba(25,118,255,.12));color:var(--tosca);border:1px solid rgba(34,224,199,.16)}.sidebar-foot{margin-top:auto;padding:14px;border-radius:16px;background:rgba(17,52,103,.42);font-size:11px;color:var(--muted)}
.main{padding:20px 24px 92px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:1320px;margin:0 auto 22px}.search{flex:1;max-width:540px;border:1px solid var(--line);border-radius:14px;background:rgba(7,29,64,.72);padding:12px 15px;color:var(--muted);font-size:13px}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{position:relative;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:rgba(7,29,64,.72);color:var(--text);display:grid;place-items:center;cursor:pointer}.badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:99px;background:var(--tosca);color:#04223a;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px}.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(34,224,199,.42);background:#123A75}.dashboard-body{max-width:1320px;margin:auto}.hello{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}.hello h1{margin:0;font-size:30px;letter-spacing:-.03em}.hello p{margin:6px 0 0;color:var(--muted);font-size:13px}.quote{padding:14px 16px;border:1px solid var(--line);background:rgba(8,38,80,.56);border-radius:16px;color:#D8E7F7;font-size:12px;max-width:340px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:17px;border-radius:19px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(16,57,116,.57),rgba(5,21,49,.75));display:flex;gap:12px;align-items:center}.stat .status-icon{margin:0}.stat strong{font-size:25px;display:block}.stat span{font-size:11px;color:var(--muted)}.dash-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}.panel{padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(7,28,62,.73)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title{font-size:15px;font-weight:700}.mini-link{font-size:11px;color:var(--tosca)}.empty{min-height:160px;display:grid;place-items:center;text-align:center;border:1px dashed rgba(108,170,255,.2);border-radius:16px;color:var(--muted);padding:22px}.empty strong{color:#EAF4FF;display:block;margin-bottom:6px}.list{display:grid;gap:10px}.list-row{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:14px;border:1px solid rgba(80,160,255,.16);background:rgba(11,39,81,.45)}.list-row .status-icon{width:39px;height:39px;border-radius:11px}.list-row h4{font-size:12px;margin:0 0 3px}.list-row p{font-size:10px;color:var(--muted);margin:0}.time{margin-left:auto;font-size:10px;color:var(--muted)}
.bottom-nav{display:none}.drawer{position:fixed;right:18px;top:74px;width:min(390px,calc(100vw - 36px));max-height:70vh;overflow:auto;padding:16px;z-index:50}.drawer.hidden{display:none}.notif-row{cursor:pointer}.overlay{position:fixed;inset:0;background:rgba(2,8,20,.68);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:100;padding:20px}.modal{width:min(520px,100%);padding:26px}.modal h2{margin:0 0 8px}.modal p{color:var(--muted);line-height:1.65;font-size:13px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.hidden{display:none!important}.toast-root{position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:10px}.toast{padding:13px 16px;border-radius:14px;background:#0E2A5B;border:1px solid rgba(34,224,199,.28);box-shadow:var(--shadow);font-size:12px;color:#EAF6FF;animation:toastIn .2s ease}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}
.update-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:15px;border:1px solid rgba(34,224,199,.27);background:linear-gradient(90deg,rgba(34,224,199,.1),rgba(25,118,255,.08));margin-bottom:15px}.update-banner span{font-size:12px;color:#DDFBF5}.update-banner .btn{padding:9px 12px;font-size:11px}.version{font-size:10px;color:#7892B1;margin-top:8px}
@media(max-width:900px){.screen{align-items:flex-start;padding-top:18px}.two-col{grid-template-columns:1fr}.intro-panel{padding:28px}.content-panel{padding:24px}.intro-panel .title{font-size:42px}.intro-panel .copy{font-size:13px}.form-grid{grid-template-columns:1fr}.setup-grid{grid-template-columns:1fr}.dashboard{display:block}.sidebar{display:none}.main{padding:14px 14px 94px}.topbar{margin-bottom:17px}.search{display:none}.hello{display:block}.quote{margin-top:12px;max-width:none}.stats{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(5,18,43,.94);border-top:1px solid var(--line);backdrop-filter:blur(20px);z-index:40}.bottom-item{color:#7893B3;text-decoration:none;text-align:center;font-size:9px;display:grid;gap:4px;justify-items:center}.bottom-item.active{color:var(--tosca)}.bottom-item .icon{width:20px;height:20px}.drawer{top:68px;right:12px;width:calc(100vw - 24px)}.splash-card{min-height:calc(100vh - 36px);padding:34px 22px}.splash-word{font-size:38px}.setup-card{padding:18px}}
@media(max-width:520px){.screen{padding-left:12px;padding-right:12px}.form-card{padding:22px}.stats{gap:10px}.stat{padding:13px}.stat strong{font-size:21px}.title{font-size:38px}.topbar .brand-sub{display:none}.hello h1{font-size:26px}.brand-word{font-size:23px}}


/* Phase 1 v1.2 — custom auth + fast interaction */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:15px;background:rgba(4,18,44,.72);border:1px solid var(--line);margin:18px 0}.auth-tab{border:0;border-radius:11px;padding:11px 12px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.auth-tab.active{background:linear-gradient(100deg,rgba(34,224,199,.18),rgba(25,118,255,.18));color:var(--tosca);box-shadow:inset 0 0 0 1px rgba(34,224,199,.18)}
.input-hint{font-size:10px;color:#7892B1;margin-top:5px}.request-status{min-height:18px;margin:8px 0 2px;font-size:11px;color:var(--muted)}.request-status.slow{color:#FDE68A}.request-status.ok{color:#99F6E4}.request-status.error{color:#FDA4AF}.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}.inline-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-id{font-size:11px;color:var(--tosca);font-weight:700;letter-spacing:.04em}.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.meta-chip{padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:rgba(6,26,58,.54)}.meta-chip span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#7793B5}.meta-chip strong{display:block;margin-top:4px;font-size:12px;color:#EAF4FF;word-break:break-word}
.skeleton{position:relative;overflow:hidden;background:rgba(20,55,103,.42)!important;color:transparent!important;border-color:rgba(79,142,219,.12)!important}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.15s infinite}@keyframes shimmer{100%{transform:translateX(100%)}}
.offline-banner{padding:10px 13px;border-radius:13px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);color:#FDE68A;font-size:11px;margin-bottom:12px}.fast-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 14px;border-radius:15px;background:rgba(34,224,199,.06);border:1px solid rgba(34,224,199,.14);font-size:11px;color:#BFD8E8}.fast-note .icon{color:var(--tosca);flex:0 0 auto;width:18px;height:18px}.password-meter{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px}.password-meter>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--warning),var(--tosca));transition:.2s}.search.future{cursor:pointer;user-select:none}
@media(max-width:520px){.profile-meta{grid-template-columns:1fr}.auth-tabs{margin-top:14px}}


/* v1.2.2 — Interaction feedback hotfix */
.btn-spinner{width:17px;height:17px;border-radius:50%;border:2px solid rgba(4,26,40,.25);border-top-color:#041A28;animation:spin .7s linear infinite;flex:0 0 auto}
.btn-secondary .btn-spinner,.btn-ghost .btn-spinner{border-color:rgba(255,255,255,.18);border-top-color:var(--tosca)}
.btn.is-loading{pointer-events:none;transform:none}.request-status.progress{display:flex;align-items:center;gap:8px;color:#BFEFE7;padding:8px 10px;border-radius:11px;background:rgba(34,224,199,.06);border:1px solid rgba(34,224,199,.12)}
.request-status.slow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.14)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--tosca);box-shadow:0 0 0 0 rgba(34,224,199,.35);animation:statusPulse 1.1s infinite;flex:0 0 auto}@keyframes statusPulse{70%{box-shadow:0 0 0 7px rgba(34,224,199,0)}100%{box-shadow:0 0 0 0 rgba(34,224,199,0)}}


/* ============================================================
   v1.3.0 — Navigation Proportion + Diamond Home CTA
   ============================================================ */
@media(min-width:901px){
  .dashboard{grid-template-columns:286px minmax(0,1fr)}
  .sidebar{padding:26px 20px;gap:27px}
  .sidebar .brand img{width:48px;height:48px}
  .sidebar .brand-word{font-size:27px}
  .sidebar .brand-sub{font-size:9.5px}
  .nav{gap:9px}
  .nav-item{
    width:100%;min-height:52px;border:1px solid transparent;
    appearance:none;font-family:inherit;text-align:left;cursor:pointer;
    display:flex;align-items:center;gap:14px;padding:13px 15px;
    border-radius:15px;color:#91A9C5;background:transparent;
    font-size:14.5px;font-weight:600;transition:.18s ease
  }
  .nav-item>.icon{width:23px;height:23px;flex:0 0 auto}
  .nav-item:hover{color:#E8F6FF;background:rgba(25,118,255,.08);border-color:rgba(85,156,255,.12)}
  .nav-home-cta{min-height:66px;color:#F4FDFF!important;font-weight:800;background:linear-gradient(100deg,rgba(34,224,199,.13),rgba(25,118,255,.13));border-color:rgba(34,224,199,.24)!important;box-shadow:0 12px 30px rgba(0,7,28,.18)}
  .nav-home-cta:hover{background:linear-gradient(100deg,rgba(34,224,199,.18),rgba(25,118,255,.18))}
  .nav-diamond{width:37px;height:37px;border-radius:10px;transform:rotate(45deg);display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#22E0C7,#1976FF);box-shadow:0 8px 24px rgba(34,224,199,.22)}
  .nav-diamond .icon{width:20px;height:20px;transform:rotate(-45deg);color:#06162E;stroke-width:2.2}
  .sidebar-foot{padding:16px;border-radius:18px;font-size:11.5px;line-height:1.65}
  .main{padding:24px 30px 96px}
  .topbar{margin-bottom:26px}
  .search{padding:13px 16px;font-size:13.5px}
}

@media(max-width:900px){
  .main{padding-bottom:112px}
  .bottom-nav{
    min-height:78px;grid-template-columns:repeat(5,1fr);align-items:end;
    padding:10px 8px calc(9px + env(safe-area-inset-bottom));
    overflow:visible
  }
  .bottom-item{
    appearance:none;border:0;background:transparent;font-family:inherit;
    min-width:0;min-height:54px;padding:5px 2px;color:#7893B3;
    text-align:center;font-size:10px;font-weight:600;display:grid;
    grid-template-rows:26px auto;gap:5px;justify-items:center;align-items:center;
    cursor:pointer
  }
  .bottom-item>.icon{width:23px;height:23px}
  .bottom-item.active{color:var(--tosca)}
  .bottom-home-cta{position:relative;transform:translateY(-10px);color:#EFFFFB!important;font-weight:800;grid-template-rows:48px auto;gap:7px}
  .bottom-diamond{
    width:48px;height:48px;border-radius:13px;transform:rotate(45deg);
    display:grid;place-items:center;background:linear-gradient(135deg,#22E0C7 0%,#1DCFC4 42%,#1976FF 100%);
    border:1px solid rgba(255,255,255,.22);box-shadow:0 9px 28px rgba(0,16,52,.46),0 0 0 5px rgba(34,224,199,.06)
  }
  .bottom-diamond .icon{width:23px;height:23px;transform:rotate(-45deg);color:#041A31;stroke-width:2.25}
}

@media(max-width:380px){
  .bottom-nav{padding-left:4px;padding-right:4px}
  .bottom-item{font-size:9px}
  .bottom-diamond{width:45px;height:45px}
}


/* ============================================================
   v1.3.1 — Mobile Bottom Navigation Precision Hotfix
   ------------------------------------------------------------
   Tujuan:
   - 5 menu benar-benar rata tengah dan punya lebar yang sama.
   - Icon normal lebih terbaca tanpa terasa besar.
   - Garis divider diturunkan dan melewati titik tengah Diamond CTA.
   - Beranda tetap menjadi CTA utama dengan diamond 58x58.
   - Icon Home di dalam diamond tetap tegak (tidak ikut miring).
   ============================================================ */
@media(max-width:900px){
  .main{
    /* Memberi ruang aman agar konten terakhir tidak tertutup navbar. */
    padding-bottom:126px;
  }

  .bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;

    /* Geometry LOCK */
    height:calc(90px + env(safe-area-inset-bottom));
    min-height:calc(90px + env(safe-area-inset-bottom));
    padding:18px 8px calc(9px + env(safe-area-inset-bottom));

    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    overflow:visible;

    background:linear-gradient(180deg,rgba(5,18,43,.965),rgba(4,16,39,.985));
    border-top:0;
    box-shadow:0 -14px 34px rgba(0,7,25,.24);
    backdrop-filter:blur(22px);
  }

  /* Divider berada DI DALAM navbar, bukan menempel pada tepi atas.
     top:25px dibuat sejajar dengan pusat visual diamond. */
  .bottom-nav::before{
    content:"";
    position:absolute;
    z-index:0;
    top:25px;
    left:14px;
    right:14px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(93,169,255,.08) 0%,
      rgba(93,169,255,.24) 18%,
      rgba(34,224,199,.22) 50%,
      rgba(93,169,255,.24) 82%,
      rgba(93,169,255,.08) 100%);
  }

  .bottom-item{
    position:relative;
    z-index:1;
    appearance:none;
    border:0;
    background:transparent;
    font-family:inherit;

    width:100%;
    min-width:0;
    height:62px;
    min-height:62px;
    padding:7px 2px 4px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:6px;

    color:#86A1BF;
    text-align:center;
    font-size:10.5px;
    line-height:1;
    font-weight:600;
    cursor:pointer;
  }

  .bottom-item>.icon{
    width:24px;
    height:24px;
    flex:0 0 24px;
    stroke-width:1.85;
  }

  .bottom-item>span:last-child{
    width:100%;
    min-height:11px;
    display:block;
    text-align:center;
    white-space:nowrap;
  }

  .bottom-item:not(.bottom-home-cta).active{
    color:var(--tosca);
  }

  /* Home CTA: pusat diamond tepat di sekitar divider. */
  .bottom-home-cta{
    height:86px;
    min-height:86px;
    padding:0 2px 3px;
    transform:translateY(-19px);
    justify-content:flex-end;
    gap:8px;
    color:#F4FFFF!important;
    font-weight:800;
  }

  .bottom-diamond{
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:16px;
    transform:rotate(45deg);
    display:grid;
    place-items:center;

    background:linear-gradient(135deg,#22E0C7 0%,#2BE3D0 34%,#2B9CF4 69%,#1976FF 100%);
    border:1px solid rgba(255,255,255,.28);
    box-shadow:
      0 11px 28px rgba(0,13,46,.52),
      0 0 0 5px rgba(34,224,199,.07),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .bottom-diamond .icon{
    width:25px;
    height:25px;
    transform:rotate(-45deg);
    color:#041A31;
    stroke-width:2.25;
  }

  .bottom-home-cta>span:last-child{
    color:#F3FFFF;
    font-size:10.5px;
    line-height:1;
  }
}

@media(max-width:380px){
  .bottom-nav{
    padding-left:4px;
    padding-right:4px;
  }
  .bottom-nav::before{
    left:9px;
    right:9px;
  }
  .bottom-item{
    font-size:9.5px;
  }
  .bottom-item>.icon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
  .bottom-diamond{
    width:54px;
    height:54px;
    flex-basis:54px;
    border-radius:15px;
  }
  .bottom-diamond .icon{
    width:24px;
    height:24px;
  }
}

/* ============================================================
   KelasKu v2.0.0 — PHASE 2 UI FOUNDATION
   Settings • Super Admin • Class Foundation
   ============================================================ */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:4px 0 20px}.page-head h1{margin:5px 0 5px;font-size:clamp(27px,3vw,38px);letter-spacing:-.035em}.page-head p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65}.page-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.phase-badge,.soft-chip,.role-pill{display:inline-flex;align-items:center;justify-content:center;min-height:27px;padding:5px 9px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.05em;border:1px solid rgba(34,224,199,.2);background:rgba(34,224,199,.08);color:#98F6E8}.section-title-row{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:22px 1px 11px}.section-title-row h2{margin:0;font-size:18px}.section-title-row p{margin:4px 0 0;color:var(--muted);font-size:11px}.panel-copy{margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.55}.panel-head>.icon,.settings-section-head>.icon{color:var(--tosca);flex:0 0 auto}.button-link{appearance:none;border:0;background:none;color:var(--tosca);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:4px}.error-panel p{color:var(--muted);font-size:12px;line-height:1.6}.empty-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 11px;color:var(--tosca);background:rgba(34,224,199,.08);border:1px solid rgba(34,224,199,.14)}.empty-icon .icon{width:27px;height:27px}.empty-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px}

/* Settings */
.settings-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.settings-section{padding:20px}.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid rgba(100,164,255,.13)}.settings-section-head h2{margin:0;font-size:16px}.settings-section-head p{margin:4px 0 0;color:var(--muted);font-size:10.5px}.setting-row{min-height:58px;padding:11px 0;border-bottom:1px solid rgba(99,159,238,.11);display:flex;align-items:center;justify-content:space-between;gap:15px}.setting-row:last-child{border-bottom:0}.setting-row>span:first-child{display:grid;gap:3px}.setting-row strong{font-size:12px}.setting-row small{font-size:9.5px;line-height:1.45;color:var(--muted)}.setting-row>b{font-size:11px;color:#DDEBFA;text-align:right;word-break:break-word}.setting-control{width:min(190px,48%);padding:10px 12px;font-size:11px}.switch{position:relative;width:46px;height:27px;flex:0 0 auto}.switch input{position:absolute;opacity:0;pointer-events:none}.switch>span{position:absolute;inset:0;border-radius:999px;background:#18345D;border:1px solid rgba(113,168,239,.25);cursor:pointer;transition:.18s ease}.switch>span:after{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#AFC4DA;transition:.18s ease}.switch input:checked+span{background:linear-gradient(90deg,#1ABAA8,#22E0C7);border-color:rgba(34,224,199,.55)}.switch input:checked+span:after{transform:translateX(19px);background:#06223B}.settings-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.settings-savebar{grid-column:1/-1;position:sticky;bottom:14px;z-index:9;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:18px}.settings-savebar>div{display:grid;gap:3px}.settings-savebar strong{font-size:12px}.settings-savebar span{font-size:9.5px;color:var(--muted)}.settings-skeleton{height:285px}

/* Account */
.profile-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px}.profile-avatar,.member-avatar{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,#155BBB,#22E0C7);color:#041A31;font-weight:900;font-size:19px;box-shadow:0 12px 28px rgba(0,14,47,.34)}.profile-main h2{margin:0;font-size:21px}.profile-main p{margin:3px 0;color:var(--muted);font-size:11px}.profile-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.account-id-box{padding:13px 15px;border-radius:15px;border:1px solid rgba(34,224,199,.2);background:rgba(34,224,199,.06);text-align:right}.account-id-box span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em}.account-id-box strong{display:block;margin-top:5px;color:var(--tosca);font-size:14px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.detail-list{display:grid;gap:0}.detail-row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(103,162,237,.11);font-size:11px}.detail-row:last-child{border-bottom:0}.detail-row span{color:var(--muted)}.detail-row strong{text-align:right}.account-danger-zone{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.account-danger-zone strong{font-size:12px}.account-danger-zone p{margin:4px 0 0;color:var(--muted);font-size:10px}

/* Classes */
.class-search{padding:13px}.class-search-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.class-search-box>.icon{color:#7694B8}.class-search-box input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:10px 4px;font:inherit;font-size:12px}.search-results{display:grid;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(101,162,238,.12)}.search-loading,.search-empty{padding:13px;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:9px}.search-class-row{appearance:none;width:100%;border:1px solid rgba(83,156,245,.14);background:rgba(9,34,73,.48);border-radius:14px;padding:11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;color:var(--text);text-align:left;cursor:pointer}.search-class-row:hover{border-color:rgba(34,224,199,.26);background:rgba(34,224,199,.05)}.search-class-row>span:nth-child(2){display:grid;gap:3px}.search-class-row strong{font-size:11.5px}.search-class-row small{font-size:9.5px;color:var(--muted)}.search-class-row>b{font-size:9.5px;color:var(--tosca)}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.class-card{appearance:none;min-height:185px;padding:17px;border:1px solid rgba(86,160,247,.18);border-radius:20px;background:linear-gradient(150deg,rgba(16,55,111,.72),rgba(5,23,54,.82));color:var(--text);text-align:left;cursor:pointer;box-shadow:0 15px 36px rgba(0,8,29,.17);transition:.18s ease}.class-card:hover{transform:translateY(-2px);border-color:rgba(34,224,199,.3);box-shadow:0 18px 40px rgba(0,8,29,.26)}.class-card-top,.class-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.class-symbol{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(25,118,255,.26),rgba(34,224,199,.12));color:var(--tosca);border:1px solid rgba(34,224,199,.18)}.class-symbol.small{width:35px;height:35px;border-radius:11px}.class-symbol .icon{width:23px;height:23px}.class-card h3{margin:20px 0 5px;font-size:15px}.class-card p{margin:0;color:var(--muted);font-size:10px;min-height:32px}.class-card-foot{margin-top:17px;padding-top:12px;border-top:1px solid rgba(104,164,240,.12);color:#88A5C5;font-size:9px}.role-pill{font-size:8.5px;min-height:24px}.role-owner{color:#081C31;background:linear-gradient(100deg,#72F2B8,#22E0C7)}.role-coordinator{color:#CDE7FF;background:rgba(25,118,255,.18);border-color:rgba(25,118,255,.32)}.role-moderator{color:#DDD2FF;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.28)}.role-member{color:#B9CCE0;background:rgba(115,145,182,.1);border-color:rgba(115,145,182,.2)}.class-empty{grid-column:1/-1}.compact-copy{margin-top:5px;font-size:11px}.code-input{text-transform:uppercase;letter-spacing:.08em;font-weight:700}.join-preview{margin-top:14px;padding:14px}.phase-modal-card{width:min(600px,100%)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.modal-head h2{margin:4px 0 0}.icon-btn.mini{width:34px;height:34px;border-radius:11px}.join-preview .class-symbol{margin-bottom:9px}

/* Class Room */
.class-hero{padding:22px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}.class-hero-icon{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;color:var(--tosca);background:linear-gradient(145deg,rgba(25,118,255,.27),rgba(34,224,199,.1));border:1px solid rgba(34,224,199,.2)}.class-hero-icon .icon{width:36px;height:36px}.class-hero-main h1{margin:2px 0 5px;font-size:24px}.class-hero-main p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.class-meta-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.class-code-stack{display:grid;grid-template-columns:1fr;gap:7px;min-width:165px}.code-card{appearance:none;border:1px solid rgba(34,224,199,.16);background:rgba(34,224,199,.05);color:var(--text);border-radius:13px;padding:10px 12px;text-align:left;cursor:pointer}.code-card span{display:block;color:var(--muted);font-size:8.5px;text-transform:uppercase;letter-spacing:.11em}.code-card strong{display:block;color:var(--tosca);font-size:11px;margin-top:3px}.room-tabs{display:flex;gap:6px;overflow:auto;margin:15px 0;padding:4px;border-radius:15px;background:rgba(4,19,45,.44);border:1px solid rgba(88,158,239,.11);scrollbar-width:none}.room-tabs::-webkit-scrollbar{display:none}.room-tab{appearance:none;border:0;background:transparent;color:#89A4C2;border-radius:11px;padding:10px 13px;font-size:10.5px;font-weight:700;white-space:nowrap;cursor:pointer}.room-tab.active{background:linear-gradient(100deg,rgba(34,224,199,.14),rgba(25,118,255,.14));color:#A9FFF2}.room-overview{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide-panel{grid-column:1/-1}.feature-roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.feature-roadmap>div{padding:13px;border-radius:13px;border:1px solid rgba(102,162,238,.13);background:rgba(7,30,66,.42);display:grid;gap:5px}.feature-roadmap strong{font-size:11px}.feature-roadmap span{font-size:9px;color:var(--muted)}.member-list{display:grid;gap:8px}.member-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px;border-radius:15px;border:1px solid rgba(94,159,239,.13);background:rgba(7,29,63,.42)}.member-avatar{width:43px;height:43px;border-radius:13px;font-size:12px}.member-info{display:grid;gap:2px;min-width:0}.member-info strong{font-size:11.5px}.member-info span,.member-info small{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-actions{display:flex;align-items:center;gap:7px}.role-select{width:145px;padding:9px;font-size:9.5px}.small-btn{padding:8px 10px;border-radius:10px;font-size:9px}.danger-btn{color:#FDA4AF;border-color:rgba(251,113,133,.22);background:rgba(251,113,133,.05)}

/* Admin */
.admin-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.admin-stat-card{padding:15px;display:flex;align-items:center;gap:11px}.admin-stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08);border:1px solid rgba(34,224,199,.15)}.admin-stat-icon .icon{width:21px;height:21px}.admin-stat-card strong{display:block;font-size:20px}.admin-stat-card span:last-child{display:block;color:var(--muted);font-size:9px}.admin-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}.admin-section{padding:18px}.admin-search-row{display:grid;grid-template-columns:1fr auto;gap:8px}.admin-results{display:grid;gap:7px;margin-top:11px;max-height:370px;overflow:auto}.admin-caption{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#718FAD;padding:4px 2px}.admin-user-row{display:grid;grid-template-columns:auto minmax(125px,1fr) 120px 120px auto;align-items:center;gap:8px;padding:9px;border:1px solid rgba(93,158,238,.12);border-radius:13px;background:rgba(6,27,59,.42)}.admin-user-main{display:grid;gap:2px;min-width:0}.admin-user-main strong{font-size:10.5px}.admin-user-main span,.admin-user-main small{font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-control{padding:8px 9px;font-size:9px}.admin-class-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(93,158,238,.12);border-radius:13px;background:rgba(6,27,59,.42)}.admin-class-row>div{display:grid;gap:2px}.admin-class-row strong{font-size:10.5px}.admin-class-row span{font-size:8.5px;color:var(--muted)}.admin-config-section{margin-top:15px}.admin-config-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 13px}.admin-config-grid .field{margin:5px 0}.admin-toggle-field{min-height:65px;padding:9px 11px;border:1px solid rgba(95,159,237,.12);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-toggle-field>span:first-child{display:grid;gap:3px}.admin-toggle-field strong{font-size:10.5px}.admin-toggle-field small{font-size:8.5px;color:var(--muted)}.admin-note-field{grid-column:span 2}.admin-config-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(95,159,237,.12)}.admin-config-footer span{font-size:9.5px;color:var(--muted)}

/* Personalization */
html[data-font="inter"] body{font-family:Inter,Poppins,system-ui,sans-serif}html[data-font="system"] body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}html[data-text-size="small"]{font-size:14px}html[data-text-size="large"]{font-size:17px}html[data-density="compact"] .panel{padding:14px}html[data-density="compact"] .nav-item{min-height:46px;padding-top:10px;padding-bottom:10px}html[data-density="compact"] .class-card{min-height:160px}
html[data-theme="light"] body{background:linear-gradient(135deg,#EDF6FF,#F7FCFF 48%,#EAF9F6);color:#102744}html[data-theme="light"]{--text:#102744;--muted:#5E7692;--line:rgba(34,93,158,.17);--panel:rgba(255,255,255,.86)}html[data-theme="light"] body:before{opacity:.16}html[data-theme="light"] .sidebar,html[data-theme="light"] .bottom-nav{background:rgba(244,250,255,.94)}html[data-theme="light"] .panel,html[data-theme="light"] .class-card,html[data-theme="light"] .control,html[data-theme="light"] .search,html[data-theme="light"] .icon-btn{background:rgba(255,255,255,.78);color:#102744}html[data-theme="light"] .sidebar{border-color:rgba(47,107,174,.14)}html[data-theme="light"] .nav-item{color:#59718D}html[data-theme="light"] .sidebar-foot{background:rgba(222,239,255,.68)}html[data-theme="light"] .detail-row strong,html[data-theme="light"] .setting-row strong{color:#173454}html[data-theme="light"] .modal{background:#F6FBFF}

/* ============================================================
   v2.0.0 — TRUCK DESK CTA GEOMETRY ADAPTATION
   Source geometry: Truck Desk floating primary action.
   KelasKu keeps its DIAMOND identity.
   ============================================================ */
@media(max-width:900px){
  .main{padding-bottom:116px}
  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:calc(78px + env(safe-area-inset-bottom));
    min-height:calc(78px + env(safe-area-inset-bottom));
    padding:11px 8px calc(7px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
    overflow:visible;background:rgba(5,18,43,.965);border-top:0;
    box-shadow:0 -10px 30px rgba(0,7,25,.22);backdrop-filter:blur(22px)
  }
  /* Truck Desk CTA center = top(-24) + radius(29) ≈ 5px.
     Divider placed at 6px so it crosses the visual center of the KelasKu diamond. */
  .bottom-nav::before{content:"";position:absolute;z-index:0;top:6px;left:0;right:0;height:1px;pointer-events:none;background:rgba(105,166,239,.23)}
  .bottom-item{position:relative;z-index:1;appearance:none;border:0;background:transparent;font-family:inherit;width:100%;min-width:0;height:58px;min-height:58px;padding:5px 2px 3px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;color:#819AB8;text-align:center;font-size:clamp(9px,2.4vw,10.5px);font-weight:600;line-height:1.1;cursor:pointer}
  .bottom-item:nth-child(1){grid-column:1}.bottom-item:nth-child(2){grid-column:2}.bottom-item:nth-child(4){grid-column:4}.bottom-item:nth-child(5){grid-column:5}
  .bottom-icon-wrap{display:inline-grid;place-items:center;width:36px;height:31px;border-radius:8px;color:inherit;transition:.16s ease}
  .bottom-icon-wrap .icon{width:21px;height:21px;stroke-width:1.85}
  .bottom-item:not(.bottom-home-cta).active{color:var(--tosca)}
  .bottom-item:not(.bottom-home-cta).active .bottom-icon-wrap{background:rgba(34,224,199,.09);box-shadow:inset 0 0 0 1px rgba(34,224,199,.1)}
  .bottom-label{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

  /* Exact float proportion adapted from Truck Desk:
     60x60, top -24, strong border + outer halo. */
  .bottom-home-cta{position:absolute;top:-24px;left:50%;z-index:3;width:82px;height:82px;min-height:82px;padding:0;color:#F5FFFF!important;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;transform:translateX(-50%);font-weight:800;overflow:visible}
  .bottom-diamond{width:60px;height:60px;flex:0 0 60px;display:grid;place-items:center;border-radius:14px;transform:rotate(45deg);color:#041A31;background:linear-gradient(135deg,#72F2B8 0%,#22E0C7 38%,#2B9CF4 72%,#1976FF 100%);border:5px solid #06142F;box-shadow:0 0 0 3px rgba(69,204,225,.28),0 9px 22px rgba(0,14,48,.48),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
  .bottom-diamond .icon{width:25px;height:25px;transform:rotate(-45deg);stroke-width:2.25;color:#041A31}
  .bottom-home-cta:hover .bottom-diamond{filter:brightness(1.03);box-shadow:0 0 0 3px rgba(69,204,225,.34),0 12px 27px rgba(0,14,48,.54),inset 0 1px 0 rgba(255,255,255,.24)}
  .bottom-home-cta:active .bottom-diamond{transform:rotate(45deg) scale(.93)}
  .bottom-home-cta .bottom-label{font-size:10px;line-height:1;color:#EFFFFC;text-shadow:0 2px 8px rgba(0,0,0,.32)}
}

@media(max-width:520px){
  .page-head{display:grid}.page-actions{justify-content:flex-start}.settings-layout,.account-grid,.admin-layout,.room-overview{grid-template-columns:1fr}.settings-savebar{bottom:92px}.profile-card{grid-template-columns:auto 1fr}.account-id-box{grid-column:1/-1;text-align:left}.class-grid{grid-template-columns:1fr}.class-hero{grid-template-columns:auto 1fr}.class-code-stack{grid-column:1/-1;grid-template-columns:1fr 1fr}.feature-roadmap{grid-template-columns:1fr}.member-row{grid-template-columns:auto 1fr}.member-actions{grid-column:1/-1;justify-content:flex-end}.admin-summary-grid{grid-template-columns:repeat(2,1fr)}.admin-config-grid{grid-template-columns:1fr 1fr}.admin-note-field{grid-column:1/-1}.admin-user-row{grid-template-columns:auto 1fr auto}.admin-user-row .compact-control{grid-column:2;width:100%}.admin-user-row [data-admin-save-user]{grid-column:3;grid-row:1}.admin-class-row{grid-template-columns:auto 1fr}.admin-class-row .soft-chip{grid-column:2;justify-self:start}.class-search-box{grid-template-columns:auto 1fr}.class-search-box .btn{grid-column:1/-1}.settings-savebar{display:grid}.settings-savebar .btn{width:100%}}

@media(max-width:359px){
  .bottom-home-cta{top:-22px}.bottom-diamond{width:54px;height:54px;flex-basis:54px;border-radius:13px}.bottom-diamond .icon{width:23px;height:23px}.bottom-icon-wrap{width:34px}.bottom-icon-wrap .icon{width:20px;height:20px}.bottom-item{font-size:8.8px}.admin-config-grid{grid-template-columns:1fr}}

/* ==========================================================
KELASKU v2.1.0 — PHASE 2 REFINEMENT
Settings Hub + Admin Rooms + Mobile Quick Access
========================================================== */

/* Explicit theme surfaces. Dark remains the brand default. */
html[data-theme="dark"]{--text:#EAF4FF;--muted:#8EA7C4;--line:rgba(91,158,239,.18);--panel:rgba(7,28,62,.73)}
html[data-theme="dark"] body{background:var(--navy-950);color:var(--text)}

/* Mobile quick access is intentionally outside bottom navigation. */
.shell-mobile-quick{display:none}

/* Keep the approved CTA geometry untouched; only enlarge non-CTA icons. */
@media(max-width:900px){
  .bottom-icon-wrap .icon{width:23px!important;height:23px!important;stroke-width:1.95}
  .shell-mobile-quick{display:grid}
  .top-actions{gap:7px}
  .top-actions .icon-btn{width:40px;height:40px;border-radius:12px}
  .top-actions .icon-btn .icon{width:20px;height:20px}
}
@media(max-width:390px){
  .top-actions{gap:5px}
  .top-actions .icon-btn{width:37px;height:37px}
  .top-actions .icon-btn .icon{width:19px;height:19px}
  .topbar .brand img{width:40px;height:40px}
  .topbar .brand-word{font-size:22px}
}

/* Settings — Truck Desk inspired room/accordion information architecture. */
.settings-searchbar{display:flex;align-items:center;gap:11px;padding:12px 14px;margin-bottom:14px}
.settings-searchbar>.icon{width:20px;height:20px;color:var(--tosca);flex:0 0 auto}
.settings-search-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:12px}
.settings-search-input::placeholder{color:var(--muted)}
.settings-hub{display:grid;gap:11px;padding-bottom:96px}
.settings-room{display:grid;gap:0;border:1px solid rgba(93,159,238,.14);border-radius:20px;background:rgba(6,26,58,.52);overflow:hidden}
.settings-main-card{appearance:none;width:100%;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;text-align:left;cursor:pointer}
.settings-main-card:hover{background:rgba(34,224,199,.035)}
.settings-main-card.is-open{background:linear-gradient(100deg,rgba(34,224,199,.07),rgba(25,118,255,.055))}
.settings-main-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08);border:1px solid rgba(34,224,199,.14)}
.settings-main-icon .icon{width:22px;height:22px}
.settings-main-body{display:grid;gap:4px;min-width:0}
.settings-main-body strong{font-size:13px}
.settings-main-body small{font-size:9.5px;color:var(--muted);line-height:1.5}
.settings-main-meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}
.settings-main-meta .icon{width:17px;height:17px;transition:transform .18s ease}
.settings-main-card.is-open .settings-main-meta .icon{transform:rotate(90deg)}
.settings-room-panel{padding:14px 16px 16px;border-top:1px solid rgba(93,159,238,.11);background:rgba(3,17,42,.28)}
.settings-room-panel[hidden]{display:none!important}
.settings-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.setting-card{min-height:74px;padding:12px 13px;border-radius:15px;border:1px solid rgba(95,159,237,.12);background:rgba(8,32,69,.43);display:flex;align-items:center;justify-content:space-between;gap:14px}
.setting-card-copy{display:grid;gap:4px;min-width:0}
.setting-card-copy strong{font-size:10.5px}
.setting-card-copy small{font-size:8.5px;color:var(--muted);line-height:1.45}
.setting-control{width:min(190px,46%);padding:9px 10px;font-size:10px}
.settings-preview-strip,.settings-status-card{display:flex;align-items:center;gap:12px;margin-top:11px;padding:11px 12px;border:1px solid rgba(34,224,199,.12);border-radius:14px;background:rgba(34,224,199,.04)}
.settings-preview-strip>div,.settings-status-card>div{display:grid;gap:2px;flex:1;min-width:0}
.settings-preview-strip strong,.settings-status-card strong{font-size:10.5px}
.settings-preview-strip small,.settings-status-card small{font-size:8.5px;color:var(--muted)}
.theme-preview-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--tosca),#2B9CF4);box-shadow:0 0 0 5px rgba(34,224,199,.08);flex:0 0 auto}
.settings-inline-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.settings-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.settings-info-card{padding:12px;border-radius:14px;border:1px solid rgba(95,159,237,.12);background:rgba(8,32,69,.43);display:grid;gap:4px}
.settings-info-card>span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.settings-info-card strong{font-size:11px;color:var(--text);overflow-wrap:anywhere}
.settings-info-card small{font-size:8.5px;color:var(--muted)}
.settings-action-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.settings-action-card{appearance:none;border:1px solid rgba(95,159,237,.12);background:rgba(8,32,69,.43);color:var(--text);border-radius:15px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;cursor:pointer}
.settings-action-card:hover{border-color:rgba(34,224,199,.26);background:rgba(34,224,199,.05)}
.settings-action-card.is-primary{border-color:rgba(34,224,199,.24);background:linear-gradient(100deg,rgba(34,224,199,.09),rgba(25,118,255,.08))}
.settings-action-card>span:nth-child(2){display:grid;gap:3px}
.settings-action-card strong{font-size:10.5px}
.settings-action-card small{font-size:8.5px;color:var(--muted);line-height:1.4}
.settings-action-card>.icon{width:17px;height:17px;color:var(--muted)}
.settings-action-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.07)}
.settings-action-icon .icon{width:19px;height:19px}
.settings-savebar{position:sticky;bottom:18px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px!important;margin-top:3px}
.settings-savebar>div{display:grid;gap:3px}
.settings-savebar strong{font-size:11px}.settings-savebar span{font-size:9px;color:var(--muted)}

/* Account quick rooms — visible and obvious on mobile. */
.account-quick-panel{margin:15px 0}
.account-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.account-quick-card{appearance:none;border:1px solid rgba(95,159,237,.13);background:rgba(8,32,69,.43);color:var(--text);border-radius:16px;padding:12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;cursor:pointer}
.account-quick-card.is-primary{border-color:rgba(34,224,199,.24);background:linear-gradient(100deg,rgba(34,224,199,.09),rgba(25,118,255,.08))}
.account-quick-card>span:nth-child(2){display:grid;gap:3px}
.account-quick-card strong{font-size:10.5px}.account-quick-card small{font-size:8.5px;color:var(--muted);line-height:1.45}.account-quick-card>.icon{width:17px;height:17px;color:var(--muted)}
.account-quick-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08)}
.account-quick-icon .icon{width:20px;height:20px}
.edit-profile-panel{max-width:780px;margin:0 auto}.edit-profile-form{max-width:700px;margin:0 auto}

/* Super Admin — rooms, not tiny dashboard tables. */
.admin-summary-grid--hub{grid-template-columns:repeat(5,minmax(0,1fr))}
.admin-stat-card small{display:block;margin-top:2px;font-size:8px;color:#6F8DAE}
.admin-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.admin-room-card{appearance:none;border:1px solid rgba(95,159,237,.14);background:linear-gradient(145deg,rgba(11,43,90,.58),rgba(5,22,50,.68));color:var(--text);border-radius:20px;padding:17px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;text-align:left;cursor:pointer;min-height:132px}
.admin-room-card:hover{transform:translateY(-1px);border-color:rgba(34,224,199,.25);box-shadow:0 13px 30px rgba(0,12,36,.18)}
.admin-room-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08);border:1px solid rgba(34,224,199,.14)}
.admin-room-icon .icon{width:25px;height:25px}
.admin-room-body{display:grid;gap:5px}.admin-room-body strong{font-size:13px}.admin-room-body small{font-size:9px;line-height:1.5;color:var(--muted)}.admin-room-body b{font-size:9px;color:var(--tosca);font-weight:700}.admin-room-card>.icon{width:19px;height:19px;color:var(--muted)}
.admin-health-strip{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:14px}.admin-health-strip>div{display:grid;gap:4px}.admin-health-strip strong{font-size:11px}.admin-health-strip span{font-size:9px;color:var(--muted);line-height:1.5}
.admin-room-heading{display:flex;align-items:center;gap:9px;margin:2px 0 12px;color:var(--tosca);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.admin-room-heading .icon{width:19px;height:19px}
.admin-data-panel{padding:15px}
.admin-toolbar{display:grid;grid-template-columns:minmax(250px,1fr) 150px 150px auto;gap:8px;align-items:center}
.admin-toolbar--audit{grid-template-columns:minmax(250px,1fr) 160px auto}
.admin-search-wide{display:flex;align-items:center;gap:8px;border:1px solid rgba(93,169,255,.24);background:rgba(5,20,47,.64);border-radius:13px;padding:0 11px;min-height:42px}.admin-search-wide>.icon{width:18px;height:18px;color:var(--muted)}
.admin-toolbar-input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:10.5px}
.admin-result-meta{padding:12px 2px 8px;color:var(--muted);font-size:9px}
.admin-data-list{display:grid;gap:8px}
.admin-data-row{display:grid;grid-template-columns:auto minmax(180px,1fr) 100px minmax(310px,auto);align-items:center;gap:11px;padding:11px;border:1px solid rgba(93,158,238,.12);border-radius:15px;background:rgba(6,27,59,.42)}
.admin-data-main{display:grid;gap:2px;min-width:0}.admin-data-main strong{font-size:10.8px}.admin-data-main span,.admin-data-main small{font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-data-meta{display:grid;gap:2px}.admin-data-meta span{font-size:7.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.admin-data-meta strong{font-size:9px}
.admin-data-controls{display:grid;grid-template-columns:120px 120px auto;gap:7px;align-items:center}
.admin-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:14px}.admin-pagination span{font-size:9px;color:var(--muted)}.admin-pagination .btn{padding:9px 12px;font-size:9px}.admin-pagination .btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.admin-system-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}
.admin-system-card{display:flex;align-items:center;gap:10px;padding:13px}.system-dot{width:10px;height:10px;border-radius:50%;background:#FB7185;box-shadow:0 0 0 5px rgba(251,113,133,.08)}.system-dot.is-ok{background:var(--tosca);box-shadow:0 0 0 5px rgba(34,224,199,.08)}.admin-system-card>div{display:grid;gap:2px}.admin-system-card span{font-size:8px;color:var(--muted)}.admin-system-card strong{font-size:11px}.admin-system-card small{font-size:8px;color:var(--muted)}
.admin-release-panel{margin-top:13px}.admin-release-list{display:grid;gap:7px}.admin-release-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;padding:10px;border-radius:13px;border:1px solid rgba(95,159,237,.11);background:rgba(6,27,59,.36)}.admin-release-row>div{display:grid;gap:2px}.admin-release-row strong{font-size:10px}.admin-release-row span,.admin-release-row small,.admin-release-row time{font-size:8.5px;color:var(--muted)}
.admin-audit-list{display:grid;gap:7px}.admin-audit-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px;border:1px solid rgba(95,159,237,.11);border-radius:14px;background:rgba(6,27,59,.36)}.admin-audit-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.07)}.admin-audit-icon .icon{width:19px;height:19px}.admin-audit-row>div{display:grid;gap:2px;min-width:0}.admin-audit-row strong{font-size:10px}.admin-audit-row span,.admin-audit-row small,.admin-audit-row time{font-size:8.5px;color:var(--muted)}.admin-audit-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-audit-row time{white-space:nowrap}

/* Light theme coverage for new rooms. */
html[data-theme="light"] .settings-room,html[data-theme="light"] .setting-card,html[data-theme="light"] .settings-info-card,html[data-theme="light"] .settings-action-card,html[data-theme="light"] .account-quick-card,html[data-theme="light"] .admin-room-card,html[data-theme="light"] .admin-data-row,html[data-theme="light"] .admin-release-row,html[data-theme="light"] .admin-audit-row,html[data-theme="light"] .admin-search-wide{background:rgba(255,255,255,.78);color:#102744;border-color:rgba(34,93,158,.14)}
html[data-theme="light"] .settings-room-panel{background:rgba(237,246,255,.56)}
html[data-theme="light"] .settings-main-card.is-open{background:linear-gradient(100deg,rgba(34,224,199,.08),rgba(25,118,255,.06))}
html[data-theme="light"] .settings-search-input,html[data-theme="light"] .admin-toolbar-input{color:#102744}

@media(max-width:900px){
  .settings-room-grid,.settings-info-grid,.settings-action-list,.account-quick-grid,.admin-room-grid,.admin-system-grid{grid-template-columns:1fr}
  .settings-main-card{grid-template-columns:auto 1fr auto;padding:14px;gap:11px}
  .settings-main-meta>span{display:none}
  .setting-card{min-height:68px}
  .settings-preview-strip,.settings-status-card{align-items:flex-start;flex-wrap:wrap}.settings-preview-strip .btn,.settings-status-card .btn{width:100%}
  .settings-savebar{bottom:94px}
  .admin-summary-grid--hub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-health-strip{display:grid}.admin-health-strip .btn{width:100%}
  .admin-toolbar,.admin-toolbar--audit{grid-template-columns:1fr 1fr}.admin-search-wide{grid-column:1/-1}.admin-toolbar .btn{width:100%}
  .admin-data-row{grid-template-columns:auto minmax(0,1fr)}
  .admin-data-meta{grid-column:2}.admin-data-controls{grid-column:1/-1;grid-template-columns:1fr 1fr auto}
  .admin-release-row{grid-template-columns:90px 1fr}.admin-release-row time{grid-column:2}
  .admin-audit-row{grid-template-columns:auto 1fr}.admin-audit-row time{grid-column:2}
}
@media(max-width:520px){
  .settings-room-grid,.settings-action-list{grid-template-columns:1fr}
  .setting-card{align-items:flex-start;flex-direction:column}.setting-control{width:100%}
  .admin-toolbar,.admin-toolbar--audit{grid-template-columns:1fr}.admin-search-wide{grid-column:auto}
  .admin-data-controls{grid-template-columns:1fr}.admin-data-controls .btn{width:100%}
  .admin-pagination{display:grid;grid-template-columns:1fr 1fr}.admin-pagination span{grid-column:1/-1;grid-row:1;text-align:center}.admin-pagination .btn{width:100%}
  .account-quick-card{min-height:72px}
}

/* ============================================================
   KelasKu v3.0.0 — PHASE 3 ACADEMIC CORE
   Cache-first navigation • responsive dashboard carousel
   Academic hub • class academic modules
   NOTE: Home Diamond CTA geometry is intentionally untouched.
   ============================================================ */

/* Mobile nav: enlarge ONLY non-CTA icons. */
@media(max-width:900px){
  .bottom-item:not(.bottom-home-cta) .bottom-icon-wrap{
    width:38px;
    height:34px;
    display:grid;
    place-items:center;
  }
  .bottom-item:not(.bottom-home-cta) .bottom-icon-wrap .icon{
    width:25px!important;
    height:25px!important;
    stroke-width:2!important;
  }
}
@media(max-width:380px){
  .bottom-item:not(.bottom-home-cta) .bottom-icon-wrap .icon{
    width:24px!important;
    height:24px!important;
  }
}

/* Dashboard carousel — wide retail-app proportion, not overly tall. */
.dashboard-carousel{
  position:relative;
  width:100%;
  height:clamp(170px,16vw,208px);
  margin:4px 0 15px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(95,164,255,.16);
  background:#071C3D;
  box-shadow:0 18px 42px rgba(0,12,40,.22);
  isolation:isolate;
}
.dashboard-carousel-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .46s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  touch-action:pan-y;
}
.dashboard-carousel-slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(180px,.72fr);
  align-items:center;
  gap:20px;
  padding:24px 30px;
  overflow:hidden;
}
.dashboard-carousel-slide::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 42%,rgba(34,224,199,.025));
}
.dashboard-carousel-slide.tone-a{background:linear-gradient(120deg,#071A3A 0%,#0B2D64 58%,#0C756F 130%)}
.dashboard-carousel-slide.tone-b{background:linear-gradient(120deg,#081936 0%,#113C77 60%,#0A5968 125%)}
.dashboard-carousel-slide.tone-c{background:linear-gradient(120deg,#071A38 0%,#173365 55%,#17796D 130%)}
.carousel-copy{position:relative;z-index:2;max-width:720px;display:grid;align-content:center;justify-items:start}
.carousel-eyebrow{display:block;margin-bottom:7px;color:#73EBDD;font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.carousel-copy h2{max-width:650px;margin:0;color:#F6FBFF;font-size:clamp(20px,2.1vw,29px);line-height:1.12;letter-spacing:-.035em}
.carousel-copy p{max-width:620px;margin:8px 0 13px;color:#B6CAE0;font-size:10.5px;line-height:1.52}
.carousel-action{
  appearance:none;border:1px solid rgba(126,239,225,.25);background:rgba(5,26,57,.62);color:#F7FFFF;
  min-height:34px;padding:8px 12px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:9.5px;font-weight:750;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.carousel-action .icon{width:15px;height:15px;color:#79EEDF}
.carousel-art{position:relative;z-index:1;height:100%;display:grid;place-items:center;min-width:0}
.carousel-diamond{
  width:82px;height:82px;border-radius:22px;display:grid;place-items:center;
  transform:rotate(45deg);background:linear-gradient(145deg,#1C72CE,#2BE5CB);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 18px 40px rgba(0,8,30,.33),0 0 0 9px rgba(34,224,199,.04)
}
.carousel-diamond .icon{width:34px;height:34px;transform:rotate(-45deg);color:#041A31;stroke-width:2.1}
.carousel-orbit{position:absolute;border:1px solid rgba(133,226,255,.16);border-radius:50%;pointer-events:none}
.orbit-one{width:142px;height:142px}.orbit-two{width:205px;height:205px;border-style:dashed;opacity:.58}
.dashboard-carousel-dots{position:absolute;z-index:5;left:30px;bottom:11px;display:flex;align-items:center;gap:6px}
.carousel-dot{appearance:none;width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(211,235,255,.3);cursor:pointer;transition:.2s ease}
.carousel-dot.active{width:23px;background:#58E7D7}

.dashboard-quick-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.dashboard-quick-action{
  appearance:none;min-height:66px;border:1px solid rgba(93,160,242,.13);border-radius:16px;
  background:linear-gradient(145deg,rgba(11,41,85,.52),rgba(6,25,57,.58));color:var(--text);
  display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:left;cursor:pointer;transition:.18s ease
}
.dashboard-quick-action:hover{transform:translateY(-1px);border-color:rgba(34,224,199,.24);background:rgba(34,224,199,.055)}
.dashboard-quick-action>span{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.075)}
.dashboard-quick-action .icon{width:20px;height:20px}.dashboard-quick-action strong{font-size:10.5px}

/* Global academic hub. */
.academic-page-head{margin-bottom:14px}
.academic-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 170px auto;gap:9px;align-items:center;margin-bottom:14px}.academic-toolbar.attendance-toolbar{grid-template-columns:minmax(220px,1fr) 170px minmax(220px,280px) auto}
.academic-search{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1px solid rgba(93,169,255,.2);border-radius:14px;background:rgba(5,20,47,.52)}
.academic-search>.icon{width:18px;height:18px;color:var(--muted)}
.academic-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:10.5px}
.academic-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.academic-summary-strip>div{min-height:70px;padding:13px 15px;border-radius:16px;border:1px solid rgba(94,160,239,.12);background:rgba(7,29,63,.46);display:grid;align-content:center;gap:3px}
.academic-summary-strip strong{font-size:20px;letter-spacing:-.025em}.academic-summary-strip span{font-size:8.5px;color:var(--muted)}.academic-attendance-scope{display:flex;align-items:center;gap:10px;margin:-2px 0 10px;padding:10px 12px;border:1px solid rgba(34,224,199,.13);border-radius:14px;background:rgba(7,29,63,.34)}.academic-attendance-scope>.icon{width:20px;height:20px;color:var(--tosca)}.academic-attendance-scope>div{display:grid;gap:2px}.academic-attendance-scope strong{font-size:10.5px}.academic-attendance-scope small{font-size:8.8px;color:var(--muted)}.academic-attendance-session{display:block;margin-top:3px;color:#8EADCB;font-size:8.8px;line-height:1.45}
.academic-card-list{display:grid;gap:9px}.academic-card-list.is-muted{opacity:.86}
.academic-row-card{width:100%;min-height:94px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 14px;border:1px solid rgba(94,160,239,.12);border-radius:17px;background:rgba(7,29,63,.44);color:var(--text);text-align:left}
button.academic-row-card{appearance:none;font:inherit;cursor:pointer}.academic-row-button:hover{border-color:rgba(34,224,199,.23);background:rgba(34,224,199,.045)}
.academic-date-tile{width:52px;height:58px;border-radius:15px;display:grid;place-items:center;align-content:center;gap:1px;background:rgba(34,224,199,.075);border:1px solid rgba(34,224,199,.15)}
.academic-date-tile strong{font-size:17px}.academic-date-tile span{font-size:7.5px;color:var(--tosca);font-weight:800;letter-spacing:.08em}
.academic-type-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.075)}
.academic-type-icon .icon{width:22px;height:22px}
.academic-row-main{min-width:0;display:grid;gap:4px}.academic-row-main h3,.academic-row-title{margin:0;font-size:11.5px;font-weight:760;color:var(--text)}
.academic-row-main p,.academic-row-copy{margin:0;color:var(--muted);font-size:9px;line-height:1.5;overflow-wrap:anywhere}.academic-row-main small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:8.5px}.academic-row-main small .icon{width:14px;height:14px}
.academic-meta-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:7.8px;font-weight:650}.academic-meta-line>span+span::before{content:"•";margin-right:7px;color:#52779F}
.academic-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:5px 8px;border-radius:999px;font-size:7.6px;font-weight:800;white-space:nowrap;border:1px solid rgba(93,160,239,.16);background:rgba(93,160,239,.06);color:#9FBDD9}
.status-done{color:#77EEDC;border-color:rgba(34,224,199,.2);background:rgba(34,224,199,.07)}.status-late,.status-overdue{color:#FFB9C3;border-color:rgba(251,113,133,.2);background:rgba(251,113,133,.07)}.status-open{color:#B8D9FF}
.academic-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.academic-material-card{display:grid;align-content:start;gap:9px;min-height:190px;padding:16px}.academic-material-card h3{margin:0;font-size:12px}.academic-material-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.55}.academic-material-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08)}.academic-material-icon .icon{width:22px;height:22px}.academic-open-link{margin-top:auto;justify-self:start}
.announcement-feed{display:grid;gap:9px}.announcement-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;border:1px solid rgba(94,160,239,.12);border-radius:17px;background:rgba(7,29,63,.44)}.announcement-marker{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.075)}.announcement-marker .icon{width:21px;height:21px}.announcement-card h3{margin:5px 0 4px;font-size:11.5px}.announcement-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.55;white-space:pre-wrap}.announcement-card.priority-urgent{border-color:rgba(251,113,133,.25)}.announcement-card.priority-high{border-color:rgba(250,204,21,.2)}
.academic-empty{min-height:220px;display:grid;place-items:center}.academic-list-layout{min-width:0}.academic-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.task-modal-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:9px 0 12px;color:var(--muted);font-size:9px}.task-modal-meta>span:first-child{display:flex;align-items:center;gap:6px}.task-modal-meta .icon{width:16px;height:16px}.task-description{white-space:pre-wrap}

/* Class academic modules. */
.class-module-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:13px}
.class-module-card{appearance:none;border:1px solid rgba(94,160,239,.12);border-radius:17px;background:rgba(7,29,63,.46);color:var(--text);min-height:104px;padding:13px;display:grid;align-content:center;justify-items:start;gap:7px;text-align:left;cursor:pointer}
.class-module-card:hover{border-color:rgba(34,224,199,.22);background:rgba(34,224,199,.04)}.class-module-card>.icon{width:23px;height:23px;color:var(--tosca)}.class-module-card strong{font-size:10.5px}.class-module-card span{font-size:8px;color:var(--muted);line-height:1.4}
.class-academic-panel{min-height:250px}.class-feed{display:grid;gap:9px}.room-overview{display:grid;gap:14px}.wide-panel{padding:16px}
.attendance-own-card{margin-bottom:12px;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.attendance-own-card>div{display:grid;gap:3px}.attendance-own-card strong{font-size:11px}.attendance-own-card span{font-size:8.5px;color:var(--muted)}
.attendance-record-list{display:grid;gap:7px;max-height:min(58vh,520px);overflow:auto;padding-right:3px}.attendance-record-row{display:grid;grid-template-columns:minmax(160px,1fr) 145px minmax(150px,.7fr);gap:8px;align-items:center;padding:9px 10px;border:1px solid rgba(94,160,239,.11);border-radius:13px;background:rgba(6,26,58,.4)}.attendance-record-row>div{display:grid;gap:2px;min-width:0}.attendance-record-row strong{font-size:9.5px}.attendance-record-row small{font-size:7.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Light theme coverage for Phase 3. */
html[data-theme="light"] .dashboard-quick-action,html[data-theme="light"] .academic-search,html[data-theme="light"] .academic-summary-strip>div,html[data-theme="light"] .academic-row-card,html[data-theme="light"] .announcement-card,html[data-theme="light"] .class-module-card,html[data-theme="light"] .attendance-record-row{background:rgba(255,255,255,.8);color:#102744;border-color:rgba(34,93,158,.14)}
html[data-theme="light"] .academic-search input{color:#102744}
html[data-theme="light"] .academic-row-main h3,html[data-theme="light"] .academic-row-title,html[data-theme="light"] .academic-material-card h3,html[data-theme="light"] .announcement-card h3{color:#102744}

@media(max-width:1100px){
  .class-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .academic-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .dashboard-carousel{height:clamp(148px,38vw,176px);border-radius:20px;margin-bottom:13px}
  .dashboard-carousel-slide{grid-template-columns:minmax(0,1fr) 105px;gap:10px;padding:18px 18px 22px}
  .carousel-copy h2{font-size:clamp(18px,5vw,23px);max-width:440px}.carousel-copy p{font-size:9.3px;margin:6px 0 10px;max-width:420px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .carousel-eyebrow{font-size:7.7px;margin-bottom:5px}.carousel-action{min-height:31px;padding:7px 10px;font-size:8.8px}
  .carousel-diamond{width:62px;height:62px;border-radius:18px}.carousel-diamond .icon{width:27px;height:27px}.orbit-one{width:98px;height:98px}.orbit-two{width:138px;height:138px}.dashboard-carousel-dots{left:18px;bottom:9px}
  .dashboard-quick-actions{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.dashboard-quick-action{min-height:62px;display:grid;justify-items:center;align-content:center;text-align:center;gap:5px;padding:8px 5px}.dashboard-quick-action>span{width:34px;height:34px;flex-basis:auto}.dashboard-quick-action .icon{width:18px;height:18px}.dashboard-quick-action strong{font-size:8.7px}
  .academic-toolbar{grid-template-columns:1fr 1fr}.academic-toolbar.attendance-toolbar{grid-template-columns:1fr 1fr}.academic-search{grid-column:1/-1}.academic-toolbar .btn{width:100%}
  .academic-material-grid{grid-template-columns:1fr 1fr}
  .class-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-record-row{grid-template-columns:minmax(0,1fr) 130px}.attendance-record-row>input{grid-column:1/-1}
}
@media(max-width:560px){
  .dashboard-carousel{height:clamp(150px,42vw,170px);border-radius:18px}
  .dashboard-carousel-slide{grid-template-columns:minmax(0,1fr) 76px;padding:16px 14px 22px}
  .carousel-copy h2{font-size:17px;line-height:1.15}.carousel-copy p{font-size:8.7px;line-height:1.45}.carousel-eyebrow{font-size:7.2px}.carousel-action{font-size:8px}
  .carousel-diamond{width:52px;height:52px;border-radius:15px}.carousel-diamond .icon{width:23px;height:23px}.orbit-one{width:80px;height:80px}.orbit-two{width:112px;height:112px}
  .dashboard-quick-actions{gap:6px}.dashboard-quick-action{min-height:58px;border-radius:14px}.dashboard-quick-action>span{width:32px;height:32px;border-radius:10px}.dashboard-quick-action strong{font-size:8px}
  .academic-toolbar{grid-template-columns:1fr}.academic-toolbar.attendance-toolbar{grid-template-columns:1fr}.academic-search{grid-column:auto}.academic-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.academic-summary-strip>div{padding:10px;min-height:62px}.academic-summary-strip strong{font-size:17px}.academic-summary-strip span{font-size:7.3px}
  .academic-row-card{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px}.academic-row-card>.academic-status-pill{grid-column:2;justify-self:start}.academic-date-tile{width:46px;height:52px}.academic-type-icon{width:40px;height:40px}.academic-material-grid{grid-template-columns:1fr}.announcement-card{grid-template-columns:auto 1fr}.announcement-card>.soft-chip{grid-column:2;justify-self:start}
  .class-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.class-module-card{min-height:92px;padding:11px}.class-module-card span{font-size:7.6px}
  .attendance-record-row{grid-template-columns:1fr}.attendance-record-row>input{grid-column:auto}
}

/* ============================================================
   KelasKu v3.1.0 — REFINEMENT
   Join UX • Ketua Kelas • compact dashboard summary
   Light theme polish • App Info timeline
   NOTE: Diamond Home CTA geometry remains LOCKED.
   ============================================================ */

/* Dashboard summary: compact and above carousel. */
.dashboard-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.summary-mini{appearance:none;min-width:0;min-height:64px;padding:10px 13px;border:1px solid rgba(93,160,242,.14);border-radius:16px;background:linear-gradient(145deg,rgba(11,42,87,.58),rgba(6,25,57,.63));color:var(--text);display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.summary-mini:hover{transform:translateY(-1px);border-color:rgba(34,224,199,.25);background:rgba(34,224,199,.055)}
.summary-mini-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.075)}
.summary-mini-icon .icon{width:20px;height:20px}.summary-mini-copy{display:grid;gap:1px;min-width:0}.summary-mini-copy strong{font-size:20px;line-height:1;font-weight:800;letter-spacing:-.03em}.summary-mini-copy small{font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Join Code confirmation. */
.join-code-valid{display:flex;align-items:center;gap:7px;margin:9px 0 2px;padding:8px 10px;border:1px solid rgba(34,224,199,.18);border-radius:11px;background:rgba(34,224,199,.065);color:#91F2E5;font-size:9.5px;font-weight:700}.join-code-valid .icon{width:16px;height:16px}

/* One obvious Ketua Kelas control. */
.class-leader-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(250px,360px);align-items:center;gap:13px;margin:0 0 14px;padding:13px;border:1px solid rgba(34,224,199,.17);border-radius:17px;background:linear-gradient(100deg,rgba(34,224,199,.07),rgba(25,118,255,.065))}
.class-leader-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(34,224,199,.09);color:var(--tosca)}.class-leader-icon .icon{width:23px;height:23px}
.class-leader-copy{display:grid;gap:2px;min-width:0}.class-leader-copy>span{font-size:7.5px;color:var(--tosca);font-weight:850;letter-spacing:.14em}.class-leader-copy strong{font-size:11.5px}.class-leader-copy small{font-size:8.5px;line-height:1.4;color:var(--muted)}
.class-leader-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.class-leader-control .control{min-width:0;padding:10px 11px;font-size:9.5px}.class-leader-control .btn{padding:10px 12px;font-size:9.5px}

/* Update item inside notification drawer. */
.update-notif-row{width:100%;appearance:none;color:var(--text);text-align:left;cursor:pointer;border-color:rgba(34,224,199,.22)!important;background:linear-gradient(100deg,rgba(34,224,199,.075),rgba(25,118,255,.065))!important}

/* App Info + timeline. */
.app-info-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:10px;background:linear-gradient(120deg,rgba(11,45,96,.78),rgba(8,31,68,.7) 58%,rgba(15,100,102,.36))}
.app-info-logo{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;background:rgba(6,23,52,.52);border:1px solid rgba(34,224,199,.14)}.app-info-logo img{width:50px;height:50px}.app-info-kicker{display:block;margin-bottom:3px;color:var(--tosca);font-size:7.5px;font-weight:850;letter-spacing:.13em}.app-info-hero h2{margin:0;font-size:20px}.app-info-hero p{margin:3px 0 0;color:var(--muted);font-size:9px}
.app-info-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}
.app-info-status-card{min-height:66px;padding:11px 12px;border:1px solid rgba(93,160,242,.13);border-radius:15px;background:rgba(7,29,63,.5);display:flex;align-items:center;gap:10px}.app-info-status-card>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.075)}.app-info-status-card .icon{width:18px;height:18px}.app-info-status-card>div{display:grid;gap:2px}.app-info-status-card small{font-size:7.5px;color:var(--muted)}.app-info-status-card strong{font-size:10.5px}
.app-timeline-panel{margin-top:12px}.app-release-list{display:grid;gap:0}.app-release-card{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:0 0 16px}.app-release-card:last-child{padding-bottom:0}.app-release-rail{position:relative;display:flex;justify-content:center}.app-release-rail::after{content:"";position:absolute;top:12px;bottom:-12px;width:1px;background:rgba(93,160,242,.18)}.app-release-card:last-child .app-release-rail::after{display:none}.app-release-rail span{position:relative;z-index:1;width:11px;height:11px;margin-top:7px;border-radius:50%;background:#426889;border:3px solid #102F5D}.app-release-card.is-latest .app-release-rail span{background:var(--tosca);box-shadow:0 0 0 5px rgba(34,224,199,.08)}
.app-release-body{padding:12px 14px;border:1px solid rgba(93,160,242,.12);border-radius:16px;background:rgba(7,29,63,.4)}.app-release-card.is-latest .app-release-body{border-color:rgba(34,224,199,.2);background:linear-gradient(100deg,rgba(34,224,199,.055),rgba(25,118,255,.045))}.app-release-body header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.app-release-body header>div{display:grid;gap:2px}.app-release-version{font-size:8px;color:var(--tosca);font-weight:850}.app-release-body header strong{font-size:11.5px}.app-release-body header small{font-size:7.8px;color:var(--muted)}.app-release-body header>b{padding:5px 7px;border-radius:999px;background:rgba(34,224,199,.08);color:var(--tosca);font-size:7px;letter-spacing:.08em}.app-release-body>p{margin:8px 0;color:var(--muted);font-size:9px;line-height:1.55}.app-release-group{margin-top:7px}.app-release-group>strong{display:block;margin-bottom:4px;font-size:8px;color:#BFD8EE}.app-release-group ul{margin:0;padding-left:17px;color:var(--muted);font-size:8.5px;line-height:1.55}

/* LIGHT THEME — deliberately clean, bright and layered instead of faded dark UI. */
html[data-theme="light"]{--text:#102744;--muted:#627B97;--line:rgba(40,94,153,.14);--panel:#FFFFFF;--shadow:0 18px 46px rgba(49,87,125,.11)}
html[data-theme="light"] body{background:radial-gradient(circle at 88% 2%,rgba(25,118,255,.10),transparent 25%),radial-gradient(circle at 5% 92%,rgba(34,224,199,.09),transparent 24%),linear-gradient(135deg,#F3F8FE 0%,#FBFDFF 48%,#F0FAF8 100%);color:#102744}
html[data-theme="light"] body:before{opacity:.1;background-image:linear-gradient(120deg,transparent 0 48%,rgba(25,118,255,.12) 49% 50%,transparent 51%),linear-gradient(120deg,transparent 0 73%,rgba(34,224,199,.10) 74% 74.5%,transparent 75%)}
html[data-theme="light"] .sidebar{background:rgba(255,255,255,.93);border-color:#DCE8F4;box-shadow:10px 0 34px rgba(54,91,130,.055)}
html[data-theme="light"] .sidebar-foot{background:#F3F8FD;border:1px solid #E0EBF5;color:#6A819B}
html[data-theme="light"] .nav-item{color:#667E98}html[data-theme="light"] .nav-item:hover{color:#123F73;background:#F1F7FD;border-color:#E2ECF6}html[data-theme="light"] .nav-item.active{color:#087D78;background:linear-gradient(90deg,#E8FBF7,#EEF5FF);border-color:#CFEDE8}
html[data-theme="light"] .topbar .icon-btn,html[data-theme="light"] .search,html[data-theme="light"] .control{background:#FFFFFF;color:#102744;border-color:#D8E6F3;box-shadow:0 5px 16px rgba(45,81,119,.045)}
html[data-theme="light"] .field label{color:#274661}html[data-theme="light"] .control::placeholder{color:#91A5BA}
html[data-theme="light"] .quote{background:#FFFFFF;border-color:#DDE9F4;color:#536F8C;box-shadow:0 8px 22px rgba(46,82,120,.045)}
html[data-theme="light"] .panel,html[data-theme="light"] .class-card,html[data-theme="light"] .list-row,html[data-theme="light"] .search-class-row,html[data-theme="light"] .status-card,html[data-theme="light"] .setup-card{background:#FFFFFF;color:#102744;border-color:#DCE8F3;box-shadow:0 9px 28px rgba(46,83,122,.06)}
html[data-theme="light"] .class-card:hover,html[data-theme="light"] .search-class-row:hover{border-color:#B9E9E3;background:#FCFFFF}
html[data-theme="light"] .empty{border-color:#CFDDEB;color:#71879F;background:#FAFCFE}html[data-theme="light"] .empty strong{color:#173C62}
html[data-theme="light"] .list-row h4,html[data-theme="light"] .panel-title,html[data-theme="light"] .member-info strong{color:#173C62}
html[data-theme="light"] .btn-secondary{background:#F1F7FC;color:#173C62;border-color:#D5E4F1;box-shadow:none}html[data-theme="light"] .btn-ghost{color:#607891;border-color:#D8E5F0}
html[data-theme="light"] .settings-room,html[data-theme="light"] .setting-card,html[data-theme="light"] .settings-info-card,html[data-theme="light"] .settings-action-card,html[data-theme="light"] .account-quick-card,html[data-theme="light"] .admin-room-card,html[data-theme="light"] .admin-data-row,html[data-theme="light"] .admin-release-row,html[data-theme="light"] .admin-audit-row,html[data-theme="light"] .admin-search-wide,html[data-theme="light"] .academic-row-card,html[data-theme="light"] .announcement-card,html[data-theme="light"] .class-module-card,html[data-theme="light"] .attendance-record-row,html[data-theme="light"] .academic-summary-strip>div,html[data-theme="light"] .dashboard-quick-action,html[data-theme="light"] .summary-mini,html[data-theme="light"] .app-info-status-card,html[data-theme="light"] .app-release-body{background:#FFFFFF;color:#102744;border-color:#DCE8F3;box-shadow:0 7px 20px rgba(47,84,122,.045)}
html[data-theme="light"] .settings-room{overflow:hidden}html[data-theme="light"] .settings-room-panel{background:#F8FBFE;border-top-color:#E2ECF5}html[data-theme="light"] .settings-main-card.is-open{background:linear-gradient(100deg,#ECFBF8,#F1F6FF)}
html[data-theme="light"] .academic-search,html[data-theme="light"] .admin-search-wide{background:#FFFFFF;border-color:#D8E6F3}html[data-theme="light"] .academic-search input,html[data-theme="light"] .settings-search-input,html[data-theme="light"] .admin-toolbar-input{color:#102744}
html[data-theme="light"] .summary-mini-icon,html[data-theme="light"] .dashboard-quick-action>span,html[data-theme="light"] .academic-type-icon,html[data-theme="light"] .class-leader-icon{background:#EAFBF7;color:#06877E}
html[data-theme="light"] .class-leader-card{background:linear-gradient(100deg,#F0FCF9,#F4F8FF);border-color:#D1ECE8}
html[data-theme="light"] .app-info-hero{background:linear-gradient(120deg,#FFFFFF,#F2F7FF 58%,#ECFBF8);border-color:#D8E7F2}html[data-theme="light"] .app-info-logo{background:#F4F8FD;border-color:#D8E7F2}
html[data-theme="light"] .app-release-group>strong{color:#365976}html[data-theme="light"] .app-release-card.is-latest .app-release-body{background:linear-gradient(100deg,#F0FCF9,#F4F8FF);border-color:#CFEAE6}
html[data-theme="light"] .modal{background:#FFFFFF;color:#102744;border-color:#D9E7F2;box-shadow:0 24px 70px rgba(36,70,107,.16)}html[data-theme="light"] .drawer{background:rgba(255,255,255,.97);border-color:#D8E6F2;box-shadow:0 22px 55px rgba(37,72,109,.16)}
html[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.96);border-color:#D9E6F1;box-shadow:0 -10px 30px rgba(47,83,120,.07)}html[data-theme="light"] .bottom-item{color:#7188A1}html[data-theme="light"] .bottom-item:not(.bottom-home-cta).active{color:#07877D}html[data-theme="light"] .bottom-item:not(.bottom-home-cta).active .bottom-icon-wrap{background:#EAFBF7;box-shadow:inset 0 0 0 1px #CFECE7}
html[data-theme="light"] .skeleton{background:#EAF1F7!important}html[data-theme="light"] .skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
html[data-theme="light"] .toast{background:#FFFFFF;color:#173C62;border-color:#CFE9E5;box-shadow:0 18px 44px rgba(45,81,119,.15)}

@media(max-width:900px){
  .dashboard-summary-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.summary-mini{min-height:58px;padding:8px 7px;display:grid;justify-items:center;text-align:center;gap:4px}.summary-mini-icon{width:31px;height:31px;flex-basis:auto;border-radius:10px}.summary-mini-icon .icon{width:17px;height:17px}.summary-mini-copy{justify-items:center}.summary-mini-copy strong{font-size:16px}.summary-mini-copy small{font-size:7.2px}
  .class-leader-card{grid-template-columns:auto 1fr}.class-leader-control{grid-column:1/-1}.app-info-hero{grid-template-columns:auto 1fr}.app-info-hero>.btn{grid-column:1/-1;width:100%}.app-info-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){.dashboard-summary-strip{gap:5px}.summary-mini{padding-left:4px;padding-right:4px}.summary-mini-copy small{font-size:6.8px}.class-leader-control{grid-template-columns:1fr}.class-leader-control .btn{width:100%}}

/* Light theme carousel: tetap premium tetapi tidak terasa seperti blok dark-mode. */
html[data-theme="light"] .dashboard-carousel{background:#EAF3FC;border-color:#D4E3F1;box-shadow:0 14px 36px rgba(52,88,126,.09)}
html[data-theme="light"] .dashboard-carousel-slide.tone-a{background:linear-gradient(120deg,#F7FBFF 0%,#EAF3FF 58%,#DDF8F3 132%)}
html[data-theme="light"] .dashboard-carousel-slide.tone-b{background:linear-gradient(120deg,#F8FBFF 0%,#E8F1FC 60%,#DFF5F3 128%)}
html[data-theme="light"] .dashboard-carousel-slide.tone-c{background:linear-gradient(120deg,#F7FBFF 0%,#EDF3FD 56%,#DDF7EF 130%)}
html[data-theme="light"] .dashboard-carousel-slide::before{background:linear-gradient(110deg,rgba(25,118,255,.025),transparent 44%,rgba(34,224,199,.055))}
html[data-theme="light"] .carousel-eyebrow{color:#087E78}
html[data-theme="light"] .carousel-copy h2{color:#143758}
html[data-theme="light"] .carousel-copy p{color:#617B95}
html[data-theme="light"] .carousel-action{background:rgba(255,255,255,.82);color:#194566;border-color:#CBE5E2;box-shadow:0 5px 16px rgba(47,82,118,.06)}
html[data-theme="light"] .carousel-action .icon{color:#07877D}
html[data-theme="light"] .carousel-dot{background:#B9CBDB}
html[data-theme="light"] .carousel-dot.active{background:#16AFA3}

/* ============================================================
   KelasKu v4.0.0 — PHASE 4 • INTERACTION & PRESENCE
   Precision layout • safe actions • class timeline • avatar
   NOTE: Mobile Diamond Home CTA geometry is intentionally LOCKED.
   ============================================================ */

/* Desktop: collapsible sidebar / hamburger. */
.shell-desktop-menu{display:grid;flex:0 0 auto}.shell-mobile-quick{display:none}
@media(min-width:901px){
  .dashboard,.sidebar,.main{transition:grid-template-columns .22s var(--ease),width .22s var(--ease),padding .22s var(--ease)}
  .dashboard.sidebar-collapsed{grid-template-columns:88px minmax(0,1fr)}
  .dashboard.sidebar-collapsed .sidebar{padding-inline:13px;align-items:stretch}
  .dashboard.sidebar-collapsed .sidebar .brand{justify-content:center}.dashboard.sidebar-collapsed .sidebar .brand-word,.dashboard.sidebar-collapsed .sidebar .brand-sub{display:none}
  .dashboard.sidebar-collapsed .nav-item{justify-content:center;padding-inline:0}.dashboard.sidebar-collapsed .nav-item>span:last-child{display:none}
  .dashboard.sidebar-collapsed .sidebar-foot{display:none}
  .dashboard.sidebar-collapsed .nav-home-cta .nav-diamond{margin-inline:auto}
}
@media(max-width:900px){.shell-desktop-menu{display:none}.shell-mobile-quick{display:grid}}

/* Dashboard summary: exactly 2 x 2. */
.dashboard-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-mini{min-height:68px}.summary-mini .icon{pointer-events:none}
.list-row-button{width:100%;appearance:none;color:var(--text);text-align:left;cursor:pointer;border:1px solid rgba(80,160,255,.16);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.list-row-button:hover{transform:translateY(-1px);border-color:rgba(34,224,199,.28);background:rgba(34,224,199,.055)}.list-row-button>.icon{margin-left:auto;align-self:center;color:var(--tosca);width:18px;height:18px}
@media(max-width:900px){.dashboard-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.summary-mini{min-height:64px;display:flex;justify-items:initial;text-align:left;padding:9px 11px}.summary-mini-icon{width:35px;height:35px;flex:0 0 35px}.summary-mini-copy{justify-items:start}.summary-mini-copy strong{font-size:18px}.summary-mini-copy small{font-size:8px}}
@media(max-width:420px){.dashboard-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.summary-mini{padding:8px 9px}.summary-mini-copy small{font-size:7.4px}}

/* Class room has a deliberate reading width instead of stretching across every desktop pixel. */
.class-room-page{width:min(1120px,100%);margin-inline:auto}.class-room-page .page-head{margin-inline:auto}
.class-room-page .class-hero{grid-template-columns:auto minmax(0,1fr) minmax(155px,188px);padding:20px}.class-room-page .class-hero-icon{width:60px;height:60px;border-radius:18px}.class-room-page .class-hero-icon .icon{width:31px;height:31px}
.class-badge-line,.member-badge-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.leader-role-pill{color:#07263A;background:linear-gradient(100deg,#90F5CF,#31E4D0);border-color:transparent}
.room-tabs{padding:5px;gap:4px}.room-tab{padding:9px 11px;font-size:9.5px}
.member-avatar{overflow:hidden}.member-avatar img,.profile-avatar img,.shell-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.shell-avatar-img{border-radius:10px}

/* Leader election. */
.leader-election-box{margin:0 0 15px;padding:14px;border:1px solid rgba(91,160,240,.14);border-radius:17px;background:rgba(5,25,57,.42)}
.leader-election-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.leader-election-head>div{display:grid;gap:2px}.leader-election-head strong{font-size:12px}.leader-election-head small{font-size:8.5px;color:var(--muted)}
.leader-poll-card{margin-top:12px;padding:13px;border-radius:15px;border:1px solid rgba(34,224,199,.14);background:linear-gradient(110deg,rgba(34,224,199,.055),rgba(25,118,255,.045))}.leader-poll-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.leader-poll-title strong{font-size:12px}.leader-poll-title p{margin:3px 0 0;color:var(--muted);font-size:9px}.poll-time{margin:8px 0;color:#7E9AB9;font-size:8.5px}.poll-candidates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.poll-candidate{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;padding:9px;border:1px solid rgba(87,155,238,.12);border-radius:13px;background:rgba(8,31,67,.44);cursor:pointer}.poll-candidate.selected{border-color:rgba(34,224,199,.3);background:rgba(34,224,199,.065)}.poll-candidate input{accent-color:var(--tosca)}.poll-candidate .member-avatar{width:34px;height:34px;border-radius:10px;font-size:9px}.poll-candidate>span:last-child{display:grid;gap:1px}.poll-candidate strong{font-size:9.5px}.poll-candidate small{font-size:7.8px;color:var(--muted)}
.inline-request-status{display:block;margin-top:4px;font-size:8px}.inline-request-status.progress{color:#9CF4E8}.inline-request-status.ok{color:#75E8BA}.inline-request-status.error{color:#FDA4AF}

/* Class zig-zag timeline. */
.class-timeline-panel{overflow:hidden}.class-zigzag-timeline{position:relative;display:grid;gap:8px;padding:8px 0}.class-zigzag-timeline::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--tosca),rgba(91,160,240,.2),transparent);opacity:.55}.class-timeline-item{position:relative;width:50%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start}.class-timeline-item.left{padding-right:23px}.class-timeline-item.right{margin-left:50%;padding-left:23px}.class-timeline-item.right .class-timeline-node{position:absolute;left:-13px}.class-timeline-item.left .class-timeline-node{position:absolute;right:-13px}.class-timeline-node{z-index:2;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#1C79F7,#2BE2CE);color:#041B30;box-shadow:0 0 0 4px #082451}.class-timeline-node .icon{width:14px;height:14px}.class-timeline-card{padding:11px 12px;border:1px solid rgba(90,159,239,.13);border-radius:14px;background:rgba(7,29,63,.52)}.class-timeline-card>span{font-size:7px;color:var(--tosca);font-weight:800;letter-spacing:.08em}.class-timeline-card strong{display:block;margin-top:3px;font-size:10.5px}.class-timeline-card p{margin:4px 0 0;color:var(--muted);font-size:8.5px;line-height:1.5}

/* Attendance auto/link surfaces. */
.auto-attendance-chip,.attendance-window-chip{display:inline-flex;align-items:center;width:max-content;min-height:20px;padding:3px 7px;border-radius:999px;font-size:7px;font-weight:800;letter-spacing:.05em}.auto-attendance-chip{color:#8CF4E8;background:rgba(34,224,199,.08);border:1px solid rgba(34,224,199,.18)}.attendance-window-chip.window-open{color:#7BF0C2;background:rgba(45,212,191,.09);border:1px solid rgba(45,212,191,.2)}.attendance-window-chip.window-upcoming{color:#F9D980;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.17)}.attendance-window-chip.window-closed{color:#99AFC7;background:rgba(115,145,182,.08);border:1px solid rgba(115,145,182,.16)}
.academic-row-open{appearance:none;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;flex:1;text-align:left;cursor:pointer;padding:0}.attendance-link-button{flex:0 0 auto}.inline-actions{display:flex;gap:9px;margin-top:6px}.input-suffix{position:relative}.input-suffix .control{padding-right:54px}.input-suffix>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:8px}.schedule-auto-settings{padding:12px;border:1px solid rgba(34,224,199,.13);border-radius:14px;background:rgba(34,224,199,.04)}.attendance-link-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;margin:0 0 14px;border:1px solid rgba(34,224,199,.15);border-radius:14px;background:rgba(34,224,199,.05)}.attendance-link-box>div{display:grid;gap:2px;min-width:0}.attendance-link-box small{color:var(--muted);font-size:8px}.attendance-link-box strong{font-size:8.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#A6F8ED}
.attendance-landing-page{width:min(860px,100%);margin-inline:auto}.attendance-landing-card{padding:22px}.attendance-landing-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px}.attendance-landing-hero h2{margin:3px 0 2px;font-size:20px}.attendance-landing-hero p{margin:0;color:var(--muted);font-size:10px}.attendance-window-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}.attendance-window-info>div{padding:12px;border-radius:13px;border:1px solid rgba(91,160,240,.13);background:rgba(8,31,67,.43);display:grid;gap:3px}.attendance-window-info small{font-size:7.5px;color:var(--muted)}.attendance-window-info strong{font-size:9.5px}.attendance-upcoming-panel{margin-top:14px}

/* Profile picture upload. */
.avatar-editor{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:15px;padding:14px;margin:0 0 17px;border:1px solid rgba(91,160,240,.14);border-radius:17px;background:rgba(7,29,63,.46)}.avatar-preview{width:78px;height:78px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#1A65D0,#27E0C9);color:#04213B;font-size:23px;font-weight:900;box-shadow:0 12px 26px rgba(0,12,40,.25)}.avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-editor-copy{display:grid;gap:3px}.avatar-editor-copy>strong{font-size:12px}.avatar-editor-copy>small{font-size:8.5px;color:var(--muted)}.avatar-actions{margin-top:7px}.profile-avatar{overflow:hidden}

/* KelasKu confirmation dialog — replaces browser confirm(). */
.app-dialog-backdrop{position:fixed;inset:0;z-index:240;background:rgba(1,8,21,.72);backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}.app-dialog{width:min(430px,100%);padding:22px;border-radius:22px;border:1px solid rgba(87,166,255,.23);background:linear-gradient(160deg,#0C2D60,#071B3D);box-shadow:0 28px 80px rgba(0,0,0,.38);display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px}.app-dialog-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.08)}.app-dialog-icon.danger{color:#FDA4AF;background:rgba(251,113,133,.08)}.app-dialog-copy h2{margin:0;font-size:16px}.app-dialog-copy p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.6}.app-dialog-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:5px}.btn-danger-solid{color:#FFF;background:linear-gradient(100deg,#E34E68,#FB7185);box-shadow:0 10px 25px rgba(251,113,133,.16)}

/* App Info: useful about section + larger update history with hidden scrollbar. */
.app-info-page{width:min(1080px,100%);margin-inline:auto}.about-kelasku{margin-top:14px}.about-kelasku>.panel-head>.icon{color:var(--tosca)}.about-kelasku-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.about-kelasku-grid article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:13px;border-radius:15px;border:1px solid rgba(91,160,240,.12);background:rgba(7,29,63,.42)}.about-kelasku-grid article>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.07)}.about-kelasku-grid .icon{width:19px;height:19px}.about-kelasku-grid strong{font-size:10.5px}.about-kelasku-grid p{margin:3px 0 0;color:var(--muted);font-size:8.5px;line-height:1.55}
.app-release-scroll{max-height:680px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-width:none}.app-release-scroll::-webkit-scrollbar{width:0;height:0;display:none}.app-release-card{grid-template-columns:31px minmax(0,1fr);gap:12px;padding-bottom:18px}.app-release-rail span{width:13px;height:13px;margin-top:10px}.app-release-body{padding:15px 17px;border-radius:17px}.app-release-version{font-size:9px}.app-release-body header strong{font-size:13px}.app-release-body header small{font-size:8.5px}.app-release-body header>b{font-size:7.5px}.app-release-body>p{font-size:9.8px;line-height:1.6;margin:9px 0}.app-release-group>strong{font-size:9px}.app-release-group ul{font-size:9.2px;line-height:1.65}.release-load-sentinel{height:2px}

/* Light mode parity for new Phase 4 surfaces. */
html[data-theme="light"] .leader-election-box,html[data-theme="light"] .leader-poll-card,html[data-theme="light"] .poll-candidate,html[data-theme="light"] .class-timeline-card,html[data-theme="light"] .attendance-window-info>div,html[data-theme="light"] .avatar-editor,html[data-theme="light"] .about-kelasku-grid article,html[data-theme="light"] .attendance-link-box{background:#FFFFFF;color:#102744;border-color:#DCE8F3;box-shadow:0 7px 20px rgba(47,84,122,.04)}
html[data-theme="light"] .class-timeline-node{box-shadow:0 0 0 4px #F3F8FE}html[data-theme="light"] .class-zigzag-timeline::before{background:linear-gradient(#1BB8AB,#C8DAEC,transparent)}
html[data-theme="light"] .app-dialog{background:#FFFFFF;color:#102744;border-color:#D7E6F2;box-shadow:0 28px 70px rgba(40,75,112,.18)}html[data-theme="light"] .app-dialog-copy p{color:#617A94}

@media(max-width:760px){
  .class-room-page{width:100%}.class-room-page .class-hero{grid-template-columns:auto minmax(0,1fr);gap:12px}.class-room-page .class-code-stack{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.room-overview{grid-template-columns:1fr}.poll-candidates{grid-template-columns:1fr}
  .class-zigzag-timeline::before{left:13px}.class-timeline-item,.class-timeline-item.right{width:100%;margin-left:0;padding:0 0 0 38px}.class-timeline-item.left .class-timeline-node,.class-timeline-item.right .class-timeline-node{left:0;right:auto}.class-timeline-card{width:100%}
  .attendance-landing-hero{grid-template-columns:auto 1fr}.attendance-landing-hero>.attendance-window-chip{grid-column:1/-1}.attendance-window-info{grid-template-columns:1fr}.about-kelasku-grid{grid-template-columns:1fr}.app-release-scroll{max-height:620px}
}
@media(max-width:520px){.class-room-page .class-hero{padding:15px}.class-room-page .class-hero-icon{width:48px;height:48px;border-radius:15px}.class-room-page .class-hero-icon .icon{width:25px;height:25px}.class-code-stack{grid-template-columns:1fr 1fr!important}.member-row{grid-template-columns:auto minmax(0,1fr)}.member-actions{grid-column:1/-1;justify-content:flex-end}.role-select{width:min(180px,100%)}.leader-election-head{align-items:flex-start}.leader-election-head .btn{font-size:8.5px;padding:9px}.avatar-editor{grid-template-columns:1fr;justify-items:center;text-align:center}.avatar-actions{justify-content:center}.app-release-scroll{max-height:570px}.app-info-hero{padding:15px}.app-info-logo{width:58px;height:58px}.app-info-logo img{width:46px;height:46px}}
.default-profile-icon{display:grid;place-items:center;width:100%;height:100%;color:#06253D}.default-profile-icon .icon{width:34px;height:34px;stroke-width:1.8}.profile-avatar .default-profile-icon .icon{width:28px;height:28px}
.default-avatar-icon{display:grid;place-items:center;width:100%;height:100%;color:#06253D}.default-avatar-icon .icon{width:28px;height:28px;stroke-width:1.9}.member-avatar .default-avatar-icon .icon{width:19px;height:19px}.avatar-preview .default-avatar-icon .icon{width:36px;height:36px}

/* ============================================================
   KelasKu v4.0.0 — FINAL PRECISION PATCH
   ============================================================ */

/* Room menu: desktop tidak lagi menjadi satu bar super lebar. */
@media(min-width:761px){
  .class-room-page .room-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    overflow:visible;
    padding:6px;
  }
  .class-room-page .room-tab{
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 9px;
    text-align:center;
    white-space:normal;
    line-height:1.25;
  }
}
@media(max-width:760px){
  .class-room-page .room-tabs{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .class-room-page .room-tabs::-webkit-scrollbar{display:none}
  .class-room-page .room-tab{flex:0 0 auto;white-space:nowrap}
}

/* Request actions: visual state selesai tanpa menunggu fetch kedua. */
.join-request-row{transition:opacity .18s ease,transform .18s ease,max-height .2s ease,padding .2s ease,margin .2s ease}
.join-request-row[data-busy="1"]{opacity:.78}
.join-request-row.is-resolved{opacity:0;transform:translateX(8px);pointer-events:none}

/* Default profile picture = icon, bukan inisial acak. */
.default-avatar-icon{display:grid;place-items:center;width:100%;height:100%;color:#BDF9EF}
.default-avatar-icon .icon{width:45%;height:45%;stroke-width:1.8}
.member-avatar .default-avatar-icon,.profile-avatar .default-avatar-icon{background:linear-gradient(145deg,rgba(25,118,255,.28),rgba(34,224,199,.16))}
html[data-theme="light"] .default-avatar-icon{color:#087E78}
html[data-theme="light"] .member-avatar .default-avatar-icon,html[data-theme="light"] .profile-avatar .default-avatar-icon{background:linear-gradient(145deg,#E6F2FF,#E5FBF6)}

/* Desktop hamburger lebih terasa sebagai control layout. */
@media(min-width:901px){
  .shell-desktop-menu{order:-2;background:rgba(13,48,98,.74);border-color:rgba(93,166,247,.2)}
  .dashboard.sidebar-collapsed .shell-desktop-menu{color:var(--tosca);border-color:rgba(34,224,199,.28)}
}

/* Carousel tetap loop 1 → 2 → 3 → 1; cegah selection saat swipe. */
.dashboard-carousel,.dashboard-carousel-track,.dashboard-carousel-slide{-webkit-user-select:none;user-select:none}
.dashboard-carousel-track{touch-action:pan-y}

/* Timeline aplikasi: nyaman dibaca, kira-kira 5 release terlihat lalu scroll internal. */
.app-release-scroll{max-height:min(72vh,760px);scrollbar-width:none;-ms-overflow-style:none}
.app-release-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.app-release-body header strong{font-size:14px;line-height:1.35}
.app-release-body header small{font-size:9.4px}
.app-release-version{font-size:9.5px}
.app-release-body>p{font-size:10.4px;line-height:1.65}
.app-release-group>strong{font-size:9.6px}
.app-release-group ul{font-size:9.8px;line-height:1.68}
@media(max-width:760px){
  .app-release-scroll{max-height:min(68vh,640px)}
  .app-release-body{padding:14px 15px}
  .app-release-body header strong{font-size:12.5px}
  .app-release-body>p{font-size:9.5px}
  .app-release-group ul{font-size:9.1px}
}

/* Class list dashboard: benar-benar terlihat clickable. */
.list-row-button{position:relative;padding-right:38px}
.list-row-button>svg.icon:last-child{position:absolute;right:13px;top:50%;transform:translateY(-50%)}
.list-row-button:focus-visible{outline:2px solid rgba(34,224,199,.52);outline-offset:2px}

/* Attendance landing dibatasi agar tidak terlalu melebar. */
.attendance-landing-page .academic-row-card{min-height:74px}

/* Icon navbar selain CTA diperbesar tanpa mengubah Diamond CTA LOCK. */
@media(max-width:900px){
  .bottom-item:not(.bottom-home-cta) .bottom-icon-wrap .icon{width:25px;height:25px}
}
@media(max-width:370px){
  .bottom-item:not(.bottom-home-cta) .bottom-icon-wrap .icon{width:23px;height:23px}
}

/* ============================================================
   KelasKu v5.0.0 — PHASE 5
   Refinement • Communication • Experience
   ============================================================ */

/* Sidebar brand acts as the desktop collapse control. */
.sidebar-brand-toggle{appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;text-align:left;cursor:pointer;border-radius:16px;transition:transform .18s ease,background .18s ease}
.sidebar-brand-toggle:hover{background:rgba(34,224,199,.055)}
.sidebar-brand-toggle:active{transform:scale(.985)}
.sidebar-brand-toggle:focus-visible{outline:2px solid rgba(34,224,199,.45);outline-offset:4px}
.dashboard.sidebar-collapsed .sidebar-brand-toggle .brand{justify-content:center}
.dashboard.sidebar-collapsed .sidebar-brand-toggle{display:grid;place-items:center}
@media(min-width:901px){.shell-desktop-menu{display:none!important}}

/* Room hero: one clean hierarchy, codes are compact metadata not nested cards. */
.class-room-page .class-hero-v5{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;padding:20px}
.class-hero-v5 .class-hero-main{min-width:0}
.class-hero-v5 .class-badge-line{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.class-hero-v5 .class-hero-main h2{margin:0;font-size:22px;line-height:1.25}
.class-code-inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.class-code-inline-item{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:7px;min-height:38px;padding:7px 9px 7px 11px;border:1px solid rgba(71,160,231,.16);border-radius:12px;background:rgba(8,34,72,.42)}
.class-code-inline-item>span{font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.class-code-inline-item>strong{font-size:9.5px;color:var(--tosca);letter-spacing:.02em}
.class-code-inline-item .mini{width:28px;height:28px;border-radius:9px}
html[data-theme="light"] .class-code-inline-item{background:#F7FBFF;border-color:#DCEAF5}

/* Member row: badge top-right, controls below it. */
.member-row-v5{position:relative;grid-template-columns:auto minmax(0,1fr) minmax(160px,auto);align-items:center;padding:14px 12px;min-height:76px}
.member-row-v5 .member-info{padding-right:8px}
.member-badge-top{position:absolute;right:12px;top:10px;display:flex;justify-content:flex-end;max-width:50%}
.member-row-v5 .member-actions{grid-column:3;justify-self:end;align-self:end;margin-top:22px}
.member-row-v5 .role-pill{white-space:nowrap}
@media(max-width:620px){
  .member-row-v5{grid-template-columns:auto minmax(0,1fr);padding-top:38px}
  .member-badge-top{top:9px;right:10px;max-width:calc(100% - 22px)}
  .member-row-v5 .member-actions{grid-column:1/-1;justify-self:stretch;justify-content:flex-end;margin-top:4px}
}

/* Timeline 2.0 filters. */
.timeline-filter-row,.notification-filter{display:flex;gap:7px;overflow:auto;scrollbar-width:none;padding:2px 0 12px}
.timeline-filter-row::-webkit-scrollbar,.notification-filter::-webkit-scrollbar{display:none}
.filter-chip{appearance:none;border:1px solid rgba(91,160,240,.15);background:rgba(7,29,63,.48);color:var(--muted);border-radius:999px;padding:8px 11px;font-size:8.8px;font-weight:700;white-space:nowrap;cursor:pointer}
.filter-chip.active{color:#04243B;background:linear-gradient(110deg,#63E7BE,#20D8C9);border-color:transparent;box-shadow:0 8px 20px rgba(34,224,199,.12)}
html[data-theme="light"] .filter-chip{background:#FFF;border-color:#DCE8F3;color:#5B738C}
html[data-theme="light"] .filter-chip.active{color:#07384A;background:linear-gradient(110deg,#7BE8C7,#45DACC)}

/* Class Chat */
.message-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);min-height:620px;padding:0;overflow:hidden}
.message-room-list{padding:12px;border-right:1px solid rgba(91,160,240,.12);display:flex;flex-direction:column;gap:7px;min-width:0;background:rgba(4,21,49,.34)}
.message-room-head{display:flex;align-items:center;justify-content:space-between;padding:6px 5px 10px}.message-room-head strong{font-size:11px}.message-room-head small{font-size:8px;color:var(--muted)}
.message-room-card{appearance:none;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;text-align:left;border:1px solid transparent;border-radius:14px;padding:10px;background:transparent;color:var(--text);cursor:pointer}
.message-room-card:hover,.message-room-card.active{background:rgba(20,74,137,.34);border-color:rgba(34,224,199,.15)}
.message-room-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;color:var(--tosca);background:rgba(34,224,199,.07)}
.message-room-icon .icon{width:19px;height:19px}.message-room-copy{min-width:0;display:grid;gap:3px}.message-room-copy strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-room-copy small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-room-card>b{min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-size:8px;color:#04243B;background:var(--tosca)}
.message-conversation{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(5,20,45,.22)}
.message-conversation-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(91,160,240,.12)}.message-conversation-head>div{display:grid}.message-conversation-head strong{font-size:12px}.message-conversation-head small{font-size:8px;color:var(--muted)}
.message-stream{min-height:0;max-height:62vh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}.message-stream::-webkit-scrollbar{display:none}
.message-bubble{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:end;max-width:min(78%,620px)}.message-bubble.mine{align-self:flex-end;grid-template-columns:minmax(0,1fr) auto}.message-bubble.mine .message-avatar{grid-column:2}.message-bubble.mine .message-body{grid-column:1;grid-row:1;background:linear-gradient(135deg,rgba(18,105,178,.65),rgba(17,113,123,.58));border-color:rgba(34,224,199,.18)}
.message-avatar{width:31px;height:31px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#1A65D0,#27E0C9)}.message-avatar img{width:100%;height:100%;object-fit:cover}.message-avatar .default-avatar-icon .icon{width:16px;height:16px}
.message-body{border:1px solid rgba(91,160,240,.12);background:rgba(9,33,70,.62);border-radius:15px;padding:9px 11px}.message-meta{display:flex;gap:8px;align-items:center;justify-content:space-between}.message-meta strong{font-size:8.6px}.message-meta span{font-size:7px;color:var(--muted)}.message-body p{margin:4px 0 0;font-size:9.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.message-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px;border-top:1px solid rgba(91,160,240,.12)}.message-composer textarea{resize:none;min-height:48px;max-height:110px}.message-composer .btn{align-self:stretch;min-width:88px}
.message-empty{display:grid;place-items:center;text-align:center;min-height:180px;color:var(--muted);font-size:9.5px}.message-empty.compact{min-height:100px}
html[data-theme="light"] .message-room-list{background:#F7FBFF;border-color:#DCE8F3}html[data-theme="light"] .message-conversation{background:#FCFEFF}html[data-theme="light"] .message-room-card.active,html[data-theme="light"] .message-room-card:hover{background:#EAF6FF;border-color:#CDE9E6}html[data-theme="light"] .message-body{background:#FFF;border-color:#DCE8F3;color:#102744}html[data-theme="light"] .message-bubble.mine .message-body{background:linear-gradient(135deg,#E6F4FF,#E8FBF6);border-color:#BFE9E2}
@media(max-width:760px){.message-layout{grid-template-columns:1fr;min-height:0}.message-room-list{border-right:0;border-bottom:1px solid rgba(91,160,240,.12);display:flex;flex-direction:row;overflow:auto;padding:9px;scrollbar-width:none}.message-room-list::-webkit-scrollbar{display:none}.message-room-head{display:none}.message-room-card{flex:0 0 210px}.message-stream{max-height:52vh}.message-bubble{max-width:90%}}

/* Notification Center 2.0 */
.notification-filter{margin-bottom:10px}.notification-center{padding:10px 13px}.notification-list{display:grid;gap:6px}.notification-center-row{appearance:none;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;text-align:left;padding:12px;border:1px solid rgba(91,160,240,.11);border-radius:14px;background:rgba(7,29,63,.38);color:var(--text);cursor:pointer}.notification-center-row:hover{border-color:rgba(34,224,199,.22);background:rgba(9,39,78,.58)}.notification-center-row.unread{background:linear-gradient(100deg,rgba(34,224,199,.075),rgba(25,118,255,.055));border-color:rgba(34,224,199,.16)}.notification-center-icon{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.07)}.notification-center-icon .icon{width:18px;height:18px}.notification-center-row>span:nth-child(2){display:grid;gap:3px}.notification-center-row small{font-size:7.5px;color:var(--tosca);font-weight:700}.notification-center-row strong{font-size:10.5px}.notification-center-row p{margin:0;color:var(--muted);font-size:8.8px;line-height:1.5}.notification-center-row>b{width:8px;height:8px;border-radius:50%;background:var(--tosca);margin-top:8px}
html[data-theme="light"] .notification-center-row{background:#FFF;border-color:#DFEAF4;color:#102744}html[data-theme="light"] .notification-center-row.unread{background:linear-gradient(100deg,#F0FFFB,#F3F8FF)}

/* Profile 2.0 */
.profile-overview{margin:14px 0}.profile-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.profile-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;padding:11px;border-radius:14px;border:1px solid rgba(91,160,240,.12);background:rgba(7,29,63,.38)}.profile-stat>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.07)}.profile-stat .icon{width:18px;height:18px}.profile-stat>div{display:grid}.profile-stat strong{font-size:16px}.profile-stat small{font-size:8px;color:var(--muted)}
html[data-theme="light"] .profile-stat{background:#FFF;border-color:#DFEAF4}
@media(max-width:700px){.profile-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Small visual precision */
.class-room-page{max-width:1120px;margin-inline:auto}.room-tabs{scrollbar-width:none}.room-tabs::-webkit-scrollbar{display:none}
@media(max-width:520px){.class-code-inline{display:grid;grid-template-columns:1fr 1fr}.class-code-inline-item{grid-template-columns:1fr auto}.class-code-inline-item>span{grid-column:1/-1}.class-hero-v5 .class-hero-main h2{font-size:18px}}
.message-role{margin-top:2px;font-size:6.9px;font-weight:800;letter-spacing:.04em;color:var(--tosca);text-transform:uppercase}
.load-older-messages{align-self:center;appearance:none;border:1px solid rgba(91,160,240,.15);background:rgba(7,29,63,.5);color:var(--muted);border-radius:999px;padding:7px 11px;font-size:8px;font-weight:700;cursor:pointer}.load-older-messages:hover{color:var(--tosca);border-color:rgba(34,224,199,.24)}html[data-theme="light"] .load-older-messages{background:#FFF;border-color:#DCE8F3}


/* ============================================================
   KelasKu v5.1.0 — CLASS ROOM PRECISION PATCH
   Hero code rail • room navigation • member badges • election room • WA-like chat
   ============================================================ */
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

/* Hero: codes stay on the right in two clean rows. */
.class-room-page .class-hero-v51{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(210px,250px);align-items:center;gap:18px;padding:19px 20px}
.class-hero-v51 .class-hero-main{min-width:0}.class-hero-v51 .class-hero-main h2{margin:0;font-size:21px;line-height:1.25}.class-hero-v51 .class-hero-main>p{margin:4px 0 7px}
.class-hero-code-rail{display:grid;gap:7px;align-self:stretch;align-content:center}
.class-code-rail-item{min-height:48px;padding:8px 9px 8px 11px;border-left:2px solid rgba(34,224,199,.34);border-radius:10px;background:linear-gradient(90deg,rgba(34,224,199,.05),rgba(16,53,97,.16));display:grid;gap:4px}
.class-code-rail-item>span{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#6F8DAE}.class-code-rail-item>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.class-code-rail-item strong{font-size:9.5px;color:var(--tosca);letter-spacing:.025em}.class-code-rail-item .mini{width:27px;height:27px;border-radius:9px}
html[data-theme="light"] .class-code-rail-item{background:linear-gradient(90deg,#F1FFFB,#F7FBFF);border-left-color:#3BD8C7}

/* Room navigation: primary rooms are obvious, secondary academic/manage controls live below. */
.room-navigation-shell{margin:12px 0 13px;padding:7px;border:1px solid rgba(83,154,236,.13);border-radius:17px;background:rgba(4,22,51,.34)}
.room-main-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.room-main-item{position:relative;appearance:none;border:1px solid transparent;background:transparent;color:#8EA8C5;border-radius:12px;min-width:0;min-height:48px;padding:7px 5px;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:8.5px;font-weight:700;cursor:pointer;transition:.16s ease}
.room-main-item:hover{color:#C9E1F8;background:rgba(25,91,158,.2)}.room-main-item.active{color:#071F35;background:linear-gradient(105deg,#66E7C2,#28D8CB);box-shadow:0 8px 20px rgba(34,224,199,.11)}
.room-main-icon{display:grid;place-items:center}.room-main-icon .icon{width:17px;height:17px;stroke-width:1.6}.room-main-item>b{min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:7px;background:rgba(34,224,199,.12);color:var(--tosca)}.room-main-item.active>b{background:rgba(3,30,48,.12);color:#06243A}
.room-subnav{display:flex;justify-content:center;gap:5px;overflow:auto;scrollbar-width:none;padding:7px 2px 1px}.room-subnav::-webkit-scrollbar{display:none}.room-subnav[hidden]{display:none}
.room-sub-item{appearance:none;border:1px solid rgba(85,155,237,.11);background:rgba(9,34,70,.35);color:#7F9CB9;border-radius:10px;padding:7px 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:inherit;font-size:7.8px;font-weight:700;cursor:pointer}.room-sub-item .icon{width:14px;height:14px;stroke-width:1.6}.room-sub-item.active{color:#7BF1E1;border-color:rgba(34,224,199,.22);background:rgba(34,224,199,.055)}
html[data-theme="light"] .room-navigation-shell{background:#F7FBFF;border-color:#DCE8F3}html[data-theme="light"] .room-main-item{color:#617B94}html[data-theme="light"] .room-main-item:hover{background:#ECF5FC;color:#173B5B}html[data-theme="light"] .room-sub-item{background:#FFF;border-color:#DDE9F3;color:#617B94}

/* Members: identity left, independent badges + controls right. */
.member-list-v51{gap:8px}.member-row-v51{grid-template-columns:auto minmax(0,1fr) minmax(210px,auto);align-items:center;gap:11px;padding:12px 13px;min-height:72px}
.member-row-v51 .member-avatar{width:42px;height:42px;border-radius:13px}.member-row-v51 .member-info{min-width:0;display:grid;gap:2px}.member-row-v51 .member-info strong{font-size:10.5px}.member-row-v51 .member-info span{font-size:7.8px}.member-row-v51 .member-info small{font-size:7.5px;color:var(--muted)}
.member-side{display:grid;justify-items:end;gap:8px}.member-badges{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.member-badges .role-pill{font-size:7.2px;padding:4px 7px;white-space:nowrap}.member-row-v51 .member-actions{display:flex;justify-content:flex-end;align-items:center;gap:7px}.member-row-v51 .role-select{width:150px;min-height:32px;padding-block:5px;font-size:8px}
.role-pill.role-member{color:#C7D6E8;background:rgba(93,121,155,.12);border-color:rgba(123,151,184,.14)}

/* Election is its own room with history; no longer clutters member management. */
.election-room-panel{padding:15px}.election-room-head{align-items:center}.election-idle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;padding:14px;border:1px dashed rgba(90,160,240,.18);border-radius:14px;color:var(--muted)}.election-idle-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.06)}.election-idle-icon .icon{width:20px;height:20px}.election-idle strong{display:block;color:var(--text);font-size:10.5px}.election-idle p{margin:3px 0 0;font-size:8.5px}
.active-poll-card{margin-top:0}.election-history-head{display:flex;align-items:center;justify-content:space-between;margin:17px 0 8px}.election-history-head>div{display:grid;gap:2px}.election-history-head strong{font-size:10.5px}.election-history-head small{font-size:7.5px;color:var(--muted)}.election-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.election-history-card{padding:12px;border:1px solid rgba(91,160,240,.12);border-radius:15px;background:rgba(7,29,63,.4)}.election-history-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.election-history-top>div{display:grid;gap:2px}.election-history-top strong{font-size:9.5px}.election-history-top small{font-size:7px;color:var(--muted)}.election-result-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin-top:10px}.election-result-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--tosca);background:rgba(34,224,199,.06)}.election-result-icon .icon{width:17px;height:17px}.election-result-main>div{display:grid;gap:1px}.election-result-main small,.election-result-main span{font-size:7.2px;color:var(--muted)}.election-result-main strong{font-size:10px}.election-result-strip{display:flex;gap:5px;overflow:auto;scrollbar-width:none;margin-top:9px}.election-result-strip::-webkit-scrollbar{display:none}.result-chip{flex:0 0 auto;border:1px solid rgba(91,160,240,.1);border-radius:999px;padding:5px 7px;color:#8CA7C2;font-size:7px}.result-chip b{color:var(--text);margin-left:3px}.result-chip.winner{border-color:rgba(34,224,199,.24);color:#8DF4E7;background:rgba(34,224,199,.045)}
.candidate-picker{margin:12px 0;padding:11px;border:1px solid rgba(91,160,240,.13);border-radius:15px;background:rgba(5,25,57,.36)}.candidate-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.candidate-picker-head>div{display:grid}.candidate-picker-head strong{font-size:10px}.candidate-picker-head small{font-size:7.8px;color:var(--muted)}.candidate-search{height:38px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid rgba(91,160,240,.13);border-radius:11px;background:rgba(8,31,67,.45)}.candidate-search .material-symbols-rounded{font-size:18px;color:#7D9AB8}.candidate-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:8.5px}.candidate-picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:280px;overflow:auto;scrollbar-width:none;margin-top:8px}.candidate-picker-list::-webkit-scrollbar{display:none}.candidate-picker-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid rgba(91,160,240,.11);border-radius:12px;background:rgba(7,30,64,.46);cursor:pointer}.candidate-picker-row>input{accent-color:var(--tosca)}.candidate-picker-row .member-avatar{width:33px;height:33px;border-radius:10px}.candidate-picker-row>span:nth-of-type(2){display:grid;gap:1px}.candidate-picker-row strong{font-size:8.8px}.candidate-picker-row small{font-size:7px;color:var(--muted)}.candidate-check-icon{font-size:18px;color:rgba(99,142,183,.35)}.candidate-picker-row:has(input:checked){border-color:rgba(34,224,199,.28);background:rgba(34,224,199,.055)}.candidate-picker-row:has(input:checked) .candidate-check-icon{color:var(--tosca)}
html[data-theme="light"] .election-history-card,html[data-theme="light"] .candidate-picker,html[data-theme="light"] .candidate-picker-row,html[data-theme="light"] .candidate-search{background:#FFF;border-color:#DCE8F3}

/* Chat: WhatsApp-like proportions, thin Material icons, compact circular send action. */
.message-layout{min-height:650px;border-radius:18px}.message-conversation{background:radial-gradient(circle at 18% 20%,rgba(25,118,255,.055),transparent 28%),rgba(4,18,41,.28)}
.message-conversation-head{min-height:62px;padding:10px 14px}.message-conversation-room{display:flex!important;align-items:center;gap:9px}.message-room-icon.small{width:36px;height:36px;border-radius:12px}.message-head-icon{font-size:21px;color:#7694B3}
.message-stream{max-height:66vh;min-height:430px;padding:18px 20px;gap:7px}.message-bubble{max-width:min(72%,680px);gap:7px;align-items:end}.message-avatar{width:30px;height:30px;border-radius:50%}.message-body{min-width:120px;border-radius:15px 15px 15px 5px;padding:8px 10px 7px}.message-bubble.mine .message-body{border-radius:15px 15px 5px 15px;background:linear-gradient(135deg,rgba(17,105,139,.78),rgba(12,117,103,.72))}.message-meta{align-items:flex-start}.message-meta>div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.message-meta strong{font-size:9.4px}.message-meta time{font-size:7.3px;color:#7F9CB9}.message-body p{margin:4px 0 0;font-size:12px;line-height:1.48}.message-role-badges{display:inline-flex;gap:3px;flex-wrap:wrap}.message-role-badges>span{font-size:6.3px;font-weight:700;color:#82EADD;border:1px solid rgba(34,224,199,.12);border-radius:99px;padding:2px 4px}
.message-composer-wa{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:7px;padding:10px 12px;border-top:1px solid rgba(91,160,240,.11);background:rgba(3,16,38,.74)}.message-input-wrap{min-height:43px;border:1px solid rgba(91,160,240,.14);border-radius:22px;background:rgba(10,34,68,.72);padding:10px 13px;display:flex;align-items:center}.message-input-wrap textarea{width:100%;min-height:22px;max-height:120px;border:0;outline:0;resize:none;background:transparent;color:var(--text);font:inherit;font-size:11px;line-height:1.45;padding:0}.message-input-wrap textarea::placeholder{color:#728DAA}.chat-icon-btn,.message-send-circle{appearance:none;border:0;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,filter .15s ease}.chat-icon-btn{width:42px;height:42px;border-radius:50%;background:transparent;color:#86A2BE}.chat-icon-btn:hover{background:rgba(91,160,240,.08);color:#B7D0E7}.message-send-circle{width:43px;height:43px;border-radius:50%;color:#06243A;background:linear-gradient(135deg,#68E8C1,#24D8CA);box-shadow:0 7px 17px rgba(34,224,199,.16)}.message-send-circle .material-symbols-rounded{font-size:21px}.message-send-circle:active,.chat-icon-btn:active{transform:scale(.94)}.message-send-circle:disabled{opacity:.58;cursor:not-allowed}.message-send-circle.sending .material-symbols-rounded,.message-send-circle.slow .material-symbols-rounded{animation:spin .9s linear infinite}.emoji-popover{position:absolute;left:10px;bottom:62px;z-index:4;width:218px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border:1px solid rgba(91,160,240,.16);border-radius:14px;background:#081F43;box-shadow:0 14px 34px rgba(0,8,25,.35)}.emoji-popover[hidden]{display:none}.emoji-popover button{appearance:none;border:0;background:transparent;border-radius:9px;padding:6px;font-size:19px;cursor:pointer}.emoji-popover button:hover{background:rgba(34,224,199,.08)}
html[data-theme="light"] .message-composer-wa{background:#F5FAFE;border-color:#DCE8F3}html[data-theme="light"] .message-input-wrap{background:#FFF;border-color:#DCE8F3}html[data-theme="light"] .emoji-popover{background:#FFF;border-color:#DCE8F3}

@media(max-width:900px){.room-main-nav{grid-template-columns:repeat(4,minmax(92px,1fr));overflow:auto;scrollbar-width:none}.room-main-nav::-webkit-scrollbar{display:none}.room-main-item{min-width:92px}.class-room-page .class-hero-v51{grid-template-columns:auto minmax(0,1fr)}.class-hero-code-rail{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0}.election-history-list{grid-template-columns:1fr}}
@media(max-width:620px){.class-room-page .class-hero-v51{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:15px}.class-hero-v51 .class-hero-icon{width:49px;height:49px}.class-hero-v51 .class-hero-main h2{font-size:17px}.class-hero-code-rail{grid-template-columns:1fr;gap:5px}.room-navigation-shell{padding:6px;margin-top:9px}.room-main-nav{display:flex}.room-main-item{flex:0 0 104px}.member-row-v51{grid-template-columns:auto minmax(0,1fr);align-items:start}.member-side{grid-column:1/-1;width:100%;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start}.member-badges{justify-content:flex-start}.member-row-v51 .member-actions{justify-self:end}.candidate-picker-list{grid-template-columns:1fr}.message-stream{min-height:330px;max-height:54vh;padding:13px 10px}.message-bubble{max-width:88%}.message-body p{font-size:11.2px}.message-composer-wa{padding:8px}.message-page-head p{max-width:280px}}


/* ==========================================================
   v5.1.1 HOTFIX — RELIABLE PWA UPDATE + DESKTOP TIMELINE
========================================================== */
.update-progress-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(2,10,27,.82);backdrop-filter:blur(12px)}
.update-progress-card{width:min(420px,100%);padding:24px;border-radius:22px;border:1px solid rgba(74,159,245,.24);background:linear-gradient(155deg,#0C2F63,#071A3B);box-shadow:0 26px 80px rgba(0,0,0,.42);text-align:center}.update-progress-card strong{display:block;margin-top:13px;font-size:15px}.update-progress-card p{margin:6px 0 0;color:#96B0CA;font-size:10px;line-height:1.6}.update-progress-spinner{display:block;width:34px;height:34px;margin:auto;border:3px solid rgba(255,255,255,.13);border-top-color:var(--tosca);border-radius:50%;animation:spin .8s linear infinite}

@media(min-width:901px){
  .class-timeline-panel{overflow:hidden}
  .class-zigzag-timeline{position:relative;display:grid;gap:16px;padding:14px 6px 20px}
  .class-zigzag-timeline::before{left:50%;top:18px;bottom:18px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(39,226,207,.82),rgba(66,130,214,.34),rgba(66,130,214,.08));opacity:1}
  .class-timeline-item,.class-timeline-item.left,.class-timeline-item.right{position:relative;width:100%;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:0;align-items:start}
  .class-timeline-item .class-timeline-node,.class-timeline-item.left .class-timeline-node,.class-timeline-item.right .class-timeline-node{position:relative;left:auto;right:auto;grid-column:2;grid-row:1;justify-self:center;margin-top:16px;width:30px;height:30px;border-radius:10px;box-shadow:0 0 0 5px #082451,0 8px 18px rgba(0,10,30,.24)}
  .class-timeline-item.left .class-timeline-card{grid-column:1;grid-row:1;justify-self:end;margin-right:14px}
  .class-timeline-item.right .class-timeline-card{grid-column:3;grid-row:1;justify-self:start;margin-left:14px}
  .class-timeline-card{position:relative;width:min(100%,470px);min-height:78px;padding:14px 16px;border-radius:16px;background:linear-gradient(145deg,rgba(8,34,72,.82),rgba(6,27,59,.7));box-shadow:0 10px 26px rgba(0,10,30,.08)}
  .class-timeline-item.left .class-timeline-card::after,.class-timeline-item.right .class-timeline-card::before{content:"";position:absolute;top:29px;width:28px;height:1px;background:rgba(72,164,227,.28)}
  .class-timeline-item.left .class-timeline-card::after{right:-28px}.class-timeline-item.right .class-timeline-card::before{left:-28px}
  .class-timeline-card>span{font-size:8.5px;letter-spacing:.075em}.class-timeline-card strong{margin-top:5px;font-size:12.5px;line-height:1.35}.class-timeline-card p{margin-top:6px;font-size:10px;line-height:1.58}
}

@media(max-width:900px){
  .class-zigzag-timeline{gap:10px;padding:8px 0}.class-zigzag-timeline::before{left:14px;transform:none}
  .class-timeline-item,.class-timeline-item.left,.class-timeline-item.right{width:100%;margin:0;padding:0 0 0 42px;display:block}
  .class-timeline-item .class-timeline-node,.class-timeline-item.left .class-timeline-node,.class-timeline-item.right .class-timeline-node{position:absolute;left:1px;right:auto;top:9px}
  .class-timeline-card{width:100%;padding:12px 13px}.class-timeline-card>span{font-size:7.8px}.class-timeline-card strong{font-size:11px}.class-timeline-card p{font-size:9px}
}

/* ==========================================================
KELASKU v5.2 — INSTANT UX + CHAT REPLY / DELETE
========================================================== */
.message-composer-shell{display:grid;grid-template-rows:auto auto;background:rgba(3,16,38,.74);border-top:1px solid rgba(91,160,240,.11)}
.message-composer-shell .message-composer-wa{border-top:0;background:transparent}
.message-reply-composer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 12px 0;padding:8px 10px;border-left:3px solid var(--tosca);border-radius:10px;background:rgba(34,224,199,.06);border-top:1px solid rgba(34,224,199,.08);border-right:1px solid rgba(34,224,199,.08);border-bottom:1px solid rgba(34,224,199,.08)}
.message-reply-composer[hidden]{display:none}
.message-reply-composer>div{min-width:0;display:flex;align-items:center;gap:8px}.message-reply-composer>div>.material-symbols-rounded{font-size:18px;color:var(--tosca)}
.message-reply-composer strong,.message-reply-composer small{display:block}.message-reply-composer strong{font-size:8.5px;color:var(--tosca)}.message-reply-composer small{max-width:520px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:var(--muted)}
.message-reply-composer>button{appearance:none;width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#819DB8;cursor:pointer}.message-reply-composer>button:hover{background:rgba(91,160,240,.08);color:var(--text)}.message-reply-composer>button .material-symbols-rounded{font-size:18px}
.message-reply-quote{margin:6px 0 7px;padding:7px 9px;border-left:3px solid rgba(34,224,199,.8);border-radius:8px;background:rgba(0,10,28,.24);cursor:pointer}.message-reply-quote strong,.message-reply-quote span{display:block}.message-reply-quote strong{font-size:7.8px;color:#76E8D8}.message-reply-quote span{margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.2px;color:#9AB4CD}.message-reply-quote.deleted{border-left-color:#73879E}.message-reply-quote.deleted strong,.message-reply-quote.deleted span{color:#8296AA}
.message-actions{display:flex;justify-content:flex-end;gap:2px;margin:5px -3px -4px;opacity:.28;transition:opacity .15s ease}.message-bubble:hover .message-actions,.message-bubble:focus-within .message-actions{opacity:1}.message-actions button{appearance:none;width:27px;height:27px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#8EA8C1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}.message-actions button:hover{background:rgba(91,160,240,.09);color:#C8DCEF}.message-actions button.danger:hover{background:rgba(255,92,120,.09);color:#FF8FA6}.message-actions button:active{transform:scale(.9)}.message-actions button:disabled{opacity:.5;cursor:not-allowed}.message-actions .material-symbols-rounded{font-size:17px;font-variation-settings:'wght' 300,'FILL' 0}
.message-deleted-text{display:flex!important;align-items:center;gap:5px;color:#8197AD!important;font-style:italic}.message-deleted-text .material-symbols-rounded{font-size:15px}.message-bubble.is-deleted .message-body{opacity:.82}
.message-highlight .message-body{animation:messageFocusPulse 1.45s ease}
@keyframes messageFocusPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,224,199,0)}35%{box-shadow:0 0 0 4px rgba(34,224,199,.16)}}
.load-older-messages{align-self:center;appearance:none;border:1px solid rgba(91,160,240,.16);border-radius:999px;padding:7px 12px;background:rgba(7,30,64,.68);color:#9DB7D1;font:inherit;font-size:8px;font-weight:700;cursor:pointer}.load-older-messages:hover{border-color:rgba(34,224,199,.22);color:var(--tosca)}.load-older-messages:disabled{opacity:.6;cursor:wait}.load-older-messages .btn-spinner{width:11px;height:11px}
html[data-theme="light"] .message-composer-shell{background:#F5FAFE;border-color:#DCE8F3}html[data-theme="light"] .message-reply-composer{background:#F0FCFA;border-color:#CDEBE6;border-left-color:#17BDAF}html[data-theme="light"] .message-reply-quote{background:#F2F8FC;border-left-color:#17BDAF}html[data-theme="light"] .message-reply-quote strong{color:#128D85}html[data-theme="light"] .message-reply-quote span{color:#58738D}html[data-theme="light"] .load-older-messages{background:#F7FBFF;border-color:#DCE8F3;color:#56728E}

/* Silent revalidation: content stays visible while fresh data is checked in background. */
[data-silent-refresh="true"]{transition:none!important}

@media(max-width:620px){
  .message-actions{opacity:.82}.message-actions button{width:30px;height:30px}.message-reply-composer{margin:6px 8px 0}.message-reply-composer small{max-width:240px}.message-reply-quote span{max-width:220px}
}
.message-bubble{transition:transform .18s ease}.message-bubble.swipe-replied{transform:translateX(11px)}.message-bubble.mine.swipe-replied{transform:translateX(-11px)}

/* ==========================================================
KELASKU v6.0 — ACADEMIC WORKFLOW & ANALYTICS
========================================================== */
.academic-calendar-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}
.calendar-mini-card{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(91,160,240,.13);border-radius:15px;background:rgba(7,29,63,.44)}
.calendar-mini-card>div:nth-child(2){min-width:0;display:grid;gap:2px}.calendar-mini-card>div:nth-child(2)>span{font-size:7.2px;font-weight:800;letter-spacing:.06em;color:var(--tosca)}.calendar-mini-card>div:nth-child(2)>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px}.calendar-mini-card>div:nth-child(2)>small{font-size:7.5px;color:var(--muted)}.calendar-mini-card>.icon{width:17px;height:17px;color:#7898B8}.academic-date-tile.compact{width:40px;height:44px;border-radius:12px}.academic-date-tile.compact strong{font-size:14px}.academic-date-tile.compact span{font-size:6.6px}
.material-topic-chip{width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-review-feedback{margin:10px 0 14px;padding:12px 13px;border-radius:14px;border:1px solid rgba(34,224,199,.17);background:rgba(34,224,199,.055)}.task-review-feedback.needs-revision{border-color:rgba(251,191,36,.22);background:rgba(251,191,36,.055)}.task-review-feedback>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.task-review-feedback span{font-size:7.8px;color:var(--muted);font-weight:700}.task-review-feedback strong{font-size:9px;color:var(--tosca)}.task-review-feedback.needs-revision strong{color:#F7D37B}.task-review-feedback p{margin:7px 0 0;color:#BED2E5;font-size:9px;line-height:1.55;white-space:pre-wrap}
.class-analytics-panel{overflow:hidden}.analytics-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:13px 0}.analytics-kpi-grid>div{min-height:74px;padding:12px 14px;border-radius:15px;border:1px solid rgba(91,160,240,.13);background:rgba(7,29,63,.44);display:grid;align-content:center;gap:3px}.analytics-kpi-grid span{font-size:7.8px;color:var(--muted)}.analytics-kpi-grid strong{font-size:19px;letter-spacing:-.025em}.analytics-own-card{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:15px;border:1px solid rgba(34,224,199,.13);background:rgba(34,224,199,.045)}.analytics-own-card>div:last-child{display:grid;gap:2px}.analytics-own-card span{font-size:7.5px;color:var(--muted)}.analytics-own-card strong{font-size:9.5px}.analytics-own-card small{font-size:7.8px;color:#8FAAC4}
.analytics-table-wrap{max-height:480px;overflow:auto;border:1px solid rgba(91,160,240,.12);border-radius:15px;scrollbar-width:none}.analytics-table-wrap::-webkit-scrollbar{display:none}.analytics-table{width:100%;border-collapse:collapse;font-size:8.5px}.analytics-table th{position:sticky;top:0;z-index:1;padding:9px 10px;text-align:left;color:#87A7C6;background:#0A2855;border-bottom:1px solid rgba(91,160,240,.13);font-size:7.5px;text-transform:uppercase;letter-spacing:.05em}.analytics-table td{padding:10px;border-bottom:1px solid rgba(91,160,240,.08);color:#C9D9EA}.analytics-table tbody tr:last-child td{border-bottom:0}.analytics-table td:first-child{display:grid;gap:2px}.analytics-table td:first-child strong{font-size:8.8px}.analytics-table td:first-child small{font-size:7.3px;color:var(--muted)}.analytics-table td:last-child b{color:var(--tosca)}
.review-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.review-summary-grid>div{padding:10px;border:1px solid rgba(91,160,240,.13);border-radius:13px;background:rgba(7,29,63,.43);display:grid;gap:2px}.review-summary-grid strong{font-size:16px}.review-summary-grid span{font-size:7.2px;color:var(--muted)}.review-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.review-toolbar small{font-size:8px;color:var(--muted)}.task-review-list{display:grid;gap:7px;max-height:min(58vh,560px);overflow:auto;padding-right:2px;scrollbar-width:none}.task-review-list::-webkit-scrollbar{display:none}.task-review-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(91,160,240,.11);border-radius:13px;background:rgba(7,29,63,.42)}.task-review-main{min-width:0;display:grid;gap:2px}.task-review-main strong{font-size:9px}.task-review-main small{font-size:7.6px;color:var(--muted)}.task-review-score{min-width:62px;text-align:right}.task-review-score strong{font-size:9px;color:var(--tosca)}.task-review-score span{color:var(--muted)}.review-status-pill{width:max-content;padding:2px 6px;border-radius:999px;font-size:6.8px;font-weight:800;letter-spacing:.04em;background:rgba(91,160,240,.08);border:1px solid rgba(91,160,240,.14);color:#9BB9D6}.review-status-pill.review-reviewed{background:rgba(34,224,199,.08);border-color:rgba(34,224,199,.16);color:#88EBDD}.review-status-pill.review-needs_revision{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.17);color:#F3D17B}.submission-preview{margin-bottom:12px;padding:11px 12px;border:1px solid rgba(91,160,240,.11);border-radius:13px;background:rgba(7,29,63,.4)}.submission-preview>div{display:flex;justify-content:space-between;gap:10px}.submission-preview span{font-size:7.5px;color:var(--muted)}.submission-preview strong{font-size:8.5px}.submission-preview p{margin:9px 0;font-size:9px;line-height:1.55;color:#C2D5E7;white-space:pre-wrap}
html[data-theme="light"] .calendar-mini-card,html[data-theme="light"] .analytics-kpi-grid>div,html[data-theme="light"] .analytics-own-card,html[data-theme="light"] .task-review-row,html[data-theme="light"] .review-summary-grid>div,html[data-theme="light"] .submission-preview,html[data-theme="light"] .task-review-feedback{background:#FFFFFF;color:#102744;border-color:#DCE8F3;box-shadow:0 7px 20px rgba(47,84,122,.035)}html[data-theme="light"] .analytics-table-wrap{border-color:#DCE8F3}html[data-theme="light"] .analytics-table th{background:#EFF6FC;color:#58748F}html[data-theme="light"] .analytics-table td{color:#193652;border-color:#E5EEF7}html[data-theme="light"] .task-review-feedback p,html[data-theme="light"] .submission-preview p{color:#496884}
@media(max-width:900px){.academic-calendar-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-review-row{grid-template-columns:auto minmax(0,1fr) auto}.task-review-row>.btn,.task-review-row>.soft-chip{grid-column:2/-1;justify-self:end}.analytics-table{min-width:620px}}
@media(max-width:620px){.academic-calendar-strip{grid-template-columns:1fr}.calendar-mini-card{padding:10px}.review-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-review-row{grid-template-columns:auto minmax(0,1fr)}.task-review-score{grid-column:2;text-align:left}.task-review-row>.btn,.task-review-row>.soft-chip{grid-column:2;justify-self:start}}

/* ============================================================
   KELASKU v6.1 — ROOM CLASS DENSITY + CHAT MEDIA + CLASS LIST
   ============================================================ */

/* Maksimalkan ruang desktop: Academic Core 8 item = 2 baris. */
.class-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.class-module-card{min-width:0;min-height:106px;padding:14px 13px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.class-module-card>span:nth-child(2){min-width:0}.class-module-card strong,.class-module-card small{display:block;white-space:normal}.class-module-card small{line-height:1.4}

/* Akademik / Kelola menjadi dropdown tunggal, tidak lagi chip bertumpuk. */
.room-subnav{display:block;position:relative;padding:8px 0 0;overflow:visible}
.room-dropdown{position:relative;width:min(360px,100%);margin:0 auto}
.room-dropdown-trigger{appearance:none;width:100%;min-height:54px;padding:8px 12px;border:1px solid rgba(91,160,240,.16);border-radius:14px;background:rgba(8,31,67,.76);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left}
.room-dropdown-trigger:hover,.room-dropdown-trigger[aria-expanded="true"]{border-color:rgba(34,224,199,.34);background:rgba(34,224,199,.06)}
.room-dropdown-title{display:grid;gap:3px}.room-dropdown-title small{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.room-dropdown-title strong{display:flex;align-items:center;gap:7px;font-size:11px}.room-dropdown-title .material-symbols-rounded{font-size:18px;font-variation-settings:'wght' 300,'FILL' 0}
.room-dropdown-chevron{font-size:20px;color:#83A4C4;transition:transform .18s ease}.room-dropdown-trigger[aria-expanded="true"] .room-dropdown-chevron{transform:rotate(180deg)}
.room-dropdown-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:25;padding:6px;border:1px solid rgba(91,160,240,.17);border-radius:15px;background:#071D3F;box-shadow:0 18px 42px rgba(0,8,29,.4);display:grid;gap:3px}.room-dropdown-menu[hidden]{display:none}
.room-dropdown-menu button{appearance:none;border:0;background:transparent;color:#A6BBD1;padding:10px 11px;border-radius:11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;text-align:left;font:inherit;font-size:10px;cursor:pointer}.room-dropdown-menu button:hover,.room-dropdown-menu button.active{background:rgba(34,224,199,.08);color:#D9FFF9}.room-dropdown-menu .material-symbols-rounded{font-size:18px;font-variation-settings:'wght' 300,'FILL' 0}.room-selected{color:var(--tosca)}

/* Daftar kelas = list/table, bukan card grid. */
.class-list-section{margin-top:18px}.class-table-shell{border:1px solid rgba(91,160,240,.14);border-radius:18px;overflow:hidden;background:rgba(5,23,54,.52)}
.class-table-head,.class-list-row{display:grid;grid-template-columns:minmax(320px,2fr) minmax(150px,.8fr) minmax(120px,.65fr) 92px;align-items:center;gap:14px}
.class-table-head{padding:9px 14px;background:rgba(12,43,86,.55);color:#7291B2;font-size:8px;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid rgba(91,160,240,.12)}
.class-list-row{padding:12px 14px;border-bottom:1px solid rgba(91,160,240,.1);transition:background-color .15s ease}.class-list-row:last-child{border-bottom:0}.class-list-row:hover{background:rgba(34,224,199,.035)}
.class-list-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;min-width:0}.class-list-identity>div{min-width:0;display:grid;gap:3px}.class-list-identity strong{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.class-list-identity small{font-size:8.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.class-code-inline{margin-left:8px;color:var(--tosca);font-weight:700}
.class-list-role{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.class-list-visibility{display:grid;gap:2px;font-size:9px;color:#AFC5DA}.class-list-visibility small{font-size:7.5px;color:var(--muted)}.class-list-action{display:flex;justify-content:flex-end}.class-row-action{appearance:none;min-height:34px;padding:7px 10px;border:1px solid rgba(91,160,240,.17);border-radius:11px;background:rgba(91,160,240,.06);color:#AFCBE5;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:9px;font-weight:700;cursor:pointer}.class-row-action:hover{border-color:rgba(34,224,199,.32);color:#D8FFF9}.class-row-action.join{color:#071C31;background:linear-gradient(100deg,#67E9BB,#26DCCB);border-color:transparent}.class-row-action .icon{width:14px;height:14px}.class-public-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}.class-public-pager span{font-size:9px;color:var(--muted)}

/* Chat: action rail berada di luar bubble seperti messenger/WA. */
.message-bubble{max-width:min(82%,760px)}
.message-bubble-wrap{display:flex;align-items:flex-end;gap:4px;min-width:0}.message-bubble.mine .message-bubble-wrap{justify-content:flex-end}.message-body{max-width:680px;min-width:160px}
.message-side-actions{display:flex;align-items:center;gap:1px;padding-bottom:3px;opacity:.24;transition:opacity .15s ease;position:relative}.message-bubble:hover .message-side-actions,.message-bubble:focus-within .message-side-actions{opacity:1}
.message-side-actions>button,.message-more-wrap>button{appearance:none;width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#829DB8;cursor:pointer}.message-side-actions button:hover{background:rgba(91,160,240,.09);color:#D5E8F7}.message-side-actions .material-symbols-rounded{font-size:18px;font-variation-settings:'wght' 300,'FILL' 0}
.message-more-wrap{position:relative}.message-more-menu{position:absolute;bottom:32px;right:0;z-index:10;min-width:142px;padding:5px;border:1px solid rgba(91,160,240,.16);border-radius:12px;background:#071D3F;box-shadow:0 14px 34px rgba(0,8,25,.36)}.message-more-menu[hidden]{display:none}.message-bubble.mine .message-more-menu{right:auto;left:0}.message-more-menu button{appearance:none;width:100%;border:0;background:transparent;color:#F2A6B5;padding:9px 10px;border-radius:8px;display:flex;align-items:center;gap:7px;font:inherit;font-size:9px;cursor:pointer}.message-more-menu button:hover{background:rgba(255,92,120,.08)}
.message-actions{display:none!important}

.message-composer-wa{grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:4px;padding:9px 10px}.chat-icon-btn{width:38px;height:38px}.message-send-circle{width:40px;height:40px}.chat-mic-btn{position:relative}.chat-mic-btn.recording{color:#FF7D98;background:rgba(255,92,120,.1)}.voice-time{position:absolute;top:-16px;font-size:7px;font-weight:700;color:#FF9AAE;background:#20162D;border-radius:7px;padding:2px 4px;white-space:nowrap}
.chat-tool-popover{position:absolute;left:49px;bottom:58px;z-index:5;width:145px;padding:5px;border:1px solid rgba(91,160,240,.16);border-radius:13px;background:#071D3F;box-shadow:0 14px 34px rgba(0,8,25,.35);display:grid;gap:3px}.chat-tool-popover[hidden]{display:none}.chat-tool-popover button{appearance:none;border:0;background:transparent;color:#B8CEE3;padding:9px;border-radius:9px;display:flex;align-items:center;gap:8px;font:inherit;font-size:9px;cursor:pointer}.chat-tool-popover button:hover{background:rgba(34,224,199,.07);color:#E0FFFA}.chat-tool-popover .material-symbols-rounded{font-size:19px;font-variation-settings:'wght' 300,'FILL' 0}
.message-media-preview{padding:7px 10px 0}.message-media-preview[hidden]{display:none}.message-media-preview-card{position:relative;display:flex;align-items:center;gap:9px;width:max-content;max-width:min(360px,calc(100vw - 40px));padding:7px 38px 7px 8px;border:1px solid rgba(34,224,199,.16);border-radius:13px;background:rgba(10,41,76,.86)}.message-media-preview-card img{width:58px;height:48px;object-fit:cover;border-radius:8px}.message-media-preview-card>span.material-symbols-rounded{font-size:24px;color:var(--tosca)}.message-media-preview-card>div{display:grid;gap:2px}.message-media-preview-card strong{font-size:9px}.message-media-preview-card small{font-size:7.5px;color:var(--muted)}.message-media-preview-card>button{position:absolute;right:5px;top:5px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:#8EA7C0;display:grid;place-items:center;cursor:pointer}
.chat-image-attachment{display:block;appearance:none;border:0;background:transparent;padding:0;margin:5px 0 4px;cursor:pointer}.chat-image-attachment img{display:block;width:min(360px,100%);max-height:300px;object-fit:cover;border-radius:11px}.chat-audio-attachment{display:grid;grid-template-columns:34px minmax(120px,1fr) auto;align-items:center;gap:8px;margin:6px 0 4px;min-width:min(300px,58vw)}.chat-audio-attachment audio{display:none}.chat-audio-play{appearance:none;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(34,224,199,.12);color:var(--tosca);cursor:pointer}.chat-audio-play .material-symbols-rounded{font-size:22px;font-variation-settings:'wght' 350,'FILL' 0}.chat-audio-attachment.playing .chat-audio-play{background:rgba(34,224,199,.2)}.chat-audio-track{position:relative;height:20px;overflow:hidden;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(125,163,197,.42) 0 2px,transparent 2px 5px);mask:linear-gradient(#000 0 0) center/100% 12px no-repeat;-webkit-mask:linear-gradient(#000 0 0) center/100% 12px no-repeat}.chat-audio-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(34,224,199,.8);mix-blend-mode:screen;transition:width .08s linear}.chat-audio-time{font-size:7.5px;color:var(--muted);min-width:29px;text-align:right}

/* Task image submission / review */
.task-image-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.task-image-picker>span{font-size:8px;color:var(--muted)}.task-image-preview{margin-top:8px}.task-image-preview img{max-width:280px;max-height:210px;border-radius:12px;border:1px solid rgba(91,160,240,.14);object-fit:cover}.field-optional{font-size:8px;color:var(--muted);font-weight:500}.review-submission-image{appearance:none;border:1px solid rgba(91,160,240,.14);background:rgba(8,30,64,.5);border-radius:13px;padding:6px;display:grid;gap:5px;color:#AFC7DD;cursor:pointer;margin:8px 0}.review-submission-image img{width:min(320px,100%);max-height:240px;object-fit:cover;border-radius:9px}.review-submission-image span{display:flex;align-items:center;gap:5px;font-size:8px}

/* Ranking tugas pada Analitik */
.task-ranking-list{display:grid;gap:7px;margin-top:10px}.task-ranking-row{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px;border:1px solid rgba(91,160,240,.12);border-radius:13px;background:rgba(7,29,63,.38)}.task-ranking-row .rank-number{font-size:13px;font-weight:800;color:var(--tosca);text-align:center}.task-ranking-row strong{font-size:10px}.task-ranking-row small{display:block;color:var(--muted);font-size:7.5px}.task-ranking-score{text-align:right}.task-ranking-score strong{font-size:12px}.task-ranking-score small{display:block}

html[data-theme="light"] .room-dropdown-trigger,html[data-theme="light"] .class-table-shell,html[data-theme="light"] .class-list-row,html[data-theme="light"] .message-more-menu,html[data-theme="light"] .chat-tool-popover,html[data-theme="light"] .message-media-preview-card{background:#FFFFFF;color:#102744;border-color:#DCE8F3}.room-dropdown-menu{background:#071D3F}html[data-theme="light"] .room-dropdown-menu{background:#FFFFFF;border-color:#DCE8F3}html[data-theme="light"] .room-dropdown-menu button{color:#58738D}html[data-theme="light"] .room-dropdown-menu button.active,html[data-theme="light"] .room-dropdown-menu button:hover{background:#EAF8F6;color:#102744}

@media(max-width:1100px){.class-table-head,.class-list-row{grid-template-columns:minmax(260px,2fr) minmax(130px,.8fr) minmax(105px,.6fr) 80px}}
@media(max-width:760px){.class-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-module-card{min-height:94px}.class-table-head{display:none}.class-list-row{grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:11px}.class-list-role{grid-column:1}.class-list-visibility{grid-column:1}.class-list-action{grid-column:2;grid-row:1/4;align-self:center}.class-row-action span{display:none}.message-composer-wa{grid-template-columns:auto auto minmax(0,1fr) auto auto;padding:7px 6px}.chat-icon-btn{width:34px;height:38px}.message-send-circle{width:39px;height:39px}.message-bubble{max-width:95%}.message-body{max-width:calc(100vw - 112px)}.message-side-actions{opacity:.72}.chat-audio-attachment{min-width:220px}.room-dropdown{width:100%}}
@media(max-width:430px){.message-composer-wa{gap:1px}.chat-icon-btn{width:31px}.message-input-wrap{padding-left:10px;padding-right:10px}.message-bubble{max-width:98%}.class-module-grid{gap:7px}.class-module-card{grid-template-columns:auto minmax(0,1fr);padding:11px}.class-module-card>.icon:last-child{display:none}}

/* =========================================================
   KELASKU v6.1 — TASK RANKING
========================================================= */
.ranking-title-row{margin-top:18px;margin-bottom:10px}
.class-task-ranking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:20px}
.class-rank-row{display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(5,29,67,.52)}
.class-rank-row.is-me{border-color:rgba(36,224,201,.55);background:linear-gradient(135deg,rgba(12,75,101,.62),rgba(7,37,78,.62))}
.class-rank-number{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(35,126,219,.12);color:var(--tosca);font-weight:800;font-size:11px}
.class-rank-person{min-width:0;display:flex;flex-direction:column;gap:2px}
.class-rank-person strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.class-rank-person small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.class-rank-score{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.class-rank-score strong{font-size:15px;color:var(--text)}
.class-rank-score span{font-size:8px;color:var(--muted)}
.ranking-empty{display:flex;align-items:center;gap:12px;padding:15px;border:1px dashed var(--line);border-radius:14px;margin-bottom:20px;color:var(--muted)}
.ranking-empty>.material-symbols-rounded{font-size:25px;color:var(--tosca)}
.ranking-empty div{display:flex;flex-direction:column;gap:3px}.ranking-empty strong{font-size:11px;color:var(--text)}.ranking-empty small{font-size:8.5px}
@media(max-width:720px){.class-task-ranking-grid{grid-template-columns:1fr}.class-rank-row{grid-template-columns:30px 36px minmax(0,1fr) auto;padding:9px}}


/* ==========================================================
PHASE 6.2 — CLASS PUBLIC LINKS SETTINGS
========================================================== */
.class-links-settings{grid-column:1/-1}.class-public-url{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;margin:8px 0 13px;padding:11px 12px;border:1px solid rgba(34,224,199,.17);border-radius:15px;background:rgba(34,224,199,.045);transition:.16s ease}.class-public-url.is-disabled{opacity:.52}.class-public-url>div{display:grid;gap:2px;min-width:0}.class-public-url span{font-size:7.5px;letter-spacing:.11em;color:var(--tosca);font-weight:800}.class-public-url strong{font-size:9px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.class-public-url>a.icon-btn{text-decoration:none}.class-links-editor{display:grid;gap:8px}.class-link-editor-row{display:grid;grid-template-columns:28px minmax(115px,.7fr) minmax(140px,1fr) minmax(220px,1.6fr) minmax(150px,1fr) 98px;gap:8px;align-items:center;padding:8px;border:1px solid rgba(96,164,246,.12);border-radius:14px;background:rgba(5,25,55,.42)}.class-link-editor-row .control{min-width:0;font-size:9.5px;padding:9px 10px}.class-link-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.class-link-row-actions .material-symbols-rounded{font-size:16px}.class-link-drag{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(34,224,199,.07);color:var(--tosca);font-size:8px;font-weight:800}.class-links-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:12px}.public-links-toggle{padding-top:2px}@media(max-width:980px){.class-link-editor-row{grid-template-columns:28px minmax(120px,.7fr) minmax(150px,1fr) minmax(220px,1.5fr) 98px}.class-link-editor-row .link-description{grid-column:2/5}}@media(max-width:700px){.class-public-url{grid-template-columns:minmax(0,1fr) auto auto}.class-link-editor-row{grid-template-columns:28px 1fr 98px}.class-link-editor-row .link-platform,.class-link-editor-row .link-label,.class-link-editor-row .link-url,.class-link-editor-row .link-description{grid-column:2}.class-link-editor-row .class-link-row-actions{grid-column:3;grid-row:1}.class-links-actions{display:grid;grid-template-columns:1fr 1fr}.class-links-actions .btn{width:100%}}


/* ============================================================
 * KelasKu v6.3.0 — UI Performance Normalization + Room Class
 * ============================================================ */
/* Cross-device safety: hindari layer blur/compositor berat pada Android tertentu. */
.glass,.sidebar,.bottom-nav,.overlay,.app-dialog-backdrop,.update-progress-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.glass{box-shadow:0 8px 24px rgba(0,8,30,.15)}
.btn-primary{box-shadow:0 6px 16px rgba(34,224,199,.12)}
.class-card,.profile-avatar,.member-avatar,.avatar-preview,.app-dialog,.update-progress-card,.room-dropdown-menu,.message-more-menu,.chat-tool-popover{box-shadow:0 7px 20px rgba(0,8,30,.14)}
.bottom-nav{background:#05152F}
.sidebar{background:#06172F}
.overlay,.app-dialog-backdrop,.update-progress-overlay{background:rgba(2,8,20,.82)}

/* Hero hierarchy */
.class-hero-v51 .class-hero-main{display:grid;align-content:center;gap:0}
.class-primary-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px;color:#B9CEE2;font-size:9px}
.class-primary-meta span+span::before{content:"•";margin-right:7px;color:#4F7398}
.class-hero-v51 .class-hero-description{margin:9px 0 0!important;color:#9DB4CE!important;line-height:1.55!important}
.class-identity-divider{width:min(330px,100%);height:1px;margin:9px 0 7px;background:linear-gradient(90deg,rgba(34,224,199,.32),rgba(91,160,240,.08),transparent)}
.class-secondary-meta{display:flex;align-items:center;gap:6px;color:#7897B7;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.class-secondary-meta i{font-style:normal;color:#22E0C7}
.class-badge-bottom{margin-top:9px}.class-badge-bottom .role-pill{font-size:7.5px}

/* Navigation: fungsi utama di atas, submenu Akademik/Kelola compact. */
.room-main-nav{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.room-navigation-shell{position:relative}
.room-subnav{padding-top:6px}
.room-dropdown{width:min(320px,100%)}
.room-dropdown-trigger{min-height:46px;padding:7px 11px}
.room-dropdown-title small{font-size:6.8px}.room-dropdown-title strong{font-size:10px}
.room-dropdown-menu{box-shadow:0 8px 22px rgba(0,8,29,.18)}

/* Ringkasan: satu container = satu baris penuh. */
.room-overview-v63{display:grid!important;grid-template-columns:1fr!important;gap:12px}.overview-full-row{width:100%}.overview-inline-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}.overview-inline-details .detail-row{min-width:0}.overview-inline-details .detail-row strong{overflow:hidden;text-overflow:ellipsis}

/* Link editor: akses Publik/Anggota terlihat jelas. */
.class-link-editor-row{grid-template-columns:34px minmax(110px,.8fr) minmax(92px,.55fr) minmax(130px,1fr) minmax(180px,1.4fr) minmax(140px,1fr) auto!important}.link-visibility{font-size:9px!important}

@media(max-width:900px){.overview-inline-details{grid-template-columns:repeat(2,minmax(0,1fr))}.room-main-nav{display:flex;overflow:auto;scrollbar-width:none}.room-main-item{flex:0 0 112px}.class-link-editor-row{grid-template-columns:32px 1fr 1fr!important}.class-link-editor-row .link-label,.class-link-editor-row .link-url,.class-link-editor-row .link-description{grid-column:2/-1}.class-link-row-actions{grid-column:2/-1;justify-self:end}}
@media(max-width:620px){.class-hero-code-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}.class-hero-v51 .class-hero-main h2{font-size:17px}.overview-inline-details{grid-template-columns:1fr}.room-dropdown{width:100%}.class-link-editor-row{grid-template-columns:28px 1fr!important}.class-link-editor-row>*:not(.class-link-drag){grid-column:2/-1}.class-link-row-actions{justify-self:end}}
@media(prefers-reduced-motion:reduce){.btn:hover,.class-card:hover{transform:none!important}}


/* ============================================================
 * KelasKu v6.4.0 — Landing Refinement + Room Overview Restore
 * ============================================================ */
/* Rendering safety: remove the remaining blur layer used by carousel controls. */
.carousel-action{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#082451}

/* Room Class: v6.3 changed Ringkasan too aggressively. Restore the original
   two-column overview rhythm and only keep Academic Core out of Ringkasan. */
.room-overview-v64{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.room-overview-v64 .panel{min-width:0}
.room-overview-v64 .detail-row{font-size:11.5px;min-height:46px}
.room-overview-v64 .detail-row span{font-size:10.5px}
.room-overview-v64 .detail-row strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}
.overview-manager-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 16px}
.overview-manager-panel .panel-copy{margin-bottom:0}

/* Readability pass for the Room Class elements touched in this release. */
.class-primary-meta{font-size:10.5px}
.class-hero-v51 .class-hero-description{font-size:10.5px!important}
.class-secondary-meta{font-size:9.5px}
.class-badge-bottom .role-pill{font-size:9px}
.room-dropdown-title small{font-size:9px}.room-dropdown-title strong{font-size:11px}
.room-dropdown-menu button{font-size:10.5px}

@media(max-width:760px){
  .room-overview-v64{grid-template-columns:1fr!important}
  .overview-manager-panel{display:grid;align-items:start}
  .overview-manager-panel .page-actions{width:100%}
}

/* KelasKu v6.4.1 — Link accordion, infinite showcase loop, attendance schedule tracker */