:root{--primary:#31a8ff;--primary-hover:#0091ff;--bg-page:#f0f2f5;--bg-card:#fff;--bg-hover:#f8f9fa;--text-main:#2d3436;--text-muted:#636e72;--border-color:#eee;--shadow:0 4px 20px rgba(0,0,0,.05);--transition:all 0.3s ease}[data-theme=dark]{--bg-page:#00182d;--bg-card:#00223d;--bg-hover:#002d52;--text-main:#f5f6f7;--text-muted:#b0bbc5;--border-color:#003661;--shadow:0 4px 20px rgba(0,0,0,.2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-page);color:var(--text-main);min-height:100vh;transition:background-color .3s ease,color .3s ease}.container{max-width:1200px;margin:0 auto;padding:20px}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--bg-page)}.login-box{background:var(--bg-card);padding:40px;border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:400px;border:1px solid var(--border-color);color:var(--text-main)}.form-group{margin-bottom:20px}.form-control{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;background-color:var(--bg-page);color:var(--text-main);transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(49,168,255,.1)}.btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-success{background:#00b894;color:#fff}.btn-danger{background:#ff7675;color:#fff}.btn-warning{background:#fdcb6e;color:#2d3436}.btn-info{background:#31a8ff;color:#fff}.btn-sm{padding:8px 16px;font-size:12px}.dashboard{background:var(--bg-page);min-height:100vh;padding:20px}.header{background:var(--bg-card);padding:20px;border-radius:12px;margin-bottom:25px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);border:1px solid var(--border-color)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:20px;gap:20px;margin-bottom:30px}.card{background:var(--bg-card);padding:24px;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border-color);transition:var(--transition)}.card:hover{transform:translateY(-4px)}.card h3{color:var(--text-muted);font-size:14px;font-weight:600;text-transform:uppercase;margin-bottom:12px;letter-spacing:.5px}.card .number{font-size:28px;font-weight:800;color:var(--text-main)}.table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-card)}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:16px;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-main)}.table th{background:var(--bg-hover);font-weight:700;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.table tr:last-child td{border-bottom:none}.table tr:hover{background:var(--bg-hover)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.status-dot.green{background:#00b894;box-shadow:0 0 8px rgba(0,184,148,.4)}.status-dot.red{background:#ff7675;box-shadow:0 0 8px hsla(0,100%,73%,.4)}.attendance-btns{display:flex;gap:15px;margin:25px 0}.present-btn{flex:2 1;height:60px;background:#00b894;color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:var(--transition)}.present-btn:hover{background:#00a887;transform:translateY(-2px)}.absent-btn{flex:1 1;height:60px;background:#ff7675;color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:var(--transition)}.absent-btn:hover{background:#e86b6b;transform:translateY(-2px)}.profile-pic{width:44px;height:44px;border-radius:50%;background:var(--primary);justify-content:center;color:#fff;font-weight:700}.profile-pic,.user-info{display:flex;align-items:center}.user-info{gap:15px;color:var(--text-main)}@media (max-width:768px){.cards{grid-template-columns:1fr}.header{align-items:flex-start;gap:15px}.attendance-btns,.header{flex-direction:column}.dashboard{padding:10px!important}.cards{grid-template-columns:1fr!important;gap:10px!important}.card{padding:15px!important;margin-bottom:15px!important}.btn{padding:8px 12px!important;font-size:13px!important;margin:3px!important}.table{font-size:12px!important}.table td,.table th{padding:8px 4px!important}.form-control{font-size:14px!important;padding:8px!important}.user-header{gap:10px!important}.user-header,.user-header-info{flex-direction:column!important}.user-header-info{align-items:flex-start!important}.user-header-actions{width:100%!important;justify-content:space-between!important}.stat-card{min-width:100%!important}.nav-tabs{flex-wrap:wrap!important;gap:5px!important}.modal-content{margin:10px!important;max-width:95%!important}.recharts-wrapper{font-size:11px!important}.hide-mobile{display:none!important}.show-mobile{display:block!important}[style*=grid-template-columns]{grid-template-columns:1fr!important}[style*="display: flex"]{flex-direction:column!important}h1{font-size:24px!important}h2{font-size:20px!important}h3{font-size:18px!important}h4{font-size:16px!important}h5{font-size:14px!important}.mb-20{margin-bottom:10px!important}.mt-20{margin-top:10px!important}.p-20{padding:10px!important}.number{font-size:28px!important}.profile-pic{width:30px!important;height:30px!important;font-size:14px!important}.table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}}@media (min-width:768px) and (max-width:1024px){.cards,[style*="grid-template-columns: repeat(auto-fit"]{grid-template-columns:repeat(2,1fr)!important}.dashboard{padding:15px!important}.card{padding:18px!important}}@media (max-width:480px){.btn{padding:6px 10px!important;font-size:12px!important}.card{padding:12px!important}h1{font-size:20px!important}h2{font-size:18px!important}h3{font-size:16px!important}.number{font-size:24px!important}.user-header-actions{flex-direction:column!important}.user-header-actions button{width:100%!important}}@media (max-height:500px) and (orientation:landscape){.user-header{padding:8px!important}.card{margin-bottom:10px!important}}@media print{.btn,.nav-tabs,.user-header-actions{display:none!important}.card{page-break-inside:avoid!important}}