*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#2c3e50;background:#f5f6fa;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}#app{height:100%;display:flex;overflow:hidden}#app.login-page{background:#0f2444;justify-content:center;align-items:center;display:flex}.sidebar{color:#fff;background:#0f2444;flex-direction:column;width:240px;min-width:240px;padding:20px 0;display:flex;overflow-y:auto}.sidebar .brand{border-bottom:1px solid #ffffff1a;align-items:center;gap:10px;padding:0 20px 20px;font-size:20px;font-weight:700;display:flex}.sidebar .user-box{border-bottom:1px solid #ffffff1a;padding:16px 20px}.sidebar .user-name{margin-bottom:4px;font-size:14px;font-weight:600}.sidebar .user-role{opacity:.7;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.sidebar .user-role.admin{color:#4fc3f7}.sidebar .user-role.master{color:#81c784}.sidebar nav{flex:1;padding:12px 0}.sidebar nav a{color:#ffffffb3;cursor:pointer;align-items:center;gap:10px;padding:12px 20px;font-size:14px;text-decoration:none;transition:all .15s;display:flex}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:#ffffff1a}.sidebar .apk-link{color:#ffffffb3;cursor:pointer;border-top:1px solid #ffffff1a;align-items:center;gap:10px;margin-top:auto;padding:12px 20px;font-size:14px;text-decoration:none;transition:all .15s;display:flex}.sidebar .apk-link:hover{color:#fff;background:#152a47}.sidebar .apk-link svg{fill:currentColor;flex-shrink:0;width:20px;height:20px}.sidebar .logout{color:#e57373;cursor:pointer;border-top:1px solid #ffffff1a;align-items:center;gap:10px;padding:12px 20px;font-size:14px;transition:all .15s;display:flex}.sidebar .logout:hover{background:#e5737326}.main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.topbar{background:#fff;border-bottom:1px solid #e0e0e0;align-items:center;gap:12px;padding:12px 24px;display:flex}.topbar h1{flex:1;font-size:18px;font-weight:600}.menu-btn{color:#2c3e50;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px;display:none}.menu-btn:hover{background:#f0f0f0}.content{flex:1;padding:24px;overflow-y:auto}.overlay{display:none}.login-page{background:#0f2444;justify-content:center;align-items:center;height:100%;display:flex}.login-box{text-align:center;background:#fff;border-radius:12px;width:340px;padding:40px;box-shadow:0 8px 32px #0000004d}.login-box .login-icon{color:#0f2444;margin-bottom:16px}.login-box .login-icon svg{fill:currentColor;width:48px;height:48px}.login-box h1{color:#0f2444;margin-bottom:8px;font-size:20px;font-weight:700}.login-box p{color:#7f8c8d;margin-bottom:20px;font-size:14px}.login-box input{border:2px solid #e0e0e0;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-size:16px;transition:all .15s}.login-box input:focus{border-color:#1e5bb8}input,select,button{font-family:inherit;font-size:inherit}button{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .15s;display:inline-flex}button.success{color:#fff;background:#27ae60}button.success:hover{background:#219a52}button.secondary{color:#2c3e50;background:#ecf0f1}button.secondary:hover{background:#dfe4e6}button svg{fill:currentColor;flex-shrink:0;width:16px;height:16px}.search-bar{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.search-wrap{flex:1;min-width:200px;position:relative}.search-wrap .search-icon{color:#bdc3c7;display:flex;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-wrap input{border:2px solid #e0e0e0;border-radius:8px;outline:none;width:100%;padding:10px 12px 10px 36px;font-size:14px;transition:all .15s}.search-wrap input:focus{border-color:#1e5bb8}.search-bar select{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;outline:none;min-width:140px;padding:10px 12px;font-size:14px}.search-bar select:focus{border-color:#1e5bb8}.stats{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.stat-card{background:#fff;border-radius:10px;flex:1;min-width:120px;padding:16px 20px;box-shadow:0 1px 4px #00000014}.stat-card .value{font-size:28px;font-weight:700}.stat-card .label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-size:12px}.stat-card.present .value{color:#27ae60}.stat-card.absent .value{color:#e74c3c}.table-wrap{background:#fff;border-radius:10px;overflow:auto;box-shadow:0 1px 4px #00000014}.table-wrap table{border-collapse:collapse;width:100%}.table-wrap th{text-align:left;text-transform:uppercase;color:#7f8c8d;white-space:nowrap;border-bottom:2px solid #ecf0f1;padding:12px 16px;font-size:12px}.table-wrap td{border-bottom:1px solid #ecf0f1;padding:10px 16px;font-size:14px}.table-wrap tr:last-child td{border-bottom:none}.table-wrap tr{cursor:pointer;transition:all .1s}.table-wrap tr:hover{background:#f8f9fa}.row-num{color:#95a5a6;font-size:12px}.tag{border-radius:20px;padding:2px 10px;font-size:12px;font-weight:500;display:inline-block}.tag.target{color:#1565c0;background:#e3f2fd}.tag.not-target{color:#9e9e9e;background:#f5f5f5}.tag.employed{color:#2e7d32;background:#e8f5e9}.tag.not-employed{color:#9e9e9e;background:#f5f5f5}.tag.expelled{color:#c62828;background:#ffebee}.card{background:#fff;border-radius:10px;margin-bottom:20px;padding:24px;box-shadow:0 1px 4px #00000014}.card h2{align-items:center;gap:8px;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.card h3{margin-bottom:16px;font-size:16px;font-weight:600}.field{flex-direction:column;gap:4px;margin-bottom:14px;display:flex}.field label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.field input[type=text],.field input[type=number],.field input[type=date]{border:2px solid #e0e0e0;border-radius:6px;outline:none;width:100%;padding:8px 12px;font-size:14px}.field input:focus{border-color:#1e5bb8}.field .value{color:#2c3e50;padding:8px 0;font-size:14px}.checkbox-wrap{align-items:center;gap:8px;display:flex}.checkbox-wrap input[type=checkbox]{cursor:pointer;width:18px;height:18px}.checkbox-label{font-size:14px}.actions{gap:10px;margin-top:20px;display:flex}.att-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .15s;display:inline-flex}.att-btn.present{color:#2e7d32;background:#e8f5e9}.att-btn.absent{color:#d84315;background:#fbe9e7}.att-btn:hover{filter:brightness(.95)}.group-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.group-card{text-align:center;cursor:pointer;background:#fff;border-radius:10px;padding:24px 16px;transition:all .15s;box-shadow:0 1px 4px #00000014}.group-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.group-card .group-icon{color:#1e5bb8;margin-bottom:8px}.group-card .group-icon svg{width:32px;height:32px}.group-card .name{margin-bottom:4px;font-size:16px;font-weight:600}.group-card .count{color:#7f8c8d;font-size:13px}.history-list{flex-direction:column;gap:4px;display:flex}.history-item{background:#f8f9fa;border-radius:6px;justify-content:space-between;padding:8px 12px;font-size:14px;display:flex}.history-date{font-weight:500}.history-status.present{color:#27ae60}.history-status.absent{color:#e74c3c}.export-section{border-bottom:1px solid #ecf0f1;flex-direction:column;gap:12px;margin-bottom:24px;padding-bottom:24px;display:flex}.export-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.export-section h3{color:#0f2444;margin-bottom:0;font-size:15px;font-weight:600}.export-icon{color:#1e5bb8;margin-bottom:0}.export-desc{color:#7f8c8d;margin-bottom:0;font-size:13px}.export-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.export-row label{color:#2c3e50;font-size:13px;font-weight:500}.export-row select,.export-row input[type=date],.export-search{background:#fff;border:2px solid #e0e0e0;border-radius:8px;outline:none;padding:8px 12px;font-size:14px}.export-row select:focus,.export-row input:focus{border-color:#1e5bb8}.export-row select{min-width:140px}.export-student-select{background:#fff;border:2px solid #e0e0e0;border-radius:8px;outline:none;flex:1;min-width:200px;padding:8px 12px;font-size:14px}.export-actions{flex-wrap:wrap;gap:10px;display:flex}.export-row button:disabled{opacity:.5;cursor:not-allowed}.empty-state{text-align:center;color:#bdc3c7;padding:40px 20px}.empty-state svg{fill:currentColor;width:48px;height:48px;margin-bottom:12px}.date-picker{align-items:center;gap:10px;margin-bottom:16px;display:flex}.date-picker label{color:#2c3e50;text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.date-picker input[type=date]{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;outline:none;padding:8px 12px;font-size:14px}.date-picker input[type=date]:focus{border-color:#1e5bb8}.date-pill{color:#7f8c8d;white-space:nowrap;background:#ecf0f1;border-radius:20px;padding:6px 14px;font-size:13px}.toast{color:#fff;z-index:1000;background:#2c3e50;border-radius:8px;padding:12px 24px;font-size:14px;animation:.2s ease-out toast-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0003}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (max-width:900px){.table-wrap{overflow-x:auto}.table-wrap table{min-width:640px}}@media (max-width:768px){.desktop-table{display:none!important}.m-student{display:block}.stats .stat-card,.search-bar select{min-width:100px}}@media (max-width:700px){.sidebar{z-index:200;transition:transform .2s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.menu-btn{justify-content:center;align-items:center;display:inline-flex}.overlay{z-index:180;background:#0006;display:block;position:fixed;inset:0}.topbar{gap:8px;padding:12px 16px}.topbar h1{font-size:16px}.content,.card{padding:16px}.export-row{flex-direction:column;align-items:stretch}.export-row select,.export-row input,.export-student-select{width:100%}.export-actions{flex-direction:column}.export-actions button{justify-content:center;width:100%}.group-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.search-bar{flex-direction:column}.search-bar select{width:100%}.actions{flex-direction:column}.actions button{justify-content:center;width:100%}.date-picker{flex-direction:column;align-items:stretch}.date-picker input[type=date]{width:100%}}