*{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#1D9E75;--gl:#E1F5EE;--gm:#5DCAA5;--gd:#085041;
  --a:#BA7517;--al:#FAEEDA;
  --p:#534AB7;--pl:#EEEDFE;
  --r:#A32D2D;--rl:#FCEBEB;
  --tx:#2C2C2A;--tx2:#5F5E5A;--tx3:#888780;
  --bd:#D3D1C7;--bg:#fff;--card:#F1EFE8;
  --rad:10px;
}
@media(prefers-color-scheme:dark){:root{
  --g:#5DCAA5;--gl:#04342C;--gm:#1D9E75;
  --a:#EF9F27;--al:#412402;
  --p:#AFA9EC;--pl:#26215C;
  --r:#F09595;--rl:#501313;
  --tx:#D3D1C7;--tx2:#B4B2A9;--tx3:#888780;
  --bd:#444441;--bg:#2C2C2A;--card:#3d3d3a;
}}
body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh}

#activation{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;text-align:center;gap:12px}
#activation h1{font-size:20px;font-weight:500}
.act-badge{background:var(--gl);color:var(--g);font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px}
#activation input{display:block;width:100%;max-width:300px;padding:11px 14px;border:1.5px solid var(--bd);border-radius:var(--rad);background:var(--bg);color:var(--tx);font-size:15px;letter-spacing:2px;text-align:center}
#activation input:focus{outline:none;border-color:var(--g)}
.btn-full{width:100%;max-width:300px;padding:12px;border:none;border-radius:var(--rad);font-size:15px;font-weight:500;cursor:pointer}
.btn-act-primary{background:var(--g);color:#fff}
.btn-act-demo{background:var(--card);color:var(--tx);border:1.5px solid var(--bd)}
.btn-act-primary:hover,.btn-act-demo:hover{opacity:.88}
.act-divider{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;color:var(--tx3);font-size:12px}
.act-divider::before,.act-divider::after{content:'';flex:1;height:1px;background:var(--bd)}
.err{color:var(--r);font-size:12px;display:none}
.demo-note{font-size:11px;color:var(--tx3);max-width:300px;line-height:1.6;padding:10px 14px;background:var(--card);border-radius:8px;border-left:3px solid var(--a)}

#demo-banner{background:var(--al);color:var(--a);font-size:12px;font-weight:500;text-align:center;padding:7px;display:none;flex-shrink:0}

#app{display:none;min-height:100vh;flex-direction:column}
header{background:var(--g);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
header h1{font-size:15px;font-weight:500}
.nav-tabs{display:flex;border-bottom:1px solid var(--bd);background:var(--bg);padding:0 12px;gap:2px;position:sticky;top:49px;z-index:19;overflow-x:auto}
.nav-tab{padding:11px 12px;font-size:13px;font-weight:500;color:var(--tx2);border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap;flex-shrink:0}
.nav-tab.active{color:var(--g);border-bottom-color:var(--g)}
.screen{display:none;padding:14px}
.screen.active{display:block}

.card{background:var(--card);border-radius:var(--rad);padding:14px}
.btn{padding:9px 16px;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--g);color:#fff}
.btn-secondary{background:var(--card);color:var(--tx2);border:1px solid var(--bd)}
.btn-purple{background:var(--pl);color:var(--p)}
.btn-danger{background:var(--rl);color:var(--r)}
.btn:hover{opacity:.85}
.btn-sm{padding:6px 12px;font-size:12px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;color:var(--tx2);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1.5px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font-size:14px}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--g)}
.empty{text-align:center;padding:28px 16px;color:var(--tx3);font-size:13px}
.section-title{font-size:13px;font-weight:500;color:var(--tx2);margin-bottom:8px}

.santri-item{background:var(--card);border-radius:var(--rad);padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:opacity .15s}
.santri-item:hover{opacity:.85}
.avatar{width:42px;height:42px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;flex-shrink:0}
.progress-mini{height:5px;background:var(--bd);border-radius:3px;margin-top:6px;overflow:hidden}
.progress-mini-fill{height:100%;border-radius:3px;transition:width .4s}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-card{background:var(--card);border-radius:var(--rad);padding:12px 8px;text-align:center}
.stat-num{font-size:22px;font-weight:500;color:var(--g)}
.stat-lbl{font-size:11px;color:var(--tx3);margin-top:2px}
.progress-bar{background:var(--bd);border-radius:6px;height:9px;margin-bottom:14px;overflow:hidden}
.progress-fill{height:100%;background:var(--g);border-radius:6px;transition:width .4s}

.juz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.juz-btn{border:1.5px solid var(--bd);border-radius:8px;padding:7px 3px;text-align:center;cursor:pointer;background:var(--bg);color:var(--tx2);font-size:11px;transition:all .15s}
.juz-btn.hafal{background:var(--g);border-color:var(--g);color:#fff;font-weight:500}
.juz-btn.sebagian{background:var(--al);border-color:var(--a);color:var(--a)}
.juz-btn:hover{transform:scale(1.04)}
.juz-num{font-size:14px;font-weight:500;display:block}
.juz-pct{font-size:9px;margin-top:1px}

.juz-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.surah-item{background:var(--card);border-radius:var(--rad);padding:11px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:6px}
.surah-item:hover{opacity:.85}
.surah-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--bd);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.surah-check.hafal{background:var(--g);border-color:var(--g);color:#fff}
.surah-check.murajaah{background:var(--al);border-color:var(--a);color:var(--a)}

.setoran-card{background:var(--card);border-radius:var(--rad);padding:11px 13px;border-left:3px solid var(--g);margin-bottom:7px}
.setoran-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px;gap:8px}
.setoran-surah{font-size:13px;font-weight:500}
.setoran-date{font-size:11px;color:var(--tx3);white-space:nowrap;flex-shrink:0}
.setoran-note{font-size:12px;color:var(--tx2);margin-top:2px}
.nilai-badge{font-size:10px;background:var(--gl);color:var(--g);padding:2px 8px;border-radius:20px;display:inline-block;margin-top:4px}

.rekap-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}
.rekap-row:last-child{border-bottom:none}
.rekap-rank{font-size:15px;font-weight:500;color:var(--tx3);width:22px;text-align:center;flex-shrink:0}
.rekap-nama{flex:1;font-size:13px;font-weight:500;min-width:0}
.rekap-sub{font-size:10px;color:var(--tx3)}
.rekap-bar{flex:2;height:6px;background:var(--bd);border-radius:3px;overflow:hidden}
.rekap-fill{height:100%;background:var(--g);border-radius:3px}
.rekap-pct{font-size:12px;color:var(--tx2);width:32px;text-align:right;flex-shrink:0}



.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--bg);border-radius:14px;padding:20px;width:100%;max-width:360px;max-height:90vh;overflow-y:auto}
.modal h2{font-size:16px;font-weight:500;margin-bottom:14px}
.modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}
.back-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#fff;padding:0 4px;margin-right:4px}

@media print{body>*:not(#print-area){display:none!important}#print-area{display:block!important;position:static!important}@page{margin:15mm}}
#print-area{display:none;position:fixed;inset:0;background:#fff;z-index:200;overflow-y:auto;padding:24px}
.lap-header{text-align:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #1D9E75}
.lap-logo{font-size:32px;margin-bottom:6px}
.lap-title{font-size:20px;font-weight:600;color:#1D9E75}
.lap-sub{font-size:13px;color:#5F5E5A;margin-top:4px}
.lap-date{font-size:12px;color:#888780;margin-top:2px}
.lap-section{margin-bottom:24px}
.lap-section h2{font-size:15px;font-weight:600;color:#1D9E75;border-left:4px solid #1D9E75;padding-left:10px;margin-bottom:14px}
.lap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.lap-stat{background:#E1F5EE;border-radius:10px;padding:14px;text-align:center}
.lap-stat-num{font-size:28px;font-weight:600;color:#1D9E75}
.lap-stat-lbl{font-size:11px;color:#5F5E5A;margin-top:3px}
.lap-table{width:100%;border-collapse:collapse;font-size:13px}
.lap-table th{background:#1D9E75;color:#fff;padding:8px 10px;text-align:left;font-weight:500}
.lap-table th:last-child,.lap-table td:last-child{text-align:right}
.lap-table td{padding:8px 10px;border-bottom:1px solid #E1F5EE}
.lap-table tr:nth-child(even) td{background:#F8FDFA}
.lap-rank{font-weight:600;color:#888780}
.lap-bar-wrap{height:7px;background:#E1F5EE;border-radius:4px;overflow:hidden;display:inline-block;width:60px;vertical-align:middle;margin:0 8px}
.lap-bar-fill{height:100%;background:#1D9E75;border-radius:4px}
.lap-individu{margin-top:32px}
.lap-ind-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:14px;background:#E1F5EE;border-radius:10px}
.lap-ind-avatar{width:50px;height:50px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0}
.lap-ind-name{font-size:17px;font-weight:600;color:#085041}
.lap-ind-meta{font-size:12px;color:#5F5E5A;margin-top:2px}
.lap-ind-pct{margin-left:auto;font-size:28px;font-weight:600;color:#1D9E75}
.lap-juz-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:16px}
.lap-juz-cell{border:1.5px solid #D3D1C7;border-radius:7px;padding:6px 3px;text-align:center;font-size:11px}
.lap-juz-cell.hafal{background:#1D9E75;border-color:#1D9E75;color:#fff;font-weight:500}
.lap-juz-cell.sebagian{background:#FAEEDA;border-color:#BA7517;color:#BA7517}
.lap-juz-num{font-size:13px;font-weight:500;display:block}
.lap-close-btn{position:fixed;top:16px;right:16px;background:#1D9E75;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;z-index:201}
@media print{.lap-close-btn{display:none}}