body{margin:0;background:#f5f5f1;color:#1d211f;font:15px/1.5 Arial,sans-serif}.shell{max-width:1100px;margin:auto;padding:28px 18px}.brand{display:grid;grid-template-columns:56px 1fr;gap:15px;margin:20px 0 28px}.mark{width:56px;height:56px;border-radius:16px;background:#4f46e5;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;color:#4f46e5}h1{font-size:42px;line-height:1.05;margin:4px 0 8px}h2{margin:4px 0 16px}h3{margin-top:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{background:#fff;border:1px solid #e4e6e2;border-radius:20px;padding:22px}.narrow{max-width:560px}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#e6f1eb;color:#4f46e5;font-weight:700;font-size:12px}.pill.alt{background:#eee;color:#555}form{display:grid;gap:12px}label{display:grid;gap:5px;font-weight:700;font-size:13px}input,select,button{font:inherit}input,select{padding:11px 12px;border:1px solid #ddd;border-radius:11px}button{border:0;background:#4f46e5;color:#fff;padding:11px 14px;border-radius:11px;font-weight:800;cursor:pointer}.ghost{background:#eceeeb;color:#222}.hidden{display:none!important}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.balance{background:#4f46e5;color:#fff;border-radius:22px;padding:24px;display:grid;gap:5px}.balance strong{font-size:38px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.stats.four{grid-template-columns:repeat(4,1fr)}.stats>div{background:#fff;border:1px solid #e5e7e3;border-radius:16px;padding:15px;display:grid;gap:5px}.stats span{font-size:12px;color:#6d746f}.stats .feature{background:#4f46e5;color:#fff}.stats .feature span{color:#e0e7ff}nav{display:flex;gap:7px;overflow:auto;margin-bottom:15px}nav button{background:#e8eae7;color:#222;border-radius:999px;padding:8px 12px;white-space:nowrap}nav button.active{background:#1d211f;color:#fff}.item{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #eee;padding:10px 0}.status{font-size:11px;font-weight:800}.inline{display:flex;gap:8px}.msg{min-height:20px;color:#4f46e5}.small{font-size:13px}.actions{display:flex;gap:6px}.actions button{padding:7px 9px}.reject{background:#8f3a3a}@media(max-width:760px){.grid2{grid-template-columns:1fr}.stats.four{grid-template-columns:1fr 1fr}h1{font-size:34px}}
.pin-card{margin-top:16px}.migration-head,.migration-row,.pin-table-head,.pin-table-row{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 46px;gap:8px;align-items:center}.migration-head{font-size:12px;font-weight:800;color:#6d746f;padding:10px 0}.migration-row{margin-bottom:8px}.migration-row input,.migration-row select{min-width:0}.remove-row{padding:10px 0}.actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.pin-table{overflow:auto}.pin-table-head,.pin-table-row{grid-template-columns:minmax(160px,2fr) minmax(90px,1fr) minmax(110px,1fr) minmax(110px,1fr);min-width:600px;padding:9px 0;border-bottom:1px solid #eee}.pin-table-head{font-size:12px;color:#6d746f}.pin-table-row b:nth-child(3){letter-spacing:.08em}.card+.card{margin-top:16px}@media(max-width:650px){.migration-head{display:none}.migration-row{grid-template-columns:1fr 1fr 42px}.migration-row .mig-name{grid-column:1/-1}.migration-row .remove-row{grid-column:3;grid-row:2}.migration-row .mig-balance{grid-column:2}.migration-row .mig-category{grid-column:1}}


/* ===== Dashboard Guru - Sidebar kiri ===== */
.teacher-shell{
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  min-height:100vh;
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  background:#f5f6f3;
}
.teacher-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 15px 16px;
  background:#0f172a;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:8px 0 30px rgba(19,35,28,.08);
  z-index:10;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px 5px 16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.sidebar-logo{
  width:40px;height:40px;border-radius:12px;
  background:#eef2ff;color:#4338ca;
  display:grid;place-items:center;font-size:20px;font-weight:900;flex:none;
}
.sidebar-brand-text{display:grid;line-height:1.15}
.sidebar-brand-text b{font-size:15px}
.sidebar-brand-text small{margin-top:4px;color:#94a3b8;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.sidebar-profile{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:14px;background:rgba(255,255,255,.055);
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:#334155;color:#f8fafc;display:grid;place-items:center;font-weight:850;flex:none;
}
.sidebar-profile-text{display:grid;min-width:0}
.sidebar-profile-text span{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em}
.sidebar-profile-text b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav{
  display:grid!important;
  gap:5px!important;
  overflow:visible!important;
  margin:0!important;
  flex:1;
  align-content:start;
}
.sidebar-nav button,.sidebar-logout{
  width:100%;
  min-height:43px;
  background:transparent!important;
  color:#cbd5e1!important;
  display:flex!important;
  align-items:center;
  gap:11px;
  border-radius:11px!important;
  padding:9px 10px!important;
  text-align:left;
  white-space:normal!important;
  font-weight:700!important;
  position:relative;
}
.sidebar-nav button:hover,.sidebar-logout:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.sidebar-nav button.active{
  background:#4f46e5!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(20,49,38,.18);
}
.nav-icon{
  width:24px;height:24px;display:grid;place-items:center;
  border-radius:7px;background:rgba(255,255,255,.06);
  font-size:15px;line-height:1;flex:none;
}
.sidebar-nav button.active .nav-icon{background:rgba(255,255,255,.13)}
.nav-label{min-width:0}
.side-badge{
  margin-left:auto;
  min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:#e0e7ff;color:#3730a3;font-size:11px;font-weight:900;
}
.sidebar-bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:12px;
  display:grid;gap:8px;
}
.sidebar-logout{border:0;cursor:pointer}
.sidebar-version{color:#64748b;font-size:10px;padding-left:10px}
.teacher-main{min-width:0;padding:0 30px 40px}
.dashboard-topbar{
  position:sticky;
  top:0;
  z-index:6;
  background:rgba(245,246,243,.94);
  backdrop-filter:blur(12px);
  margin:0 -30px 22px!important;
  padding:22px 30px 17px;
  border-bottom:1px solid #e4e8e4;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.dashboard-topbar h2{margin:3px 0 1px;font-size:24px}
.page-subtitle{margin:0;color:#758078;font-size:13px}
.topbar-status{
  display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid #e2e7e3;
  border-radius:999px;padding:7px 11px;font-size:12px;color:#657169;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#6366f1;box-shadow:0 0 0 3px #e0e7ff}
.dashboard-content{max-width:1220px;margin:0 auto}
.dashboard-content .stats{margin:0 0 16px}
.dashboard-content .stats>div{box-shadow:0 4px 18px rgba(25,46,37,.035)}
.dashboard-overview-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:16px;
}
.summary-list{display:grid}
.summary-list>div{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;border-bottom:1px solid #edf0ed;
}
.summary-list>div:last-child{border-bottom:0}
.summary-list span{color:#667169}
.summary-list b{font-size:16px}
.quick-info-card{display:flex;gap:14px;align-items:flex-start}
.quick-icon{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:#eef2ff;color:#4f46e5;display:grid;place-items:center;font-weight:900;font-size:18px;
}
.card-heading{display:flex;justify-content:space-between;align-items:flex-start}
.section-note{color:#748078;margin-top:-8px;margin-bottom:18px}
.form-card{max-width:680px}
.teacher-main .card{box-shadow:0 8px 28px rgba(28,49,40,.04)}
.teacher-main .panel>.card:first-child{margin-top:0}
.teacher-main .grid2>.card{margin-top:0}

@media(max-width:980px){
  .teacher-shell{grid-template-columns:205px minmax(0,1fr)}
  .teacher-main{padding:0 20px 32px}
  .dashboard-topbar{margin:0 -20px 18px!important;padding:18px 20px 15px}
  .dashboard-overview-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .teacher-shell{grid-template-columns:74px minmax(0,1fr)}
  .teacher-sidebar{padding:14px 9px 12px;gap:13px}
  .sidebar-brand{justify-content:center;padding:0 0 12px}
  .sidebar-logo{width:39px;height:39px}
  .sidebar-brand-text,.sidebar-profile-text,.nav-label,.sidebar-version{display:none}
  .sidebar-profile{justify-content:center;padding:7px 0;background:transparent}
  .avatar{width:34px;height:34px}
  .sidebar-nav button,.sidebar-logout{
    justify-content:center!important;
    padding:9px!important;
    min-height:44px;
  }
  .nav-icon{width:29px;height:29px}
  .side-badge{
    position:absolute;right:2px;top:3px;
    min-width:17px;height:17px;padding:0 4px;font-size:9px;border:2px solid #0f172a;
  }
  .sidebar-bottom{padding-top:8px}
  .teacher-main{padding:0 12px 28px}
  .dashboard-topbar{margin:0 -12px 14px!important;padding:15px 13px 13px}
  .dashboard-topbar h2{font-size:20px}
  .page-subtitle{font-size:11px;max-width:210px}
  .topbar-status{display:none}
  .teacher-main .stats.four{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .teacher-shell{grid-template-columns:66px minmax(0,1fr)}
  .teacher-sidebar{padding-left:7px;padding-right:7px}
  .teacher-main{padding:0 9px 22px}
  .dashboard-topbar{margin:0 -9px 12px!important;padding-left:10px;padding-right:10px}
  .teacher-main .stats.four{grid-template-columns:1fr}
}


/* Upload Excel - Migrasi Awal */
.excel-import-box{
  margin:0 0 18px;
  padding:16px;
  border:1px solid #dfe7e2;
  border-radius:16px;
  background:#f8fbf9;
}
.excel-import-copy{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:13px;
}
.excel-import-copy p{
  margin:3px 0 0;
  color:#69766e;
  font-size:12px;
}
.excel-icon{
  width:38px;height:38px;border-radius:11px;
  background:#4f46e5;color:#fff;
  display:grid;place-items:center;
  font-weight:900;flex:none;
}
.excel-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.excel-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 13px;
  border-radius:11px;
  background:#e9eeeb;
  color:#253b32;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.button-link:hover{background:#dfe8e3}
.excel-file-name{
  margin-top:10px;
  color:#6c7871;
  font-size:12px;
}
@media(max-width:600px){
  .excel-actions{display:grid;grid-template-columns:1fr 1fr}
  .excel-actions .button-link{grid-column:1/-1}
}


/* Rekap harian Excel */
.history-preview{
  margin:0 0 20px;
  padding:16px;
  border:1px solid #dce6e0;
  border-radius:16px;
  background:#fff;
}
.history-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:16px;
}
.history-kpis>div{
  padding:12px;
  border-radius:12px;
  background:#f4f8f6;
  display:grid;
  gap:4px;
}
.history-kpis span{font-size:11px;color:#748078;text-transform:uppercase;letter-spacing:.04em}
.history-kpis b{font-size:15px;color:#244d3e}
.history-preview-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}
.history-preview-head p{margin:3px 0 0;color:#748078;font-size:12px}
.history-table{
  border:1px solid #e7ebe8;
  border-radius:12px;
  overflow:hidden;
  max-height:360px;
  overflow-y:auto;
}
.history-table-head,.history-table-row{
  display:grid;
  grid-template-columns:minmax(180px,1.7fr) minmax(110px,.9fr) 90px minmax(120px,1fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
}
.history-table-head{
  position:sticky;
  top:0;
  z-index:1;
  background:#edf4f0;
  color:#315848;
  font-size:12px;
}
.history-table-row{
  border-top:1px solid #edf0ee;
  font-size:13px;
}
.history-table-row:nth-child(odd){background:#fbfcfb}
.migration-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 16px;
  color:#8a958e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.migration-divider:before,.migration-divider:after{
  content:"";
  height:1px;
  background:#e3e8e5;
  flex:1;
}
@media(max-width:700px){
  .history-kpis{grid-template-columns:1fr 1fr}
  .history-preview-head{align-items:stretch;flex-direction:column}
  .history-table{overflow-x:auto}
  .history-table-head,.history-table-row{min-width:650px}
}


/* ===== v0.3.1 Interactive drill-down & charts ===== */
.dashboard-kpis .kpi-card{
  border:1px solid #e5e7e3;
  background:#fff;
  color:#1d211f;
  padding:15px;
  text-align:left;
  display:grid;
  gap:5px;
  border-radius:16px;
  min-width:0;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.dashboard-kpis .kpi-card span{color:#6d746f;font-size:12px}
.dashboard-kpis .kpi-card b{font-size:18px}
.dashboard-kpis .kpi-card small{color:#94a099;font-size:10px;font-weight:700}
.dashboard-kpis .kpi-card.feature{background:#4f46e5;color:#fff;border-color:#4f46e5}
.dashboard-kpis .kpi-card.feature span,.dashboard-kpis .kpi-card.feature small{color:#e0e7ff}
@media(hover:hover) and (pointer:fine){
  .dashboard-kpis .kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(31,62,49,.09);border-color:#c7d2fe}
}
.dashboard-kpis .kpi-card:focus-visible,.student-row:focus-visible,.rank-row:focus-visible,.report-row:focus-visible,.summary-list button:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}

.summary-list button{
  width:100%;background:transparent;color:inherit;border-radius:0;padding:14px 0;
  display:flex;justify-content:space-between;align-items:center;text-align:left;
  border-bottom:1px solid #edf0ed;
}
.summary-list button:last-child{border-bottom:0}
.summary-list button span{color:#667169;font-weight:400}
.summary-list button b{font-size:16px}
@media(hover:hover) and (pointer:fine){.summary-list button:hover span{color:#4f46e5}}

.analytics-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);
  gap:16px;
  margin-top:16px;
}
.chart-card{min-width:0;overflow:hidden}
.ranking-card,.monthly-card{grid-column:1/-1}
.chart-heading{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px
}
.chart-heading h3{margin:0 0 3px}
.chart-heading p{margin:0;color:#7b857f;font-size:12px}
.chart-value{text-align:right;display:grid}
.chart-value span{font-size:10px;color:#87928c;text-transform:uppercase;letter-spacing:.05em}
.chart-value b{font-size:14px;color:#4f46e5}
.compact-btn{padding:7px 10px;font-size:12px;white-space:nowrap}

.svg-chart{width:100%;min-height:250px}
.svg-chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-grid-line{stroke:#e8ece9;stroke-width:1}
.chart-axis-label{fill:#8a948e;font-size:10px}
.trend-line{fill:none;stroke:#4f46e5;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.trend-point{fill:#fff;stroke:#4f46e5;stroke-width:3;cursor:pointer;transition:r .12s ease}
.trend-point:hover,.trend-point:focus{r:7;outline:none}

.donut-layout{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;padding-top:8px}
.donut-chart{
  width:155px;height:155px;border-radius:50%;padding:0;position:relative;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);margin:auto
}
.donut-chart:after{content:"";position:absolute;inset:28px;border-radius:50%;background:#fff}
.donut-chart>span{position:relative;z-index:2;display:grid;text-align:center;line-height:1.2;color:#22332b}
.donut-chart>span b{font-size:14px}
.donut-chart>span small{font-size:10px;color:#849089;margin-top:3px}
.category-legend{display:grid;gap:7px}
.category-legend button{
  background:#f8faf8;color:#25342d;border:1px solid #edf0ee;padding:10px;border-radius:12px;
  display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;text-align:left
}
.category-legend button span{display:grid}
.category-legend button b{font-size:12px}
.category-legend button small{font-size:10px;color:#7a857f;font-weight:500}
.category-legend button strong{font-size:12px}
.legend-dot{width:9px;height:9px;border-radius:50%}.legend-dot.paud{background:#4f46e5}.legend-dot.non{background:#0ea5e9}

.ranking-chart{display:grid;gap:5px}
.rank-row{
  background:transparent;color:#26322c;border-radius:12px;padding:9px 8px;
  display:grid;grid-template-columns:28px minmax(150px,1.3fr) minmax(100px,1.8fr) minmax(110px,.7fr);
  gap:10px;align-items:center;text-align:left
}
.rank-no{width:26px;height:26px;border-radius:8px;background:#f0f4f1;display:grid;place-items:center;font-size:11px;font-weight:900;color:#5c6e64}
.rank-person{display:grid;min-width:0}
.rank-person b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-person small{font-size:10px;color:#859089}
.rank-bar{height:8px;border-radius:999px;background:#edf1ee;overflow:hidden}
.rank-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f46e5,#818cf8)}
.rank-row>strong{text-align:right;font-size:12px}
@media(hover:hover) and (pointer:fine){.rank-row:hover{background:#f7faf8}}

.month-bars{
  min-height:190px;display:grid;grid-template-columns:repeat(12,minmax(36px,1fr));gap:8px;align-items:end;
  padding-top:8px
}
.month-bar-wrap{
  height:180px;background:transparent;color:#526159;padding:0;border-radius:8px;
  display:grid;grid-template-rows:24px 1fr 18px;gap:4px;align-items:end;min-width:0
}
.month-bar-value{font-size:9px;color:#78847d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.month-bar-track{height:132px;background:#f1f4f2;border-radius:7px;display:flex;align-items:end;overflow:hidden}
.month-bar-track i{display:block;width:100%;background:linear-gradient(#60a5fa,#4f46e5);border-radius:7px 7px 3px 3px}
.month-bar-wrap small{text-align:center;font-size:9px;font-weight:700}
@media(hover:hover) and (pointer:fine){.month-bar-wrap:hover .month-bar-track{background:#e7eeea}}

.student-list-heading{gap:12px;align-items:center}
.student-search{max-width:190px;min-width:0}
.student-row{
  width:100%;background:transparent;color:inherit;border-radius:10px;text-align:left;align-items:center
}
.student-row-right{display:grid;text-align:right}
.student-row-right span{font-size:10px;color:#839089;margin-top:3px}
@media(hover:hover) and (pointer:fine){.student-row:hover{background:#f7faf8;padding-left:8px;padding-right:8px}}

.report-row{width:100%;background:transparent;color:inherit;border-radius:9px;text-align:left}
@media(hover:hover) and (pointer:fine){.report-row:hover{background:#f7faf8}}
.report-mini-chart{margin:15px 0 8px}
.mini-bars{height:140px;display:flex;gap:4px;align-items:end;overflow-x:auto;padding:4px 2px 0}
.mini-bars button{
  min-width:30px;flex:1;height:132px;background:transparent;color:#6e7a73;padding:0;
  display:grid;grid-template-rows:1fr 28px;gap:3px;align-items:end
}
.mini-bars button i{width:100%;min-height:2px;background:#6366f1;border-radius:5px 5px 2px 2px;align-self:end}
.mini-bars button small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* Detail modal / drill-down */
body.modal-open{overflow:hidden}
.detail-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(18,28,23,.52);padding:22px;
  display:flex;justify-content:flex-end;align-items:stretch
}
.detail-modal{
  width:min(720px,100%);height:100%;background:#f8faf8;border-radius:24px;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;box-shadow:0 24px 70px rgba(0,0,0,.2)
}
.detail-modal-head{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  background:#fff;padding:22px 24px 18px;border-bottom:1px solid #e9ecea
}
.detail-modal-head h2{margin:4px 0 2px;font-size:23px}
.modal-close{
  width:42px;height:42px;padding:0;border-radius:50%;background:#edf0ee;color:#26342d;
  font-size:25px;line-height:1
}
.detail-body{overflow:auto;padding:20px 24px 34px}
.loading-block{padding:30px;text-align:center;color:#748079}
.detail-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}
.detail-kpis.three{grid-template-columns:repeat(3,1fr)}
.detail-kpis.two{grid-template-columns:repeat(2,1fr)}
.detail-kpis>div{background:#fff;border:1px solid #e7ebe8;border-radius:14px;padding:13px;display:grid;gap:4px}
.detail-kpis span{font-size:10px;color:#7d8982;text-transform:uppercase;letter-spacing:.04em}
.detail-kpis b{font-size:15px;color:#264537}
.detail-kpis b.smaller{font-size:11px}
.detail-section{background:#fff;border:1px solid #e7ebe8;border-radius:17px;padding:17px;margin-top:12px}
.detail-section h3{font-size:14px;margin:0 0 12px}
.detail-tx-list{display:grid}
.detail-tx{
  display:flex;width:100%;justify-content:space-between;gap:12px;align-items:center;
  padding:11px 2px;border:0;border-bottom:1px solid #edf0ee;background:transparent;color:inherit;text-align:left;border-radius:0
}
.detail-tx:last-child{border-bottom:0}
.detail-tx span{display:grid;min-width:0}
.detail-tx b{font-size:12px}
.detail-tx small{font-size:10px;color:#7c8881;white-space:normal}
.detail-tx strong{white-space:nowrap;font-size:12px}
.detail-tx strong.plus{color:#4f46e5}.detail-tx strong.minus{color:#9b4040}
.clickable-tx{cursor:pointer}
@media(hover:hover) and (pointer:fine){.clickable-tx:hover{background:#f7faf8;padding-left:7px;padding-right:7px}}
.detail-month-bars{display:grid;gap:10px}
.detail-month-bars>div{display:grid;grid-template-columns:minmax(130px,1fr) minmax(100px,2fr) minmax(100px,.8fr);gap:10px;align-items:center}
.detail-month-bars span{display:grid}
.detail-month-bars span b{font-size:11px}.detail-month-bars span small{font-size:9px;color:#849089}
.detail-month-bars i{height:7px;background:#edf1ee;border-radius:999px;overflow:hidden}
.detail-month-bars em{display:block;height:100%;background:#6366f1;border-radius:inherit}
.detail-month-bars strong{text-align:right;font-size:11px}

@media(max-width:980px){
  .analytics-grid{grid-template-columns:1fr}
  .ranking-card,.monthly-card{grid-column:auto}
}
@media(max-width:700px){
  .analytics-grid{gap:12px}
  .donut-layout{grid-template-columns:130px 1fr;gap:10px}
  .donut-chart{width:126px;height:126px}
  .donut-chart:after{inset:23px}
  .rank-row{grid-template-columns:26px minmax(120px,1fr) minmax(80px,.8fr)}
  .rank-bar{display:none}
  .month-bars{overflow-x:auto;grid-template-columns:repeat(12,44px)}
  .detail-overlay{padding:0;align-items:stretch}
  .detail-modal{border-radius:0;width:100%;height:100%}
  .detail-modal-head{padding:17px 15px 14px}
  .detail-body{padding:15px}
  .detail-kpis{grid-template-columns:1fr 1fr}
  .detail-kpis.three{grid-template-columns:1fr 1fr 1fr}
  .detail-month-bars>div{grid-template-columns:minmax(110px,1fr) minmax(80px,1fr)}
  .detail-month-bars strong{grid-column:2;text-align:right}
  .student-list-heading{align-items:stretch;flex-direction:column}
  .student-search{max-width:none;width:100%;box-sizing:border-box}
}
@media(max-width:430px){
  .dashboard-kpis .kpi-card b{font-size:16px}
  .detail-kpis.three{grid-template-columns:1fr}
  .donut-layout{grid-template-columns:1fr}
  .category-legend{grid-template-columns:1fr 1fr}
}


/* ===== v0.3.2 Overview interaktif + privasi orang tua ===== */

.student-private-note{
  display:flex;gap:10px;align-items:center;
  margin:12px 0 14px;padding:11px 13px;
  border:1px solid #dfe8e3;border-radius:13px;background:#f6faf8;color:#2d493c
}
.student-private-note>span{font-size:18px}
.student-private-note>div{display:grid;gap:2px}
.student-private-note b{font-size:12px}
.student-private-note small{font-size:10px;color:#748078}
.student-own-chart-card{margin-bottom:16px}
.student-month-chart{
  height:190px;display:grid;grid-template-columns:repeat(12,minmax(36px,1fr));
  gap:7px;align-items:end;padding-top:4px
}
.student-month-col{
  height:176px;background:transparent;color:#66736c;padding:0;
  display:grid;grid-template-rows:28px 1fr 20px;gap:4px;align-items:end;border-radius:8px
}
.student-month-col>span{font-size:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.student-month-col>i{
  height:120px;background:#f0f4f1;border-radius:7px;display:flex;align-items:end;overflow:hidden
}
.student-month-col>i>em{
  width:100%;display:block;background:linear-gradient(#78aa93,#4f46e5);
  border-radius:7px 7px 2px 2px;min-height:1px
}
.student-month-col>small{text-align:center;font-size:9px;font-weight:700}
.student-month-col.current>small{color:#4f46e5;font-weight:900}
.student-month-col.current>i{box-shadow:inset 0 0 0 1px #c7d2fe}
@media(hover:hover) and (pointer:fine){
  .student-month-col:hover>i{background:#e4ece8}
}

/* Monthly grouped chart: PAUD vs NON PAUD */
.monthly-category-legend{
  display:flex;gap:16px;align-items:center;margin:-4px 0 8px;
  color:#66736c;font-size:11px;font-weight:700
}
.monthly-category-legend span{display:flex;gap:6px;align-items:center}
.monthly-category-chart{
  min-height:225px;
  display:grid;grid-template-columns:repeat(12,minmax(46px,1fr));
  gap:8px;align-items:end;padding-top:6px
}
.monthly-category-group{
  height:212px;display:grid;grid-template-rows:26px 1fr 23px;gap:4px;min-width:0
}
.monthly-total-label{
  text-align:center;font-size:8px;color:#7a867f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.monthly-pair{
  height:152px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:end;
  padding:4px;background:#f2f5f3;border-radius:9px
}
.monthly-series{
  height:100%;padding:0;background:transparent;display:flex;align-items:end;border-radius:5px;overflow:hidden
}
.monthly-series i{display:block;width:100%;min-height:1px;border-radius:5px 5px 2px 2px}
.monthly-series.paud i{background:linear-gradient(#818cf8,#4f46e5)}
.monthly-series.non i{background:linear-gradient(#38bdf8,#0284c7)}
.month-label{
  min-height:23px;padding:0;background:transparent;color:#65726b;font-size:9px;font-weight:800
}
.monthly-category-group.current .monthly-pair{box-shadow:inset 0 0 0 1px #c7d2fe}
.monthly-category-group.current .month-label{color:#4f46e5}
@media(hover:hover) and (pointer:fine){
  .monthly-series:hover{filter:brightness(.94)}
  .month-label:hover{color:#4f46e5}
}

/* Pie/donut total center made more prominent */
.donut-chart>span b{font-size:16px}
.donut-chart>span small{font-size:10px}
.category-legend button strong{font-size:13px}

/* Responsive charts */
@media(max-width:780px){
  .monthly-category-chart,.student-month-chart{
    overflow-x:auto;
    grid-template-columns:repeat(12,48px);
    padding-bottom:4px
  }
}
@media(max-width:430px){
  .student-own-chart-card .chart-heading{flex-direction:column}
  .student-own-chart-card .chart-value{text-align:left}
}


/* ===== v0.3.3 Modern Minimal UI ===== */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#111827;
  --muted:#64748b;
  --border:#e6e9f0;
  --soft:#f8fafc;
  --sidebar:#0f172a;
  --sidebar-muted:#94a3b8;
  --primary:#4f46e5;
  --primary-2:#6366f1;
  --cyan:#0ea5e9;
  --danger:#dc2626;
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-.005em
}
.card{
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  box-shadow:0 6px 24px rgba(15,23,42,.035)!important;
}
button{background:var(--primary)}
button.ghost{background:#eef0f5;color:#334155}
input,select{
  border:1px solid #dfe3eb;
  border-radius:12px;
  background:#fff;
  color:#111827;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease
}
input:focus,select:focus{
  border-color:#a5b4fc;
  box-shadow:0 0 0 4px rgba(79,70,229,.08)
}
.eyebrow,.section-kicker{color:var(--primary)}
.msg{color:var(--primary)}
.pill{background:#eef2ff;color:#4338ca}
.balance{background:#111827}
.teacher-shell{background:var(--bg)}
.teacher-sidebar{
  background:var(--sidebar);
  box-shadow:none;
  border-right:1px solid rgba(255,255,255,.05)
}
.sidebar-logo{
  background:#ffffff;
  color:#111827;
  border-radius:11px
}
.sidebar-brand-text small,.sidebar-profile-text span{color:var(--sidebar-muted)}
.avatar{background:#1e293b;color:#e2e8f0}
.sidebar-nav button,.sidebar-logout{color:#aeb9c8!important}
.sidebar-nav button:hover,.sidebar-logout:hover{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important
}
.sidebar-nav button.active{
  background:#ffffff!important;
  color:#111827!important;
  box-shadow:none
}
.sidebar-nav button.active .nav-icon{
  background:#eef2ff;
  color:#4338ca
}
.nav-icon{background:rgba(255,255,255,.055)}
.side-badge{background:#e0e7ff;color:#3730a3}
.dashboard-topbar{
  background:rgba(246,247,251,.92);
  border-bottom:1px solid var(--border)
}
.page-subtitle{color:var(--muted)}
.topbar-status{
  border:1px solid var(--border);
  color:#475569;
  background:#fff
}
.status-dot{
  background:#6366f1;
  box-shadow:0 0 0 3px #e0e7ff
}
.dashboard-kpis .kpi-card{
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:none
}
.dashboard-kpis .kpi-card.feature{
  background:#111827;
  border-color:#111827
}
.dashboard-kpis .kpi-card:not(.feature){background:#fff}
.dashboard-kpis .kpi-card small{color:#94a3b8}
.dashboard-kpis .kpi-card.feature small,
.dashboard-kpis .kpi-card.feature span{color:#cbd5e1}
.overview-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:26px 2px 12px
}
.overview-section-head.compact{margin-top:28px}
.overview-section-head h3{margin:2px 0 0;font-size:18px}
.overview-section-head p{margin:0;color:#64748b;font-size:12px}
.section-kicker{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em
}
.analytics-grid{gap:14px}
.chart-card{background:#fff}
.chart-heading p{color:#64748b}
.chart-value span{color:#94a3b8}
.chart-value b{color:#4338ca}
.trend-line{stroke:#4f46e5}
.trend-point{stroke:#4f46e5}
.quick-icon{
  background:#eef2ff;
  color:#4f46e5
}
.overview-bottom-wrap{
  margin-top:18px;
  padding-top:1px
}
.dashboard-overview-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);
}
.summary-list button span{color:#64748b}
.summary-list button:hover span{color:#4338ca}
.category-legend button{
  background:#fafbfe;
  border-color:#eceef4
}
.legend-dot.paud{background:#4f46e5}
.legend-dot.non{background:#0ea5e9}
.rank-bar{background:#eef0f5}
.rank-bar i{background:linear-gradient(90deg,#4f46e5,#818cf8)}
.rank-no{background:#f1f3f8;color:#475569}
.monthly-category-legend{color:#64748b}
.monthly-pair{background:#f1f3f8}
.monthly-series.paud i{background:linear-gradient(#818cf8,#4f46e5)}
.monthly-series.non i{background:linear-gradient(#38bdf8,#0284c7)}
.monthly-category-group.current .monthly-pair{box-shadow:inset 0 0 0 1px #c7d2fe}
.monthly-category-group.current .month-label{color:#4338ca}
.student-month-col>i{background:#f1f3f8}
.student-month-col>i>em{background:linear-gradient(#818cf8,#4f46e5)}
.student-month-col.current>small{color:#4338ca}
.student-month-col.current>i{box-shadow:inset 0 0 0 1px #c7d2fe}
.student-private-note{
  border-color:#e0e7ff;
  background:#f8f9ff;
  color:#3730a3
}
.detail-overlay{background:rgba(15,23,42,.48)}
.detail-modal{background:#f7f8fc}
.detail-kpis b{color:#312e81}
.detail-tx strong.plus{color:#4338ca}
.detail-section{border-color:#e8eaf1}
.detail-month-bars em{background:#6366f1}
.reject{background:#ef4444}

/* Access Peserta */
.access-header-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);
  gap:14px;
  margin-bottom:14px
}
.access-intro-card,.access-action-card{margin:0!important}
.access-intro-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.access-intro-card h3,.access-action-card h3{margin:4px 0 5px}
.access-intro-card p,.access-action-card p{color:#64748b;margin-bottom:0}
.access-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(72px,1fr));
  gap:8px;
  min-width:285px
}
.access-summary>div{
  padding:13px;
  border:1px solid #e8eaf1;
  background:#fafbfe;
  border-radius:14px;
  display:grid;
  gap:2px
}
.access-summary span{
  color:#94a3b8;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em
}
.access-summary b{font-size:18px}
.access-action-card{display:flex;flex-direction:column;align-items:flex-start}
.danger-soft{
  margin-top:auto;
  width:100%;
  background:#fff1f2;
  color:#be123c;
  border:1px solid #ffe4e6
}
.danger-soft:hover{background:#ffe4e6}
.access-list-card,.generated-pins-card{margin-top:14px!important}
.access-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px
}
.access-toolbar h3{margin:0 0 3px}
.access-toolbar p{margin:0;color:#64748b}
.access-toolbar input{width:220px}
.access-table-head,.access-row{
  display:grid;
  grid-template-columns:minmax(210px,1.8fr) minmax(100px,.7fr) minmax(120px,.8fr) 110px;
  gap:12px;
  align-items:center
}
.access-table-head{
  padding:9px 10px;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid #eceef4
}
.access-row{
  min-height:62px;
  padding:10px;
  border-bottom:1px solid #f0f1f5
}
.access-row:last-child{border-bottom:0}
.access-person{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.access-avatar{
  width:36px;height:36px;border-radius:11px;
  background:#eef2ff;color:#4338ca;
  display:grid;place-items:center;
  font-weight:900;flex:none
}
.access-person>span:last-child{display:grid;min-width:0}
.access-person b{
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.access-person small{font-size:10px;color:#94a3b8}
.category-chip{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  font-style:normal;
  font-size:9px;
  font-weight:900
}
.category-chip.paud{background:#eef2ff;color:#4338ca}
.category-chip.non{background:#e0f2fe;color:#0369a1}
.access-row code{
  width:max-content;
  padding:6px 8px;
  border-radius:8px;
  background:#f3f4f6;
  color:#334155;
  font-size:11px;
  font-weight:800
}
.reset-pin-btn{
  background:#111827;
  color:#fff;
  font-size:10px;
  padding:8px 10px;
  border-radius:9px
}
.generated-pin-head,.generated-pin-row{
  display:grid;
  grid-template-columns:minmax(180px,1.5fr) minmax(100px,.8fr) minmax(95px,.7fr) minmax(110px,.7fr);
  gap:12px;
  align-items:center
}
.generated-pin-head{
  padding:9px 10px;
  border-bottom:1px solid #eceef4;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase
}
.generated-pin-row{
  padding:11px 10px;
  border-bottom:1px solid #f0f1f5;
  font-size:11px
}
.generated-pin-row strong{
  font-size:16px;
  letter-spacing:.12em;
  color:#4338ca
}

/* Landing / parent pages also modernized */
.shell{max-width:1120px}
.mark{background:#111827;border-radius:14px}
.brand .eyebrow{color:#4f46e5}
#studentApp .balance{background:#111827}
#studentApp .card,#landing .card{border-color:#e6e9f0}
#studentApp button,#landing button{background:#4f46e5}
#studentApp .ghost,#landing .ghost{background:#eef0f5;color:#334155}

/* mobile */
@media(max-width:980px){
  .access-header-grid{grid-template-columns:1fr}
  .access-intro-card{align-items:flex-start}
}
@media(max-width:760px){
  .overview-section-head{align-items:flex-start;flex-direction:column;gap:4px}
  .access-intro-card{flex-direction:column}
  .access-summary{width:100%;min-width:0}
  .access-toolbar{align-items:stretch;flex-direction:column}
  .access-toolbar input{width:100%}
  .access-table-head{display:none}
  .access-row{
    grid-template-columns:1fr auto;
    gap:8px;
    border:1px solid #eceef4;
    border-radius:14px;
    margin-bottom:8px
  }
  .access-row>span:nth-child(2){grid-column:1}
  .access-row>code{grid-column:1}
  .reset-pin-btn{grid-column:2;grid-row:1/4}
  .generated-pin-head{display:none}
  .generated-pin-row{
    grid-template-columns:1fr auto;
    border:1px solid #eceef4;
    border-radius:12px;
    margin-bottom:8px
  }
  .generated-pin-row span{grid-column:1}
  .generated-pin-row strong{grid-column:2;grid-row:1/3}
}
@media(max-width:430px){
  .dashboard-overview-grid{grid-template-columns:1fr}
  .access-summary{grid-template-columns:repeat(3,1fr)}
}



/* ===== v0.3.4 Refinement: student monthly chart cleaner ===== */
.student-own-chart-card{
  overflow:hidden;
}
.student-own-chart-card .chart-heading{
  margin-bottom:10px;
}
.student-own-chart-card .chart-heading p{
  margin:4px 0 0;
}
.student-own-chart-card .chart-value{
  text-align:right;
}
.student-own-chart-card .chart-value span{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}
.student-own-chart-card .chart-value b{
  font-size:15px;
}
.student-month-chart{
  min-height:210px;
  display:grid;
  grid-template-columns:repeat(12,minmax(56px,1fr));
  gap:10px;
  align-items:end;
  padding:6px 0 2px;
}
.student-month-col{
  height:auto;
  min-height:180px;
  padding:8px 6px 4px;
  border:1px solid #e7eaf3;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
  color:#475569;
  display:grid;
  grid-template-rows:20px 1fr 18px;
  gap:8px;
  align-items:end;
  border-radius:18px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:0 4px 14px rgba(15,23,42,.03);
}
.student-month-amount{
  display:inline-flex;
  justify-self:center;
  align-items:center;
  max-width:100%;
  padding:3px 8px;
  border-radius:999px;
  background:#eef2ff;
  color:#4338ca;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.student-month-amount.empty{
  background:#f3f4f6;
  color:#94a3b8;
}
.student-month-col>span{font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.student-month-col>i{
  height:132px;
  padding:8px;
  background:linear-gradient(180deg,#eef2ff 0%,#f8faff 100%);
  border:1px solid #edf1f7;
  border-radius:16px;
  display:flex;
  align-items:end;
  overflow:hidden;
}
.student-month-col>i>em{
  width:100%;
  display:block;
  background:linear-gradient(180deg,#818cf8 0%,#4f46e5 100%);
  border-radius:12px 12px 8px 8px;
  min-height:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.student-month-col>small{
  text-align:center;
  font-size:11px;
  font-weight:800;
  color:#64748b;
}
.student-month-col.current{
  border-color:#c7d2fe;
  box-shadow:0 10px 24px rgba(79,70,229,.10);
}
.student-month-col.current>small{color:#4338ca;font-weight:900}
.student-month-col.current>i{box-shadow:inset 0 0 0 1px #c7d2fe}
@media(hover:hover) and (pointer:fine){
  .student-month-col:hover{
    transform:translateY(-2px);
    border-color:#d6dbeb;
    box-shadow:0 12px 22px rgba(15,23,42,.08);
  }
  .student-month-col:hover>i{background:linear-gradient(180deg,#e9efff 0%,#f8faff 100%)}
}
@media(max-width:780px){
  .student-month-chart{
    overflow-x:auto;
    grid-template-columns:repeat(12,68px);
    gap:10px;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
  }
  .student-month-col{scroll-snap-align:start}
}
@media(max-width:430px){
  .student-own-chart-card .chart-heading{flex-direction:column;align-items:flex-start}
  .student-own-chart-card .chart-value{text-align:left}
}


/* ===== v0.3.5 Refinement: overview donut + legend ===== */
.category-card{
  overflow:hidden;
}
.donut-layout{
  display:grid;
  grid-template-columns:minmax(180px,210px) minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding-top:10px;
}
.donut-chart{
  width:170px;
  height:170px;
}
.donut-chart:after{
  inset:30px;
}
.donut-chart>span{
  padding:0 10px;
}
.donut-chart>span b{
  font-size:17px;
  line-height:1.05;
  white-space:nowrap;
}
.donut-chart>span small{
  margin-top:6px;
  font-size:11px;
}
.category-legend{
  display:grid;
  gap:12px;
}
.category-legend button{
  width:100%;
  padding:14px 15px;
  border-radius:16px;
  background:#fbfcff;
  border:1px solid #e7eaf3;
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  grid-template-areas:
    "dot content"
    "dot percent";
  gap:8px 12px;
  align-items:start;
  text-align:left;
}
.category-legend .legend-dot{
  grid-area:dot;
  width:11px;
  height:11px;
  margin-top:7px;
}
.category-legend button span{
  grid-area:content;
  display:block;
  min-width:0;
}
.category-legend button b{
  display:block;
  font-size:15px;
  line-height:1.2;
  margin:0 0 4px;
}
.category-legend button small{
  display:block;
  font-size:12px;
  line-height:1.45;
  color:#64748b;
  white-space:normal;
  overflow-wrap:anywhere;
}
.category-legend button strong{
  grid-area:percent;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#4338ca;
  font-size:12px;
  font-weight:900;
}
.category-legend button[data-category="BELUM_SEKOLAH"] strong{
  background:#e0f2fe;
  color:#0369a1;
}
@media(max-width:860px){
  .donut-layout{
    grid-template-columns:160px minmax(0,1fr);
    gap:16px;
  }
  .donut-chart{
    width:148px;
    height:148px;
  }
  .donut-chart:after{inset:26px}
}
@media(max-width:560px){
  .donut-layout{
    grid-template-columns:1fr;
    gap:14px;
  }
  .donut-chart{
    width:156px;
    height:156px;
    margin:0 auto;
  }
  .donut-chart:after{inset:28px}
  .category-legend{
    grid-template-columns:1fr;
  }
}


/* ===== v0.3.6 Weekly recap + formatted Rupiah input ===== */
.amount-input{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  font-weight:800;
}
.amount-input::placeholder{font-weight:500;color:#a7afbd}
.weekly-card{grid-column:1/-1;overflow:hidden}
.weekly-summary-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 12px
}
.weekly-summary-chips>span{
  display:inline-grid;grid-template-columns:10px auto auto;gap:7px;align-items:center;
  padding:7px 10px;border:1px solid #e8eaf2;border-radius:999px;background:#fafbfe;
  color:#64748b;font-size:10px
}
.weekly-summary-chips b{font-size:10px;color:#334155}
.weekly-summary-chips strong{font-size:11px;color:#111827}
.weekly-category-chart{
  min-height:232px;display:grid;grid-template-columns:repeat(12,minmax(58px,1fr));
  gap:9px;align-items:end;padding:7px 0 2px
}
.weekly-group{
  height:220px;min-width:0;display:grid;grid-template-rows:27px 1fr 34px;gap:5px
}
.weekly-total{
  text-align:center;color:#64748b;font-size:9px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.weekly-bars{
  height:150px;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:end;
  padding:5px;background:#f3f5f9;border:1px solid #edf0f5;border-radius:12px
}
.weekly-bar{
  height:100%;padding:0;background:transparent!important;display:flex;align-items:end;
  border-radius:7px;overflow:hidden
}
.weekly-bar i{display:block;width:100%;min-height:0;border-radius:7px 7px 3px 3px}
.weekly-bar.paud i{background:linear-gradient(180deg,#818cf8,#4f46e5)}
.weekly-bar.non i{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.weekly-label{
  min-height:34px;padding:2px 1px;background:transparent!important;color:#64748b!important;
  font-size:9px;font-weight:800;line-height:1.15;border-radius:7px
}
.weekly-group.current .weekly-bars{box-shadow:inset 0 0 0 1px #a5b4fc;background:#f5f6ff}
.weekly-group.current .weekly-label{color:#4338ca!important}
@media(hover:hover) and (pointer:fine){
  .weekly-bar:hover{filter:brightness(.94)}
  .weekly-label:hover{color:#4338ca!important;background:#f7f8fc!important}
}
@media(max-width:900px){
  .weekly-category-chart{overflow-x:auto;grid-template-columns:repeat(12,68px);padding-bottom:8px;scroll-snap-type:x proximity}
  .weekly-group{scroll-snap-align:start}
}
@media(max-width:560px){
  .weekly-card .chart-heading{flex-direction:column;align-items:flex-start}
  .weekly-card .chart-value{text-align:left}
}


/* ===== v0.3.7 Daily category + PC layout refinement ===== */
main.shell:has(> #teacherApp:not(.hidden)){
  max-width:none;
  width:100%;
  padding:0;
  margin:0;
}
.dashboard-content{max-width:1500px}
.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.trend-card,.category-card,.daily-category-card,.ranking-card,.monthly-card,.weekly-card{grid-column:1/-1}
.category-card,.daily-category-card,.weekly-card,.monthly-card,.ranking-card{overflow:visible}
.category-card .chart-heading,.daily-category-card .chart-heading,.weekly-card .chart-heading,.monthly-card .chart-heading{align-items:flex-start}
.donut-layout{grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:20px;align-items:center}
.category-legend{grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
#monthlyCategoryChart,.weekly-category-chart,.daily-category-chart{overflow-x:auto;padding-bottom:8px}
.monthly-category-chart{grid-template-columns:repeat(12,minmax(54px,1fr))}
.weekly-category-chart{grid-template-columns:repeat(12,minmax(62px,1fr))}

.daily-summary-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 14px}
.daily-summary-chips>span{display:inline-grid;grid-template-columns:10px auto auto;gap:7px;align-items:center;padding:7px 10px;border:1px solid #e8eaf2;border-radius:999px;background:#fafbfe;color:#64748b;font-size:10px}
.daily-summary-chips b{font-size:10px;color:#334155}
.daily-summary-chips strong{font-size:11px;color:#111827}
.daily-category-chart{min-height:214px;display:grid;grid-template-columns:repeat(14,minmax(54px,1fr));gap:8px;align-items:end;padding:6px 0 2px}
.daily-group{height:204px;display:grid;grid-template-rows:25px 1fr 30px;gap:5px;min-width:0}
.daily-total{text-align:center;color:#64748b;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daily-bars{height:132px;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:end;padding:5px;background:#f3f5f9;border:1px solid #edf0f5;border-radius:12px}
.daily-bar{height:100%;padding:0;background:transparent!important;display:flex;align-items:end;border-radius:7px;overflow:hidden}
.daily-bar i{display:block;width:100%;min-height:0;border-radius:7px 7px 3px 3px}
.daily-bar.paud i{background:linear-gradient(180deg,#818cf8,#4f46e5)}
.daily-bar.non i{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.daily-label{min-height:30px;padding:2px 1px;background:transparent!important;color:#64748b!important;font-size:9px;font-weight:800;line-height:1.15;border-radius:7px}
.daily-group.current .daily-bars{box-shadow:inset 0 0 0 1px #a5b4fc;background:#f5f6ff}
.daily-group.current .daily-label{color:#4338ca!important}
.daily-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.daily-list-row{width:100%;background:#fbfcff!important;color:#243142!important;border:1px solid #e7ebf4;padding:12px 14px;border-radius:16px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr);gap:12px;align-items:center;text-align:left}
.daily-list-date{display:grid;min-width:0}
.daily-list-date b{font-size:12px;white-space:normal;line-height:1.35}
.daily-list-date small{font-size:10px;color:#7b8798;margin-top:3px}
.daily-list-values{display:flex;justify-content:flex-end;gap:14px;align-items:center;flex-wrap:wrap}
.daily-list-values small{font-size:11px;color:#64748b;white-space:nowrap}
.daily-list-values small b{font-size:12px;color:#1f2937;margin-left:4px}
.daily-list-values strong{font-size:12px;color:#4338ca;white-space:nowrap;padding:6px 10px;background:#eef2ff;border-radius:999px}
@media(hover:hover) and (pointer:fine){
  .daily-bar:hover{filter:brightness(.94)}
  .daily-label:hover{color:#4338ca!important;background:#f7f8fc!important}
  .daily-list-row:hover{transform:translateY(-1px);box-shadow:0 12px 20px rgba(15,23,42,.05)}
}
@media(max-width:1280px){
  .daily-category-list{grid-template-columns:1fr}
  .category-legend{grid-template-columns:1fr}
}
@media(max-width:980px){
  main.shell:has(> #teacherApp:not(.hidden)){padding:0}
  .analytics-grid{grid-template-columns:1fr}
  .trend-card,.category-card,.daily-category-card,.ranking-card,.monthly-card,.weekly-card{grid-column:auto}
  .donut-layout{grid-template-columns:1fr}
  .category-legend{grid-template-columns:1fr}
  .daily-category-chart{grid-template-columns:repeat(14,62px)}
  .weekly-category-chart{grid-template-columns:repeat(12,68px)}
}
@media(max-width:700px){
  .daily-list-row{grid-template-columns:1fr}
  .daily-list-values{justify-content:flex-start}
}
@media(max-width:560px){
  .daily-category-card .chart-heading{flex-direction:column;align-items:flex-start}
  .daily-category-card .chart-value{text-align:left}
}


/* ===== v0.3.8 Weekly exact amount ===== */
.weekly-category-chart{
  grid-template-columns:repeat(12,minmax(82px,1fr));
  gap:10px;
}
.weekly-group{
  min-width:82px;
  grid-template-rows:32px 1fr 38px;
}
.weekly-total{
  font-size:10px;
  font-weight:900;
  color:#334155;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  letter-spacing:-.02em;
  line-height:1.15;
}
.weekly-label{
  font-size:9px;
}
@media(max-width:1180px){
  .weekly-category-chart{
    overflow-x:auto;
    grid-template-columns:repeat(12,86px);
    padding-bottom:10px;
    scroll-snap-type:x proximity;
  }
  .weekly-group{scroll-snap-align:start}
}


/* ===== v0.3.9 Dana & Penarikan ===== */
.fund-position-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.fund-position-card{background:#fff!important;color:#111827!important;border:1px solid #e7eaf2;padding:15px 16px;border-radius:16px;text-align:left;display:grid;gap:4px;box-shadow:0 4px 16px rgba(15,23,42,.025)}
.fund-position-card span{font-size:11px;color:#64748b;font-weight:700}
.fund-position-card b{font-size:19px;letter-spacing:-.03em}
.fund-position-card small{font-size:10px;color:#94a3b8}
.fund-position-card.cash{border-left:4px solid #64748b}
.fund-position-card.bank{border-left:4px solid #4f46e5}
.fund-position-card.total{border-left:4px solid #0ea5e9}
.funds-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.fund-kpi{background:#fff;border:1px solid #e7eaf2;border-radius:18px;padding:18px;display:grid;gap:4px}
.fund-kpi span{font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.fund-kpi b{font-size:26px;letter-spacing:-.04em;color:#111827}
.fund-kpi small{font-size:10px;color:#94a3b8}
.fund-kpi.cash{border-top:3px solid #64748b}.fund-kpi.bank{border-top:3px solid #4f46e5}.fund-kpi.total{border-top:3px solid #0ea5e9}
.fund-warning{color:#dc2626!important;font-weight:800}
.funds-form-grid>.card{margin-top:0!important}
.withdraw-btn{background:#111827!important}
.fund-history-card{margin-top:16px!important}
.fund-movement-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid #eef0f4}
.fund-movement-row:last-child{border-bottom:0}
.fund-movement-row span{display:grid;min-width:0}
.fund-movement-row b{font-size:12px}.fund-movement-row small{font-size:10px;color:#7b8794;margin-top:2px}
.fund-movement-row strong{font-size:12px;white-space:nowrap}.fund-movement-row strong.withdrawal{color:#dc2626}.fund-movement-row strong.transfer{color:#4338ca}
@media(max-width:900px){.fund-position-strip,.funds-kpis{grid-template-columns:1fr 1fr}.fund-position-card.total,.fund-kpi.total{grid-column:1/-1}}
@media(max-width:600px){.fund-position-strip,.funds-kpis{grid-template-columns:1fr}.fund-position-card.total,.fund-kpi.total{grid-column:auto}.fund-kpi b{font-size:22px}.fund-movement-row{align-items:flex-start;flex-direction:column}.fund-movement-row strong{align-self:flex-start}}


/* ===== v0.4.0 Bulk transaction correction ===== */
.correction-card{margin-top:16px!important}
.correction-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.correction-head h3{margin:4px 0 6px}
.correction-head p{margin:0;color:#64748b;max-width:760px}
.correction-selected-summary{min-width:180px;padding:12px 14px;border:1px solid #e5e9f2;border-radius:15px;background:#fafbff;display:grid;text-align:right;gap:2px}
.correction-selected-summary span{font-size:9px;color:#94a3b8;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.correction-selected-summary b{font-size:12px;color:#334155}
.correction-selected-summary strong{font-size:16px;color:#4338ca}
.correction-filters{display:grid;grid-template-columns:160px 160px minmax(200px,1fr) auto;gap:10px;align-items:end;margin:18px 0 12px}
.correction-filters label{margin:0}
.correction-filters button{height:42px;white-space:nowrap}
.correction-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 12px;padding:10px 12px;background:#f8fafc;border:1px solid #e8ebf2;border-radius:13px}
.select-all-wrap{display:flex;grid-template-columns:none;align-items:center;gap:8px;font-size:12px;font-weight:700;margin:0}
.select-all-wrap input{width:16px;height:16px;margin:0;padding:0}
.correction-primary{background:#111827!important;color:#fff!important}
.correction-primary:disabled{opacity:.42;cursor:not-allowed}
.correction-table-head,.correction-row{display:grid;grid-template-columns:34px 135px minmax(190px,1.25fr) 120px 90px minmax(160px,1fr);gap:10px;align-items:center}
.correction-table-head{padding:9px 10px;color:#94a3b8;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e9ecf2}
.correction-rows{max-height:520px;overflow:auto;border:1px solid #edf0f5;border-radius:14px}
.correction-row{padding:10px;background:#fff;border-bottom:1px solid #f0f2f6;cursor:pointer;transition:background .14s ease}
.correction-row:last-child{border-bottom:0}
.correction-row.selected{background:#f5f7ff}
.correction-row>input{width:17px;height:17px;margin:0;padding:0}
.correction-row span{display:grid;min-width:0}
.correction-row span b{font-size:11px;color:#1f2937}
.correction-row span small{font-size:9px;color:#94a3b8}
.correction-row>strong{font-size:12px;color:#111827;white-space:nowrap}
.correction-note{font-size:10px;color:#64748b;white-space:normal;overflow-wrap:anywhere}
.fund-source-chip{display:inline-flex;width:max-content;padding:4px 7px;border-radius:999px;font-style:normal;font-size:9px;font-weight:900}
.fund-source-chip.cash{background:#eef2ff;color:#4338ca}.fund-source-chip.bank{background:#e0f2fe;color:#0369a1}
.correction-empty{padding:24px;text-align:center;color:#94a3b8;font-size:12px}
@media(hover:hover) and (pointer:fine){.correction-row:hover{background:#fafbff}}
@media(max-width:1050px){
  .correction-filters{grid-template-columns:1fr 1fr}.correction-filters label:nth-child(3){grid-column:1/-1}.correction-filters button{grid-column:1/-1}
  .correction-table-head{display:none}.correction-rows{max-height:none;border:0}
  .correction-row{grid-template-columns:28px 1fr auto;border:1px solid #e9ecf2;border-radius:13px;margin-bottom:8px;gap:8px}
  .correction-row>span:nth-of-type(1){grid-column:2}.correction-row>span:nth-of-type(2){grid-column:2}.correction-row>strong{grid-column:3;grid-row:1/3;text-align:right}.correction-row>span:nth-of-type(3){grid-column:2}.correction-note{grid-column:2/4}
}
@media(max-width:650px){
  .correction-head{flex-direction:column}.correction-selected-summary{width:100%;text-align:left}.correction-actions{align-items:stretch;flex-direction:column}.correction-primary{width:100%}.correction-filters{grid-template-columns:1fr}
  .correction-filters label:nth-child(3),.correction-filters button{grid-column:auto}
}


/* ===== v0.4.1 Edit transaksi + hapus duplikat ===== */
.transaction-manage-card{margin-top:16px!important}
.manage-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.manage-head h3{margin:4px 0 6px}.manage-head p{margin:0;color:#64748b;max-width:760px}
.manage-selected-summary{min-width:180px;padding:12px 14px;border:1px solid #e5e9f2;border-radius:15px;background:#fafbff;display:grid;text-align:right;gap:2px}
.manage-selected-summary span{font-size:9px;color:#94a3b8;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.manage-selected-summary b{font-size:12px;color:#334155}.manage-selected-summary strong{font-size:16px;color:#4338ca}
.manage-filters{display:grid;grid-template-columns:150px 150px 190px minmax(200px,1fr) auto;gap:10px;align-items:end;margin:18px 0 12px}
.manage-filters label{margin:0}.manage-filters button{height:42px;white-space:nowrap}
.manage-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 12px;padding:10px 12px;background:#f8fafc;border:1px solid #e8ebf2;border-radius:13px}
.manage-actions .danger-soft{width:auto;margin-left:auto;padding:9px 13px}.manage-actions .danger-soft:disabled{opacity:.4;cursor:not-allowed}
.manage-table-head,.manage-row{display:grid;grid-template-columns:32px 120px minmax(190px,1.25fr) 145px 115px 82px minmax(170px,1fr) 70px;gap:10px;align-items:center}
.manage-table-head{padding:9px 10px;color:#94a3b8;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e9ecf2}
.manage-rows{max-height:620px;overflow:auto;border:1px solid #edf0f5;border-radius:14px}
.manage-row{padding:10px;background:#fff;border-bottom:1px solid #f0f2f6;transition:background .14s ease}
.manage-row:last-child{border-bottom:0}.manage-row.selected{background:#f5f7ff}.manage-row.duplicate{box-shadow:inset 3px 0 0 #f59e0b}
.manage-row>input{width:17px;height:17px;margin:0;padding:0}.manage-row span{display:grid;min-width:0}.manage-row span b{font-size:11px;color:#1f2937}.manage-row span small{font-size:9px;color:#94a3b8}
.manage-row>strong{font-size:12px;color:#111827;white-space:nowrap}.manage-note{font-size:10px;color:#64748b;white-space:normal;overflow-wrap:anywhere}.manage-note small{margin-top:3px}
.tx-type-chip{display:inline-flex;width:max-content;padding:4px 7px;border-radius:999px;font-style:normal;font-size:9px;font-weight:900}.tx-type-chip.deposit{background:#eef2ff;color:#4338ca}.tx-type-chip.withdrawal{background:#fff1f2;color:#be123c}
.duplicate-badge{display:inline-flex!important;width:max-content;margin-top:5px;padding:3px 6px;border-radius:999px;background:#fff7ed;color:#c2410c!important;font-weight:900!important}
.manage-edit-btn{background:#111827!important;color:#fff!important;padding:7px 9px;font-size:10px;border-radius:9px}
.edit-transaction-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edit-note-wide,.edit-transaction-warning,.edit-transaction-form>button{grid-column:1/-1}.edit-transaction-warning{padding:10px 12px;border:1px solid #e7eaf2;background:#f8fafc;border-radius:12px;font-size:11px;color:#64748b}
@media(hover:hover) and (pointer:fine){.manage-row:hover{background:#fafbff}}
@media(max-width:1180px){
  .manage-filters{grid-template-columns:1fr 1fr 1fr}.manage-filters label:nth-child(4){grid-column:1/3}.manage-filters button{grid-column:3}
  .manage-table-head{display:none}.manage-rows{max-height:none;border:0}.manage-row{grid-template-columns:28px minmax(0,1fr) auto;border:1px solid #e9ecf2;border-radius:13px;margin-bottom:8px;gap:8px}.manage-row>span,.manage-row>strong{grid-column:2}.manage-row>.manage-edit-btn{grid-column:3;grid-row:1/4}.manage-row>strong{grid-row:auto}.manage-row.duplicate{box-shadow:inset 3px 0 0 #f59e0b}
}
@media(max-width:700px){.manage-head{flex-direction:column}.manage-selected-summary{width:100%;text-align:left}.manage-filters{grid-template-columns:1fr}.manage-filters label:nth-child(4),.manage-filters button{grid-column:auto}.manage-actions{align-items:stretch;flex-direction:column}.manage-actions .danger-soft{width:100%;margin-left:0}.edit-transaction-form{grid-template-columns:1fr}.edit-note-wide,.edit-transaction-warning,.edit-transaction-form>button{grid-column:auto}}


/* v0.4.2 - dedicated Edit Transaksi menu */
.edit-panel-intro{margin-bottom:14px!important;background:linear-gradient(180deg,#ffffff,#fafbff)}
.edit-panel-intro h3{margin:4px 0 5px;font-size:20px}
.edit-panel-intro p{margin:0;color:#64748b}
#tab-edit .transaction-manage-card{margin-top:0!important}