/* SUNTIKAN ZERO-LAG RENDERING UNTUK HP KENTANG */
        .view-section { 
            display: none; 
            animation: fadeIn 0.4s ease-in-out; 
            content-visibility: auto; /* AJAIB: Mencegah browser me-render elemen di luar layar */
            contain-intrinsic-size: 1000px;
        }
        
        :root {
            --primary-dark: #0f674a;
            --primary: #128760;
            --primary-light: #e8f5e9;
            --bg-color: #f0f7f4;
            --text-dark: #1e293b;
            --text-muted: #64748b;
            --white: #ffffff;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --border-color: #e2e8f0;
            --danger: #ef4444;
            --info: #3b82f6;
            --warning: #f59e0b;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

        body {
            background-color: var(--bg-color);
            background-image: linear-gradient(to bottom, #d8f1f0, #f0f7f4 30%);
            color: var(--text-dark);
            display: flex; min-height: 100vh; overflow-x: hidden;
        }

        /* INJEKSI MASTER: QUANTUM LAZY-DOM VIRTUALIZATION */
        /* Memaksa baris tabel dan card tidak memakan CPU jika tidak terlihat di layar */
        .student-table tbody tr, .student-card {
            content-visibility: auto;
            contain-intrinsic-size: 80px; /* Estimasi tinggi baris agar scroll tidak lompat */
            will-change: transform, opacity;
        }

        /* Fallback cantik jika gambar gagal dimuat atau sedang loading */
        .lazy-avatar {
            background-color: #e2e8f0;
            position: relative;
        }
        .lazy-avatar::before {
            content: "\f007"; /* Icon user fontawesome fallback */
            font-family: "FontAwesome";
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: #94a3b8;
            font-size: 1rem;
            z-index: 0;
        }
        .lazy-avatar img {
            position: relative;
            z-index: 1;
            width: 100%; height: 100%; object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        /* Gambar akan fade-in halus saat selesai diload */
        .lazy-avatar img.loaded { opacity: 1; }

        /* --- SIDEBAR --- */
        .sidebar { width: 260px; background-color: var(--primary-dark); color: var(--white); display: flex; flex-direction: column; padding: 24px 16px; position: fixed; height: 100vh; z-index: 100; transition: transform 0.3s ease; }
        .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.2rem; margin-bottom: 40px; padding-left: 8px; }
        .logo i { font-size: 1.8rem; }
        .nav-menu { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    flex: 1; 
    overflow-y: auto; /* INI KUNCI AGAR BISA DI-SCROLL DI HP */
    padding-right: 5px;
    padding-bottom: 20px; /* Memberi ruang di bawah agar tidak tertutup tombol Keluar */
}

/* Opsional: Membuat scrollbar sidebar terlihat lebih rapi */
.nav-menu::-webkit-scrollbar { width: 4px; }
.nav-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
        .nav-item { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 8px; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500; transition: all 0.2s; cursor: pointer;}
        .nav-item:hover, .nav-item.active { background-color: var(--primary); color: var(--white); }
        .nav-item.active i { color: var(--white); }
        .logout-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background-color: var(--primary); color: white; text-decoration: none; border-radius: 8px; font-weight: 500; margin-top: auto; cursor: pointer;}

        /* --- MAIN CONTENT --- */
        .main-content { margin-left: 260px; flex: 1; padding: 32px; display: flex; flex-direction: column; gap: 24px; width: calc(100% - 260px); }
        
        /* Fitur SPA - View Switcher */
        .view-section { display: none; animation: fadeIn 0.4s ease-in-out; }
        .view-section.active-view { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Header Dashboad */
        .header { display: flex; justify-content: space-between; align-items: flex-start; }
        .welcome-text h1 { font-size: 2rem; color: var(--primary-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
        .welcome-text p { color: var(--text-muted); max-width: 400px; line-height: 1.5; }
        .header-controls { display: flex; gap: 16px; align-items: center; }
        .time-box, .profile-box, .wib-box, .fullscreen-btn { background: var(--white); padding: 12px 20px; border-radius: 12px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 12px; }
        .time-box { flex-direction: column; align-items: flex-end; gap: 4px; padding: 8px 20px; }
        .time-date { font-size: 0.8rem; color: var(--text-muted); }
        .time-clock { font-size: 1.2rem; font-weight: 700; }
        .wib-box { font-weight: 600; color: var(--primary-dark); }
        .fullscreen-btn { cursor: pointer; color: var(--primary-dark); transition: 0.2s; padding: 12px 16px; }
        .fullscreen-btn:hover { background: var(--primary-light); }
        .profile-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
        .profile-info h4 { font-size: 0.9rem; margin-bottom: 2px; }
        .profile-info p { font-size: 0.8rem; color: var(--text-muted); }

        /* Stats Grid */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-card { background: var(--white); padding: 20px; border-radius: 16px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 16px; }
        .stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .icon-green { background: #e8f5e9; color: #4caf50; }
        .icon-blue { background: #e3f2fd; color: #2196f3; }
        .icon-orange { background: #fff3e0; color: #ff9800; }
        .icon-purple { background: #f3e5f5; color: #9c27b0; }
        .stat-info h3 { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
        .stat-info h2 { font-size: 1.8rem; margin: 4px 0; }
        .stat-info p { font-size: 0.8rem; color: var(--text-muted); }

        /* Content Grid (MASTER DESKTOP FIX) */
        .content-grid { 
            display: grid; 
            grid-template-columns: 1fr 1.6fr 1fr; /* Kiri Kanan Sama, Tengah Lebih Luas */
            gap: 24px; 
            align-items: stretch; /* MENGUNCI 3 KOTAK AGAR TINGGINYA SAMA RATA */
        }
        
        .card { 
            background: var(--white); 
            border-radius: 16px; 
            padding: 20px; 
            box-shadow: var(--card-shadow); 
            display: flex; 
            flex-direction: column; 
            height: 100%; /* Memaksa kartu mengikuti tinggi sejajar */
        }
        
        .card-header { 
            display: flex; justify-content: space-between; align-items: center; 
            margin-bottom: 20px; font-weight: 600; flex-shrink: 0; 
        }
        
        .link-text { color: var(--primary); font-size: 0.85rem; text-decoration: none; cursor: pointer;}

        /* Class Summary & Activity (WITH INTERNAL SCROLL ENGINE) */
        .class-list, .activity-list { 
            display: flex; flex-direction: column; gap: 12px; 
            flex: 1; /* Mengisi sisa ruang ke bawah */
            overflow-y: auto; /* Memunculkan scroll jika data banyak */
            max-height: 380px; /* Batas tinggi maksimal agar rapi */
            padding-right: 5px; /* Jarak untuk scrollbar */
        }
        
        /* Desain Scrollbar Elegan Kustom */
        .activity-list::-webkit-scrollbar { width: 5px; }
        .activity-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
        
        .class-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8fafc; border-radius: 8px; }
        .class-name { font-weight: 600; font-size: 0.9rem; }
        .class-total { font-size: 0.8rem; color: var(--text-muted); }
        .badge-green { background: #e8f5e9; color: #128760; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
        
        /* Scan Section */
        .scan-container { background: var(--primary); color: white; border-radius: 20px; padding: 24px; text-align: center; }
        .scan-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px;}
        .scan-box { background: white; color: var(--text-dark); padding: 20px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
        .scan-img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 16px; }
        .btn { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--primary); color: white; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.95rem; }
        .btn:hover { background: var(--primary-dark); }
        .btn-outline { background: white; color: var(--primary); border: 2px solid var(--primary); }
        .btn-outline:hover { background: var(--primary-light); }
        .tips { background: #fefce8; color: #a16207; padding: 12px; border-radius: 8px; font-size: 0.85rem; margin-top: 20px; text-align: left; display: flex; gap: 8px; align-items: center; }

        .activity-item { display: flex; align-items: center; gap: 12px; animation: slideDown 0.3s ease-out forwards; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .activity-info { flex: 1; }
        .activity-info h4 { font-size: 0.9rem; }
        .activity-info p { font-size: 0.8rem; color: var(--text-muted); }
        .activity-time { font-size: 0.8rem; color: var(--text-muted); margin-right: 8px; }
        .badge-masuk { background: #e8f5e9; color: #128760; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
        .badge-pulang { background: #fff7ed; color: #ea580c; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }

        /* ========================================= */
        /* --- UI/UX FITUR DATA SISWA --- */
        /* ========================================= */
        .school-header { text-align: center; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center;}
        
        .logo-edit-container { position: relative; width: 80px; height: 80px; margin-bottom: 10px; cursor: pointer; border-radius: 12px; transition: 0.3s; }
        .logo-edit-container img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transition: 0.3s; border-radius: 12px; background: white;}
        .logo-edit-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); color: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; opacity: 0; transition: 0.3s; font-size: 1.5rem; }
        .logo-edit-container:hover img { transform: scale(1.05); }
        .logo-edit-container:hover .logo-edit-overlay { opacity: 1; }
        
        .school-header h2 { color: var(--primary-dark); font-size: 1.8rem; letter-spacing: 0.5px; margin-top: 5px;}
        .school-header p { color: var(--text-muted); }

        .label-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .btn-link { background: none; border: none; color: var(--primary); font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.2s; }
        .btn-link:hover { color: var(--primary-dark); text-decoration: underline; }

        .form-container { background: var(--white); border-radius: 20px; padding: 30px; box-shadow: var(--card-shadow); max-width: 900px; margin: 0 auto; }
        .form-title { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-light); display: flex; align-items: center; gap: 10px;}
        .form-grid { display: grid; grid-template-columns: 300px 1fr; gap: 30px; }
        
       .photo-section { display: flex; flex-direction: column; gap: 15px; align-items: center; }
        .photo-frame { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; border: 2px dashed var(--border-color); border-radius: 16px; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; margin: 0 auto; }
        .photo-frame img#photoPreview { width: 100%; height: 100%; object-fit: cover; display: none; z-index: 2; position: absolute; }
        .photo-frame video#cameraFeed { width: 100%; height: 100%; object-fit: cover; display: none; z-index: 1; position: absolute; }
        .photo-placeholder { text-align: center; color: var(--text-muted); z-index: 0; }
        .photo-placeholder i { font-size: 3rem; margin-bottom: 10px; color: var(--border-color); }
        .camera-controls { display: flex; gap: 10px; }
        
        .input-group { margin-bottom: 15px; }
        .input-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
        .input-group input, .input-group select, .input-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; transition: 0.3s; background: #fcfcfc; }
        .input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(18, 135, 96, 0.1); background: white;}
        .input-group textarea { resize: vertical; min-height: 80px; }
        .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

        .barcode-result { margin-top: 30px; background: var(--bg-color); padding: 20px; border-radius: 12px; text-align: center; border: 1px solid var(--border-color); display: none; animation: fadeIn 0.5s; }
        .barcode-result h3 { color: var(--primary-dark); margin-bottom: 10px; font-size: 1.1rem; }
        .barcode-result svg { max-width: 100%; background: white; padding: 10px; border-radius: 8px; box-shadow: var(--card-shadow); }

        /* ========================================= */
        /* --- UI/UX FITUR LAPORAN & PENGATURAN --- */
        /* ========================================= */
        .filter-bar { background: var(--white); padding: 16px 20px; border-radius: 12px; box-shadow: var(--card-shadow); display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;}
        .filter-group { display: flex; gap: 10px; align-items: center; }
        .filter-group select, .filter-group input { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; outline: none; }
        
        .chart-container { background: var(--white); padding: 20px; border-radius: 16px; box-shadow: var(--card-shadow); margin-bottom: 20px; height: 350px; width: 100%;}
        
        .table-responsive { width: 100%; overflow-x: auto; background: var(--white); border-radius: 16px; box-shadow: var(--card-shadow); padding: 20px;}
        .data-table { width: 100%; border-collapse: collapse; min-width: 600px; }
        .data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
        .data-table th { background-color: #f8fafc; font-weight: 600; color: var(--text-dark); }
        .data-table tbody tr:hover { background-color: #f1f5f9; }

        .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
        .setting-card { background: var(--white); padding: 24px; border-radius: 16px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 15px; }
        .setting-header { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;}
        .setting-header i { font-size: 1.5rem; color: var(--primary); }
        .setting-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; flex: 1;}

        .btn-danger { background: var(--danger); }
        .btn-danger:hover { background: #b91c1c; }
        .btn-info { background: var(--info); }
        .btn-info:hover { background: #2563eb; }
        .btn-warning { background: var(--warning); color: white;}
        .btn-warning:hover { background: #d97706; }

        /* FOOTER DIMATIKAN TOTAL AGAR TIDAK MENGHALANGI MENU */
        .footer { display: none !important; margin: 0; padding: 0; }
        
        .mobile-toggle { display: none; font-size: 1.5rem; color: var(--primary-dark); cursor: pointer; }
        #reader { width: 100%; margin-bottom: 10px; display: none; border-radius: 8px; overflow: hidden; border: none; }
        
        /* HACKER FIX: Mencegah Kamera Laptop (Webcam) Terbalik / Efek Cermin */
        #reader video {
            transform: scaleX(1) !important;
            -webkit-transform: scaleX(1) !important;
            object-fit: cover !important;
        }

/* ========================================= */
        /* --- UI/UX FITUR DAFTAR SISWA (BARU) --- */
        /* ========================================= */
        .student-list-container { background: var(--white); border-radius: 20px; padding: 30px; box-shadow: var(--card-shadow); max-width: 900px; margin: 30px auto 0; animation: fadeIn 0.5s; }
        .student-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; border-bottom: 2px solid var(--primary-light); padding-bottom: 15px;}
        .student-stats { display: flex; gap: 15px; }
        .stat-badge { background: var(--primary-light); color: var(--primary-dark); padding: 8px 15px; border-radius: 10px; font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(18, 135, 96, 0.2);}
        .stat-badge span { background: var(--primary); color: white; padding: 2px 8px; border-radius: 6px; }
        
        .student-toolbar { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .search-box { flex: 1; min-width: 200px; position: relative; }
        .search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
        .search-box input { width: 100%; padding: 12px 15px 12px 40px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 0.9rem; outline: none; transition: 0.3s; }
        .search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18, 135, 96, 0.1); }
        .filter-box select { padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 0.9rem; outline: none; min-width: 150px; cursor: pointer; }

        .student-table-wrapper { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border-color); }
        .student-table { width: 100%; border-collapse: collapse; min-width: 700px; }
        .student-table th { background: #f8fafc; padding: 12px 15px; text-align: left; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color); }
        .student-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.9rem;}
        .student-table tbody tr:hover { background: #f1f5f9; }
        .td-profile { display: flex; align-items: center; gap: 10px; }
        .td-profile img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 1px solid #ddd; }
        .td-profile div h5 { margin: 0; font-size: 0.9rem; color: var(--text-dark); }
        .td-profile div p { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
        .btn-action-del { background: #fee2e2; color: #ef4444; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
        .btn-action-del:hover { background: #fca5a5; }

        /* ========================================= */
        /* --- UI/UX FITUR HOLO-SCANNER (BARU) --- */
        /* ========================================= */
        body.flash-green { animation: flashGreen 0.8s ease-out; }
        body.flash-red { animation: flashRed 0.8s ease-out; }
        body.flash-yellow { animation: flashYellow 0.8s ease-out; }
        @keyframes flashGreen { 0% { box-shadow: inset 0 0 150px 20px #22c55e; } 100% { box-shadow: none; } }
        @keyframes flashRed { 0% { box-shadow: inset 0 0 150px 20px #ef4444; } 100% { box-shadow: none; } }
        @keyframes flashYellow { 0% { box-shadow: inset 0 0 150px 20px #eab308; } 100% { box-shadow: none; } }
        .badge-terlambat { background: #fee2e2; color: #b91c1c; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
        .btn-wa { background: #25D366; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 5px; transition: 0.2s;}
        .btn-wa:hover { background: #1da851; transform: scale(1.05); }

/* ========================================= */
        /* --- UI/UX PORTAL WALI & FITUR EDIT --- */
        /* ========================================= */
        .btn-action-edit { background: #e0f2fe; color: #0284c7; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; margin-right: 5px;}
        .btn-action-edit:hover { background: #bae6fd; }
        
        .portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
        .student-card { background: white; border-radius: 16px; padding: 20px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 15px; border: 1px solid var(--border-color); position: relative; overflow: hidden;}
        .student-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: var(--text-muted); }
        .student-card.hadir::before { background: #10b981; }
        .student-card.pulang::before { background: #f59e0b; }
        .student-card.absen::before { background: #ef4444; }
        .sc-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
        .sc-info h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 2px;}
        .sc-info p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px;}
        .sc-status { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
        
        .select-manual { padding: 6px; border-radius: 6px; border: 1px solid #ccc; font-size: 0.85rem; font-weight: 600; cursor: pointer; outline: none; }
        .select-manual option { font-weight: 600; }     

        /* ========================================= */
        /* --- UI/UX FITUR VAULT TABUNGAN (BARU) --- */
        /* ========================================= */
        .vault-container { animation: fadeIn 0.5s ease-in-out; }
        
        /* PIN Screen Security */
        .pin-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 103, 74, 0.85); backdrop-filter: blur(10px); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.4s ease; }
        .pin-overlay.active { opacity: 1; pointer-events: all; }
        .pin-box { background: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 24px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.2); max-width: 350px; width: 90%; transform: scale(0.9); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .pin-overlay.active .pin-box { transform: scale(1); }
        .pin-box.shake { animation: shakeError 0.4s ease-in-out; border: 2px solid var(--danger); }
        @keyframes shakeError { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
        .pin-inputs { display: flex; gap: 10px; justify-content: center; margin: 25px 0; }
        .pin-input { width: 45px; height: 55px; font-size: 24px; text-align: center; border: 2px solid #cbd5e1; border-radius: 12px; background: white; outline: none; transition: 0.2s; font-weight: bold; color: var(--primary-dark); }
        .pin-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(18, 135, 96, 0.15); transform: translateY(-3px); }
        
        /* Black Card Virtual Bank */
        .bank-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: white; border-radius: 20px; padding: 25px; position: relative; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); margin-bottom: 30px; display: flex; flex-direction: column; gap: 20px; border: 1px solid rgba(255,255,255,0.1); }
        .bank-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%); border-radius: 50%; }
        .bc-header { display: flex; justify-content: space-between; align-items: center; z-index: 1; }
        .bc-chip { width: 45px; height: 35px; background: linear-gradient(135deg, #d4af37 0%, #aa7c11 100%); border-radius: 6px; position: relative; overflow: hidden; }
        .bc-chip::after { content: ''; position: absolute; width: 100%; height: 1px; background: rgba(0,0,0,0.3); top: 50%; left: 0; }
        .bc-chip::before { content: ''; position: absolute; height: 100%; width: 1px; background: rgba(0,0,0,0.3); left: 50%; top: 0; }
        .bc-balance { z-index: 1; }
        .bc-balance p { font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
        .bc-balance h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: 1px; }
        .bc-footer { display: flex; justify-content: space-between; align-items: flex-end; z-index: 1; margin-top: 10px; }
        .bc-name { font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; }
        
        /* Transaction Timeline */
        .tx-history { background: white; border-radius: 20px; padding: 25px; box-shadow: var(--card-shadow); }
        .tx-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
        .tx-item:last-child { border-bottom: none; }
        .tx-left { display: flex; align-items: center; gap: 15px; }
        .tx-icon { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .tx-in { background: #e8f5e9; color: #10b981; }
        .tx-out { background: #fee2e2; color: #ef4444; }
        .tx-details h4 { color: var(--text-dark); font-size: 1rem; }
        .tx-details p { color: var(--text-muted); font-size: 0.8rem; }
        .tx-amount { font-weight: 700; font-size: 1.1rem; }
        .txt-in { color: #10b981; }
        .txt-out { color: #ef4444; }

        /* ========================================= */
        /* --- UI/UX FULL-SCREEN PANEL (MASTER UPDATE & SCROLL FIX)--- */
        /* ========================================= */
        .fs-panel { position: fixed; top: 100%; left: 0; width: 100%; height: 100%; height: 100dvh; background: var(--bg-color); z-index: 10000; transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; }
        .fs-panel.open { top: 0; opacity: 1; visibility: visible; }
        
        .fs-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); z-index: 2; flex-shrink: 0; }
        .fs-header-dark { background: var(--primary-dark); color: white; border-bottom: 4px solid var(--primary); }
        .fs-header-purple { background: #4c1d95; color: white; border-bottom: 4px solid #7c3aed; }
        .fs-header-orange { background: #b45309; color: white; border-bottom: 4px solid #f59e0b; }
        .fs-header-red { background: #ef4444; color: white; border-bottom: 4px solid #b91c1c; } /* Warna Mahkamah */
        
        .fs-close-btn { background: rgba(255,255,255,0.2); border: none; color: white; font-size: 1.2rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
        .fs-close-btn:hover { background: #ef4444; transform: rotate(90deg); }
        
        /* HACKER FIX: Tambah padding-bottom ekstra agar scroll di HP tidak mentok tertutup Navigasi Bawah */
        .fs-content { padding: 30px; padding-bottom: 100px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 20px; background-image: linear-gradient(to bottom, #d8f1f0, #f0f7f4 30%); overscroll-behavior-y: contain; }
        .fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-items: start; }
        
        .fs-card { background: white; padding: 25px; border-radius: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); }
        .fs-card h3 { font-size: 1.1rem; color: var(--text-dark); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--primary-light); padding-bottom: 12px;}
        
        .status-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .btn-status { padding: 15px; border-radius: 12px; border: 2px solid #e2e8f0; background: #f8fafc; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.95rem; color: var(--text-muted);}
        .btn-status.hadir:hover, .btn-status.hadir.active { background: #ecfdf5; border-color: #10b981; color: #047857; box-shadow: 0 4px 10px rgba(16,185,129,0.2); }
        .btn-status.sakit:hover, .btn-status.sakit.active { background: #f0f9ff; border-color: #0ea5e9; color: #0369a1; box-shadow: 0 4px 10px rgba(14,165,233,0.2); }
        .btn-status.izin:hover, .btn-status.izin.active { background: #fffbeb; border-color: #f59e0b; color: #b45309; box-shadow: 0 4px 10px rgba(245,158,11,0.2); }
        .btn-status.alpha:hover, .btn-status.alpha.active { background: #fef2f2; border-color: #ef4444; color: #b91c1c; box-shadow: 0 4px 10px rgba(239,68,68,0.2); }

        .mini-tx-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
        .mini-tx-table th, .mini-tx-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
        .mini-tx-table th { background: #f1f5f9; color: var(--text-muted); font-weight: 700; }
        .btn-mini-del { color: #ef4444; background: #fee2e2; border: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: 0.2s;}
        .btn-mini-del:hover { background: #fca5a5; }
        .btn-mini-edit { color: #3b82f6; background: #dbeafe; border: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: 0.2s; margin-right: 5px;}
        .btn-mini-edit:hover { background: #bfdbfe; }
        
        /* Tambahan CSS Manajemen Produk (Edit/Delete Overlay) */
        .product-card .prod-actions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: 0.3s; z-index: 10; border-radius: 12px; }
        .product-card:hover .prod-actions { opacity: 1; }
        .btn-prod-action { border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; color: white; }
        .btn-prod-edit { background: #3b82f6; } .btn-prod-edit:hover { background: #2563eb; transform: scale(1.1); }
        .btn-prod-del { background: #ef4444; } .btn-prod-del:hover { background: #dc2626; transform: scale(1.1); }
        
        @media (max-width: 768px) {
            .fs-header { padding: 15px 20px; }
            .fs-content { padding: 20px 15px; }
            .fs-grid { grid-template-columns: 1fr; }
        }

       /* ========================================= */
        /* --- UI/UX PRESTASI SISWA (TEMA HIJAU) --- */
        /* ========================================= */
        .prestasi-container { 
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); 
            color: white; border-radius: 20px; padding: 25px; text-align: center; 
            box-shadow: 0 10px 25px -5px rgba(15, 103, 74, 0.4); border: 1px solid rgba(255,255,255,0.2); 
            position: relative; overflow: hidden; 
            display: flex; flex-direction: column; height: 100%; justify-content: space-between; 
        }
        .prestasi-container::before { content: ''; position: absolute; top: -50px; left: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); border-radius: 50%; }
        
        /* --- KODE CSS PRESTASI TERBARU (DYNAMIC GRID & CLICKABLE) --- */
        .prestasi-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Engine Grid Otomatis */
            gap: 15px; 
            margin-top: 20px; /* FIX: Menarik kolom ke atas mendekati judul */
            z-index: 2; 
            position: relative; 
        }
        
        .prestasi-card { 
            background: #ffffff; border: 1px solid var(--border-color); border-radius: 16px; 
            padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; 
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; 
            overflow: hidden; 
            cursor: pointer; /* FIX UI: Ubah kursor jadi tangan agar admin tahu ini bisa diklik */
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        /* Tambahan UI Badge Edit Khusus Admin */
        .badge-edit-prestasi {
            position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); color: white;
            font-size: 0.65rem; padding: 4px 8px; border-radius: 6px; z-index: 5; opacity: 0; transition: 0.3s;
        }
        .prestasi-card:hover .badge-edit-prestasi { opacity: 1; }
        /* ----------------------------------------------------------- */
        .prestasi-card:hover { transform: translateY(-8px); box-shadow: 0 12px 20px -8px rgba(18, 135, 96, 0.4); border-color: var(--primary);}
        
        .medal-icon { position: absolute; top: -10px; right: -10px; font-size: 5rem; color: var(--primary-light); opacity: 0.5; transform: rotate(15deg); transition: 0.4s; z-index: 0; }
        .prestasi-card:hover .medal-icon { transform: rotate(0deg) scale(1.1); color: #fef08a; opacity: 0.8;}
        
        .prestasi-img { 
            width: 75px; height: 75px; /* Dipersempit agar elegan dan proporsional */
            border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-light); 
            padding: 2px; background: white; margin-bottom: 10px; z-index: 1; transition: 0.3s;
        }
        .prestasi-card:hover .prestasi-img { border-color: var(--primary); transform: scale(1.05);}
        
        .prestasi-card h3 { 
            color: var(--text-dark); font-size: 0.95rem; margin-bottom: 4px; z-index: 1; 
            font-weight: 800; letter-spacing: 0.5px; 
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; /* Anti teks tumpah */
        }
        
        .prestasi-card p { 
            color: var(--primary-dark); font-size: 0.75rem; font-weight: 700; 
            display: flex; align-items: center; justify-content: center; gap: 4px; 
            z-index: 1; text-align: center; line-height: 1.3; 
            background: var(--primary-light); padding: 4px 8px; border-radius: 8px; width: 100%;
        }

          /* --- RESPONSIVE --- */
        @media (max-width: 1200px) { 
            .content-grid { grid-template-columns: 1fr; } 
            .scan-container { order: -1; } 
        }
        @media (max-width: 992px) { 
            .stats-grid { grid-template-columns: repeat(2, 1fr); } 
            .header { flex-direction: column; gap: 20px; } 
            .header-controls { flex-wrap: wrap; } 
            .form-grid { grid-template-columns: 1fr; } 
        }
        @media (max-width: 768px) { 
            .sidebar { transform: translateX(-100%); } 
            .sidebar.show { transform: translateX(0); } 
            .main-content { margin-left: 0; width: 100%; padding: 20px; } 
            .mobile-toggle { display: block; margin-bottom: 20px; } 
            .scan-methods { grid-template-columns: 1fr; } 
            .prestasi-grid { grid-template-columns: 1fr; } 
            .stats-grid { grid-template-columns: 1fr; } 
            .fullscreen-btn { display: none; } 
            .row-2 { grid-template-columns: 1fr; } 
            .filter-bar { flex-direction: column; align-items: stretch;} 
            .filter-group { flex-wrap: wrap;} 

            /* FIX MASTER: Merapikan Kolom Pencarian dan Filter Kelas (Dropdown) Khusus di Layar HP */
            .student-toolbar { 
                flex-direction: column !important; /* Memaksa kotak pencarian dan dropdown bersusun atas-bawah */
                gap: 12px; 
            }
            .search-box { 
                width: 100%; 
            }
            .filter-box, .filter-box select { 
                width: 100%; /* Memastikan lebar dropdown mengikuti layar agar rapi */
                max-width: 100%; 
            }
            .student-stats { 
                flex-direction: column; /* Merapikan Badge Total Siswa jika di layar HP kecil */
                width: 100%; 
                gap: 8px; 
            }
            .stat-badge { 
                justify-content: space-between; 
            }
        }

        /* ========================================= */
        /* --- UI/UX LOGIN OVERLAY (RESPONSIF) --- */
        /* ========================================= */
        #login-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            z-index: 10000; display: flex; flex-direction: column;
            justify-content: center; align-items: center; padding: 20px;
            overflow: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;
            visibility: visible; opacity: 1;
        }

        #auth-loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: fadeIn 0.5s; }
        .loading-logo { width: 120px; margin-bottom: 20px; animation: bounce-slow 2s infinite ease-in-out; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2)); }
        .loading-text { color: white; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; }

        .login-box {
            background: #ffffff; width: 100%; max-width: 400px;
            padding: 40px 30px; text-align: left;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border-radius: 20px; display: none;
            flex-direction: column; justify-content: center;
            animation: fadeIn 0.5s; position: relative;
        }

        .login-illustration { width: 100%; max-width: 180px; height: auto; display: block; margin: 0 auto 15px auto; animation: bounce-slow 3s infinite ease-in-out; }
        @keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        
        .login-header-text { color: var(--primary-dark); font-size: 1.6rem; font-weight: 700; margin-bottom: 25px; margin-top: 0; text-align: center; line-height: 1.2; }
        .auth-label { color: #333; font-size: 0.85rem; margin-bottom: 5px; display: block; font-weight: 600; }
        .auth-label::after { content: " *"; color: #ef4444; }

        .auth-input {
            width: 100%; padding: 14px; margin-bottom: 15px; background: #f8fafc;
            border: 1px solid #cbd5e1; color: #333; border-radius: 10px; font-size: 0.95rem; transition: all 0.3s;
        }
        .auth-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(18, 135, 96, 0.15); background: white;}
        .password-wrapper { position: relative; width: 100%; margin-bottom: 2px; }
        .password-wrapper input { margin-bottom: 0; padding-right: 40px; }
        .password-toggle-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #64748b; cursor: pointer; z-index: 5; font-size: 1.1rem;}
        
        .auth-btn { width: 100%; padding: 14px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 5px; margin-top: 25px; transition: 0.3s;}
        .btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(18, 135, 96, 0.3); }
        .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
        .btn-primary:active { transform: scale(0.98); }
        
        .auth-error { color: #ef4444; font-size: 0.85rem; margin-bottom: 15px; display: none; background: #fee2e2; padding: 10px; border-radius: 8px; text-align: center; border: 1px solid #fca5a5; font-weight:500;}
        
       .toggle-auth-link { font-size: 0.9rem; color: #64748b; cursor: pointer; margin-top: 20px; display: block; text-align: center; font-weight: 500; }
        .toggle-auth-link span { color: var(--primary); font-weight: 700; }
        .toggle-auth-link:hover span { text-decoration: underline; }
        .forgot-pass-link { font-size: 0.85rem; color: var(--primary); cursor: pointer; margin-top: 10px; margin-bottom: 5px; display: block; text-align: right; font-weight: 600; }
        .forgot-pass-link:hover { text-decoration: underline; }

        /* Sembunyikan Body Utama Saat Belum Login */
        body.auth-locked .sidebar, body.auth-locked .main-content { display: none !important; }

        /* ========================================= */
        /* --- CSS ROLE ACCESS (HAK AKSES) --- */
        /* ========================================= */
        /* Jika body memiliki class 'role-wali', sembunyikan semua elemen dengan class 'admin-only' */
        body.role-wali .admin-only { display: none !important; }

 /* ========================================= */
        /* --- UI/UX QALBU MATRIX (SHOLAT ENGINE) --- */
        /* ========================================= */
        .sholat-card { background: white; border-radius: 16px; padding: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 15px; position: relative; overflow: hidden; }
        .sholat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #0ea5e9, #10b981); }
        .sholat-header { display: flex; align-items: center; gap: 15px; border-bottom: 1px dashed var(--border-color); padding-bottom: 15px; }
        .sholat-header img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-light); }
        
        /* MASTER UI/UX: PRAYER PILLS ELASTIS (AUTO-WRAP HACK) */
        .prayer-pills { 
            display: flex; 
            flex-wrap: wrap; /* HACKER FIX: Mengizinkan kotak turun ke bawah jika penuh */
            justify-content: center; 
            gap: 8px; 
            margin-top: 15px;
        }
        .pill-btn { 
            flex: 0 0 22%; /* KUNCI GRID: Mengatur lebar proporsional (4 kotak sebaris) */
            min-width: 65px; /* Batas minimum agar tidak terlalu kecil di HP */
            padding: 10px 4px; 
            border-radius: 12px; 
            border: 1px solid #e2e8f0; 
            background: #f8fafc; 
            color: var(--text-muted); 
            text-align: center; 
            cursor: pointer; 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center;
            gap: 2px; 
            position: relative;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .pill-btn:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.05); transform: translateY(-2px); }
        .pill-btn i { font-size: 1.4rem; margin-bottom: 4px; }
        
        /* Memaksa teks agar tetap 1 baris, jika panjang akan jadi titik-titik (...) */
        .pill-btn span:nth-of-type(1) { font-size: 0.75rem; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
        .pill-btn span:nth-of-type(2) { font-size: 0.55rem; font-weight: 600; font-family: monospace; opacity: 0.8; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

        /* State: Terkunci (Belum masuk waktu) */
        .pill-btn.locked { background: #f1f5f9; color: #cbd5e1; cursor: not-allowed; border-color: #e2e8f0; }
        .pill-btn.locked::after { content: '\f023'; font-family: 'FontAwesome'; position: absolute; top: -6px; right: -6px; background: #94a3b8; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        
        /* State: Sudah Masuk Waktu (Siap ditekan) */
        .pill-btn.ready { background: #e0f2fe; border-color: #0ea5e9; color: #0ea5e9; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2); animation: pulseBlue 2s infinite; }
        .pill-btn.ready:hover { transform: translateY(-3px); }
        @keyframes pulseBlue { 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } }

        /* State: Selesai Sholat (Hijau) */
        .pill-btn.done { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-color: #059669; box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.4); }
        
        /* State: Terlewat / Tidak Sholat (Merah - CRIMSON PROTOCOL) */
        .pill-btn.missed { background: #fee2e2; border-color: #ef4444; color: #ef4444; cursor: not-allowed; }
        .pill-btn.missed::after { content: '\f00d'; font-family: 'FontAwesome'; position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

        /* UI Tombol Rapor PDF Sholat */
        .btn-pdf-sholat { width: 100%; margin-top: 15px; background: #f8fafc; color: #334155; border: 1px solid #cbd5e1; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .btn-pdf-sholat:hover { background: #ef4444; color: white; border-color: #ef4444; }
        
      /* Responsif HP Khusus Mutaba'ah Sholat */
        @media (max-width: 600px) { 
            .prayer-pills { flex-wrap: wrap; justify-content: center; } 
            .pill-btn { flex: 0 0 31%; min-width: 80px; padding: 10px 4px; } 
        }
        
        /* OMNI-SCANNER UI */
        .scan-mode-wrapper { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; background: rgba(255,255,255,0.1); padding: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); flex-wrap: wrap; }
        .btn-scan-mode { flex: 1; min-width: 150px; padding: 15px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; border: none; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .btn-scan-mode.mode-utama.active { background: #f59e0b; color: white; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); transform: translateY(-3px);}
        .btn-scan-mode.mode-sholat.active { background: #0ea5e9; color: white; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4); transform: translateY(-3px);}
        /* INJEKSI CSS HAFALAN & BELAJAR */
        .btn-scan-mode.mode-hafalan.active { background: #059669; color: white; box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4); transform: translateY(-3px); border: 1px solid #34d399;}
        .btn-scan-mode.mode-belajar.active { background: #7c3aed; color: white; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); transform: translateY(-3px); border: 1px solid #a78bfa;}
        .btn-scan-mode.inactive { background: white; color: var(--text-muted); border: 2px solid transparent; }
        .btn-scan-mode.inactive:hover { border: 2px solid var(--border-color); }
        
        /* SHOLAT DASHBOARD ONLY (NOCLICK) */
        .pill-btn.no-click { cursor: default; pointer-events: none; }

        /* ========================================= */
        /* INJEKSI: UI/UX QUANTUM-DROP FOTO GURU     */
        /* ========================================= */
        .guru-photo-upload { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding: 15px; background: #f5f3ff; border: 2px dashed #a78bfa; border-radius: 16px; transition: all 0.3s ease; }
        .guru-photo-upload:hover { border-color: #7c3aed; background: #ede9fe; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15); }
        .guru-preview-zone { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #8b5cf6; background: white; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .guru-preview-zone img { width: 100%; height: 100%; object-fit: cover; display: none; z-index: 2; }
        .guru-preview-zone i { font-size: 2.5rem; color: #c4b5fd; z-index: 1; }
        .guru-upload-actions { flex: 1; }
        .guru-upload-actions h4 { color: #5b21b6; font-size: 0.95rem; margin-bottom: 5px; font-weight: 700; }
        .guru-upload-actions p { color: #7c3aed; font-size: 0.75rem; margin-bottom: 10px; opacity: 0.8; }
        .btn-upload-guru { background: #8b5cf6; color: white; padding: 8px 15px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; border: none; }
        .btn-upload-guru:hover { background: #7c3aed; transform: translateY(-2px); }

        /* ========================================= */
        /* INJEKSI: HOLOGRAPHIC TEACHER PODIUM (KBM) */
        /* ========================================= */
        .kbm-teacher-podium { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%); border-radius: 20px; padding: 25px; color: white; display: flex; align-items: center; gap: 25px; margin-bottom: 30px; box-shadow: 0 15px 30px -10px rgba(124, 58, 237, 0.5); position: relative; overflow: hidden; border: 2px solid #a78bfa; animation: fadeIn 0.6s ease-out; grid-column: 1 / -1; }
        .kbm-teacher-podium::after { content: ''; position: absolute; right: -20px; bottom: -50px; font-family: 'FontAwesome'; content: '\f51c'; font-size: 10rem; opacity: 0.1; transform: rotate(-15deg); }
        .kbm-teacher-img { width: 130px; height: 130px; border-radius: 16px; object-fit: cover; border: 4px solid #ddd6fe; background: white; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 2; flex-shrink: 0; }
        .kbm-teacher-info { z-index: 2; }
        .kbm-teacher-info h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 5px; letter-spacing: 0.5px; }
        .kbm-badge-mapel { background: #fef08a; color: #854d0e; padding: 6px 15px; border-radius: 8px; font-size: 0.9rem; font-weight: 800; display: inline-block; margin-bottom: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .kbm-materi-box { background: rgba(255, 255, 255, 0.15); padding: 12px 18px; border-radius: 12px; border-left: 4px solid #fef08a; backdrop-filter: blur(5px); }
        .kbm-materi-box p { font-size: 0.85rem; color: #e2e8f0; margin-bottom: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
        .kbm-materi-box h4 { font-size: 1.1rem; color: white; font-weight: 700; line-height: 1.4; }

        @media (max-width: 600px) {
            .kbm-teacher-podium { flex-direction: column; text-align: center; padding: 20px; }
            .kbm-materi-box { text-align: left; }
        }

        /* ========================================= */
        /* INJEKSI MASTER: QUANTUM POS NEXUS (MARKET)*/
        /* ========================================= */
        .pos-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
        
        /* Katalog Produk */
        .pos-products { background: white; border-radius: 16px; padding: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); height: 75vh; overflow-y: auto; }
        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; margin-top: 15px; }
        .product-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
        .product-card:hover { border-color: var(--primary); box-shadow: 0 10px 15px -3px rgba(18, 135, 96, 0.2); transform: translateY(-3px); }
        .product-img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; background:#f8fafc; }
        .product-price { color: #f59e0b; font-weight: 800; font-size: 0.95rem; }
        .product-name { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; line-height: 1.2; height: 30px; overflow: hidden; }
        .product-stock { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; font-size: 0.65rem; padding: 2px 6px; border-radius: 6px; font-weight: bold; }
        
        /* Mesin Kasir / Struk */
        .pos-cart { background: #f8fafc; border-radius: 16px; padding: 20px; box-shadow: var(--card-shadow); border: 2px solid var(--primary-light); display: flex; flex-direction: column; height: 75vh; }
        .cart-items { flex: 1; overflow-y: auto; margin: 15px 0; border-top: 2px dashed #cbd5e1; border-bottom: 2px dashed #cbd5e1; padding: 10px 0; }
        .cart-item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 8px; }
        .cart-item-info h4 { font-size: 0.85rem; color: var(--text-dark); margin-bottom: 3px; }
        .cart-item-info p { font-size: 0.75rem; color: #f59e0b; font-weight: 700; }
        .cart-controls { display: flex; align-items: center; gap: 8px; }
        .cart-btn { background: #e2e8f0; border: none; width: 25px; height: 25px; border-radius: 6px; cursor: pointer; font-weight: bold; color: var(--text-dark); transition: 0.2s;}
        .cart-btn:hover { background: var(--primary); color: white; }
        .cart-qty { font-size: 0.85rem; font-weight: 700; width: 20px; text-align: center; }
        
        .pos-total-box { background: var(--primary-dark); color: white; padding: 15px; border-radius: 12px; margin-bottom: 15px; }
        .pos-total-box p { font-size: 0.85rem; opacity: 0.8; margin-bottom: 5px; }
        .pos-total-box h2 { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; }
        
        .btn-checkout { background: #10b981; width: 100%; padding: 15px; font-size: 1.1rem; border-radius: 12px; animation: pulseGreen 2s infinite; }
        .btn-checkout:disabled { background: #94a3b8; animation: none; cursor: not-allowed; }
        @keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

        /* Modal Scan Otorisasi Pembayaran */
        .pay-auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s; }
        .pay-auth-overlay.active { opacity: 1; visibility: visible; }
        .pay-auth-box { background: white; padding: 30px; border-radius: 20px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); transform: scale(0.9); transition: 0.3s; border: 4px solid var(--primary); position: relative; overflow: hidden;}
        .pay-auth-overlay.active .pay-auth-box { transform: scale(1); }
        .pay-auth-box::before { content: ''; position: absolute; top: -50px; left: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(16,185,129,0.2) 0%, transparent 70%); border-radius: 50%; animation: pulseRadar 2s infinite; }
        .scanner-beam { width: 100%; height: 4px; background: #ef4444; position: absolute; top: 0; left: 0; box-shadow: 0 0 10px #ef4444; animation: scanBeam 2s linear infinite; z-index: 10; display: none;}
        @keyframes scanBeam { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

       @media (max-width: 992px) { .pos-grid { grid-template-columns: 1fr; } .pos-products, .pos-cart { height: auto; max-height: 60vh; } }
        
        /* =================================================== */
        /* 🛡️ PHANTOM SHIELD: ANTI COPY & SELECTION            */
        /* =================================================== */
        body {
            -webkit-user-select: none; /* Chrome, Safari, Opera */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE / Edge */
            user-select: none; /* Non-prefixed version */
            -webkit-touch-callout: none; /* Mematikan popup tahan-sentuh di HP */
        }
        img { pointer-events: none; } /* Mencegah gambar di drag/didownload */
    

                        @keyframes pulseRadar {
                            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
                            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
                            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
                        }
                        .scan-box.active-sense { border-color: #10b981 !important; background: #f0fdf4 !important; box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3) !important;}
/* ========================================= */
        /* --- UI/UX NEXUS FINANCE (ARUS KAS) ---    */
        /* ========================================= */
        
        .kas-tabs button {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-size: 1.05rem;
            color: var(--text-muted);
        }
        .kas-tabs button.active {
            background: #14b8a6;
            color: white;
            box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
            transform: translateY(-2px);
        }
        .kas-tabs button:hover:not(.active) {
            background: #f0fdfa;
            border-color: #5eead4;
            color: #0f766e;
        }

        #panelKasGlobal, #panelKasSantri {
            animation: fadeIn 0.4s ease-out;
        }

        /* Modifikasi tabel khusus di drawer agar rapi */
        #drawerKasSantri .data-table th { background: #f8fafc; border-bottom: 2px solid #e2e8f0; font-weight: 700;}
        #drawerKasSantri .data-table td { vertical-align: middle; }