:root{--kh-accent:var(--n-primary);--kh-radius:16px}.kh-wrap{background:var(--n-bg);min-height:100vh;padding:1.4rem 1rem 2rem}@media (min-width:768px){.kh-wrap{padding:1.6rem 1.4rem 2.2rem}}.kh-container{max-width:1160px;margin:0 auto}.kh-card{background:var(--n-card);border:1px solid var(--n-border);border-radius:var(--kh-radius);box-shadow:var(--n-shadow)}.kh-header{background:var(--n-primary);box-shadow:var(--n-shadow);color:#fff;border-radius:20px;justify-content:space-between;align-items:center;margin-bottom:20px;padding:32px 36px;transition:background .3s;display:flex}.dark .kh-header{background:#0f172a;border:1px solid #ffffff1a}.kh-title{letter-spacing:-.01em;color:#fff;margin:0;font-size:1.45rem;font-weight:700}.kh-sub{color:#ffffffd9;margin-top:4px;font-size:.875rem}.kh-toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.btn-kh-navy{color:#fff;cursor:pointer;background:#0038a8;border:none;border-radius:999px;padding:.46rem 1.1rem;font-size:.85rem;font-weight:600;transition:transform .12s,box-shadow .12s;box-shadow:0 10px 22px #0f172aa6}.btn-kh-navy:hover{transform:translateY(-1px);box-shadow:0 14px 30px #0f172abf}.btn-kh-soft{color:#111827;cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:500;transition:all .15s}.btn-kh-soft:hover{border-color:var(--kh-accent);background:#fff;box-shadow:0 6px 16px #0f172a40}.btn-kh-excel{color:#fff;cursor:pointer;background:#1d6f42;border:none;border-radius:999px;align-items:center;gap:.5rem;padding:.46rem 1.1rem;font-size:.85rem;font-weight:600;transition:transform .12s,box-shadow .12s,background .15s;display:inline-flex;box-shadow:0 10px 22px #1d6f4259}.btn-kh-excel:hover{background:#155230;transform:translateY(-1px);box-shadow:0 14px 30px #1d6f4273}.kh-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem;display:grid}.kh-kpi-actions{flex-direction:column;justify-content:center;gap:.6rem;padding:4px;display:flex}.kh-kpi-actions .btn-kh-excel,.kh-kpi-actions .btn-kh-navy{width:100%;box-shadow:none;justify-content:center;padding:.55rem 1rem}@media (max-width:992px){.kh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:576px){.kh-kpis{grid-template-columns:1fr;gap:.6rem}}.kh-filters-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;display:grid}@media (max-width:992px){.kh-filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:576px){.kh-filters-grid{grid-template-columns:1fr}}.kh-kpi{background:var(--n-card);border:1px solid var(--n-border);box-shadow:var(--n-shadow);border-radius:14px;align-items:center;gap:12px;padding:12px 16px;display:flex;position:relative;overflow:hidden}.kh-kpi:before{content:"";opacity:.04;pointer-events:none;background:radial-gradient(circle at 0 0,#3b82f6 0,#0000 55%);position:absolute;inset:-40%}.kh-kpi-icon{background:var(--n-soft);width:36px;height:36px;color:var(--n-primary);border-radius:10px;flex:none;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.kh-kpi-label{color:var(--n-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.1rem;font-size:.72rem;font-weight:700}.kh-kpi-value{color:var(--n-ink);font-size:1.25rem;font-weight:800;line-height:1.1}.pill{border:1px solid #0000;border-radius:999px;align-items:center;gap:.25rem;padding:.2rem .7rem;font-size:.82rem;font-weight:600;display:inline-flex}.pill-izin{background:var(--pill-izin-bg);color:var(--pill-izin-tx);border-color:var(--pill-izin-bd)}.pill-sakit{background:var(--pill-sakit-bg);color:var(--pill-sakit-tx);border-color:var(--pill-sakit-bd)}.pill-madrasah{background:var(--pill-madrasah-bg);color:var(--pill-madrasah-tx);border-color:var(--pill-madrasah-bd)}.pill-personal{background:var(--pill-personal-bg);border-color:var(--pill-personal-bd);color:var(--pill-personal-tx)}.pill-ringan{background:var(--pill-ringan-bg);border-color:var(--pill-ringan-bd);color:var(--pill-ringan-tx)}.pill-sedang{background:var(--pill-sedang-bg);border-color:var(--pill-sedang-bd);color:var(--pill-sedang-tx)}.pill-berat{background:var(--pill-berat-bg);border-color:var(--pill-berat-bd);color:var(--pill-berat-tx)}.pill-kontrol{background:var(--pill-kontrol-bg);border-color:var(--pill-kontrol-bd);color:var(--pill-kontrol-tx)}.kh-table-wrap{background:var(--n-card);border-radius:var(--kh-radius);box-shadow:var(--n-shadow);border:1px solid var(--n-border);overflow:hidden}.kh-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.875rem}.kh-table thead th{color:var(--n-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--tb-th-bg);z-index:10;text-align:left;border-bottom:2px solid var(--tb-border);padding:14px 16px;font-size:.75rem;font-weight:700;position:sticky;top:0}.kh-table tbody td{border-bottom:1px solid var(--tb-border);vertical-align:middle;color:var(--n-ink);height:var(--tb-row-h);background:0 0;padding:12px 16px;font-weight:500}.kh-table tbody tr:hover td{background:var(--tb-hover)}.kh-table .col-no{text-align:center;width:50px}.kh-table .col-nisn{text-align:center;width:120px}.dark .kh-table th,.dark .kh-table td{border-color:#ffffff1a}.btn-icon-soft,.btn-icon-delete{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;transition:all .2s;display:flex}.btn-icon-soft{color:#334155;background:#f1f5f9}.btn-icon-soft:hover{color:#0f172a;background:#e2e8f0}.btn-icon-delete{color:#b91c1c;background:#fee2e2}.btn-icon-delete:hover{color:#991b1b;background:#fecaca}.kh-footer{border-top:1px solid var(--n-border);background:var(--n-soft);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;padding:.8rem 1rem;display:flex}@media (max-width:992px){.kh-wrap{padding:1.1rem .7rem 1.5rem}.kh-table thead{display:none}.kh-table,.kh-table tbody,.kh-table tr,.kh-table td{width:100%;display:block}.kh-table tr{border:1px solid #e5e7eb;border-radius:12px;margin:.55rem 0;overflow:hidden}.kh-table td{text-align:right;border:0;justify-content:space-between;align-items:center;gap:.65rem;padding:.55rem .8rem;display:flex}.kh-table td+td{border-top:1px solid #f3f4f6}.kh-table td:before{content:attr(data-label);color:#6b7280;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:0 0 30%;font-size:.7rem;font-weight:600}.kh-table td[data-label=Kelas]{color:var(--kh-navy-800);font-weight:700}.kh-table td:last-child{background:#f8fafc;border-top:1px solid #e2e8f0;justify-content:flex-end;padding:.7rem .9rem}.kh-table td:last-child:before{display:none}}.kh-modal{color:var(--n-ink);font-family:inherit}.kh-modal__header{background:var(--n-primary);border-bottom:1px solid var(--n-border);color:#fff;padding:1.25rem 1.5rem}.dark .kh-modal__header{background:#0f172a}@media (min-width:640px){.kh-modal__header{padding:1.15rem 1.45rem}}.kh-modal__title{color:#fff;margin:0;font-size:1.25rem;font-weight:700}.kh-modal__sub{color:#fffc;margin:4px 0 0;font-size:.85rem}.kh-modal__x{color:#fff;background:#ffffff1a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.kh-modal__x i{font-size:14px}.kh-modal__x:hover{background:#fff3}.kh-modal__body{background:var(--n-card);-webkit-overflow-scrolling:touch;padding:1.5rem;overflow:auto}@media (min-width:640px){.kh-modal__body{padding:1.25rem 1.45rem 1.3rem}}.kh-badge{border:1px solid #e2e8f0e6;border-radius:16px;align-items:center;gap:.75rem;margin-bottom:1.05rem;padding:.78rem .9rem;display:flex}.kh-badge__icon{border-radius:14px;flex:none;justify-content:center;align-items:center;width:38px;height:38px;font-size:.95rem;display:flex}.kh-badge__label{letter-spacing:.08em;color:#64748be6;font-size:.68rem;font-weight:650}.kh-badge__value{margin-top:.12rem;font-size:1rem;font-weight:650;line-height:1.1}.kh-badge--izin{background:#e0f2fe73;border-color:#bae6fdd9}.kh-badge--izin .kh-badge__icon{color:#0b1b3a;background:#bae6fde6}.kh-badge--sakit{background:#fee2e273;border-color:#fecacae6}.kh-badge--sakit .kh-badge__icon{color:#7f1d1d;background:#fecacae6}.kh-form{flex-direction:column;gap:1.05rem;display:flex}.kh-field{flex-direction:column;gap:.45rem;display:flex}.kh-label{color:var(--n-muted);margin-bottom:6px;font-size:.85rem;font-weight:600}.kh-label--tiny{text-transform:uppercase;letter-spacing:.08em;color:#64748bf2;font-size:.68rem;font-weight:600}.kh-control{position:relative}.kh-icon-right{pointer-events:none;color:#64748bbf;font-size:.78rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.kh-input{border:1.5px solid var(--n-border);background:var(--n-bg);width:100%;color:var(--n-ink);border-radius:12px;outline:none;padding:.75rem 1rem;font-weight:500;transition:all .2s}.dark .kh-input{background:#ffffff0a}.kh-input:focus{border-color:var(--n-primary);background:var(--n-card);box-shadow:0 0 0 4px #3aa6ff1a}.kh-textarea{resize:none;min-height:90px;line-height:1.35}.kh-control select.kh-input{padding-right:2.2rem}.kh-grid-2{grid-template-columns:1fr;gap:.85rem;display:grid}@media (min-width:640px){.kh-grid-2{grid-template-columns:1fr 1fr;gap:1rem}}.kh-hint{color:#64748beb;margin-top:.15rem;font-size:.78rem;line-height:1.35}.kh-seg{background:#f8fafcd9;border:1px solid #e2e8f0e6;border-radius:16px;gap:.4rem;padding:.32rem;display:flex}.kh-seg__btn{color:#64748bf2;cursor:pointer;background:0 0;border:none;border-radius:14px;flex:1;padding:.75rem .8rem;font-size:.85rem;font-weight:600;transition:all .15s}.kh-seg__btn:hover{color:#0f172ae6}.kh-seg__btn.is-active{background:var(--n-card);color:var(--n-primary);outline:1px solid var(--n-border);box-shadow:0 6px 14px #0f172a1a}.dark .kh-seg{background:#020617;border-color:#ffffff1a}.dark .kh-seg__btn.is-active{background:var(--n-soft);color:#fff}.kh-modal__footer{border-top:1px solid var(--n-border);background:var(--n-soft);justify-content:flex-end;gap:12px;padding:1rem 1.5rem;display:flex}@media (min-width:640px){.kh-modal__footer{flex-direction:row;padding:.9rem 1.45rem 1rem}}.kh-btn{cursor:pointer;border:1px solid #0000;border-radius:14px;justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1rem;font-size:.85rem;font-weight:600;transition:all .15s;display:inline-flex}.kh-btn:disabled{opacity:.65;cursor:not-allowed}.kh-btn--ghost:hover{background:#f1f5f9f2}.kh-btn--primary{background:var(--n-primary);color:#fff;border:none}.kh-btn--primary:hover{background:#00287a}.kh-spin{align-items:center;gap:2px;height:14px;display:inline-flex}.kh-spin:before,.kh-spin:after,.kh-spin-inner{content:"";background:currentColor;border-radius:2px;width:2px;height:10px;animation:1s ease-in-out infinite khWave}.kh-spin:before{animation-delay:-.2s}.kh-spin-inner{animation-delay:-.1s}@keyframes khWave{0%,40%,to{opacity:.6;transform:scaleY(.6)}20%{opacity:1;transform:scaleY(1.3)}}.kh-control select.kh-input{appearance:none;background-image:none}.kh-control select.kh-input::-ms-expand{display:none}.kh-modal button,.kh-seg__btn,.kh-btn{transition:background-color .18s,color .18s,box-shadow .18s,transform .12s,outline-color .18s}.kh-seg__btn:hover,.kh-btn:hover{transform:translateY(-1px)}.kh-seg__btn:active,.kh-btn:active{transform:scale(.97)}.kh-seg__btn{color:#64748bf2;background:0 0}.kh-seg__btn:hover{color:#0f172af2;background:#3b82f60f}.kh-seg__btn.is-active{color:#0b1b3a;background:linear-gradient(#3b82f61f,#3b82f614);box-shadow:0 6px 14px #0f172a1f,inset 0 0 0 1px #3b82f640}.kh-btn--primary{color:#fff;background:linear-gradient(90deg,#0b1b3a,#163a8a);box-shadow:0 10px 22px #0b1b3a40}.kh-btn--primary:hover{background:linear-gradient(90deg,#102347,#1e40af);box-shadow:0 14px 30px #0b1b3a52}.kh-btn--primary:active{box-shadow:0 6px 14px #0b1b3a38}.kh-btn--ghost{color:#334155f2;background:#fff;border-color:#cbd5e1f2}.kh-btn--ghost:hover{color:#0b1b3a;background:#3b82f60f;border-color:#3b82f659}.kh-radio-card{transition:border-color .18s,background-color .18s,box-shadow .18s,transform .12s}.kh-radio-card:hover{background:#3b82f60d;border-color:#3b82f659}.kh-radio-card.is-active{background:#3b82f61a;border-color:#3b82f68c;box-shadow:0 8px 18px #3b82f62e}.kh-modal button:focus-visible{outline-offset:2px;outline:3px solid #3b82f659}.kh-modal button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none!important;transform:none!important}.kh-upload{width:100%}.kh-upload__box{border:2px dashed var(--n-border);cursor:pointer;background:var(--n-soft);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:84px;padding:14px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.kh-upload__box:hover{border-color:var(--n-primary);background:#3b82f60d}.kh-upload__box.is-uploading{cursor:wait;border-color:var(--n-primary);background:#3b82f60d}.kh-upload__box.is-success{background:#10b9810d;border-style:solid;border-color:#10b981}.kh-upload__placeholder{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.kh-upload__placeholder i{color:var(--n-primary);font-size:1.85rem}.kh-upload__text-main{color:#0b1b3a;font-size:.85rem;font-weight:650}.kh-upload__text-sub{color:var(--n-muted);font-size:.75rem}.kh-upload__progress{flex-direction:column;gap:8px;width:100%;display:flex}.kh-progress-header{color:var(--n-primary);align-items:center;gap:8px;display:flex}.kh-progress-header i{font-size:1.1rem}.kh-progress-name{color:#0b1b3a;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.8rem;font-weight:650;overflow:hidden}.kh-progress-bar-bg{background:#3b82f626;border-radius:99px;width:100%;height:6px;overflow:hidden}.kh-progress-bar-fill{background:linear-gradient(90deg,#3b82f6,#2563eb);border-radius:99px;height:100%;transition:width .3s}.kh-progress-percent{text-align:center;color:var(--n-primary);font-size:1.15rem;font-weight:750}.kh-upload__success{align-items:center;gap:12px;width:100%;display:flex}.kh-upload__success i{color:#10b981;flex-shrink:0;font-size:1.65rem}.kh-upload__success-info{flex-direction:column;flex:1;gap:1px;display:flex}.kh-upload__success-label{color:#059669;font-size:.85rem;font-weight:700}.kh-upload__success-name{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.kh-upload__remove-btn{color:#ef4444;cursor:pointer;background:#fee2e2;border:none;border-radius:7px;align-items:center;padding:6px 9px;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.kh-upload__remove-btn:hover{background:#fecaca;transform:scale(1.05)}.kh-modal{max-width:550px!important}@media (min-width:640px){.kh-modal__header{padding:1rem 1.45rem}.kh-modal__body{padding:1.15rem 1.45rem}.kh-modal__footer{padding:.95rem 1.45rem}}