*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f0f2f5;color:#333;font-size:15px}
.header{background:#1a1a2e;color:#fff;padding:0;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.header-content{max-width:1200px;margin:0 auto;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.header-content h1{font-size:20px}
.user-info{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.nav{background:#16213e;padding:0;overflow-x:auto;white-space:nowrap}
.nav a{color:#ccc;text-decoration:none;padding:12px 15px;display:inline-block;font-size:13px;transition:.2s}
.nav a:hover{background:#0f3460;color:#fff}
.container{max-width:1200px;margin:20px auto;padding:20px;background:#fff;border-radius:10px;box-shadow:0 2px 15px rgba(0,0,0,.08)}
h1{color:#1a1a2e;margin-bottom:20px;font-size:24px}
h2{color:#16213e;margin:20px 0 15px;font-size:18px}
.login-container{max-width:400px;margin:80px auto;padding:30px;background:#fff;border-radius:10px;box-shadow:0 5px 25px rgba(0,0,0,.12)}
.login-container h2{text-align:center;margin-bottom:20px}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:6px;color:#1a1a2e;font-weight:600;font-size:14px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;transition:.2s;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3498db;outline:none}
.date-section{padding:15px;margin-bottom:20px}
.date-form{display:flex;gap:15px;align-items:flex-end;flex-wrap:wrap}
.date-form .form-group{margin-bottom:0;flex:1;min-width:200px}
.btn{background:#3498db;color:#fff;padding:10px 18px;border:none;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;font-size:14px;font-weight:600;transition:.2s}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-primary{background:#3498db}.btn-success{background:#27ae60}.btn-danger{background:#e74c3c}.btn-secondary{background:#7f8c8d}
.btn-large{padding:14px 30px;font-size:16px;width:100%;margin-top:15px}
.quick-actions-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.quick-actions-bar .btn{flex:1;min-width:120px;padding:10px;font-size:13px}
.attendance-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:35px}
.attendance-select:focus{outline:none;border-color:#3498db}
.attendance-select.present{color:#27ae60;border-color:#a5d6a7;background-color:#f1f8e9}
.attendance-select.absent{color:#e74c3c;border-color:#ef9a9a;background-color:#ffebee}
.attendance-select option[value="absent"]{color:#e74c3c;font-weight:bold}
.attendance-select option[value="present"]{color:#27ae60;font-weight:bold}
.desktop-view{display:block}.mobile-view{display:none}
table{width:100%;border-collapse:collapse;margin:0}
th,td{padding:12px;text-align:left;border-bottom:1px solid #eee}
th{background:#1a1a2e;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
tbody tr:hover{background:#f8f9fa}
.student-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:10px}
.student-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.student-num{background:#1a1a2e;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.student-details{min-width:0;flex:1}
.student-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.student-roll{font-size:12px;color:#666;font-family:monospace}
.student-card .attendance-select{width:auto;min-width:130px;flex-shrink:0}
.submit-section{margin-top:20px;padding-top:20px;border-top:2px solid #eee}
.success{background:#d4edda;color:#155724;padding:12px 18px;border-radius:6px;margin-bottom:15px;border-left:4px solid #28a745}
.error{background:#f8d7da;color:#721c24;padding:12px 18px;border-radius:6px;margin-bottom:15px;border-left:4px solid #dc3545}
.note{color:#666;font-size:13px;margin:8px 0}
.text-danger{color:#e74c3c;font-weight:700}.text-success{color:#27ae60;font-weight:700}
.form-section,.table-section{margin:15px 0;padding:15px;background:#f8f9fa;border-radius:8px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin:20px 0}
.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:10px;text-align:center}
.stat-card h3{font-size:32px;margin-bottom:5px}.stat-card p{font-size:13px;opacity:.9}
.action-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}
.action-buttons .btn{min-width:150px;text-align:center;padding:12px 15px;font-size:13px}
.class-info{color:#666;font-size:14px;margin-bottom:20px}
.badge{background:#3498db;color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}
.class-info-card{background:linear-gradient(135deg,#f5f7fa,#e8ecf3);border-radius:10px;padding:20px;margin-bottom:20px;border-left:4px solid #3498db}
.info-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:12px}
.info-item{flex:1;min-width:150px}
.info-label{display:block;font-size:11px;color:#666;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.info-value{font-size:15px;color:#1a1a2e;font-weight:600}
.pct-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:700}
.pct-high{background:#d4edda;color:#155724}.pct-low{background:#f8d7da;color:#721c24}
.status-badge{display:inline-block;padding:5px 12px;border-radius:15px;font-size:12px;font-weight:600}
.status-present{background:#d4edda;color:#155724}.status-absent{background:#f8d7da;color:#721c24}.status-missed{background:#fff3cd;color:#856404}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:768px){
.container{margin:10px;padding:15px}h1{font-size:20px}h2{font-size:16px}
.header-content{padding:12px 15px}.header-content h1{font-size:17px}.user-info{font-size:12px}
.nav a{padding:10px 12px;font-size:12px}
.desktop-view{display:none}.mobile-view{display:block}
.date-form{flex-direction:column}.quick-actions-bar{flex-direction:column}.quick-actions-bar .btn{min-width:100%}
.student-card .attendance-select{min-width:120px;font-size:13px}
.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card h3{font-size:24px}
.action-buttons{flex-direction:column}.action-buttons .btn{min-width:100%}
.info-row{gap:12px}.info-item{min-width:100%}
table{font-size:13px}th,td{padding:8px 6px}
}