@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--primary:#0D6EFD;--dark:#0A3D91;--light:#EAF3FF;--white:#fff;--ink:#152238;--muted:#708096;--line:#e5ecf5;--bg:#f5f8fc;--shadow:0 8px 24px rgba(25,61,115,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}.app-shell{min-height:100vh;display:flex}.sidebar{width:260px;background:var(--dark);color:#fff;flex:0 0 260px}.sidebar-inner{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:25px 17px}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 10px 21px;border-bottom:1px solid rgba(255,255,255,.14)}.sidebar-brand strong{display:block;font:800 18px Manrope;letter-spacing:.03em}.sidebar-brand small{display:block;color:#a9c9ff;font-size:10px;letter-spacing:.2em;margin-top:1px}.brand-mark{width:42px;height:42px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--dark);font:800 7px Manrope;text-align:center;line-height:1.2;flex:0 0 auto}.brand-mark.large{width:84px;height:84px;border-radius:20px;margin:0 auto 20px}.brand-mark img{width:100%;height:100%;object-fit:contain}.school-label{color:#a9c9ff;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;padding:19px 10px 14px}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.nav-caption{font-size:9px;font-weight:700;letter-spacing:.16em;color:#75a6f4;padding:10px}.nav-link{color:#c9dcfc;border-radius:9px;padding:11px 12px;display:flex;align-items:center;gap:12px;font-weight:500;transition:.2s}.nav-link i{font-size:17px;width:20px;text-align:center}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.14);color:#fff}.nav-link.active{box-shadow:inset 3px 0 #fff}.logout-link{color:#ffced2}.sidebar-footer{margin-top:auto;color:#83a9e2;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:10px;line-height:1.7}.sidebar-footer span{color:#c9dcfc}.main-area{min-width:0;flex:1}.topbar{height:92px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px}.page-title{font:800 24px Manrope;margin:0;color:var(--ink)}.eyebrow{font-weight:800;font-size:10px;letter-spacing:.14em;color:var(--primary);display:block}.eyebrow.light{color:#c5ddff}.user-chip{display:flex;align-items:center;gap:10px}.user-chip strong,.user-chip small{display:block}.user-chip small{font-size:11px;color:var(--muted);margin-top:2px}.avatar{width:36px;height:36px;border-radius:50%;background:#d5e7ff;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}.avatar.soft{background:var(--light)}.avatar.purple{background:#eee7ff;color:#7352d6}.avatar.orange{background:#fff0d7;color:#d7890a}.content-area{padding:32px 42px;max-width:1600px;margin:auto}.app-footer{padding:0 42px 28px;color:#8b9aae;font-size:11px}.app-footer span{margin:0 8px}.welcome-banner{background:linear-gradient(115deg,#0a3d91 0%,#0d6efd 100%);border-radius:16px;color:#fff;padding:27px 31px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;box-shadow:0 12px 28px rgba(13,110,253,.2)}.welcome-banner h2{font:800 25px Manrope;margin:7px 0 5px}.welcome-banner p{margin:0;color:#cfe1ff}.welcome-illustration{display:flex;align-items:center;gap:14px;font:800 13px Manrope;text-transform:uppercase;letter-spacing:.1em;color:#dbeaff}.welcome-illustration i{font-size:64px;opacity:.9}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;margin:24px 0}.stat-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:11px}.stat-card strong{font:800 25px Manrope;display:block;margin:2px 0}.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--light);color:var(--primary)}.stat-icon.purple{background:#eee7ff;color:#7352d6}.stat-icon.orange{background:#fff0d7;color:#d7890a}.stat-icon.green{background:#daf8ea;color:#159c59}.stat-icon.red{background:#ffe1e3;color:#d8424a}.stat-icon.yellow{background:#fff4d5;color:#ca9200}.panel-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;box-shadow:var(--shadow)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.panel-heading h3{font:800 17px Manrope;margin:4px 0 0}.page-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:21px}.btn{border-radius:8px;font-weight:700}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:#095fdc;border-color:#095fdc}.form-control,.form-select{border-color:#dbe4ef;border-radius:8px;padding:.65rem .8rem;font-size:13px}.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,110,253,.12)}.form-label{font-size:12px;font-weight:700;color:#42526a}.table-responsive{margin:0 -3px}.app-table{min-width:720px;margin-bottom:0}.app-table thead th{border-bottom:1px solid var(--line);color:#8491a5;font-size:10px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;padding:11px 10px}.app-table tbody td{padding:14px 10px;border-color:#eff3f8;font-size:12px}.person-cell{display:flex;align-items:center;gap:10px;white-space:nowrap}.person-cell strong{font-weight:700}.person-cell small{font-size:11px}.method-pill,.class-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;background:#f1f5fa;color:#596a81;padding:5px 9px;font-size:11px}.method-pill i{color:var(--primary)}.empty-state{text-align:center;color:var(--muted);padding:45px 15px}.empty-state.compact{padding:30px}.empty-state i{display:block;font-size:34px;color:#b3c4d9;margin-bottom:10px}.empty-state h2{color:var(--dark);font:800 26px Manrope}.empty-state p{margin-bottom:18px}.search-form{min-width:235px}.input-icon{position:relative}.input-icon i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#92a1b4}.input-icon input{padding-left:34px}.status-options{display:flex;flex-wrap:wrap;gap:6px}.status-options label input{position:absolute;opacity:0}.status-options label span{border:1px solid #dbe4ef;padding:7px 10px;border-radius:7px;font-size:11px;cursor:pointer}.status-options label input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff}.class-card{border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;gap:12px;align-items:flex-start}.class-card-icon{width:38px;height:38px;border-radius:10px;background:var(--light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:18px}.class-card h4{font:800 17px Manrope;margin:2px 0}.class-card p{font-size:11px;color:var(--muted);margin:0}.donut-summary{display:flex;align-items:center;gap:22px;padding:8px 0 22px}.donut{width:124px;height:124px;border-radius:50%;background:conic-gradient(#16a765 0 48%,#ffca3a 48% 67%,#0d6efd 67% 82%,#e1525c 82% 100%);display:flex;align-items:center;justify-content:center}.donut:before{content:'';width:82px;height:82px;background:#fff;border-radius:50%;position:absolute}.donut div{position:relative;text-align:center}.donut strong,.donut span{display:block}.donut strong{font:800 24px Manrope}.donut span{font-size:10px;color:var(--muted)}.legend-list{flex:1}.legend-list div{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--muted);font-size:11px}.legend-list strong{margin-left:auto;color:var(--ink)}.legend-dot{width:8px;height:8px;border-radius:50%;display:block}.legend-dot.green{background:#16a765}.legend-dot.yellow{background:#ffca3a}.legend-dot.blue{background:#0d6efd}.legend-dot.red{background:#e1525c}.quick-action{border:1px solid #dbe8fc;background:#f7fbff;border-radius:10px;padding:13px;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.quick-action:hover{border-color:var(--primary)}.action-icon{background:var(--primary);color:#fff;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center}.quick-action strong,.quick-action small{display:block}.quick-action small{font-size:10px;color:var(--muted);margin-top:2px}.face-result{display:flex;align-items:center;gap:12px;border-radius:10px;padding:14px;margin-top:16px}.face-result>i{font-size:27px}.face-result strong,.face-result span{display:block}.face-result span{font-size:12px;margin-top:3px}.face-result.neutral{background:#f4f7fb;color:#5d6d82}.face-result.success{background:#e3faee;color:#128752}.face-result.danger{background:#ffeaeb;color:#c7353e;animation:warning .8s infinite alternate}.camera-panel{padding-bottom:25px}.camera-state{font-size:11px;color:#73859c}.camera-state i{font-size:8px;color:#c3cfdd;margin-right:6px}.camera-state.live i{color:#18ac64}.camera-frame{width:100%;max-width:780px;margin:auto;aspect-ratio:16/9;min-height:260px;background:#091f44;border-radius:12px;position:relative;overflow:hidden;border:4px solid #9babc0;transition:.25s}.camera-frame.live{border-color:#1caf6a}.camera-frame.alert{border-color:#e0525b;animation:warning .8s infinite alternate}.camera-frame video{width:100%;height:100%;object-fit:cover;display:block}.camera-frame canvas{position:absolute;inset:0;width:100%;height:100%}.camera-overlay{position:absolute;inset:16% 26%;border:1px solid rgba(255,255,255,.45);border-radius:45%;pointer-events:none}.camera-overlay span{position:absolute;width:20px;height:20px;border-color:#fff;border-style:solid}.camera-overlay span:nth-child(1){top:-1px;left:-1px;border-width:2px 0 0 2px}.camera-overlay span:nth-child(2){top:-1px;right:-1px;border-width:2px 2px 0 0}.camera-overlay span:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 2px 2px}.camera-overlay span:nth-child(4){bottom:-1px;right:-1px;border-width:0 2px 2px 0}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#91a5c4}.camera-placeholder i{font-size:48px}.camera-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.instruction-card ol{padding-left:19px;color:#56677d;line-height:2.2;font-size:12px}.security-note{display:flex;gap:10px;background:#f3f8ff;border-radius:10px;padding:13px;color:var(--primary);margin-top:25px}.security-note i{font-size:20px}.security-note strong,.security-note p{display:block}.security-note strong{font-size:12px}.security-note p{font-size:11px;color:#64758a;margin:4px 0 0;line-height:1.5}.report-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}.report-total{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;border-left:4px solid var(--primary)}.report-total span,.report-total small{display:block;color:var(--muted);font-size:11px}.report-total strong{font:800 27px Manrope;display:block;margin:2px 0}.report-total.hadir{border-left-color:#16a765}.report-total.terlambat{border-left-color:#ffca3a}.report-total.sakit{border-left-color:#0d6efd}.report-total.izin{border-left-color:#8d9bad}.report-total.alpha{border-left-color:#e1525c}.login-page{background:radial-gradient(circle at 15% 15%,#eaf3ff 0,#f5f8fc 35%,#fff 100%);min-height:100vh}.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:25px}.login-card{background:#fff;border:1px solid #e8eef7;border-radius:20px;width:100%;max-width:440px;padding:42px 45px;text-align:center}.login-brand h1{font:800 21px Manrope;color:var(--dark);line-height:1.35;margin:0}.login-subtitle{color:var(--muted);font-size:12px;margin:8px 0 30px}.login-form{text-align:left}.login-form .form-label{font-size:12px}.demo-access{margin-top:25px;border-top:1px solid var(--line);padding-top:18px;text-align:left}.section-label{display:block;color:#8b9aae;font-size:9px;font-weight:800;letter-spacing:.14em;margin-bottom:8px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;color:#73859c;font-size:10px}.login-footer{color:#8796a9;font-size:10px;line-height:1.7;margin-top:26px}.login-footer span{color:var(--dark);font-weight:700}.menu-toggle{font-size:20px;border:1px solid var(--line)}@keyframes warning{to{box-shadow:0 0 0 5px rgba(224,82,91,.18)}}@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(3,1fr)}.topbar,.content-area,.app-footer{padding-left:28px;padding-right:28px}}@media(max-width:991px){.sidebar{width:280px;flex-basis:280px}.sidebar-inner{height:100vh}.topbar{height:78px}.content-area{padding-top:24px}.report-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:575px){.content-area{padding:18px 15px}.topbar{padding:0 15px;height:75px}.page-title{font-size:19px}.welcome-banner{padding:21px}.welcome-banner h2{font-size:21px}.welcome-illustration{display:none}.stats-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin:16px 0}.stat-card{padding:12px 10px;gap:8px}.stat-icon{width:31px;height:31px;font-size:15px}.stat-card strong{font-size:21px}.stat-card span{font-size:10px}.panel-card{padding:16px}.panel-heading{align-items:flex-start;flex-wrap:wrap}.panel-heading h3{font-size:16px}.page-actions{align-items:flex-start;flex-wrap:wrap}.search-form{width:100%;min-width:0}.camera-frame{min-height:200px}.camera-actions{flex-direction:column}.camera-actions .btn{width:100%}.report-summary{grid-template-columns:repeat(2,1fr);gap:9px}.report-total{padding:12px}.report-total strong{font-size:23px}.login-card{padding:30px 23px}.app-footer{padding:0 15px 20px}.donut-summary{gap:13px}.donut{width:105px;height:105px}.donut:before{width:69px;height:69px}}
@media print{.sidebar,.topbar,.app-footer,.page-actions,.filter-bar,.btn{display:none!important}.main-area{width:100%}.content-area{padding:0}.panel-card{box-shadow:none;border:0}.report-summary{margin-top:10px}}.history-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 20px}.history-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 5px 18px rgba(24,44,76,.05)}.history-stat small{display:block;color:var(--muted);font-size:11px}.history-stat strong{display:block;font:800 24px Manrope;color:var(--ink);margin-top:2px}.history-stat-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--light);color:var(--primary)}.history-stat-icon.green{background:#e5f8ed;color:#17965b}.history-stat-icon.yellow{background:#fff4d9;color:#d28b00}.history-stat-icon.red{background:#ffe8eb;color:#d9414e}.history-filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.history-filter-head h3{margin:4px 0 0}.history-table th{white-space:nowrap;font-size:11px;color:#74839a;text-transform:uppercase;letter-spacing:.05em}.history-table td{white-space:nowrap}.history-table .person-cell{min-width:190px}.nisn-pill{display:inline-block;padding:5px 9px;border-radius:8px;background:#f1f5fb;color:#53657e;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}.history-table-wrap{border-top:1px solid var(--line)}
@media(max-width:900px){.history-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.history-stats{grid-template-columns:repeat(2,1fr);gap:9px}.history-stat{padding:11px}.history-stat strong{font-size:20px}.history-stat-icon{width:36px;height:36px}.history-filter-head{align-items:flex-start}.history-actions{gap:12px}}

/* Foto profil siswa */
.student-photo-avatar{width:42px;height:42px;min-width:42px;overflow:hidden;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.student-photo-avatar img{width:100%;height:100%;object-fit:cover}