:root{--font-title:"Outfit", "Inter", sans-serif;--font-body:"Inter", sans-serif;--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-card:#fff;--bg-card-hover:#fafafa;--border-color:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#e0e7ff;--primary-light-hover:#c7d2fe;--secondary:#8b5cf6;--secondary-light:#f5f3ff;--color-hadir:#10b981;--color-hadir-light:#d1fae5;--color-absen:#ef4444;--color-absen-light:#fee2e2;--color-izin:#f59e0b;--color-izin-light:#fef3c7;--color-sakit:#3b82f6;--color-sakit-light:#dbeafe;--accent-rose:#f43f5e;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-premium:0 20px 25px -5px #4f46e51a, 0 10px 10px -5px #4f46e50a;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--bg-card-hover:#334155;--border-color:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--primary:#6366f1;--primary-hover:#4f46e5;--primary-light:#312e81;--primary-light-hover:#3730a3;--secondary:#a78bfa;--secondary-light:#2e1065;--color-hadir:#34d399;--color-hadir-light:#064e3b;--color-absen:#f87171;--color-absen-light:#7f1d1d;--color-izin:#fbbf24;--color-izin-light:#78350f;--color-sakit:#60a5fa;--color-sakit-light:#1e3a8a;--shadow-sm:0 1px 2px 0 #00000080;--shadow-md:0 4px 6px -1px #0000004d, 0 2px 4px -1px #0003;--shadow-lg:0 10px 15px -3px #0006, 0 4px 6px -2px #0000004d;--shadow-premium:0 20px 25px -5px #6366f126, 0 10px 10px -5px #6366f10d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-body);color:var(--text-primary);transition:background-color var(--transition-normal), color var(--transition-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0b0f19;line-height:1.5;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);letter-spacing:-.02em;font-weight:700}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}button{cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none}a{color:inherit;text-decoration:none}.toast{z-index:9999;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--text-primary);align-items:center;gap:10px;width:90%;max-width:400px;padding:12px 20px;font-size:13px;font-weight:500;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.toast.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-100px)}.toast.success{border-left:4px solid var(--color-hadir)}.toast.success i{color:var(--color-hadir)}.toast.error{border-left:4px solid var(--color-absen)}.toast.error i{color:var(--color-absen)}.toast.info{border-left:4px solid var(--primary)}.toast.info i{color:var(--primary)}.container{background-color:var(--bg-primary);max-width:500px;min-height:100vh;transition:background-color var(--transition-normal);flex-direction:column;margin:0 auto;padding-bottom:74px;display:flex;position:relative;box-shadow:0 0 40px #00000059}.login-container{justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.login-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);text-align:center;transition:background-color var(--transition-normal), border-color var(--transition-normal);padding:30px 24px}.login-logo{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:16px;font-size:24px;display:inline-flex;box-shadow:0 4px 12px #4f46e540}.login-header h1{color:var(--text-primary);margin-bottom:4px;font-size:26px;font-weight:800}.login-header p{color:var(--text-secondary);margin-bottom:24px;font-size:13px}.login-footer{color:var(--text-muted);margin-top:20px;font-size:11px}.app-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);z-index:100;transition:background-color var(--transition-normal), border-color var(--transition-normal);justify-content:space-between;align-items:center;padding:14px 20px;display:flex;position:sticky;top:0}.app-header-left{align-items:center;gap:12px;display:flex}.app-header-left .user-avatar{background-color:var(--primary-light);width:38px;height:38px;color:var(--primary);border:1px solid var(--border-color);border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.app-title-group h1{color:var(--text-primary);font-size:15px;font-weight:700;line-height:1.2}.app-title-group span{color:var(--text-muted);text-transform:capitalize;font-size:11px}.header-actions{gap:8px;display:flex}.icon-btn{width:36px;height:36px;color:var(--text-secondary);background-color:var(--bg-secondary);transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background-color:var(--border-color);color:var(--text-primary)}.sim-date-subbar{background-color:var(--primary-light);color:var(--primary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 20px;font-size:11px;font-weight:600;display:flex}.sim-date-subbar .day-status{border-radius:var(--radius-full);text-transform:uppercase;padding:2px 8px;font-size:10px}.sim-date-subbar .day-status.sunday{background-color:var(--color-hadir);color:#fff}.sim-date-subbar .day-status.not-sunday{background-color:var(--color-izin);color:#fff}.app-content{flex-grow:1;padding:16px;overflow-y:auto}.content-section{animation:.25s ease-out fadeIn}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-header h2{color:var(--text-primary);font-size:18px;font-weight:700}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:background-color var(--transition-normal), border-color var(--transition-normal);margin-bottom:16px;padding:16px}.card h3{color:var(--text-primary);margin-bottom:12px;font-size:14px;font-weight:600}.form-group{text-align:left;margin-bottom:14px}.form-group label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper i{color:var(--text-muted);position:absolute;left:14px}.input-wrapper input{padding-left:36px}input,select,textarea{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:all var(--transition-fast);padding:12px 16px;font-size:16px}input:focus,select:focus,textarea:focus{border-color:var(--primary);background:var(--bg-card);box-shadow:0 0 0 2px var(--primary-light)}.input-hint{color:var(--text-muted);margin-top:4px;font-size:13px;display:block}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:15px;font-weight:600;display:inline-flex}.btn-sm{padding:8px 12px;font-size:13px}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color)}.btn-success{background-color:var(--color-hadir);color:#fff}.btn-success:hover{background-color:#0d9488}.btn-danger{background-color:var(--color-absen);color:#fff}.btn-danger:hover{background-color:#dc2626}.btn-block{width:100%;display:flex}.py-3{padding-top:12px;padding-bottom:12px}.divider{text-align:center;color:var(--text-muted);align-items:center;margin:16px 0;font-size:10px;font-weight:700;display:flex}.divider:before,.divider:after{content:"";border-bottom:1px solid var(--border-color);flex:1}.divider:not(:empty):before{margin-right:10px}.divider:not(:empty):after{margin-left:10px}.input-group{gap:8px;display:flex}.input-group input{flex-grow:1}.qr-scanner-box{aspect-ratio:1;border:2px dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary);width:100%;overflow:hidden}.qr-scanner-box video{object-fit:cover!important;width:100%!important;height:100%!important}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:40px 10px;display:flex}.empty-state i{color:var(--primary);opacity:.8;margin-bottom:12px;font-size:44px}.empty-state p{max-width:250px;font-size:14px}.child-profile-card{background-color:var(--bg-secondary);border-radius:var(--radius-md);align-items:center;gap:14px;margin-bottom:14px;padding:12px;display:flex}.child-profile-card .profile-avatar{background-color:var(--primary);border-radius:var(--radius-sm);color:#fff;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;display:flex}.child-profile-card h2{color:var(--text-primary);font-size:18px;font-weight:700}.profile-badge-row{gap:6px;margin-top:2px;margin-bottom:2px;display:flex}.thn-ajaran-label{color:var(--text-muted);font-size:11px}.borrow-status-alert{border-radius:var(--radius-md);align-items:center;gap:10px;margin-bottom:16px;padding:12px;font-size:12px;display:flex}.borrow-status-alert.allowed{background-color:var(--color-hadir-light);color:var(--color-hadir);border:1px solid #10b9811a}.borrow-status-alert.blocked{background-color:var(--color-absen-light);color:var(--color-absen);border:1px solid #ef44441a}.borrow-status-alert h4{font-size:13px;font-weight:700}.child-scanner-row{align-items:stretch;gap:12px;width:100%;margin-top:10px;display:flex}.child-scan-col{flex:none}.child-scan-col .btn{width:100%;height:100%}.child-manual-col{flex:1}.child-manual-col .input-group{height:100%}.book-scanner-single-row{align-items:stretch;gap:12px;width:100%;display:flex}.btn-scan-book-compact{white-space:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:6px;display:inline-flex}.inline-manual-form-compact{flex:1;gap:8px;display:flex}.inline-manual-form-compact input{flex:1;min-width:0}.btn-dark-green{color:#fff!important;background-color:#166534!important}.btn-dark-green:hover{background-color:#14532d!important}.loan-item-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast);flex-direction:column;gap:10px;margin-bottom:10px;padding:12px;display:flex}.loan-item-card.borrowed-today{border-left:4px solid var(--color-hadir);border-color:#bbf7d0;background-color:#f0fdf4!important}[data-theme=dark] .loan-item-card.borrowed-today{background-color:var(--color-hadir-light)!important;border-color:#34d3994d!important}.loan-item-main{flex-direction:column;gap:6px;display:flex}.loan-item-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.loan-book-title{color:var(--text-primary);margin:0;font-size:15px;font-weight:600}.loan-book-code{color:var(--text-secondary);white-space:nowrap;font-size:13px}.loan-item-body{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.loan-item-dates{color:var(--text-secondary);flex-direction:column;gap:1px;font-size:11px;display:flex}.loan-item-badges{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}.loan-item-actions{grid-template-columns:40px 1fr 1fr;gap:6px;display:grid}.badge{border-radius:var(--radius-full);text-transform:uppercase;align-items:center;padding:2px 8px;font-size:10px;font-weight:600;display:inline-flex}.badge-primary{background:var(--primary-light);color:var(--primary)}.badge-accent{background:var(--secondary-light);color:var(--secondary)}.badge-success{background:var(--color-hadir-light);color:var(--color-hadir)}.badge-warning{background:var(--color-izin-light);color:var(--color-izin)}.badge-danger{background:var(--color-absen-light);color:var(--color-absen)}.table-toolbar{margin-bottom:12px}.search-box{position:relative}.search-box i{color:var(--text-muted);position:absolute;top:12px;left:12px}.search-box input{padding-left:32px;font-size:12px}.table-container{border-radius:var(--radius-sm);border:1px solid var(--border-color);overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:12px}.table th,.table td{border-bottom:1px solid var(--border-color);padding:10px 12px}.table th{font-family:var(--font-title);background:var(--bg-secondary);color:var(--text-secondary);text-align:left;font-weight:600}.table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover{background-color:var(--bg-card-hover)}.bottom-nav{background-color:var(--bg-card);border-top:1px solid var(--border-color);z-index:1000;width:100%;max-width:500px;height:64px;transition:background-color var(--transition-normal), border-color var(--transition-normal);justify-content:space-around;align-items:center;padding:0 4px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 15px #0000001f}.buku-list-container{flex-direction:column;gap:12px;margin-top:10px;padding-bottom:20px;display:flex}.buku-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);align-items:center;gap:14px;padding:14px;display:flex}.buku-card:active{background-color:var(--bg-card-hover);transform:scale(.98)}.report-accordion-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:background-color var(--transition-normal), border-color var(--transition-normal);padding:12px;display:block}.buku-avatar{border-radius:var(--radius-md);color:#fff;width:50px;height:50px;box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:flex}.buku-avatar.tersedia{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.buku-avatar.dipinjam{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.buku-info-summary{flex:1;min-width:0}.buku-info-summary h4{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0 0 2px;font-size:15px;font-weight:700;overflow:hidden}.buku-info-summary p{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:12px;overflow:hidden}.buku-meta-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.buku-class-badge{border-radius:var(--radius-full);background-color:var(--primary-light);color:var(--primary);padding:2px 8px;font-size:10px;font-weight:700}[data-theme=dark] .buku-class-badge{background-color:var(--primary-light-hover)}.buku-status-badge{border-radius:var(--radius-full);padding:2px 8px;font-size:10px;font-weight:700}.buku-status-badge.tersedia{color:#10b981;background-color:#10b98126}.buku-status-badge.dipinjam{color:#f59e0b;background-color:#f59e0b26}.buku-card-actions{align-items:center;gap:6px;display:flex}.circle-action-btn{border:1px solid var(--border-color);background-color:var(--bg-primary);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:14px;display:flex}.circle-action-btn:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.circle-action-btn:active{transform:scale(.9)}.circle-action-btn.edit:active{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary-light-hover)}.circle-action-btn.delete:active{color:#ef4444;background-color:#ef444426;border-color:#ef444440}.bottom-nav .nav-item{height:100%;color:var(--text-muted);transition:all var(--transition-fast);flex-direction:column;flex:1;justify-content:center;align-items:center;font-size:10px;font-weight:600;display:flex;position:relative}.bottom-nav .nav-item i{margin-bottom:4px;font-size:16px}.bottom-nav .nav-item.active{color:var(--primary)}.nav-icon-container{justify-content:center;align-items:center;height:22px;display:flex}.nav-indicator{background-color:var(--primary);border-radius:var(--radius-full);opacity:0;width:28px;height:3px;transition:all var(--transition-fast);position:absolute;top:0}.nav-item.active .nav-indicator{opacity:1}.laporan-tabs{background-color:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:14px;padding:4px;display:flex}.report-tab{text-align:center;color:var(--text-secondary);border-radius:var(--radius-sm);flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;font-size:11px;font-weight:600;display:flex}.report-tab i{font-size:14px}.report-tab.active{background-color:var(--bg-card);color:var(--primary);box-shadow:var(--shadow-sm)}.report-sub-view{animation:.2s ease-out fadeIn}.report-actions-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.report-actions-row h3{font-size:13px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);align-items:center;gap:8px;padding:12px;display:flex}.stat-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;display:flex}.stat-info h4{font-size:13px;font-weight:700}.stat-info p{color:var(--text-muted);font-size:9px}.filter-controls{align-items:center;display:flex}.modal{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172ab3;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:flex;position:fixed;top:0;left:0}.modal.hidden{display:none!important}.modal-content{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-lg);padding:20px;animation:.25s cubic-bezier(.175,.885,.32,1.2) modalIn}.modal-small{max-width:320px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-header h3{font-size:15px}.btn-close-modal{color:var(--text-muted);font-size:20px}.modal-footer{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.qr-print-preview-box{color:#000;border-radius:var(--radius-md);background:#fff;border:1px solid #e2e8f0;flex-direction:column;align-items:center;padding:12px;display:flex}#qr-code-print-canvas{width:160px!important;height:160px!important}.hidden{display:none!important}.text-center{text-align:center}.text-warning{color:var(--color-izin)}.text-primary-color{color:var(--primary)}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.ml-1{margin-left:4px}.mx-2{margin-left:8px;margin-right:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media print{body{color:#000!important;background:#fff!important}.container{width:100%!important;max-width:100%!important;box-shadow:none!important;background:#fff!important;padding-bottom:0!important}.app-header,.bottom-nav,.sim-date-subbar,.toast,.modal,.section-header button,.report-actions-row button{display:none!important}.app-content{padding:0!important}.content-section{display:none!important}#view-laporan,#view-laporan .report-sub-view:not(.hidden){display:block!important}.card{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.table th{color:#000!important;background:#f1f5f9!important;border-bottom:2px solid #000!important}.table td{color:#000!important;border-bottom:1px solid #e2e8f0!important}#modal-print-qr{background:#fff!important;border:none!important;width:100%!important;padding-top:40px!important;display:flex!important;position:relative!important}#modal-print-qr .modal-content{box-shadow:none!important;background:#fff!important;border:none!important;max-width:100%!important}#modal-print-qr .modal-header,#modal-print-qr .modal-footer{display:none!important}}.search-suggestions-box{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:1000;width:100%;max-height:250px;box-shadow:var(--shadow-lg);margin-top:4px;position:absolute;top:100%;left:0;overflow-y:auto}.suggestion-item{border-bottom:1px solid var(--border-color);cursor:pointer;transition:background-color var(--transition-fast);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background-color:var(--bg-card-hover)}.suggestion-info{text-align:left;flex-direction:column;min-width:0;display:flex}.suggestion-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.suggestion-meta{color:var(--text-secondary);margin-top:2px;font-size:11px}.suggestion-class{border-radius:var(--radius-full);background-color:var(--primary-light);color:var(--primary);padding:2px 8px;font-size:10px;font-weight:700}[data-theme=dark] .suggestion-class{background-color:var(--primary-light-hover)}