@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-dark:#f0f4ff;--bg-darker:#f8fafc;--text-primary:#0f172a;--text-secondary:#475569;--accent-primary:#8b5cf6;--accent-secondary:#ec4899;--accent-gradient:linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #ec4899 100%);--rainbow-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 25%, #ec4899 50%, #f59e0b 75%, #10b981 100%);--glass-bg:#ffffffd9;--glass-border:#a855f738;--glass-highlight:#ec489959;--glass-shadow:0 10px 30px #6366f11a, 0 4px 12px #ec48990f;--success:#10b981;--warning:#f59e0b;--danger:#f43f5e;--info:#06b6d4}*{box-sizing:border-box;margin:0;padding:0;font-family:Plus Jakarta Sans,Inter,sans-serif}body{background-color:var(--bg-darker);color:var(--text-primary);background-image:radial-gradient(circle at 10% 20%,#6366f129 0%,#0000 40%),radial-gradient(circle at 90% 15%,#ec489929 0%,#0000 40%),radial-gradient(circle at 50% 85%,#06b6d429 0%,#0000 45%),radial-gradient(circle at 85% 85%,#f59e0b24 0%,#0000 40%),radial-gradient(circle at 20% 80%,#10b98124 0%,#0000 40%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:1.5rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,background .3s,box-shadow .3s}.glass-card:hover{background:#fffffff2;border-color:#a855f773;transform:translateY(-4px);box-shadow:0 14px 35px #6366f126,0 6px 16px #ec48991a}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:700}.text-gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.text-gradient-rainbow{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 30%,#d946ef 60%,#06b6d4 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.text-secondary{color:var(--text-secondary)}.app-container{min-height:100vh;display:flex}@media (width<=768px){.app-container{flex-direction:column}}.main-content{flex-direction:column;flex:1;gap:2rem;max-width:100%;padding:2rem;display:flex;overflow-x:hidden}@media (width<=768px){.main-content{gap:1.5rem;padding:1rem}}.input-group{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.input-group label{color:var(--text-secondary);font-size:.875rem;font-weight:600}.glass-input{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffffe6;border-radius:10px;outline:none;padding:.75rem 1rem;font-size:.95rem;transition:all .2s}.glass-input:focus{border-color:var(--accent-primary);background:#fff;box-shadow:0 0 0 3px #a855f740}.glass-input::placeholder{color:#94a3b8}.glass-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;padding-right:2.5rem}.glass-select option{color:var(--text-primary);background-color:#fff}.btn{cursor:pointer;border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 16px #a855f759}.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 24px #a855f780}.btn-primary:active{transform:translateY(1px)}.btn-outline{border:1px solid var(--glass-border);color:var(--text-primary);background:#fffc}.btn-outline:hover{color:var(--accent-primary);background:#a855f71f;border-color:#a855f766}.btn-icon{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;padding:.5rem;transition:all .2s;display:inline-flex}.btn-icon:hover{color:var(--accent-primary);border-color:var(--glass-border);background:#a855f71f}.table-container{background:var(--glass-bg);border:1px solid var(--glass-border);width:100%;box-shadow:var(--glass-shadow);border-radius:16px;overflow-x:auto}.glass-table{border-collapse:collapse;text-align:left;width:100%}.glass-table th{text-transform:uppercase;letter-spacing:.05em;color:#475569;border-bottom:1px solid var(--glass-border);background:linear-gradient(135deg,#6366f11a,#ec48991a);padding:1rem 1.5rem;font-size:.85rem;font-weight:700}.glass-table td{color:var(--text-primary);border-bottom:1px solid #a855f71a;padding:1rem 1.5rem;font-size:.95rem}.glass-table tbody tr{transition:background .2s}.glass-table tbody tr:hover{background:#a855f70f}.badge{letter-spacing:.02em;border-radius:9999px;justify-content:center;align-items:center;padding:.35rem .85rem;font-size:.78rem;font-weight:700;display:inline-flex}.badge-success{color:#047857;background:#10b98129;border:1px solid #10b98159}.badge-warning{color:#b45309;background:#f59e0b29;border:1px solid #f59e0b59}.badge-danger{color:#be123c;background:#f43f5e29;border:1px solid #f43f5e59}.badge-info{color:#0369a1;background:#06b6d429;border:1px solid #06b6d459}.badge-neutral{color:#334155;background:#64748b29;border:1px solid #64748b59}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards fadeIn}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.text-center{text-align:center}.w-full{width:100%}.flex-1{flex:1}@media (width<=768px){.flex-mobile-col{flex-direction:column;align-items:stretch}.flex-mobile-col>*{width:100%}.hide-on-mobile{display:none}.w-full-mobile{width:100%!important}.grid-mobile-2{grid-template-columns:1fr 1fr;gap:.5rem;width:100%;display:grid}.grid-mobile-col-span-2{grid-column:span 2/span 2}}.barcode-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;background:#2d241e8c;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0;overflow-y:auto}.barcode-modal-content{background:#faf6f0;border:1px solid #f9731640;border-radius:16px;width:100%;max-width:850px;max-height:90vh;padding:1.5rem;overflow-y:auto;box-shadow:0 20px 50px #7c2d1226}.scanner-modal-fullscreen{width:100vw;max-width:none;height:100vh;max-height:none;box-shadow:none;background:#0f172a;border:none;border-radius:0;padding:0}.scanner-grid{grid-template-columns:1.5fr 1fr;gap:0;height:100%;display:grid}.scanner-grid>.scanner-left-box{background:#0a0f1a;flex-direction:column;padding:1.25rem;display:flex;overflow-y:auto}.scanner-grid>.scanner-right-history{background:#0f172af2;border-left:1px solid #ffffff1a;padding:1.25rem;overflow-y:auto}@media (width<=768px){.scanner-grid{grid-template-columns:1fr}.scanner-grid>.scanner-right-history{border-top:1px solid #ffffff1a;border-left:none}}.bg-glass{background:#ffffffbf;border:1px solid #f9731626}.bg-success-glass{color:#15803d;background:#22c55e1f;border:1px solid #22c55e4d}.bg-danger-glass{color:#b91c1c;background:#ef44441f;border:1px solid #ef44444d}.bg-warning-glass{color:#b45309;background:#f59e0b26;border:1px solid #f59e0b66}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;display:grid}.student-id-card{color:#0f172a;page-break-inside:avoid;background:#fff;border:2px solid #e2e8f0;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:220px;padding:1rem;display:flex;box-shadow:0 4px 12px #00000026}.student-id-card .card-header{text-align:center;border-bottom:2px dashed #cbd5e1;margin-bottom:.75rem;padding-bottom:.5rem}.student-id-card .school-title{color:#3b82f6;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:700}.student-id-card .card-subtitle{color:#64748b;letter-spacing:1px;font-size:.7rem;font-weight:600}.student-id-card .student-name{color:#0f172a;margin-bottom:.3rem;font-size:1.1rem;font-weight:700}.student-id-card .student-details{color:#475569;gap:1rem;margin-bottom:.75rem;font-size:.8rem;display:flex}.student-id-card .codes-wrapper{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem;display:flex}.student-id-card .qr-box{background:#fff;border-radius:4px;flex-shrink:0;padding:4px}.student-id-card .barcode-box{flex-grow:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.student-id-card .card-footer{text-align:center;color:#94a3b8;margin-top:.5rem;font-size:.65rem}@page{size:A4 landscape;margin:8mm}@media print{html,body{background:#fff!important;width:100%!important;height:auto!important}body *{visibility:hidden!important}.barcode-modal-overlay,.barcode-modal-overlay *{visibility:visible!important}.no-print{display:none!important}.barcode-modal-overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:0!important;background:#fff!important;width:100%!important;height:auto!important;min-height:auto!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;left:0!important;overflow:visible!important;transform:none!important}.barcode-modal-content{box-shadow:none!important;background:#fff!important;border:none!important;max-width:100%!important;max-height:none!important;padding:0!important;overflow:visible!important;transform:none!important}.printable-cards-container{width:100%!important}.cards-grid{grid-template-columns:repeat(3,1fr)!important;gap:4mm!important;padding:0!important;display:grid!important}.student-id-card{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important;border:1px solid #000!important;border-radius:0!important;flex-direction:column!important;justify-content:space-between!important;min-height:0!important;padding:3mm!important;display:flex!important}.student-id-card .card-header{text-align:center!important;border-bottom:1px dashed #000!important;margin-bottom:1.5mm!important;padding-bottom:1.5mm!important}.student-id-card .school-title{text-transform:uppercase!important;letter-spacing:.5px!important;font-size:7pt!important;font-weight:700!important}.student-id-card .card-subtitle{letter-spacing:.5px!important;font-size:5.5pt!important;font-weight:600!important}.student-id-card .student-name{margin-bottom:1mm!important;font-size:9pt!important;font-weight:700!important}.student-id-card .student-details{flex-wrap:wrap!important;gap:.4rem!important;margin-bottom:.5rem!important;font-size:7pt!important;display:flex!important}.student-id-card .codes-wrapper{background:#f8f8f8!important;border:1px solid #bbb!important;border-radius:2px!important;justify-content:space-between!important;align-items:center!important;gap:.3rem!important;padding:1.5mm!important;display:flex!important}.student-id-card .qr-box{background:#fff!important;flex-shrink:0!important;padding:1px!important}.student-id-card .barcode-box{flex-grow:1!important;justify-content:center!important;align-items:center!important;display:flex!important;overflow:hidden!important}.student-id-card .barcode-box svg{max-width:100%!important;height:auto!important}.student-id-card .card-footer{color:#666!important;text-align:center!important;margin-top:.3rem!important;font-size:5pt!important}}.sidebar{flex-direction:column;gap:2rem;width:280px;min-height:calc(100vh - 2rem);margin:1rem;padding:1.5rem;display:flex;position:sticky;top:1rem}@media (width<=768px){.sidebar{gap:1rem;width:auto;min-height:auto;margin:1rem;padding:1rem;position:static}}.sidebar-header{text-align:center;border-bottom:1px solid var(--glass-border);padding-bottom:1rem}.sidebar-nav{flex-direction:column;gap:.5rem;display:flex}@media (width<=768px){.sidebar-nav{flex-flow:wrap;justify-content:center}}.sidebar-link{color:var(--text-secondary);border:1px solid #0000;border-radius:12px;align-items:center;gap:1rem;padding:1rem;font-weight:500;text-decoration:none;transition:all .3s;display:flex}@media (width<=768px){.sidebar-link{gap:.5rem;padding:.75rem;font-size:.85rem}.sidebar-link span{display:none}}.sidebar-link:hover{color:#7c3aed;background:linear-gradient(135deg,#6366f11f,#ec48991f);border-color:#a855f740;transform:translate(3px)}.sidebar-link.active{background:var(--accent-gradient);color:#fff;border-color:#0000;font-weight:600;box-shadow:0 6px 20px #a855f766}