/* =========================================================
   KELAS KITA - CLEAN EDUCATION MATERIAL UI 20260712
   Fokus revisi: tampilan saja. Tidak mengubah fungsi/logic aplikasi.
   ========================================================= */
:root{
  --kk-blue:#1d5fd1;
  --kk-blue-2:#2563eb;
  --kk-blue-soft:#eaf2ff;
  --kk-teal:#14b8a6;
  --kk-teal-soft:#e8fbf7;
  --kk-purple:#6d5dfc;
  --kk-orange:#f97316;
  --kk-red:#dc2626;
  --kk-bg:#f8fafc;
  --kk-surface:#ffffff;
  --kk-line:#e2e8f0;
  --kk-line-2:#edf2f7;
  --kk-text:#162033;
  --kk-muted:#64748b;
  --kk-shadow:0 8px 24px rgba(15,23,42,.07);
  --kk-shadow-soft:0 3px 12px rgba(15,23,42,.05);
  --kk-radius:18px;
  --kk-radius-lg:24px;
}

html,body{
  background:var(--kk-bg)!important;
  color:var(--kk-text)!important;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif!important;
}
body::before{display:none!important;}
body.kk-logged-out{background:#fff!important;}

/* ---------- Universal material reset: hilangkan glass ---------- */
.brand-panel,.login-card,.panel,.hero-card,.stat-card,.file-card,.section-head,
.sidebar,.topbar,.teacher-chip,.right-card,.desktop-right-rail,.contact-footer,
.planner-preview-hub,.planner-compact-result-card,.planner-panel,.teaching-hero-card,
.planner-step-card,.planner-page-subnav,.table-wrap,.profile-photo-card,
.right-profile-mini,.planner-doc-modal-shell,.planner-doc-modal-sidebar,
.planner-doc-modal-toolbar,.planner-doc-preview-canvas{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:var(--kk-shadow-soft)!important;
  background-color:var(--kk-surface)!important;
  border-color:var(--kk-line)!important;
}

/* ---------- Buttons & inputs ---------- */
.btn{
  border-radius:14px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.btn:hover{transform:translateY(-1px)!important;}
.btn.primary,.btn.green.primary{
  background:var(--kk-blue-2)!important;
  color:#fff!important;
  border:1px solid var(--kk-blue-2)!important;
}
.btn.primary:hover{background:#1e4fbd!important;}
.btn.ghost{
  background:#fff!important;
  color:var(--kk-blue)!important;
  border:1px solid #b9cdfb!important;
}
.btn.soft{
  background:#f1f5f9!important;
  color:#334155!important;
  border:1px solid #e2e8f0!important;
}
.btn.google{
  background:#fff!important;
  border:1px solid #dbe3ef!important;
  color:#263244!important;
}
.btn.danger-soft{
  background:#fff5f5!important;
  border:1px solid #fecaca!important;
  color:#b91c1c!important;
}
input,select,textarea{
  border:1px solid #dbe3ef!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--kk-text)!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--kk-blue)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
label{color:#172033!important;font-weight:800!important;}

/* ---------- Brand assets ---------- */
.kk-brand-logo{display:block;object-fit:contain;}
.kk-login-logo{width:min(300px,72%);max-height:110px;margin-bottom:26px;filter:drop-shadow(0 10px 18px rgba(15,23,42,.12));}
.kk-sidebar-logo{width:190px;max-width:100%;height:auto;}
.kk-mobile-logo{height:42px;width:210px;max-width:calc(100vw - 148px);object-fit:contain;object-position:left center;}

/* =========================================================
   LOGIN / LANDING PAGE
   ========================================================= */
.login-page:not(.hidden){
  min-height:100vh!important;
  padding:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  background:#fff!important;
  background-image:linear-gradient(90deg,#ffffff 0%,#ffffff 54%,#f8fafc 54%,#f8fafc 100%)!important;
}
.login-shell{
  width:min(1220px,100%)!important;
  min-height:690px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  gap:0!important;
  align-items:stretch!important;
  border:1px solid var(--kk-line)!important;
  border-radius:26px!important;
  overflow:hidden!important;
  box-shadow:0 18px 54px rgba(15,23,42,.08)!important;
  background:#fff!important;
}
.brand-panel.kk-login-hero{
  min-height:690px!important;
  padding:60px 64px!important;
  border:0!important;
  border-radius:0!important;
  color:#0f2340!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 37%,rgba(255,255,255,.28) 100%),url('./assets/hero-suasana-sekolah.jpg')!important;
  background-size:cover!important;
  background-position:center bottom!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  position:relative!important;
  overflow:hidden!important;
}
.brand-panel.kk-login-hero::before,
.brand-panel.kk-login-hero::after{display:none!important;}
.kk-login-hero-overlay{display:none!important;}
.kk-login-hero-content{
  position:relative!important;
  z-index:1!important;
  width:min(590px,100%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}
.brand-panel.kk-login-hero h1{
  margin:0 0 16px!important;
  font-size:36px!important;
  line-height:1.14!important;
  letter-spacing:-1.1px!important;
  color:#10233f!important;
  font-weight:900!important;
  text-shadow:none!important;
}
.brand-panel.kk-login-hero p{
  margin:0!important;
  max-width:500px!important;
  color:#475569!important;
  font-size:17px!important;
  line-height:1.58!important;
}
.kk-login-benefits{
  margin-top:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(120px,1fr))!important;
  gap:14px!important;
  width:min(640px,100%)!important;
}
.kk-login-benefits span{
  display:block!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(226,232,240,.88)!important;
  border-radius:16px!important;
  padding:13px 15px!important;
  box-shadow:0 10px 25px rgba(15,23,42,.09)!important;
}
.kk-login-benefits b{display:block;color:#1f2937!important;font-size:12px!important;line-height:1.25!important;}
.kk-login-benefits small{display:block;color:#64748b!important;font-size:11px!important;line-height:1.35!important;margin-top:4px!important;}
.login-card{
  min-height:690px!important;
  max-height:none!important;
  padding:58px 60px!important;
  border:0!important;
  border-left:1px solid var(--kk-line-2)!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  justify-content:center!important;
}
.login-card h2{
  margin:0 0 8px!important;
  color:#10233f!important;
  font-size:26px!important;
  line-height:1.2!important;
  letter-spacing:-.45px!important;
}
.kk-login-card-subtitle{
  margin:0 0 22px!important;
  color:#64748b!important;
  line-height:1.5!important;
  font-size:14px!important;
}
.login-card .field-hint.username-help{display:none!important;}
.login-card input{height:52px!important;border-radius:12px!important;}
.login-action-row{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:18px!important;}
.login-action-row .btn{height:54px!important;font-size:15px!important;margin:0!important;width:100%!important;}
#registerModeBtn.btn.ghost{background:#fff!important;border-color:#93b4fb!important;}
.google-login-btn{height:52px!important;margin-top:14px!important;}
.login-policy-note{
  text-align:center!important;
  margin:18px 0 0!important;
  color:#64748b!important;
  font-size:13px!important;
  line-height:1.6!important;
}
.login-policy-note a{color:var(--kk-blue)!important;font-weight:900!important;text-decoration:none!important;}
.login-footer.contact-footer{
  width:min(1220px,100%)!important;
  border-radius:20px!important;
  background:#fff!important;
  border:1px solid var(--kk-line)!important;
  box-shadow:none!important;
  display:flex!important;
}

/* =========================================================
   APP DESKTOP - 3 KOLOM CLEAN MATERIAL
   ========================================================= */
@media (min-width:981px){
  html,body{height:100%!important;overflow:hidden!important;}
  .app-page:not(.hidden){
    display:grid!important;
    grid-template-columns:252px minmax(0,1fr) 320px!important;
    grid-template-rows:100vh!important;
    gap:0!important;
    height:100vh!important;
    width:100%!important;
    background:var(--kk-bg)!important;
    overflow:hidden!important;
  }
  .sidebar{
    position:relative!important;
    width:252px!important;
    max-width:252px!important;
    min-width:252px!important;
    height:100vh!important;
    flex:0 0 252px!important;
    padding:22px 14px!important;
    border-right:1px solid var(--kk-line)!important;
    background:#fff!important;
    overflow:visible!important;
    gap:14px!important;
    box-shadow:none!important;
    border-radius:0!important;
  }
  .side-brand.kk-side-logo-only{
    height:92px!important;
    min-height:92px!important;
    padding:10px 8px!important;
    margin-bottom:10px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .side-brand.kk-side-logo-only::after{display:none!important;}
  .kk-side-role{display:none!important;}
  .side-brand .side-brand-icon,.side-brand b,.side-brand div{display:none!important;}
  .nav{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    padding:2px 4px 14px 0!important;
  }
  .nav-btn,.nav-group-trigger{
    min-height:46px!important;
    border-radius:12px!important;
    padding:11px 14px!important;
    border:1px solid transparent!important;
    background:transparent!important;
    color:#3b4759!important;
    font-size:15px!important;
    font-weight:780!important;
    box-shadow:none!important;
    line-height:1.25!important;
  }
  .nav-btn:hover,.nav-btn.active,.nav-group.has-active>.nav-group-trigger,.nav-group.open>.nav-group-trigger{
    background:var(--kk-blue-soft)!important;
    color:var(--kk-blue)!important;
    border-color:#d6e4ff!important;
  }
  .nav-submenu{
    position:absolute!important;
    left:calc(100% + 8px)!important;
    top:92px!important;
    z-index:90!important;
    min-width:238px!important;
    max-width:280px!important;
    max-height:calc(100vh - 125px)!important;
    overflow-y:auto!important;
    padding:10px!important;
    border:1px solid var(--kk-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 14px 35px rgba(15,23,42,.12)!important;
    display:none!important;
  }
  .nav-group.open .nav-submenu,.nav-group.has-active .nav-submenu{display:flex!important;}
  .nav-submenu .nav-btn{font-size:13px!important;min-height:40px!important;padding:9px 10px!important;}
  .side-footer{
    flex:0 0 auto!important;
    margin-top:auto!important;
    padding-top:14px!important;
    border-top:1px solid var(--kk-line)!important;
    display:block!important;
  }
  .side-footer .btn{height:46px!important;border-radius:13px!important;}

  .main{
    height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:24px 28px 36px!important;
    background:var(--kk-bg)!important;
  }
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:35!important;
    min-height:72px!important;
    margin:0 0 24px!important;
    padding:12px 16px!important;
    background:#fff!important;
    border:1px solid var(--kk-line)!important;
    border-radius:18px!important;
    box-shadow:var(--kk-shadow-soft)!important;
  }
  .topbar-page-title h1{font-size:22px!important;line-height:1.2!important;color:#102033!important;}
  .topbar-page-title p{font-size:12px!important;color:#64748b!important;}
  .teacher-chip{
    min-width:220px!important;
    max-width:300px!important;
    border-radius:16px!important;
    border:1px solid var(--kk-line)!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .desktop-right-rail{
    display:block!important;
    width:320px!important;
    height:100vh!important;
    overflow-y:auto!important;
    padding:18px 16px!important;
    background:#fff!important;
    border-left:1px solid var(--kk-line)!important;
  }
  .right-card{
    background:#fff!important;
    border:1px solid var(--kk-line)!important;
    border-radius:18px!important;
    padding:16px!important;
    margin-bottom:14px!important;
    box-shadow:var(--kk-shadow-soft)!important;
  }
  .right-icon{
    width:40px!important;height:40px!important;border-radius:14px!important;
    background:var(--kk-blue-soft)!important;color:var(--kk-blue)!important;display:grid!important;place-items:center!important;
  }
  .right-profile-mini{background:#f8fafc!important;border:1px solid var(--kk-line)!important;border-radius:16px!important;}
  .right-status-list div.ready,.right-drive-status.connected{background:#ecfdf5!important;border-color:#bbf7d0!important;}

  .page,.app-footer{max-width:none!important;margin-left:0!important;margin-right:0!important;}
  .hero-card,.panel,.stat-card,.file-card,.table-wrap,.section-head,.planner-panel,.teaching-hero-card{
    background:#fff!important;
    border:1px solid var(--kk-line)!important;
    border-radius:18px!important;
    box-shadow:var(--kk-shadow-soft)!important;
  }
  .hero-card{
    padding:24px 28px!important;
    align-items:center!important;
    background:#fff!important;
  }
  .hero-card h2{font-size:30px!important;line-height:1.16!important;letter-spacing:-.7px!important;color:#102033!important;}
  .hero-card p{color:#64748b!important;}
  .cards{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;gap:16px!important;}
  .stat-card{
    min-height:142px!important;
    padding:20px!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .stat-card:after{opacity:.055!important;}
  .stat-card span{font-size:13px!important;color:#64748b!important;font-weight:850!important;}
  .stat-card b{font-size:36px!important;line-height:1.05!important;}
  .stat-card small{font-size:13px!important;color:#74869b!important;}
  .stat-card.blue{color:var(--kk-blue)!important;}
  .stat-card.green{color:var(--kk-teal)!important;}
  .stat-card.purple{color:var(--kk-purple)!important;}
  .stat-card.orange{color:var(--kk-orange)!important;}
  .stat-card.pink{color:#ec4899!important;}
}

/* Dashboard quick action redesign */
.kk-quick-panel h3,.kk-activity-panel h3{margin:0 0 14px!important;color:#172033!important;}
.kk-quick-actions-clean{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.kk-quick-actions-clean button{
  display:grid!important;
  grid-template-columns:46px 1fr 16px!important;
  align-items:center!important;
  gap:10px!important;
  min-height:72px!important;
  padding:12px!important;
  border:1px solid var(--kk-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#172033!important;
  text-align:left!important;
  box-shadow:none!important;
}
.kk-quick-actions-clean button::after{content:'›';font-size:24px;color:#94a3b8;justify-self:end;}
.kk-quick-actions-clean span{width:46px;height:46px;border-radius:14px;background:#eef6ff;display:grid;place-items:center;font-size:20px;}
.kk-quick-actions-clean b{display:block;font-size:13px;line-height:1.25;}
.kk-quick-actions-clean small{display:block;color:#64748b;font-size:11px;line-height:1.35;margin-top:3px;}
.kk-activity-list{display:grid;gap:0;border:1px solid var(--kk-line);border-radius:16px;overflow:hidden;background:#fff;}
.kk-activity-list div{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--kk-line);}
.kk-activity-list div:last-child{border-bottom:0;}
.kk-activity-list span{width:34px;height:34px;border-radius:12px;background:#eff6ff;display:grid;place-items:center;}
.kk-activity-list b{display:block;font-size:13px;line-height:1.25;color:#172033;}
.kk-activity-list small{display:block;color:#64748b;font-size:11px;line-height:1.35;margin-top:3px;}

/* =========================================================
   PERANGKAT AJAR WORKSPACE
   ========================================================= */
#teachingPlanner .section-head h2{font-size:30px!important;color:#102033!important;}
.planner-status-chip{border-radius:999px!important;background:#ecfdf5!important;color:#0f8a6f!important;border:1px solid #bbf7d0!important;}
.teaching-hero-card{
  background:#fff!important;
  border:1px solid var(--kk-line)!important;
  border-radius:18px!important;
  padding:18px!important;
  margin-bottom:16px!important;
}
.teaching-hero-card h3{font-size:18px!important;line-height:1.35!important;color:#172033!important;}
.planner-page-subnav{
  position:sticky!important;
  top:92px!important;
  z-index:28!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  background:#fff!important;
  border:1px solid var(--kk-line)!important;
  border-radius:16px!important;
  padding:10px!important;
  margin:0 0 14px!important;
  box-shadow:0 4px 16px rgba(15,23,42,.06)!important;
}
.planner-page-subnav button{
  border:1px solid #dbeafe!important;
  background:#fff!important;
  color:#334155!important;
  border-radius:10px!important;
  padding:10px 13px!important;
  font-weight:850!important;
  font-size:13px!important;
}
.planner-page-subnav button:hover,.planner-page-subnav button.active{
  background:#eff6ff!important;color:var(--kk-blue)!important;border-color:#9fbcff!important;
}
.planner-step-row{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  padding:14px!important;
  background:#fff!important;
  border:1px solid var(--kk-line)!important;
  border-radius:18px!important;
  box-shadow:var(--kk-shadow-soft)!important;
}
.planner-step-card{
  min-width:110px!important;
  border:1px solid var(--kk-line)!important;
  background:#fff!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.planner-panel-head h3,.planner-panel h3{color:#172033!important;}
.planner-preview-hub{background:#fff!important;}
.planner-preview-frame,.planner-doc-preview-stage{background:#f1f5f9!important;}

/* =========================================================
   MOBILE - compact Android style
   ========================================================= */
@media (max-width:980px){
  html,body{overflow-x:hidden!important;background:#fff!important;}
  body.kk-logged-in{background:#fff!important;}
  .app-page:not(.hidden){
    display:block!important;
    min-height:100vh!important;
    background:#fff!important;
    padding-top:72px!important;
  }
  .main{
    padding:16px!important;
    background:#fff!important;
  }
  .topbar{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    z-index:1000!important;
    height:72px!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:10px 14px!important;
    border:0!important;
    border-bottom:1px solid var(--kk-line)!important;
    border-radius:0!important;
    box-shadow:0 3px 14px rgba(15,23,42,.08)!important;
    background:#fff!important;
  }
  .mobile-menu-btn{
    display:grid!important;
    place-items:center!important;
    width:48px!important;height:48px!important;
    border-radius:15px!important;
    background:#eff6ff!important;
    border:1px solid #dbeafe!important;
    color:var(--kk-blue)!important;
    font-size:24px!important;
    padding:0!important;
  }
  .mobile-top-brand{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    height:52px!important;
  }
  .kk-mobile-role{display:none!important;}
  .topbar-page-title{display:none!important;}
  .teacher-chip{
    display:flex!important;
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    padding:0!important;
    border-radius:16px!important;
    border:1px solid #dbeafe!important;
    background:#eff6ff!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  .teacher-chip img{width:48px!important;height:48px!important;border-radius:16px!important;object-fit:cover!important;}
  .teacher-chip div{display:none!important;}
  .sidebar{
    position:fixed!important;
    top:0!important;bottom:0!important;left:0!important;
    z-index:1200!important;
    width:min(320px,86vw)!important;
    max-width:min(320px,86vw)!important;
    height:100vh!important;
    padding:18px 14px!important;
    background:#fff!important;
    border-right:1px solid var(--kk-line)!important;
    transform:translateX(-105%)!important;
    transition:transform .2s ease!important;
    overflow-y:auto!important;
    box-shadow:0 20px 60px rgba(15,23,42,.18)!important;
  }
  .app-page.mobile-menu-open .sidebar{transform:translateX(0)!important;}
  .app-page.mobile-menu-open .mobile-sidebar-overlay{display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.42)!important;z-index:1100!important;}
  .mobile-close-btn{display:grid!important;place-items:center!important;position:absolute!important;right:12px!important;top:12px!important;width:38px!important;height:38px!important;border:0!important;border-radius:12px!important;background:#f1f5f9!important;color:#334155!important;font-size:24px!important;}
  .side-brand.kk-side-logo-only{height:74px!important;justify-content:flex-start!important;align-items:center!important;border:0!important;background:transparent!important;padding:4px 48px 4px 2px!important;box-shadow:none!important;}
  .kk-sidebar-logo{width:190px!important;}
  .nav{display:flex!important;flex-direction:column!important;gap:6px!important;overflow:visible!important;}
  .nav-btn{border-radius:12px!important;min-height:44px!important;}
  .side-footer{margin-top:18px!important;padding-top:12px!important;border-top:1px solid var(--kk-line)!important;}
  .hero-card{
    background:#fff!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:8px 0 14px!important;margin-bottom:10px!important;
  }
  .hero-card h2{font-size:24px!important;line-height:1.2!important;margin-bottom:5px!important;}
  .hero-card .btn.primary{width:100%!important;height:52px!important;margin-top:14px!important;}
  .cards{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .stat-card{min-height:154px!important;border-radius:16px!important;padding:16px!important;background:#fff!important;border:1px solid var(--kk-line)!important;box-shadow:var(--kk-shadow-soft)!important;}
  .stat-card b{font-size:34px!important;}
  .stat-card:nth-child(5){grid-column:1 / -1!important;min-height:130px!important;}
  .kk-quick-actions-clean{grid-template-columns:1fr!important;}
  .desktop-right-rail{display:none!important;}
  .app-footer{border-radius:18px!important;margin:18px 0!important;background:#fff!important;border:1px solid var(--kk-line)!important;box-shadow:none!important;}
  .planner-page-subnav{position:sticky!important;top:72px!important;flex-wrap:nowrap!important;overflow-x:auto!important;}
  .planner-page-subnav button{flex:0 0 auto!important;}
}

@media (max-width:760px){
  .login-page:not(.hidden){
    display:block!important;
    padding:0!important;
    background:#fff!important;
  }
  .login-shell{
    width:100%!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .brand-panel.kk-login-hero{
    min-height:330px!important;
    padding:24px 20px!important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 45%,rgba(255,255,255,.35) 100%),url('./assets/hero-suasana-sekolah.jpg')!important;
    border-radius:0!important;
  }
  .kk-login-logo{width:220px!important;max-height:80px!important;margin-bottom:16px!important;}
  .brand-panel.kk-login-hero h1{font-size:24px!important;line-height:1.18!important;max-width:330px!important;}
  .brand-panel.kk-login-hero p{font-size:14px!important;max-width:330px!important;}
  .kk-login-benefits{display:none!important;}
  .login-card{
    min-height:0!important;
    padding:24px 20px 22px!important;
    border:0!important;
  }
  .login-footer.contact-footer{
    width:calc(100% - 28px)!important;
    margin:16px auto 26px!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

@media (max-width:420px){
  .cards{grid-template-columns:1fr!important;}
  .stat-card:nth-child(5){grid-column:auto!important;}
  .kk-mobile-logo{width:178px!important;max-width:calc(100vw - 132px)!important;height:39px!important;}
}

/* =========================================================
   FIX CLEAN MATERIAL POLISH 20260712
   Menjawab revisi: tab internal tidak menggantung, login legal terlihat,
   hero image bersih tanpa teks bawaan, dashboard tidak bertumpuk,
   dan palet warna disederhanakan.
   ========================================================= */
:root{
  --kk-blue:#1d5fd1;
  --kk-blue-2:#2563eb;
  --kk-blue-soft:#eef5ff;
  --kk-teal:#14b8a6;
  --kk-teal-soft:#ecfdf7;
  --kk-slate:#334155;
  --kk-bg:#f7f9fc;
  --kk-surface:#ffffff;
  --kk-line:#e2e8f0;
  --kk-text:#172033;
  --kk-muted:#64748b;
  --kk-shadow:0 6px 18px rgba(15,23,42,.06);
  --kk-shadow-soft:0 2px 8px rgba(15,23,42,.045);
}

/* Palet bersih: hilangkan aksen lama yang terlalu ramai */
.stat-card.purple,.stat-card.orange,.stat-card.pink{color:var(--kk-blue)!important;}
.stat-card.green{color:var(--kk-teal)!important;}
.badge.purple,.badge.orange,.badge.pink{background:var(--kk-blue-soft)!important;color:var(--kk-blue)!important;border-color:#bfdbfe!important;}

/* Login lebih pendek dan legal link tidak tertutup taskbar */
.login-page:not(.hidden){
  align-items:flex-start!important;
  min-height:100vh!important;
  padding:22px 28px 86px!important;
  overflow-y:auto!important;
}
.login-shell{
  min-height:min(650px,calc(100vh - 118px))!important;
  max-height:none!important;
}
.brand-panel.kk-login-hero{
  min-height:min(650px,calc(100vh - 118px))!important;
  padding:48px 56px!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.84) 42%,rgba(255,255,255,.32) 100%),url('./assets/hero-suasana-sekolah.jpg')!important;
  background-position:center center!important;
}
.login-card{
  min-height:min(650px,calc(100vh - 118px))!important;
  padding:42px 56px 34px!important;
  overflow-y:auto!important;
}
.login-policy-note{margin-top:14px!important;margin-bottom:10px!important;}
.kk-login-logo{margin-bottom:22px!important;}
.brand-panel.kk-login-hero h1{margin-top:0!important;}

/* Tab internal Perangkat Ajar: jadi bar datar di atas, bukan box menggantung */
#teachingPlanner .planner-page-subnav{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 16px!important;
  padding:10px 0 12px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border:0!important;
  border-bottom:1px solid var(--kk-line)!important;
  border-radius:0!important;
  background:var(--kk-bg)!important;
  box-shadow:none!important;
  scrollbar-width:thin!important;
  scrollbar-color:#cbd5e1 transparent!important;
}
#teachingPlanner .planner-page-subnav::-webkit-scrollbar{height:6px!important;}
#teachingPlanner .planner-page-subnav::-webkit-scrollbar-thumb{background:#cbd5e1!important;border-radius:999px!important;}
#teachingPlanner .planner-page-subnav button{
  flex:0 0 auto!important;
  min-height:40px!important;
  border:1px solid #dbeafe!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#1f3a60!important;
  padding:9px 13px!important;
  box-shadow:none!important;
}
#teachingPlanner .planner-page-subnav button:hover,
#teachingPlanner .planner-page-subnav button.active{
  background:var(--kk-blue)!important;
  border-color:var(--kk-blue)!important;
  color:#fff!important;
}
#teachingPlanner{overflow-x:hidden!important;}

/* Dashboard cards: tambahkan ikon/grafik di semua ringkasan */
.cards{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;}
.stat-card{
  display:grid!important;
  grid-template-columns:1fr 58px!important;
  grid-template-rows:auto auto auto!important;
  column-gap:12px!important;
  align-items:center!important;
  min-width:0!important;
}
.stat-card::before{
  content:attr(data-icon)!important;
  grid-column:2!important;
  grid-row:1 / span 3!important;
  width:56px!important;
  height:56px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  justify-self:end!important;
  font-size:24px!important;
  background:var(--kk-blue-soft)!important;
  color:var(--kk-blue)!important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)!important;
}
.stat-card.green::before,.stat-card.kk-stat-attendance::before{background:var(--kk-teal-soft)!important;color:var(--kk-teal)!important;}
.stat-card:after{display:none!important;}
.stat-card span,.stat-card b,.stat-card small{grid-column:1!important;min-width:0!important;}
.stat-card span{white-space:normal!important;line-height:1.25!important;}
.stat-card b{margin:6px 0!important;}
.stat-card small{white-space:normal!important;line-height:1.3!important;}
.stat-card.kk-stat-attendance::before{
  content:""!important;
  background:conic-gradient(var(--kk-teal) calc(var(--absen-deg, 0) * 1deg),#e5eef8 0)!important;
  position:relative!important;
}
.stat-card.kk-stat-attendance::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  right:34px!important;
  top:50%!important;
  width:30px!important;
  height:30px!important;
  border-radius:50%!important;
  background:#fff!important;
  transform:translateY(-50%)!important;
  opacity:1!important;
}

/* Aksi cepat dan aktivitas terbaru: teks tidak bertumpuk/vertikal */
.kk-quick-actions-clean{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:12px!important;
}
.kk-quick-actions-clean button{
  grid-template-columns:48px minmax(0,1fr) 18px!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}
.kk-quick-actions-clean b,
.kk-quick-actions-clean small{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
}
.kk-activity-list div{
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  min-height:64px!important;
}
.kk-activity-list b,
.kk-activity-list small{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
}

/* Pastikan tidak ada glass tersisa */
.login-card,.brand-panel,.panel,.hero-card,.stat-card,.right-card,.sidebar,.desktop-right-rail,.topbar,.planner-page-subnav,.planner-panel,.teaching-hero-card,.app-footer,.contact-footer{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.panel,.hero-card,.stat-card,.right-card,.app-footer,.table-wrap,.planner-panel,.teaching-hero-card{
  box-shadow:var(--kk-shadow-soft)!important;
}

@media (max-width:980px){
  #teachingPlanner .planner-page-subnav{top:72px!important;background:#fff!important;padding:10px 0!important;}
  .cards{grid-template-columns:1fr 1fr!important;}
  .stat-card{grid-template-columns:1fr 54px!important;}
  .stat-card::before{width:52px!important;height:52px!important;}
  .stat-card.kk-stat-attendance::after{right:31px!important;width:28px!important;height:28px!important;}
}
@media (max-width:760px){
  .login-page:not(.hidden){padding:0 0 72px!important;}
  .login-shell{min-height:0!important;}
  .brand-panel.kk-login-hero{
    min-height:330px!important;
    padding:24px 20px!important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.84) 45%,rgba(255,255,255,.36) 100%),url('./assets/hero-suasana-sekolah.jpg')!important;
    background-position:center center!important;
  }
  .login-card{min-height:0!important;overflow:visible!important;padding-bottom:28px!important;}
}

/* =========================================================
   UPDATE 20260712: FOOTER INTRO PRESISI, TEKS DASHBOARD,
   DAN MENU INTERNAL DI KOLOM KANAN
   ========================================================= */

/* Footer login transparan, tepat di tengah bawah kolom intro. */
.kk-login-hero-content{
  height:100%!important;
  min-height:0!important;
  flex:1 1 auto!important;
  align-self:stretch!important;
}
.kk-login-benefits{margin-top:auto!important;}
.kk-login-intro-footer{
  width:100%!important;
  margin:16px 0 0!important;
  padding:0 8px 2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#1e293b!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.kk-login-intro-footer .credit-text{
  display:block!important;
  width:100%!important;
  color:#172033!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:900!important;
  text-align:center!important;
  text-shadow:0 1px 2px rgba(255,255,255,.95)!important;
}
.kk-login-socials{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px 18px!important;
}
.kk-login-intro-footer .social-link{
  min-width:0!important;
  max-width:100%!important;
  padding:2px 0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#1d4ed8!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.kk-login-intro-footer .whatsapp-link{color:#15803d!important;}
.kk-login-intro-footer .social-link:hover{
  text-decoration:underline!important;
  transform:none!important;
}
.kk-login-intro-footer .social-link svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Teks Aksi Cepat tetap horizontal dan memiliki kolom yang cukup. */
.kk-quick-actions-clean button{
  grid-template-columns:48px minmax(0,1fr) 18px!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  column-gap:11px!important;
  row-gap:3px!important;
}
.kk-quick-actions-clean button > span{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
}
.kk-quick-actions-clean button > b{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  width:100%!important;
}
.kk-quick-actions-clean button > small{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  width:100%!important;
  margin:0!important;
}
.kk-quick-actions-clean button::after{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  justify-self:end!important;
}
.kk-quick-actions-clean button > b,
.kk-quick-actions-clean button > small{
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}

/* Teks Aktivitas Terbaru tetap horizontal dan tidak bertumpuk. */
.kk-activity-list div{
  grid-template-columns:46px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:11px!important;
  row-gap:3px!important;
  align-items:center!important;
}
.kk-activity-list div > span{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
}
.kk-activity-list div > b{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  width:100%!important;
}
.kk-activity-list div > small{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  width:100%!important;
  margin:0!important;
}
.kk-activity-list div > b,
.kk-activity-list div > small{
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}

/* Menu internal halaman ditempatkan tepat di bawah Ringkasan Profil Aktif. */
.right-internal-menu-card.hidden{display:none!important;}
.right-internal-menu-card{
  padding:14px!important;
  overflow:hidden!important;
}
.right-internal-menu{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  margin-top:12px!important;
}
.right-internal-menu button{
  position:relative!important;
  width:100%!important;
  min-height:41px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  padding:9px 34px 9px 12px!important;
  border:1px solid #e2e8f0!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  color:#334155!important;
  font:inherit!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
  white-space:normal!important;
}
.right-internal-menu button::after{
  content:'›'!important;
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#94a3b8!important;
  font-size:18px!important;
  line-height:1!important;
}
.right-internal-menu button:hover{
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
  color:#1d4ed8!important;
}
.right-internal-menu button.active{
  background:#eaf2ff!important;
  border-color:#93b4fb!important;
  color:#1d5fd1!important;
  box-shadow:inset 3px 0 0 #2563eb!important;
}
.right-internal-menu button.active::after{color:#2563eb!important;}

@media (min-width:981px){
  /* Sumber menu internal tetap ada untuk logika, tetapi tidak mengambil ruang di konten utama. */
  .page-internal-nav-source{display:none!important;}
  .right-internal-menu-card{display:block;}
}

@media (max-width:980px){
  /* Kolom kanan hilang di mobile; menu sumber kembali menjadi bar geser yang menempel di bawah header. */
  .page-internal-nav-source{
    display:flex!important;
    position:sticky!important;
    top:72px!important;
    z-index:900!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:#fff!important;
  }
  .page-internal-nav-source button{flex:0 0 auto!important;}
}

@media (max-width:760px){
  .kk-login-hero-content{height:auto!important;}
  .kk-login-benefits{margin-top:20px!important;}
  .kk-login-intro-footer{
    margin-top:14px!important;
    padding-bottom:0!important;
    gap:6px!important;
  }
  .kk-login-intro-footer .credit-text{font-size:11.5px!important;}
  .kk-login-socials{gap:8px 14px!important;}
  .kk-login-intro-footer .social-link{font-size:11px!important;}
}

@media print{
  .right-internal-menu-card,.page-internal-nav-source{display:none!important;}
}


/* =========================================================
   UPDATE 20260712: PERANGKAT AJAR RINGKAS + SCANNER DI KOLOM KANAN
   ========================================================= */

/* Sumber navigasi tetap tersedia untuk logika, tetapi tidak tampil sebagai bar horizontal. */
.page-internal-nav-source{
  display:none!important;
  position:static!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
}

.mobile-context-tools-mount{display:none;}
.right-planner-quick-card.hidden,
.right-scanner-card.hidden{display:none!important;}
.right-planner-quick-actions{
  display:grid!important;
  gap:8px!important;
  margin-top:12px!important;
}
.right-planner-quick-actions .btn{
  width:100%!important;
  min-height:40px!important;
  justify-content:flex-start!important;
  text-align:left!important;
  white-space:normal!important;
  line-height:1.3!important;
}

.right-scanner-card{
  padding:13px!important;
  overflow:visible!important;
}
.right-scanner-head{
  position:relative!important;
  padding-right:34px!important;
}
.right-card-close{
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e2e8f0!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#64748b!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.right-card-close:hover{background:#f1f5f9!important;color:#0f172a!important;}
.right-scanner-card .right-scanner-layout{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:12px!important;
}
.right-scanner-card .scanner-tab-camera-panel{
  padding:9px!important;
  border-radius:14px!important;
}
.right-scanner-card .scanner-tab-camera.barcode-scanner{
  min-height:0!important;
  margin:0 0 8px!important;
  padding:5px!important;
  border-radius:13px!important;
}
.right-scanner-card .scanner-tab-camera video{
  width:100%!important;
  min-height:180px!important;
  max-height:235px!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  border-radius:10px!important;
}
.right-scanner-card .scanner-tab-status{
  min-height:0!important;
  padding:9px 10px!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  border-radius:11px!important;
}
.right-scanner-card .qr-permission-help{
  margin-top:8px!important;
  padding:10px!important;
  font-size:11px!important;
  line-height:1.4!important;
}
.right-scanner-card .scanner-tab-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin-top:9px!important;
}
.right-scanner-card .scanner-tab-actions .btn{
  min-width:0!important;
  min-height:38px!important;
  padding:8px 7px!important;
  font-size:10.5px!important;
  white-space:normal!important;
  line-height:1.2!important;
}
.right-scanner-card .scanner-tab-actions .btn:nth-child(3){grid-column:1/-1!important;}
.right-scanner-card .scanner-tab-camera-select{
  display:grid!important;
  gap:5px!important;
  margin-top:9px!important;
}
.right-scanner-card .scanner-tab-camera-select select{
  width:100%!important;
  min-height:39px!important;
  padding:7px 9px!important;
  font-size:11px!important;
  border-radius:10px!important;
}
.right-scanner-card .scanner-tab-info-panel{
  display:grid!important;
  gap:9px!important;
}
.right-scanner-card .scanner-result-box{
  min-height:0!important;
  padding:12px!important;
  gap:5px!important;
  border-radius:14px!important;
}
.right-scanner-card .scanner-result-box b{font-size:17px!important;}
.right-scanner-card .scanner-result-box span,
.right-scanner-card .scanner-result-box em{font-size:11px!important;line-height:1.4!important;}
.right-scanner-card .scanner-tab-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
.right-scanner-card .scanner-tab-stats div{
  min-width:0!important;
  padding:9px 5px!important;
  border-radius:12px!important;
}
.right-scanner-card .scanner-tab-stats b{font-size:22px!important;}
.right-scanner-card .scanner-tab-stats span{font-size:9px!important;line-height:1.15!important;}
.right-scanner-card .scanner-history-card,
.right-scanner-card .qr-pending-card{
  padding:11px!important;
  border-radius:14px!important;
}
.right-scanner-card .scanner-history-card h3,
.right-scanner-card .qr-pending-head h4{font-size:13px!important;}
.right-scanner-card .scanner-history-list{max-height:155px!important;}
.right-scanner-card .scanner-history-item{
  grid-template-columns:minmax(0,1fr) auto!important;
  padding:8px!important;
}
.right-scanner-card .scanner-history-item b{font-size:11.5px!important;}
.right-scanner-card .scanner-history-item span,
.right-scanner-card .scanner-history-item small{font-size:9.5px!important;}
.right-scanner-card .scanner-tab-pending-wrap{margin-top:10px!important;}
.right-scanner-card .qr-pending-head{
  align-items:flex-start!important;
  gap:7px!important;
}
.right-scanner-card .qr-pending-head small{font-size:9.5px!important;line-height:1.35!important;}
.right-scanner-card .qr-pending-summary{
  grid-template-columns:auto minmax(0,1fr)!important;
  padding:9px!important;
}
.right-scanner-card .qr-pending-summary b{font-size:25px!important;}
.right-scanner-card .qr-pending-summary span,
.right-scanner-card .qr-pending-summary small{font-size:10px!important;}
.right-scanner-card .qr-pending-items{max-height:255px!important;}
.right-scanner-card .qr-pending-item{padding:8px!important;}
.right-scanner-card .qr-pending-item b{font-size:11px!important;}
.right-scanner-card .qr-pending-item small{font-size:9.5px!important;}

@media (min-width:981px){
  .app-page.right-rail-scanner-mode{
    grid-template-columns:252px minmax(0,1fr) 390px!important;
  }
  .app-page.right-rail-scanner-mode .desktop-right-rail{
    width:390px!important;
    padding:14px!important;
  }
  .app-page.right-rail-scanner-mode .right-drive-card,
  .app-page.right-rail-scanner-mode .right-context-card,
  .app-page.right-rail-scanner-mode .right-document-card,
  .app-page.right-rail-scanner-mode .right-help-card,
  .app-page.right-rail-scanner-mode #rightInternalMenuCard,
  .app-page.right-rail-scanner-mode #rightPlannerQuickCard{
    display:none!important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .app-page.right-rail-scanner-mode{
    grid-template-columns:236px minmax(0,1fr) 350px!important;
  }
  .app-page.right-rail-scanner-mode .sidebar{
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
  }
  .app-page.right-rail-scanner-mode .desktop-right-rail{width:350px!important;}
}

@media (max-width:980px){
  .mobile-context-tools-mount{
    display:block!important;
    width:100%!important;
    margin:0 0 14px!important;
  }
  .mobile-context-tools-mount:empty{display:none!important;}
  .mobile-context-tools-mount .right-card{
    width:100%!important;
    margin:0 0 12px!important;
    padding:14px!important;
    border:1px solid var(--kk-line,#e2e8f0)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:var(--kk-shadow-soft)!important;
  }
  .mobile-context-tools-mount .right-internal-menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .mobile-context-tools-mount .right-internal-menu button{
    min-height:40px!important;
    padding:8px 24px 8px 10px!important;
    font-size:11px!important;
  }
  .mobile-context-tools-mount .right-planner-quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .mobile-context-tools-mount .right-planner-quick-actions .btn{
    min-height:42px!important;
    font-size:11px!important;
  }
  .mobile-context-tools-mount .right-scanner-card{
    padding:12px!important;
  }
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-camera video{
    min-height:220px!important;
    max-height:340px!important;
  }
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-actions .btn:nth-child(3){grid-column:auto!important;}
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-actions .btn{font-size:11px!important;}
}

@media (max-width:560px){
  .mobile-context-tools-mount .right-internal-menu,
  .mobile-context-tools-mount .right-planner-quick-actions{
    grid-template-columns:1fr!important;
  }
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-actions{
    grid-template-columns:1fr!important;
  }
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-actions .btn:nth-child(3){grid-column:auto!important;}
  .mobile-context-tools-mount .right-scanner-card .scanner-tab-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media print{
  #rightScannerCard,#rightPlannerQuickCard,.mobile-context-tools-mount{display:none!important;}
}

/* =========================================================
   FIX FINAL 20260712: HILANGKAN TOTAL SUMBER MENU INTERNAL
   - Elemen tetap berada di DOM sebagai sumber menu kolom kanan.
   - Tidak mengambil ruang dan tidak dapat muncul akibat aturan lama.
   ========================================================= */
html body #teachingPlanner .planner-page-subnav.page-internal-nav-source,
html body #teachingPlanner .page-internal-nav-source.planner-page-subnav{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  position:absolute!important;
  inset:auto!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
  background:transparent!important;
  pointer-events:none!important;
  clip-path:inset(100%)!important;
  contain:strict!important;
}
html body #teachingPlanner .planner-page-subnav.page-internal-nav-source::before,
html body #teachingPlanner .planner-page-subnav.page-internal-nav-source::after,
html body #teachingPlanner .planner-page-subnav.page-internal-nav-source > *{
  display:none!important;
  content:none!important;
}

/* =========================================================
   FIX MOBILE FINAL 20260712
   - Tombol Keluar selalu terlihat di dasar drawer mobile.
   - Logo di dalam drawer mobile dihilangkan agar tidak ganda.
   - Intro login memenuhi lebar layar pada browser iOS/WebKit.
   ========================================================= */
@media (max-width:980px){
  .sidebar{
    top:0!important;
    bottom:auto!important;
    height:var(--kk-mobile-viewport-h,100dvh)!important;
    min-height:var(--kk-mobile-viewport-h,100dvh)!important;
    max-height:var(--kk-mobile-viewport-h,100dvh)!important;
    padding:12px 12px max(10px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }
  .sidebar .side-brand.kk-side-logo-only{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .sidebar .nav{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:48px 2px 14px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }
  .sidebar .side-footer{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    padding:10px 0 0!important;
    border-top:1px solid var(--kk-line,#e2e8f0)!important;
    background:#fff!important;
    z-index:25!important;
    box-shadow:0 -8px 18px rgba(255,255,255,.96)!important;
  }
  .sidebar .side-footer .btn{
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
  }
}

@media (max-width:760px){
  html.kk-ios,
  html.kk-ios body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  html.kk-ios body.kk-logged-out #loginPage.login-page:not(.hidden){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 0 72px!important;
    overflow-x:hidden!important;
  }
  html.kk-ios body.kk-logged-out #loginPage .login-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  html.kk-ios body.kk-logged-out #loginPage .brand-panel.kk-login-hero,
  html.kk-ios body.kk-logged-out #loginPage .login-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  html.kk-ios body.kk-logged-out #loginPage .brand-panel.kk-login-hero{
    border-radius:0!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}