/* =============================================================
   Digitera UI Polish V4.19.0
   Visual/responsive-only patch. No database or application logic.
   Loaded last so it can safely normalize legacy presentation rules.
   ============================================================= */

:root{
  --ui-page:#f6f7fb;
  --ui-card:#fff;
  --ui-text:#25233a;
  --ui-muted:#747184;
  --ui-line:#e9e6f2;
  --ui-primary:#7047eb;
  --ui-primary-dark:#5932ce;
  --ui-soft:#f2edff;
  --ui-radius:18px;
  --ui-radius-lg:24px;
  --ui-shadow:0 10px 30px rgba(49,37,89,.075);
  --ui-shadow-hover:0 16px 38px rgba(49,37,89,.12);
}

html{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
body:not(.role-student):not(.role-teacher){background:var(--ui-page)}
img,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit}
button,.btn,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid rgba(112,71,235,.25);outline-offset:2px}

/* Better page rhythm without changing page structure */
.container{width:min(1180px,calc(100% - 40px))}
.page-head{padding:34px 0 20px;align-items:center}
.page-head h1{line-height:1.08}
.page-head p{margin-top:5px}
.section{padding:58px 0}
.section-head{gap:18px}
.card,.feature-card,.quiz-card,.stat,.table-wrap,.empty{border-color:var(--ui-line)}
.card,.feature-card,.quiz-card,.stat{box-shadow:var(--ui-shadow)}
.card,.feature-card,.quiz-card{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.card:hover,.feature-card:hover,.quiz-card:hover{border-color:#ddd5fb;box-shadow:var(--ui-shadow-hover)}

/* Inputs are clearer and easier to tap */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea{
  min-height:46px;
  border-color:#dcd8e7;
  border-radius:12px;
  padding:11px 13px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(30,24,49,.025);
}
textarea{min-height:118px}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,select:focus,textarea:focus{
  border-color:#9f86f4;
  box-shadow:0 0 0 4px rgba(112,71,235,.10);
}
.form-group label{margin-bottom:7px;color:#443e55;font-size:.9rem}
.help{line-height:1.45}

/* Buttons: consistent size, calmer shadows */
.btn{min-height:44px;border-radius:12px;padding:10px 15px;line-height:1.2}
.btn-sm{min-height:38px;padding:8px 12px}
.btn-primary{box-shadow:0 8px 19px rgba(112,71,235,.22)}
.btn:hover{transform:translateY(-1px)}
.actions{align-items:center}

/* Tables stay readable on desktop and safely scroll on phones */
.table-wrap{position:relative;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 8px 24px rgba(31,24,56,.055)}
.table-wrap table{min-width:720px}
table{font-size:.91rem}
th{position:sticky;top:0;z-index:2;background:#faf9fd;color:#5d576c;white-space:nowrap}
th,td{padding:12px 14px}
tbody tr:hover td{background:#fcfbff}

/* Public/developer top navigation */
body:not(.role-teacher):not(.role-student) .topbar{border-bottom-color:rgba(112,71,235,.09);box-shadow:0 5px 22px rgba(43,32,78,.045)}
body:not(.role-teacher):not(.role-student) .nav-wrap{min-height:72px}
body:not(.role-teacher):not(.role-student) .brand{flex:0 0 auto}
body:not(.role-teacher):not(.role-student) .nav{min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:4px}
body:not(.role-teacher):not(.role-student) .nav>a:not(.btn){padding:8px 9px;border-radius:10px;font-size:.86rem}

/* Login / registration cards */
.auth-shell{padding:44px 0 58px}
.auth-card{border-radius:26px!important;padding:28px!important;border:1px solid var(--ui-line)!important;box-shadow:0 22px 60px rgba(57,43,100,.11)!important}
.auth-card h1,.auth-card h2{line-height:1.12}

/* =============================================================
   Teacher workspace
   ============================================================= */
.role-teacher{--teacher-sidebar-width:278px;background:#f5f7fb}
.role-teacher .teacher-app-shell,.role-teacher .teacher-app-main{background:#f5f7fb}
.role-teacher .teacher-app-main{padding-bottom:52px}
.role-teacher .teacher-app-main>.container{width:min(1320px,calc(100% - 44px))}

.teacher-sidebar{
  border-right:0;
  box-shadow:14px 0 36px rgba(15,23,42,.09);
  background:radial-gradient(circle at 12% 0%,rgba(118,84,236,.18),transparent 250px),linear-gradient(180deg,#202b3b 0%,#182331 100%);
}
.teacher-sidebar-head{padding-inline:17px}
.teacher-sidebar-nav{padding:15px 12px 20px}
.teacher-side-link,.teacher-side-group{min-height:46px;border-radius:13px;padding:10px 11px}
.teacher-side-submenu{padding-left:10px}
.teacher-side-submenu a{min-height:42px;border-radius:11px}
.teacher-side-link.active,.teacher-side-submenu a.active{background:linear-gradient(135deg,#6844e8,#8359ef);box-shadow:0 9px 22px rgba(83,50,194,.30)}
.teacher-side-divider{margin:13px 8px}
.teacher-sidebar-user{padding:13px 13px calc(13px + env(safe-area-inset-bottom))}

.teacher-app-topbar{min-height:72px;border-bottom-color:#e8eaf0;box-shadow:0 4px 18px rgba(31,41,55,.035)}
.teacher-app-topbar-inner{min-height:72px;padding:0 22px;gap:14px}
.teacher-sidebar-toggle{border-radius:11px}
.teacher-page-title strong{font-size:1.03rem}
.teacher-topbar-actions{min-width:0}
.teacher-topbar-profile,.teacher-topbar-portal,.teacher-subscription-chip,.app-notification-button{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.teacher-topbar-profile:hover,.teacher-topbar-portal:hover,.teacher-subscription-chip:hover,.app-notification-button:hover{transform:translateY(-1px)}

.role-teacher .page-head{padding-top:30px}
.role-teacher .page-head h1{font-size:clamp(1.7rem,2.5vw,2.35rem)}
.role-teacher .card,.role-teacher .stat,.role-teacher .quiz-card,.role-teacher .table-wrap{border-color:#e7e9ef}
.role-teacher .stat{border-radius:18px;padding:18px}
.role-teacher .stat strong{font-size:1.75rem;line-height:1.15}
.role-teacher .flash{border-radius:13px}

/* =============================================================
   Student app
   ============================================================= */
body.role-student{background:#f7f8fc}
body.role-student .student-app-main{background:#f7f8fc}
body.role-student .student-app-topbar{box-shadow:0 5px 22px rgba(26,39,71,.055)}
body.role-student .student-app-topbar-inner{min-height:68px}
body.role-student .student-app-brand strong{letter-spacing:-.015em}
body.role-student .student-desktop-nav{gap:3px}
body.role-student .student-desktop-nav a{border-radius:11px;padding:8px 10px}
body.role-student .student-home-menu-section{background:transparent}
body.role-student .student-home-menu-grid{gap:12px}
body.role-student .student-home-menu-item{border-color:#e8eaf1;box-shadow:0 8px 22px rgba(51,65,85,.055)}
body.role-student .student-home-menu-item:hover{border-color:#d7d0fa;box-shadow:0 12px 28px rgba(76,59,132,.10);transform:translateY(-2px)}
body.role-student .student-subject-section{background:transparent}
body.role-student .student-subject-card{border-color:#e6e8ef;border-radius:24px;box-shadow:0 9px 28px rgba(55,65,81,.065)}
body.role-student .student-subject-card:hover{box-shadow:0 15px 35px rgba(69,52,123,.105)}
body.role-student .student-home-quiz-card,body.role-student .assignment-public-card,body.role-student .public-video-card,body.role-student .public-post-card,body.role-student .student-meeting-card{border-color:#e7e8ef;box-shadow:0 9px 26px rgba(51,65,85,.06)}

/* Long text never pushes Android layouts sideways */
.role-teacher .teacher-app-main *,body.role-student .student-app-main *,body:not(.role-teacher):not(.role-student) main *{min-width:0}
.role-teacher pre,.role-teacher code,body.role-student pre,body.role-student code{max-width:100%;overflow-wrap:anywhere}
.role-teacher .table-wrap,body.role-student .table-wrap{width:100%;max-width:100%}

/* =============================================================
   Tablet
   ============================================================= */
@media(max-width:1100px){
  .container{width:min(100% - 30px,1120px)}
  body:not(.role-teacher):not(.role-student) .nav-wrap{gap:10px}
  body:not(.role-teacher):not(.role-student) .nav>a:not(.btn){font-size:.81rem;padding-inline:7px}
  .role-teacher .teacher-app-main>.container{width:calc(100% - 30px)}
  .teacher-topbar-name{display:none}
  .teacher-topbar-profile{padding:4px}
}

@media(max-width:850px){
  html{scroll-padding-top:76px}
  .container{width:calc(100% - 24px)}
  .section{padding:42px 0}
  .page-head{padding:24px 0 16px;align-items:flex-start;flex-direction:column}
  .page-head>.actions,.page-head>form.actions{width:100%;margin-top:4px}
  .section-head{align-items:flex-start;flex-wrap:wrap}
  .section-head h2{font-size:1.48rem}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}

  /* Public/developer mobile navigation stays compact and touch friendly */
  body:not(.role-teacher):not(.role-student) .topbar .container{width:calc(100% - 20px)}
  body:not(.role-teacher):not(.role-student) .nav-wrap{min-height:64px}
  body:not(.role-teacher):not(.role-student) .brand-mark{width:38px;height:38px;border-radius:12px}
  body:not(.role-teacher):not(.role-student) .nav-toggle{width:42px;height:42px}
  body:not(.role-teacher):not(.role-student) .nav.open{max-height:calc(100dvh - 82px);overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px}
  body:not(.role-teacher):not(.role-student) .nav.open>a,body:not(.role-teacher):not(.role-student) .nav.open>.btn{min-height:44px}

  /* Teacher mobile */
  .role-teacher .teacher-app-main>.container{width:calc(100% - 20px)}
  .teacher-app-topbar-inner{padding-inline:10px;gap:8px}
  .teacher-topbar-left{gap:9px;max-width:calc(100% - 54px)}
  .teacher-page-title small{display:none}
  .teacher-page-title strong{max-width:46vw;font-size:.94rem}
  .teacher-topbar-actions{gap:6px}
  .teacher-topbar-portal{display:none}
  .teacher-subscription-chip{width:40px;height:40px;min-width:40px;padding:0!important;display:grid!important;place-items:center;border-radius:12px}
  .teacher-subscription-chip>span:not(.teacher-subscription-chip-icon){display:none!important}
  .teacher-subscription-chip-icon{display:grid!important;place-items:center;margin:0!important}
  .teacher-subscription-chip-icon svg{width:19px;height:19px}
  .teacher-topbar-profile{width:40px;height:40px;padding:3px;border:0;background:transparent}
  .teacher-topbar-avatar{width:36px;height:36px}
  .role-teacher .page-head{padding-top:22px}
  .role-teacher .page-head .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .role-teacher .page-head .actions>.btn,.role-teacher .page-head .actions>a{width:100%;white-space:normal;text-align:center}
  .role-teacher .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .role-teacher .stat{padding:15px;border-radius:16px}
  .role-teacher .stat strong{font-size:1.48rem}
  .role-teacher .card{padding:18px}

  /* Student mobile */
  body.role-student .container,body.role-student .narrow-container{width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important}
  body.role-student .student-app-topbar-inner{min-height:62px;width:calc(100% - 16px)!important}
  body.role-student .student-home-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  body.role-student .student-home-menu-item{min-height:94px;padding:10px 4px 9px;border-radius:17px}
  body.role-student .student-home-menu-icon{width:42px;height:42px;border-radius:13px}
  body.role-student .student-home-menu-item strong{font-size:.70rem;line-height:1.15}
  body.role-student .student-subject-grid,body.role-student .quiz-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.role-student .student-subject-card{min-height:210px;padding:16px;border-radius:20px}
  body.role-student .student-subject-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body.role-student .student-bottom-nav{box-shadow:0 -8px 28px rgba(20,35,66,.10)}
  body.role-student .student-bottom-nav a,body.role-student .student-bottom-nav button{min-height:56px}

  /* Forms and tables on phone */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea{font-size:16px;min-height:48px}
  .btn{min-height:46px}
  .table-wrap{border-radius:13px}
  table{font-size:.86rem}
  th,td{padding:11px 12px}
}

/* =============================================================
   Small Android screens
   ============================================================= */
@media(max-width:430px){
  .container{width:calc(100% - 16px)}
  .section{padding:34px 0}
  .card{padding:16px}
  .auth-shell{padding:24px 0 40px}
  .auth-card{width:calc(100% - 16px)!important;padding:20px 16px!important;border-radius:21px!important}
  .actions{gap:8px}
  .actions>.btn{flex:1 1 140px}
  .grid-3,.quiz-grid{grid-template-columns:1fr}

  .role-teacher .teacher-app-main>.container{width:calc(100% - 14px)}
  .teacher-app-topbar-inner{padding-inline:7px}
  .teacher-sidebar-toggle{width:38px;height:38px;flex-basis:38px}
  .teacher-page-title strong{max-width:42vw;font-size:.88rem}
  .teacher-topbar-actions{gap:4px}
  .teacher-topbar-profile{width:38px;height:38px}
  .teacher-topbar-avatar{width:34px;height:34px}
  .role-teacher .page-head .actions{grid-template-columns:1fr}
  .role-teacher .stats{gap:8px}
  .role-teacher .stat{padding:13px}
  .role-teacher .stat strong{font-size:1.35rem}

  body.role-student .container,body.role-student .narrow-container{width:calc(100% - 14px)!important;max-width:calc(100% - 14px)!important}
  body.role-student .student-home-menu-grid{gap:6px!important}
  body.role-student .student-home-menu-item{min-height:88px;padding:8px 2px;border-radius:15px}
  body.role-student .student-home-menu-icon{width:38px;height:38px;border-radius:12px}
  body.role-student .student-home-menu-item strong{font-size:.64rem}
  body.role-student .student-subject-grid,body.role-student .quiz-subject-grid{grid-template-columns:1fr}
  body.role-student .student-subject-card{min-height:auto}
  body.role-student .student-bottom-nav small{font-size:.63rem}
}

@media(max-width:360px){
  .role-teacher .stats{grid-template-columns:1fr 1fr}
  .teacher-page-title strong{max-width:38vw}
  body.role-student .student-home-menu-item strong{font-size:.60rem}
  body.role-student .student-bottom-nav small{font-size:.58rem}
}

/* Reduced motion respects device/user preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =============================================================
   Digitera UI Polish V4.19.1 — Responsive Teacher Sidebar
   Menjaga dashboard tetap rapi ketika sidebar desktop aktif.
   Tidak mengubah HTML, PHP logic, database, atau data tersimpan.
   ============================================================= */

/* Main stage selalu memakai ruang yang benar setelah sidebar berubah state. */
.role-teacher .teacher-app-stage{
  width:auto;
  max-width:100%;
  min-width:0;
}
.role-teacher .teacher-app-topbar,
.role-teacher .teacher-app-main,
.role-teacher .teacher-app-main>.container{
  min-width:0;
  max-width:100%;
}

/* Dashboard hero: cegah identitas guru diperas oleh kumpulan tombol. */
.role-teacher.page-dashboard .teacher-dashboard-welcome{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(460px,1.18fr);
  align-items:center;
  gap:28px;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity{
  width:100%;
  min-width:0;
  align-items:center;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity>div:last-child{
  min-width:0;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome h1{
  max-width:100%;
  line-height:1.03;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .actions{
  width:100%;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-content:center;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .actions>.btn,
.role-teacher.page-dashboard .teacher-dashboard-welcome .actions>a{
  width:100%;
  min-width:0;
  min-height:48px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  white-space:normal;
  text-align:center;
  line-height:1.15;
}

/* Laptop/desktop umum: saat sidebar terbuka, gunakan susunan dua baris.
   Ini memberi ruang penuh pada nama guru dan mencegah tombol menabrak teks. */
@media (min-width:1025px) and (max-width:1440px){
  body.role-teacher:not(.teacher-sidebar-collapsed).page-dashboard .teacher-dashboard-welcome{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    min-height:0;
    padding:30px 32px 32px;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed).page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity{
    max-width:900px;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed).page-dashboard .teacher-dashboard-welcome h1{
    font-size:clamp(2rem,3.2vw,2.9rem);
  }
  body.role-teacher:not(.teacher-sidebar-collapsed).page-dashboard .teacher-dashboard-welcome .actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  /* Topbar ikut menghemat ruang ketika sidebar aktif. */
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-topbar-name{
    display:none;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-topbar-profile{
    padding:3px;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-topbar-portal{
    width:42px;
    min-width:42px;
    padding:0;
    justify-content:center;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-topbar-portal span{
    display:none;
  }
}

/* Laptop kecil yang masih memakai mode sidebar desktop. */
@media (min-width:1025px) and (max-width:1200px){
  body.role-teacher:not(.teacher-sidebar-collapsed).page-dashboard .teacher-dashboard-welcome .actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-subscription-chip{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0!important;
    display:grid!important;
    place-items:center;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-subscription-chip>span:not(.teacher-subscription-chip-icon){
    display:none!important;
  }
  body.role-teacher:not(.teacher-sidebar-collapsed) .teacher-subscription-chip-icon{
    margin:0!important;
  }
}

/* Tablet: sidebar menjadi overlay, jadi konten tidak pernah didorong ke samping. */
@media (max-width:1024px){
  .role-teacher .teacher-app-stage,
  body.teacher-sidebar-collapsed .teacher-app-stage,
  body.teacher-sidebar-open .teacher-app-stage{
    width:100%;
    max-width:100%;
    margin-left:0!important;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    min-height:0;
    padding:26px 24px 30px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity{
    width:100%;
    max-width:100%;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Android / ponsel besar. */
@media (max-width:850px){
  .role-teacher.page-dashboard .teacher-dashboard-welcome{
    gap:18px;
    padding:22px 18px 24px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions>.btn,
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions>a{
    min-height:46px;
    padding:9px 8px;
    font-size:.87rem;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-profile-avatar-lg{
    flex:0 0 72px;
    width:72px;
    height:72px;
    border-radius:23px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome h1{
    font-size:clamp(1.65rem,6vw,2.25rem);
  }
}

/* Android kecil: identitas dan tombol tetap mudah dibaca/tap. */
@media (max-width:520px){
  .role-teacher.page-dashboard .teacher-dashboard-welcome{
    padding:19px 15px 20px;
    border-radius:18px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity{
    gap:11px;
    align-items:flex-start;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-profile-avatar-lg{
    flex:0 0 58px;
    width:58px;
    height:58px;
    border-width:3px;
    border-radius:18px;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome h1{
    font-size:clamp(1.45rem,7vw,1.95rem);
    line-height:1.05;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity p{
    font-size:.84rem;
    line-height:1.35;
  }
}

@media (max-width:430px){
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions>.btn,
  .role-teacher.page-dashboard .teacher-dashboard-welcome .actions>a{
    min-height:44px;
  }
}

/* =============================================================
   Digitera UI Polish V4.19.2 — Persistent Teacher Navbar
   Topbar guru tetap terlihat ketika halaman di-scroll.
   CSS-only; tidak mengubah database maupun data aplikasi.
   ============================================================= */

/* Desktop: topbar dibuat fixed agar tidak ikut hilang saat document scroll.
   Posisi kiri mengikuti status sidebar sehingga tidak saling menimpa. */
body.role-teacher{
  --ui-teacher-fixed-topbar:72px;
}
body.role-teacher .teacher-app-topbar{
  position:fixed!important;
  top:0!important;
  left:var(--teacher-sidebar-width);
  right:0;
  width:auto;
  min-height:var(--ui-teacher-fixed-topbar);
  z-index:95!important;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transition:left .24s ease,box-shadow .18s ease,background .18s ease;
}
body.role-teacher .teacher-app-topbar-inner{
  min-height:var(--ui-teacher-fixed-topbar);
}
body.role-teacher .teacher-app-main{
  padding-top:var(--ui-teacher-fixed-topbar);
}

/* Sidebar ditutup: navbar kembali memakai seluruh lebar layar. */
body.role-teacher.teacher-sidebar-collapsed .teacher-app-topbar{
  left:0;
}

/* Tablet/Android: sidebar berupa overlay, navbar selalu selebar viewport. */
@media(max-width:1024px){
  body.role-teacher .teacher-app-topbar,
  body.role-teacher.teacher-sidebar-collapsed .teacher-app-topbar,
  body.role-teacher.teacher-sidebar-open .teacher-app-topbar{
    left:0!important;
    right:0!important;
    width:100%!important;
  }
}

/* Tinggi navbar mobile mengikuti UI lama agar konten tidak tertutup. */
@media(max-width:720px){
  body.role-teacher{
    --ui-teacher-fixed-topbar:66px;
  }
}

/* Anchor / navigasi internal tidak tersembunyi di bawah fixed navbar. */
body.role-teacher .teacher-app-main :is(section,article,[id]){
  scroll-margin-top:calc(var(--ui-teacher-fixed-topbar) + 14px);
}

/* =============================================================
   Digitera V4.19.3 — Account Settings & Student Self Credentials
   UI untuk keamanan akun guru dan pendaftaran akun siswa mandiri.
   Tidak menambah/mengubah struktur database.
   ============================================================= */

/* Profil guru: kartu keamanan tetap seimbang di desktop dan Android. */
.role-teacher.page-profile .teacher-profile-layout{
  align-items:start;
}
.role-teacher.page-profile .teacher-account-security-card{
  position:relative;
  overflow:hidden;
}
.role-teacher.page-profile .teacher-account-security-card::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-72px;
  top:-72px;
  border-radius:50%;
  background:rgba(112,71,235,.06);
  pointer-events:none;
}
.role-teacher.page-profile .profile-account-chip{
  width:100%;
  margin-top:12px;
  padding:11px 13px;
  border:1px solid #e3dcfb;
  border-radius:13px;
  background:#f8f6ff;
  text-align:left;
}
.role-teacher.page-profile .profile-account-chip small{
  display:block;
  margin-bottom:3px;
  color:#7b7292;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.07em;
}
.role-teacher.page-profile .profile-account-chip strong{
  display:block;
  color:#5b35d5;
  overflow-wrap:anywhere;
}
.role-teacher.page-profile .profile-password-grid{
  gap:12px;
}

/* Registrasi siswa: bagian akun terlihat jelas tanpa membuat form terasa penuh. */
.student-self-register-page .student-register-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.student-self-register-page .student-register-account-box{
  margin:8px 0 18px;
  padding:17px;
  border:1px solid #e3dcfb;
  border-radius:18px;
  background:linear-gradient(180deg,#faf9ff 0%,#f7f5ff 100%);
}
.student-self-register-page .student-register-account-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.student-self-register-page .student-register-account-head>span{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#ede7ff;
  font-size:1.1rem;
}
.student-self-register-page .student-register-account-head>div{
  min-width:0;
}
.student-self-register-page .student-register-account-head strong{
  display:block;
  color:#312a45;
  line-height:1.2;
}
.student-self-register-page .student-register-account-head small{
  display:block;
  margin-top:3px;
  color:#777084;
  line-height:1.4;
}
.student-self-register-page .student-register-show-password{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:2px;
  color:#5f5870;
  font-size:.86rem;
  cursor:pointer;
  user-select:none;
}
.student-self-register-page .student-register-show-password input{
  width:18px;
  height:18px;
  accent-color:#7047eb;
}
.student-self-register-page .field-help b{
  color:#5b35d5;
}
.student-self-register-page #student-register-username{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.01em;
}

@media(max-width:700px){
  .student-self-register-page .student-register-two-col{
    grid-template-columns:1fr;
    gap:0;
  }
  .student-self-register-page .student-register-account-box{
    margin-inline:-2px;
    padding:15px 13px;
    border-radius:16px;
  }
  .role-teacher.page-profile .profile-password-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:430px){
  .student-self-register-page .student-register-account-head>span{
    flex-basis:34px;
    width:34px;
    height:34px;
  }
  .student-self-register-page .student-register-account-box{
    padding:13px 11px;
  }
}

@media(min-width:821px){
  .role-teacher.page-profile .teacher-profile-preview-card{
    grid-column:1;
    grid-row:1 / span 4;
    position:sticky;
    top:calc(var(--ui-teacher-fixed-topbar,72px) + 18px);
  }
  .role-teacher.page-profile .teacher-profile-form-card{
    grid-column:2;
  }
}
@media(max-width:820px){
  .role-teacher.page-profile .teacher-profile-preview-card,
  .role-teacher.page-profile .teacher-profile-form-card{
    grid-column:auto;
    grid-row:auto;
    position:static;
  }
}

/* =========================================================
   Digitera V4.19.5 — Developer analytics + Sponsored footer
   ========================================================= */
.digitera-footer-sponsor{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px;line-height:1.35;opacity:.92}
.digitera-footer-sponsor>span{opacity:.72}
.digitera-footer-sponsor a,.digitera-footer-sponsor strong{font-weight:800;color:inherit;text-decoration:none}
.digitera-footer-sponsor a:hover{text-decoration:underline}
.teacher-app-footer,.student-desktop-footer>div,.footer-bottom{gap:12px 18px;flex-wrap:wrap}
.teacher-app-footer .digitera-footer-sponsor{margin-left:auto}
.student-desktop-footer .digitera-footer-sponsor{margin-left:auto}
.footer-bottom .digitera-footer-sponsor{margin-left:auto}

.developer-analytics-page{padding-top:8px}
.visitor-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.visitor-summary-grid .stat{min-height:116px;display:flex;flex-direction:column;justify-content:center}
.visitor-summary-grid .stat strong{font-size:30px;line-height:1.05}
.visitor-summary-grid .stat small{display:block;margin-top:5px;color:var(--muted,#64748b)}
.developer-analytics-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr);gap:18px;align-items:start}
.visitor-history-card,.sponsor-settings-card{min-width:0}
.visitor-chart{height:230px;display:grid;grid-template-columns:repeat(14,minmax(20px,1fr));gap:8px;align-items:end;padding:20px 4px 8px;margin:4px 0 18px;border-bottom:1px solid rgba(100,116,139,.2);overflow:hidden}
.visitor-bar-item{height:100%;min-width:0;display:grid;grid-template-rows:22px 1fr 22px;gap:5px;align-items:end;text-align:center}
.visitor-bar-item strong{font-size:11px;color:var(--text,#1f2937);overflow:hidden;text-overflow:ellipsis}
.visitor-bar-item small{font-size:10px;color:var(--muted,#64748b);white-space:nowrap}
.visitor-bar-track{display:block;height:100%;min-height:90px;border-radius:10px 10px 5px 5px;background:rgba(112,71,235,.08);position:relative;overflow:hidden}
.visitor-bar-track i{position:absolute;left:0;right:0;bottom:0;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#8b5cf6,#6d3df1);min-height:5px}
.visitor-table-wrap{max-height:470px;overflow:auto;border:1px solid rgba(100,116,139,.12);border-radius:14px}
.visitor-table-wrap table{margin:0;min-width:640px}
.visitor-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--card,#fff)}
.sponsor-settings-card{position:sticky;top:92px}
.sponsor-settings-form{display:grid;gap:14px}
.sponsor-toggle{padding:13px;border:1px solid rgba(112,71,235,.18);background:rgba(112,71,235,.055);border-radius:14px;align-items:flex-start}
.sponsor-toggle span{display:grid;gap:2px}
.sponsor-toggle small{font-weight:500;color:var(--muted,#64748b)}
.sponsor-preview{padding:15px;border:1px dashed rgba(112,71,235,.28);border-radius:14px;background:rgba(112,71,235,.04)}
.sponsor-preview>small{display:block;color:var(--muted,#64748b);margin-bottom:8px}
.sponsor-preview>div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sponsor-preview strong{color:#6336e7}
.analytics-privacy-note{margin-top:16px;padding:14px;border-radius:14px;background:rgba(14,165,233,.07);border:1px solid rgba(14,165,233,.14)}
.analytics-privacy-note strong{display:block;margin-bottom:4px}
.analytics-privacy-note p{margin:0;color:var(--muted,#64748b);font-size:12px;line-height:1.55}
.visitor-dashboard-strip{display:grid;grid-template-columns:minmax(180px,1.2fr) repeat(2,minmax(140px,.75fr)) auto;gap:12px;align-items:center;padding:14px 16px;margin:-2px 0 18px;border:1px solid rgba(112,71,235,.15);border-radius:18px;background:linear-gradient(135deg,rgba(112,71,235,.08),rgba(56,189,248,.05))}
.visitor-dashboard-strip>div{display:flex;gap:10px;align-items:center;min-width:0}
.visitor-dashboard-strip>div:not(:first-child){display:grid;gap:2px;padding-left:14px;border-left:1px solid rgba(100,116,139,.15)}
.visitor-dashboard-strip small{color:var(--muted,#64748b)}
.visitor-dashboard-strip strong{font-size:21px;line-height:1.1}
.visitor-dashboard-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#7047eb;color:#fff;font-size:20px;font-weight:900;flex:0 0 auto}

@media (max-width:1080px){
  .visitor-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .developer-analytics-grid{grid-template-columns:1fr}
  .sponsor-settings-card{position:static}
  .visitor-dashboard-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .visitor-dashboard-strip>a{grid-column:1/-1;justify-self:start}
}
@media (max-width:720px){
  .visitor-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .visitor-summary-grid .stat{min-height:96px;padding:14px}
  .visitor-summary-grid .stat strong{font-size:25px}
  .developer-analytics-grid{gap:12px}
  .visitor-history-card,.sponsor-settings-card{padding:15px}
  .visitor-chart{overflow-x:auto;grid-template-columns:repeat(14,38px);justify-content:start;height:210px;padding-bottom:8px}
  .visitor-dashboard-strip{grid-template-columns:1fr 1fr;padding:12px;gap:10px}
  .visitor-dashboard-strip>div{padding:0!important;border:0!important}
  .visitor-dashboard-strip>div:first-child{grid-column:1/-1}
  .visitor-dashboard-strip>a{width:100%;justify-content:center}
  .teacher-app-footer .digitera-footer-sponsor,.student-desktop-footer .digitera-footer-sponsor,.footer-bottom .digitera-footer-sponsor{margin-left:0;width:100%;justify-content:center}
}
@media (max-width:430px){
  .visitor-summary-grid{grid-template-columns:1fr 1fr}
  .visitor-summary-grid .stat span{font-size:11px}
  .visitor-summary-grid .stat strong{font-size:22px}
  .visitor-dashboard-strip{grid-template-columns:1fr}
  .visitor-dashboard-strip>div:first-child{grid-column:auto}
}

/* =========================================================
   Digitera V4.19.6 — Logo sponsor
   ========================================================= */
.digitera-footer-sponsor{gap:7px}
.digitera-footer-sponsor-label{opacity:.72;white-space:nowrap}
.digitera-footer-sponsor-brand{display:inline-flex;align-items:center;gap:7px;min-width:0;color:inherit;text-decoration:none;font-weight:800}
a.digitera-footer-sponsor-brand:hover strong{text-decoration:underline}
.digitera-footer-sponsor-logo{display:block;width:auto;height:28px;max-width:96px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,.92);padding:2px 4px;box-sizing:border-box}
.footer .digitera-footer-sponsor-logo{background:#fff}

.sponsor-logo-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.sponsor-logo-upload{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1.5px dashed rgba(112,71,235,.35);border-radius:14px;background:rgba(112,71,235,.045);cursor:pointer;transition:.18s ease}
.sponsor-logo-upload:hover{border-color:#7047eb;background:rgba(112,71,235,.08);transform:translateY(-1px)}
.sponsor-logo-upload:focus-within{outline:3px solid rgba(112,71,235,.14);outline-offset:2px}
.sponsor-logo-upload-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#7047eb;color:#fff;font-size:23px;line-height:1;font-weight:700}
.sponsor-logo-upload>span:last-child{display:grid;gap:2px;min-width:0}
.sponsor-logo-upload small{color:var(--muted,#64748b);font-weight:500;line-height:1.35}
.sponsor-remove-logo{margin-top:9px;padding:10px 11px;border-radius:12px;background:rgba(239,68,68,.045);border:1px solid rgba(239,68,68,.12);align-items:flex-start}
.sponsor-remove-logo span{display:grid;gap:2px}
.sponsor-remove-logo small{font-weight:500;color:var(--muted,#64748b)}
.sponsor-preview-credit{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap}
.sponsor-preview-brand{display:inline-flex;align-items:center;gap:7px;font-weight:800}
.sponsor-preview-brand img{display:block;height:34px;width:auto;max-width:120px;object-fit:contain;border-radius:7px;background:#fff;border:1px solid rgba(100,116,139,.14);padding:3px 5px;box-sizing:border-box}
.sponsor-preview-brand img[hidden]{display:none!important}

@media (max-width:720px){
  .digitera-footer-sponsor{justify-content:center}
  .digitera-footer-sponsor-logo{height:26px;max-width:88px}
  .sponsor-logo-upload{padding:11px}
  .sponsor-preview-credit{justify-content:center}
}