:root{--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--success-50:#f0fdf4;--success-100:#dcfce7;--success-500:#22c55e;--success-600:#16a34a;--success-700:#15803d;--warning-50:#fffbeb;--warning-100:#fef3c7;--warning-400:#fbbf24;--warning-500:#f59e0b;--warning-600:#d97706;--danger-50:#fef2f2;--danger-100:#fee2e2;--danger-400:#f87171;--danger-500:#ef4444;--danger-600:#dc2626;--danger-700:#b91c1c;--info-50:#f0f9ff;--info-500:#0ea5e9;--citra-diri:#3b82f6;--citra-smk:#ef4444;--suasana-kelas:#f59e0b;--norma-susila:#ec4899;--sidebar-width:240px;--header-height:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000d;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.35s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--gray-800);background:var(--gray-50);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}a{color:var(--primary-600);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary-700)}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit;font-size:inherit;transition:all var(--transition-fast);border:none;outline:none}input,select,textarea{font-family:inherit;font-size:inherit;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);color:var(--gray-800);background:#fff;outline:none;width:100%;padding:10px 14px}input:focus,select:focus,textarea:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px #3b82f626}input::placeholder,textarea::placeholder{color:var(--gray-400)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray-100);background:#fff;padding:24px}.badge{border-radius:var(--radius-full);letter-spacing:.3px;align-items:center;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.badge-blue{background:var(--primary-100);color:var(--primary-700)}.badge-green{background:var(--success-100);color:var(--success-700)}.badge-yellow{background:var(--warning-100);color:var(--warning-600)}.badge-red{background:var(--danger-100);color:var(--danger-700)}.badge-gray{background:var(--gray-100);color:var(--gray-600)}.badge-pink{color:#be185d;background:#fce7f3}.btn{border-radius:var(--radius-md);transition:all var(--transition-fast);align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:var(--primary-600);color:#fff}.btn-primary:hover{background:var(--primary-700);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-outline{color:var(--gray-700);border:1.5px solid var(--gray-200);background:#fff}.btn-outline:hover{border-color:var(--primary-400);color:var(--primary-600);background:var(--primary-50)}.btn-danger{background:var(--danger-600);color:#fff}.btn-danger:hover{background:var(--danger-700)}.btn-success{background:var(--success-600);color:#fff}.btn-success:hover{background:var(--success-700)}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 28px;font-size:16px}.btn-block{justify-content:center;width:100%}.btn-icon{border-radius:var(--radius-md);background:var(--gray-100);width:36px;height:36px;color:var(--gray-600);justify-content:center;padding:0}.btn-icon:hover{background:var(--gray-200)}.stats-card{border-radius:var(--radius-lg);border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast);background:#fff;align-items:center;gap:16px;padding:20px 24px;display:flex}.stats-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.stats-card .stats-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;display:flex}.stats-card .stats-value{font-size:32px;font-weight:800;line-height:1.1}.stats-card .stats-label{color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.stats-card .stats-trend{font-size:12px;font-weight:500}.stats-card .stats-trend.up{color:var(--success-600)}.stats-card .stats-trend.down{color:var(--danger-600)}.data-table{border-collapse:separate;border-spacing:0;width:100%}.data-table thead th{background:var(--gray-50);text-transform:uppercase;letter-spacing:.8px;color:var(--gray-500);text-align:left;border-bottom:2px solid var(--gray-200);padding:12px 16px;font-size:11px;font-weight:700}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--primary-50)}.data-table tbody tr.active{background:var(--primary-50);border-left:3px solid var(--primary-600)}.data-table tbody td{border-bottom:1px solid var(--gray-100);vertical-align:middle;padding:14px 16px;font-size:14px}.pagination{color:var(--gray-500);justify-content:space-between;align-items:center;padding:16px 0;font-size:13px;display:flex}.pagination-buttons{gap:4px;display:flex}.pagination-buttons button{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--gray-600);border:1px solid var(--gray-200);background:#fff;justify-content:center;align-items:center;font-size:13px;font-weight:500;display:flex}.pagination-buttons button.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600)}.pagination-buttons button:hover:not(.active){background:var(--gray-50);border-color:var(--gray-300)}.avatar{border-radius:var(--radius-full);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:14px;font-weight:700;display:flex}.avatar-sm{width:32px;height:32px;font-size:12px}.avatar-lg{width:56px;height:56px;font-size:18px}.avatar-xl{width:80px;height:80px;font-size:28px}.avatar img{object-fit:cover;border-radius:var(--radius-full);width:100%;height:100%}.search-input{position:relative}.search-input svg{color:var(--gray-400);width:18px;height:18px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-input input{padding-left:42px}.tabs{border-bottom:2px solid var(--gray-200);gap:0;margin-bottom:24px;display:flex}.tab-btn{color:var(--gray-500);transition:all var(--transition-fast);background:0 0;border-bottom:2px solid #0000;margin-bottom:-2px;padding:12px 20px;font-size:14px;font-weight:500}.tab-btn:hover{color:var(--primary-600)}.tab-btn.active{color:var(--primary-600);border-bottom-color:var(--primary-600);font-weight:600}.filter-chips{flex-wrap:wrap;gap:8px;display:flex}.filter-chip{border-radius:var(--radius-full);background:var(--gray-100);color:var(--gray-600);transition:all var(--transition-fast);border:1.5px solid #0000;padding:6px 16px;font-size:13px;font-weight:500}.filter-chip:hover{background:var(--primary-50);color:var(--primary-600)}.filter-chip.active{background:var(--primary-600);color:#fff}.progress-bar{background:var(--gray-200);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);height:100%;transition:width var(--transition-slow)}#app{min-height:100vh}.page-fade-in{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}@media (width<=768px){.hide-mobile{display:none!important}.container{padding:0 12px}}.admin-layout{align-items:flex-start;width:100%;min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--gray-200);z-index:100;background:#fff;flex-direction:column;flex-shrink:0;height:100vh;transition:width .25s,margin-left .25s,opacity .25s;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--gray-100);padding:20px}.sidebar-logo{align-items:center;gap:12px;text-decoration:none;display:flex}.sidebar-logo-img{object-fit:contain;width:44px;height:44px}.sidebar-brand{color:var(--primary-700);font-size:20px;font-weight:800;line-height:1.1}.sidebar-sub{color:var(--gray-500);font-size:11px;font-weight:500}.sidebar-cta{padding:16px 20px}.sidebar-cta-btn{border-radius:var(--radius-md)!important;padding:10px 16px!important;font-size:13px!important}.sidebar-nav{flex:1;padding:8px 12px;overflow-y:auto}.sidebar-section-title{color:var(--gray-400);text-transform:uppercase;letter-spacing:1.2px;padding:16px 12px 6px;font-size:10px;font-weight:700}.sidebar-link{border-radius:var(--radius-md);color:var(--gray-600);transition:all var(--transition-fast);text-align:left;background:0 0;align-items:center;gap:10px;width:100%;margin-bottom:2px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;display:flex}.sidebar-link:hover{background:var(--gray-50);color:var(--gray-800)}.sidebar-link.active{background:var(--primary-600);color:#fff}.sidebar-link.active svg{color:#fff}.sidebar-footer{border-top:1px solid var(--gray-100);flex-shrink:0;padding:12px}.sidebar-logout{color:var(--danger-600)}.sidebar-logout:hover{background:var(--danger-50)}.admin-main{flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.admin-layout.sidebar-collapsed .sidebar{opacity:0;pointer-events:none;border:none;width:0;min-width:0;padding:0;overflow:hidden}.admin-header{height:var(--header-height);border-bottom:1px solid var(--gray-200);z-index:50;background:#fff;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.admin-header-title{color:var(--primary-700);font-size:16px;font-weight:700}.admin-header-right{align-items:center;gap:16px;display:flex}.admin-header-badge{background:var(--gray-100);color:var(--gray-600);border-radius:var(--radius-full);padding:5px 14px;font-size:12px;font-weight:600}.admin-notif{position:relative}.notif-dot{background:var(--danger-500);border:2px solid #fff;border-radius:50%;width:8px;height:8px;position:absolute;top:6px;right:6px}.admin-user{cursor:pointer;align-items:center;gap:10px;display:flex}.admin-user-name{color:var(--gray-800);font-size:13px;font-weight:600}.admin-user-role{color:var(--gray-500);font-size:11px}.admin-content{background:var(--gray-50);box-sizing:border-box;flex:1;min-width:0;padding:24px;overflow-x:hidden}.landing-header{box-shadow:var(--shadow-sm);z-index:50;background:#fff;padding:12px 0;position:sticky;top:0}.landing-header-inner{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px;display:flex}.landing-logo{align-items:center;gap:10px;display:flex}.landing-logo img{height:36px}.landing-logo-text{color:var(--primary-700);font-size:16px;font-weight:700}.landing-logo-sub{color:var(--gray-500);font-size:10px}.landing-hero{background:linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 50%, var(--primary-500) 100%);color:#fff;text-align:center;padding:60px 20px 80px;position:relative;overflow:hidden}.landing-hero:before{content:"";background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-50%;right:-20%}.landing-hero h1{letter-spacing:-.5px;margin-bottom:12px;font-size:36px;font-weight:900;position:relative}.landing-hero p{opacity:.9;font-size:16px;position:relative}.landing-search-card{border-radius:var(--radius-xl);max-width:480px;box-shadow:var(--shadow-xl);z-index:10;background:#fff;margin:-40px auto 40px;padding:32px;position:relative}.landing-search-card h3{align-items:center;gap:8px;margin-bottom:16px;font-size:16px;display:flex}.landing-search-card input{margin-bottom:8px}.landing-search-card .help-text{color:var(--gray-400);margin-bottom:16px;font-size:12px}.landing-search-card .btn{justify-content:center;width:100%;padding:12px;font-size:15px}.landing-privacy{color:var(--gray-500);align-items:center;gap:6px;margin-top:12px;font-size:12px;display:flex}.landing-stats{grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto 40px;padding:0 20px;display:grid}.landing-stats .stats-card{text-align:center;flex-direction:column}.landing-section{max-width:1200px;margin:0 auto 48px;padding:0 20px}.landing-section h2{text-align:center;color:var(--gray-800);margin-bottom:32px;font-size:24px;font-weight:800}.landing-two-col{grid-template-columns:1fr 1fr;gap:24px;display:grid}.distribution-bar{margin-bottom:12px}.distribution-bar-label{justify-content:space-between;margin-bottom:4px;font-size:13px;display:flex}.distribution-bar-track{background:var(--gray-100);border-radius:var(--radius-full);height:24px;overflow:hidden}.distribution-bar-fill{border-radius:var(--radius-full);height:100%;transition:width 1s}.monitoring-mini-table{width:100%}.monitoring-mini-table th{color:var(--gray-500);text-align:left;border-bottom:1px solid var(--gray-200);padding:8px 12px;font-size:12px;font-weight:600}.monitoring-mini-table td{border-bottom:1px solid var(--gray-100);padding:10px 12px;font-size:14px}.info-banner{background:var(--info-50);border-left:4px solid var(--info-500);border-radius:0 var(--radius-md) var(--radius-md) 0;margin-top:16px;padding:16px 20px}.info-banner p{color:var(--gray-700);font-size:13px}.how-to-section{text-align:center;grid-template-columns:repeat(3,1fr);gap:32px;display:grid}.how-to-step{padding:24px}.how-to-icon{border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:24px;display:flex}.how-to-step h4{margin-bottom:8px;font-size:16px}.how-to-step p{color:var(--gray-500);font-size:13px}.sanction-cards{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.sanction-card{border-radius:var(--radius-lg);text-align:center;border:2px solid var(--gray-200);transition:transform var(--transition-fast), box-shadow var(--transition-fast);padding:32px 24px}.sanction-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.sanction-card .sanction-icon{margin-bottom:12px;font-size:32px}.sanction-card h4{color:var(--gray-600);margin-bottom:8px;font-size:14px}.sanction-card .poin{margin-bottom:12px;font-size:36px;font-weight:900}.sanction-card p{color:var(--gray-500);font-size:13px;line-height:1.5}.sanction-card.sp3{border-color:var(--danger-400);background:var(--danger-50)}.landing-footer{background:var(--gray-800);color:#fff;padding:48px 20px 24px}.landing-footer-grid{grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 32px;display:grid}.landing-footer h3{margin-bottom:12px;font-size:18px;font-weight:700}.landing-footer h4{color:var(--gray-300);margin-bottom:12px;font-size:14px;font-weight:600}.landing-footer p,.landing-footer a{color:var(--gray-400);font-size:13px;line-height:1.8}.landing-footer a:hover{color:#fff}.landing-footer-bottom{border-top:1px solid var(--gray-700);max-width:1200px;color:var(--gray-500);margin:0 auto;padding-top:24px;font-size:12px}.landing-timestamp{text-align:center;color:var(--gray-400);margin-top:-20px;margin-bottom:30px;font-size:12px}.login-page{background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);text-align:center;background:#fff;width:100%;max-width:440px;padding:40px 36px}.login-logo{object-fit:contain;width:68px;height:68px;margin:0 auto 16px;display:block}.login-brand{color:var(--primary-700);margin-bottom:4px;font-size:28px;font-weight:800}.login-subtitle{color:var(--gray-500);margin-bottom:4px;font-size:13px}.login-school{color:var(--gray-600);margin-bottom:24px;font-size:14px;font-weight:600}.login-welcome{color:var(--gray-800);margin-bottom:4px;font-size:22px;font-weight:700}.login-desc{color:var(--gray-500);margin-bottom:28px;font-size:14px}.login-field{text-align:left;margin-bottom:16px}.login-field label{color:var(--gray-700);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.login-field .input-wrapper{position:relative}.login-field .input-wrapper svg{color:var(--gray-400);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.login-field .input-wrapper input{padding-left:42px}.login-field .toggle-pw{cursor:pointer;color:var(--gray-400);background:0 0;border:none;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.login-options{justify-content:space-between;align-items:center;margin-bottom:24px;font-size:13px;display:flex}.login-options label{color:var(--gray-600);cursor:pointer;align-items:center;gap:6px;display:flex}.login-options a{color:var(--primary-600);font-weight:600}.login-divider{border-top:1px solid var(--gray-200);margin:24px 0}.login-alt{color:var(--gray-500);font-size:14px}.login-alt a{color:var(--primary-600);align-items:center;gap:4px;margin-top:8px;font-weight:600;display:inline-flex}.login-error{background:var(--danger-50);color:var(--danger-600);border-radius:var(--radius-md);margin-bottom:16px;padding:10px 16px;font-size:13px;display:none}.login-footer{color:var(--gray-500);margin-top:32px;font-size:12px}.login-footer a{color:var(--gray-500);margin:0 12px}.login-footer a:hover{color:var(--primary-600)}.dash-actions{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.dash-stats{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.dash-stats .stats-card{border-left:4px solid #0000}.laporan-charts,.dash-two-col{grid-template-columns:1.2fr 1fr;gap:24px;margin-bottom:24px;display:grid}.dash-top-students .rank-item{border-bottom:1px solid var(--gray-50);align-items:center;gap:12px;padding:12px 0;display:flex}.dash-top-students .rank-num{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex}.dash-top-students .rank-info{flex:1;min-width:0}.dash-top-students .rank-name{font-size:14px;font-weight:600}.dash-top-students .rank-class{color:var(--gray-500);font-size:12px}.dash-top-students .rank-bar{flex:1;min-width:80px}.dash-top-students .rank-poin{white-space:nowrap;font-size:14px;font-weight:700}.insight-box{background:var(--primary-50);border-left:3px solid var(--primary-500);border-radius:0 var(--radius-md) var(--radius-md) 0;margin-top:16px;padding:14px;font-size:13px}.chart-container{height:200px;position:relative}.mk-grid{box-sizing:border-box;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;display:grid}.mk-card{box-sizing:border-box;min-width:0;overflow:hidden}@media (width<=900px){.dash-stats{grid-template-columns:repeat(2,1fr)}.laporan-charts,.dash-two-col{grid-template-columns:1fr}.mk-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=620px){.dash-stats{grid-template-columns:1fr}.mk-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=420px){.mk-grid{grid-template-columns:1fr}}.input-pel-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.student-search-panel .search-results{max-height:400px;margin-top:16px;overflow-y:auto}.student-list-item{border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--gray-50);justify-content:space-between;align-items:center;padding:12px;display:flex}.student-list-item:hover{background:var(--primary-50)}.student-list-item.selected{background:var(--primary-50);border-left:3px solid var(--primary-600)}.student-list-item .sl-info{flex:1}.student-list-item .sl-name{font-size:14px;font-weight:600}.student-list-item .sl-class{color:var(--gray-500);font-size:12px}.student-detail-panel .sd-profile{align-items:center;gap:16px;margin-bottom:20px;display:flex}.student-detail-panel .sd-avatar{border-radius:var(--radius-lg);color:#fff;justify-content:center;align-items:center;width:80px;height:80px;font-size:28px;font-weight:700;display:flex}.student-detail-panel .sd-name{font-size:18px;font-weight:700}.student-detail-panel .sd-meta{color:var(--gray-500);font-size:13px}.student-detail-panel .sd-poin-box{text-align:center;border:2px solid var(--gray-200);border-radius:var(--radius-md);padding:12px}.student-detail-panel .sd-poin-value{font-size:32px;font-weight:900}.student-detail-panel .sd-poin-label{color:var(--gray-500);text-transform:uppercase;font-size:11px;font-weight:600}.progress-info{justify-content:space-between;margin-top:8px;font-size:12px;display:flex}.form-section{margin-top:24px}.form-section h3{margin-bottom:16px;font-size:16px;font-weight:700}.form-group{margin-bottom:16px}.form-group label{color:var(--gray-700);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.upload-zone{border:2px dashed var(--gray-300);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--transition-fast);padding:40px}.upload-zone:hover{border-color:var(--primary-400);background:var(--primary-50)}.upload-zone p{color:var(--gray-500);font-size:14px}.upload-zone small{color:var(--gray-400);font-size:12px}.daftar-siswa-layout{grid-template-columns:1fr 320px;gap:24px;display:grid}.ds-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.ds-mini-stats{gap:12px;display:flex}.ds-mini-stat{border-radius:var(--radius-lg);text-align:center;border:1px solid var(--gray-200);background:#fff;min-width:100px;padding:12px 20px}.ds-mini-stat .value{font-size:24px;font-weight:800}.ds-mini-stat .label{color:var(--gray-500);font-size:11px}.ds-controls{align-items:center;gap:12px;margin-bottom:16px;display:flex}.ds-controls .search-input{flex:1}.ds-controls select{width:auto;min-width:180px}.ds-preview{position:sticky;top:88px}.ds-preview-card{text-align:center;padding:24px}.ds-preview-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 12px;font-size:28px;font-weight:700;display:flex}.ds-preview-name{margin-bottom:4px;font-size:18px;font-weight:700}.ds-preview-meta{color:var(--gray-500);margin-bottom:16px;font-size:13px}.ds-preview-poin{border-radius:var(--radius-md);color:#fff;margin-bottom:16px;padding:8px 24px;font-size:24px;font-weight:900;display:inline-block}.ds-recent{text-align:left}.ds-recent h4{align-items:center;gap:6px;margin-bottom:12px;font-size:13px;font-weight:600;display:flex}.ds-recent-item{border-bottom:1px solid var(--gray-50);align-items:flex-start;gap:10px;padding:8px 0;display:flex}.ds-recent-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;margin-top:4px}.ds-recent-item .ri-text{font-size:13px;font-weight:500}.ds-recent-item .ri-date{color:var(--gray-400);font-size:11px}.ds-recent-item .ri-poin{white-space:nowrap;margin-left:auto;font-size:13px;font-weight:700}.poin-badge{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:13px;font-weight:700;display:inline-flex}.detail-top{grid-template-columns:1fr 300px;gap:24px;margin-bottom:24px;display:grid}.detail-profile{gap:24px;display:flex}.detail-profile-avatar{border-radius:var(--radius-lg);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:100px;height:100px;font-size:36px;font-weight:700;display:flex}.detail-profile-info h2{margin-bottom:4px;font-size:24px;font-weight:800}.detail-profile-info .dp-nis{color:var(--gray-500);margin-bottom:12px;font-size:14px}.detail-badges{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.detail-actions{flex-wrap:wrap;gap:8px;display:flex}.detail-right-cards .poin-total-card{text-align:center;margin-bottom:16px;padding:20px}.detail-right-cards .poin-total-value{font-size:48px;font-weight:900;line-height:1}.detail-right-cards .poin-total-label{color:var(--gray-500);font-size:12px}.detail-right-cards .status-warning-card{padding:20px}.detail-right-cards .status-warning-card .sw-icon{margin-bottom:8px;font-size:24px}.detail-right-cards .status-warning-card h4{margin-bottom:4px;font-size:16px;font-weight:700}.detail-right-cards .status-warning-card p{color:var(--gray-500);font-size:12px}.detail-bottom{grid-template-columns:1fr 300px;gap:24px;display:grid}.tab-content{display:none}.tab-content.active{display:block}.detail-info-grid{grid-template-columns:1fr 1fr;gap:0;display:grid}.detail-info-item{border-bottom:1px solid var(--gray-100);padding:12px 0;display:flex}.detail-info-item .dii-label{width:180px;color:var(--gray-500);flex-shrink:0;font-size:13px}.detail-info-item .dii-value{font-size:14px;font-weight:500}.ortu-section{margin-bottom:24px}.ortu-section h4{color:var(--primary-600);text-transform:uppercase;margin-bottom:12px;font-size:14px;font-weight:700}.timeline-vertical{padding-left:24px;position:relative}.timeline-vertical:before{content:"";background:var(--gray-200);width:2px;position:absolute;top:0;bottom:0;left:6px}.timeline-item{padding-bottom:20px;position:relative}.timeline-dot{background:#fff;border:3px solid;border-radius:50%;width:14px;height:14px;position:absolute;top:2px;left:-24px}.timeline-item .ti-title{font-size:14px;font-weight:600}.timeline-item .ti-date{color:var(--gray-400);font-size:12px}.trend-chart-card{margin-top:16px;padding:20px}.trend-chart-card h4{margin-bottom:16px;font-size:14px;font-weight:600}.kritis-banner{background:linear-gradient(135deg, var(--danger-700), var(--danger-600));color:#fff;border-radius:var(--radius-lg);align-items:center;gap:12px;margin-bottom:24px;padding:20px 24px;display:flex}.kritis-banner h2{font-size:20px;font-weight:800}.kritis-banner p{opacity:.9;font-size:14px}.kritis-grid{grid-template-columns:1fr 300px;gap:24px;display:grid}.kritis-profile{border-left:4px solid var(--danger-500);align-items:center;gap:20px;padding:20px;display:flex;position:relative}.kritis-poin-bar{margin-top:12px}.kritis-poin-bar .progress-fill{background:var(--danger-500)}.kritis-warning-box{background:var(--warning-50);border:1px solid var(--warning-400);border-radius:var(--radius-md);margin:20px 0;padding:14px 20px;font-size:13px}.kritis-right .kritis-status-card{text-align:center;margin-bottom:16px;padding:28px}.kritis-right .kritis-status-label{text-transform:uppercase;color:var(--gray-500);letter-spacing:1px;margin-bottom:8px;font-size:11px;font-weight:700}.kritis-right .kritis-status-value{color:var(--danger-600);font-size:48px;font-weight:900}.kritis-right .kritis-status-desc{color:var(--gray-500);font-size:13px}.violation-timeline{padding:0;list-style:none}.violation-timeline li{border-bottom:1px solid var(--gray-100);gap:16px;padding:16px 0;display:flex}.violation-timeline .vt-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px;margin-top:4px}.violation-timeline .vt-content{flex:1}.violation-timeline .vt-title{font-size:14px;font-weight:600}.violation-timeline .vt-meta{color:var(--gray-500);font-size:12px}.violation-timeline .vt-poin{white-space:nowrap;font-size:16px;font-weight:700}.violation-timeline .vt-trigger{background:var(--danger-50);color:var(--danger-600);border-radius:var(--radius-sm);margin-top:4px;padding:4px 8px;font-size:12px;display:inline-block}.kategori-summary .ks-item{border-bottom:1px solid var(--gray-100);justify-content:space-between;padding:10px 0;font-size:14px;display:flex}.kategori-summary .ks-poin{background:var(--gray-100);border-radius:var(--radius-sm);padding:4px 12px;font-weight:700}.admin-info-card{background:var(--gray-50);border-radius:var(--radius-md);margin-top:16px;padding:16px;font-size:13px}.admin-info-card dt{font-weight:600}.admin-info-card dd{color:var(--gray-600);margin-bottom:8px}.sp-breadcrumb{color:var(--gray-500);margin-bottom:20px;font-size:13px}.sp-breadcrumb a{color:var(--gray-500)}.sp-breadcrumb a:hover{color:var(--primary-600)}.sp-top{grid-template-columns:1fr 280px;gap:24px;margin-bottom:24px;display:grid}.sp-student-card{align-items:center;gap:20px;padding:20px;display:flex}.sp-templates{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;display:grid}.sp-template{border-radius:var(--radius-md);border:2px solid var(--gray-200);text-align:center;cursor:pointer;transition:all var(--transition-fast);padding:20px}.sp-template:hover{border-color:var(--primary-300)}.sp-template.active{border-color:var(--primary-500);background:var(--primary-50);box-shadow:0 0 0 3px #3b82f633}.sp-template.locked{opacity:.5;cursor:not-allowed}.sp-template .spt-icon{margin-bottom:4px;font-size:20px}.sp-template h4{font-size:14px;font-weight:600}.sp-template p{color:var(--gray-500);font-size:12px}.sp-preview-container{grid-template-columns:1fr 280px;gap:24px;display:grid}.sp-letter-preview{border:1px solid var(--gray-200);border-radius:var(--radius-md);max-width:700px;box-shadow:var(--shadow-lg);background:#fff;padding:48px;font-size:13px;line-height:1.7}.sp-letter-preview .kop-surat{text-align:center;border-bottom:3px double var(--gray-800);margin-bottom:24px;padding-bottom:12px}.sp-letter-preview .kop-surat h3{font-size:14px;font-weight:600}.sp-letter-preview .kop-surat h2{font-size:18px;font-weight:800}.sp-letter-preview .kop-surat p{color:var(--gray-600);font-size:11px}.sp-letter-preview table{border-collapse:collapse;width:100%;margin:16px 0}.sp-letter-preview table th,.sp-letter-preview table td{border:1px solid var(--gray-300);padding:6px 10px;font-size:12px}.sp-letter-preview table th{background:var(--gray-50);font-weight:600}.sp-letter-preview .ttd-section{justify-content:space-between;margin-top:40px;display:flex}.sp-letter-preview .ttd-col{text-align:center;min-width:200px}.sp-letter-preview .ttd-line{border-bottom:1px solid var(--gray-800);width:180px;margin:60px auto 4px}.sp-settings{position:sticky;top:88px}.sp-settings .card{margin-bottom:16px}.sp-settings h4{margin-bottom:12px;font-size:14px;font-weight:600}.sp-settings .form-group{margin-bottom:14px}.toggle-switch{justify-content:space-between;align-items:center;display:flex}.toggle-track{background:var(--gray-300);cursor:pointer;width:40px;height:22px;transition:background var(--transition-fast);border-radius:11px;position:relative}.toggle-track.on{background:var(--primary-600)}.toggle-track:after{content:"";width:18px;height:18px;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.toggle-track.on:after{transform:translate(18px)}.orientation-btns{gap:8px;display:flex}.orientation-btns button{flex:1}.orientation-btns button.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600)}.laporan-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px;display:flex}.laporan-filters{flex-wrap:wrap;gap:12px;display:flex}.laporan-charts{grid-template-columns:1.2fr 1fr;gap:24px;margin-bottom:32px;display:grid}.laporan-tingkat{margin-bottom:32px}.laporan-tingkat h3{align-items:center;gap:8px;margin-bottom:16px;font-size:18px;font-weight:700;display:flex}.laporan-tingkat h3 .lt-count{color:var(--gray-500);background:var(--gray-100);border-radius:var(--radius-full);margin-left:auto;padding:4px 10px;font-size:12px;font-weight:500}.mini-bar{border-radius:var(--radius-full);width:120px;height:8px;display:flex;overflow:hidden}.mini-bar span{height:100%}.ms-actions{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.ms-top{grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.ms-filter-card{padding:20px}.ms-filter-card h4{margin-bottom:12px;font-size:14px;font-weight:600}.ms-filter-card .filter-row{gap:12px;margin-bottom:12px;display:flex}.ms-filter-card select{flex:1}.mg-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px;display:flex}.mg-controls{align-items:center;gap:12px;margin-bottom:16px;display:flex}.mg-controls .search-input{flex:1;max-width:400px}.mg-controls select{width:auto;min-width:160px}.peran-badge{border-radius:var(--radius-full);padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.peran-guru{background:var(--primary-100);color:var(--primary-700)}.peran-staff{background:var(--gray-200);color:var(--gray-600)}.peran-piket{color:#be185d;background:#fce7f3}.pp-layout{grid-template-columns:300px 1fr;gap:24px;display:grid}.pp-summary .pp-total{color:var(--primary-700);margin-bottom:16px;font-size:48px;font-weight:900}.pp-summary .pp-breakdown{grid-template-columns:1fr 1fr;gap:12px;display:grid}.pp-summary .pp-b-item{border-radius:var(--radius-md);padding:12px}.pp-summary .pp-b-label{color:var(--gray-500);font-size:12px}.pp-summary .pp-b-value{font-size:24px;font-weight:800}.pp-info-cards{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;display:grid}.pp-info-card{border-radius:var(--radius-lg);padding:20px}.pp-info-card h4{align-items:center;gap:6px;margin-bottom:12px;font-size:15px;font-weight:700;display:flex}.pp-info-card .pp-sp-item{gap:12px;padding:6px 0;font-size:13px;display:flex}.pp-info-card .pp-sp-poin{min-width:55px;font-weight:700}.kategori-badge{border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}@media (width<=1024px){.landing-stats{grid-template-columns:repeat(2,1fr)}.landing-two-col,.how-to-section,.sanction-cards{grid-template-columns:1fr}.dash-stats{grid-template-columns:repeat(2,1fr)}.dash-two-col,.input-pel-grid,.daftar-siswa-layout,.detail-top,.detail-bottom,.kritis-grid,.sp-top,.sp-preview-container,.laporan-charts,.pp-layout,.ms-top{grid-template-columns:1fr}}@media (width<=768px){.sidebar{display:none}.admin-main{margin-left:0}.landing-hero h1{font-size:24px}.landing-footer-grid{grid-template-columns:1fr}}@media print{body *{visibility:hidden!important}#rekap-pelanggaran-modal,#rekap-pelanggaran-modal #print-modal-container,#rekap-pelanggaran-modal #print-modal-container *,#sp-letter-content,#sp-letter-content *{visibility:visible!important}#rekap-pelanggaran-modal{background:#fff!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;left:0!important;overflow:visible!important}#print-modal-container{max-width:100%!important;box-shadow:none!important;border-radius:0!important}#sp-letter-content{width:100%!important;max-width:100%!important;box-shadow:none!important;background:#fff!important;border:none!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;left:0!important}.sp-page-break{page-break-before:always!important;break-before:page!important;border:none!important;height:0!important;margin:0!important;padding:0!important}.sp-page-break span,.no-print,.sp-breadcrumb,.sp-top,.sp-templates,.sp-settings{display:none!important}}