.app{max-width:1200px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-header{text-align:center;color:#fff;background:linear-gradient(135deg,#e795f2 0%,#b178ea 100%);border-radius:10px;margin-bottom:2rem;padding:1rem;box-shadow:0 4px 6px #0000001a}.app-header h1{margin:0 0 .5rem;font-size:2.5rem;font-weight:500}.app-header p{opacity:.9;margin:0;font-size:1.1rem}.main{margin-top:2rem}.student-section h2{color:#333;text-align:center;font-size:1.8rem}.student-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.student-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:1.5rem;transition:all .2s;box-shadow:0 5px 10px #00000026}.student-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0003}.student-card.passed{border-color:#4caf50;box-shadow:0 5px 10px #42eb4526}.student-card.failed{border-color:#f44336;box-shadow:0 5px 10px #f4433626}.student-info h3{color:#333;margin:0 0 1rem;font-size:1.3rem;font-weight:500}.student-info p{color:#666;margin:.5rem 0;line-height:1.4}.student-info strong{color:#333}.student-status{text-align:center;margin-top:1rem}.status{border-radius:20px;padding:.5rem 1rem;font-size:.9rem;font-weight:700;display:inline-block}.student-passed{color:#2e7d32;background-color:#e8f5e8}.student-failed{color:#c62828;background-color:#ffebee}.add-student-section{background:#fff;border-radius:10px;margin-top:2rem;padding:2rem;box-shadow:0 5px 10px #00000026}.add-student-section h2{color:#333;text-align:center;margin-top:0;margin-bottom:1.5rem;font-size:1.8rem}.add-student-form{flex-wrap:wrap;gap:1rem;display:flex}.form-group{flex:270px;align-items:center;gap:.5rem;min-width:0;display:flex}.form-group label{white-space:nowrap;color:#333;margin-bottom:.5rem;font-weight:500;display:flex}.form-group input,.form-group select{box-sizing:border-box;border:2px solid #e0e0e0;border-radius:8px;width:100%;height:40px;padding:0 .75rem;font-size:1rem;transition:all .2s}.form-group input:focus,.form-group select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.button-group{flex:0 0 180px}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#78d57e 0%,#54c676 100%);border:none;border-radius:8px;width:100%;height:40px;font-size:1.1rem;font-weight:500;transition:all .2s}.submit-btn:hover{background:linear-gradient(135deg,#69ce70 0%,#42ca6b 100%);transform:translateY(-1px);box-shadow:0 4px 15px #667eea4d}.submit-btn:active{transform:translateY(0)}.no-students{text-align:center;color:#666;padding:3rem;font-style:italic}.no-students p{font-size:1.1rem}.student-actions{text-align:center;border-top:1px solid #eee;margin-top:1rem;padding-top:1rem}.student-actions.section-1{justify-content:center;gap:.5rem;display:flex}.update-grade{border:1px solid #ddd;border-radius:6px;width:80%;padding:.5rem;font-size:.9rem}.update-btn{color:#fff;white-space:nowrap;cursor:pointer;background:linear-gradient(135deg,#84d78a 0%,#63c480 100%);border:none;border-radius:6px;padding:.2rem 1rem;font-size:.9rem;transition:all .2s}.update-btn:hover{background:linear-gradient(135deg,#69ce70 0%,#42ca6b 100%);transform:scale(1.05)}.delete-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b 0%,#ff4757 100%);border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.delete-btn:hover{background:linear-gradient(135deg,#ff6b6b 0%,#ff4757 100%);transform:scale(1.05)}.delete-btn:active{transform:scale(.98)}.toggle-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8095f0 0%,#3f6cf4 100%);border:none;border-radius:6px;margin-left:1rem;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.toggle-btn:hover{background:linear-gradient(135deg,#3859eb 0%,#2a5ae9 100%);transform:scale(1.05)}.filter-students{justify-content:flex-end;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.filter-buttons{border:1px solid #ddd;border-radius:5px;display:flex;overflow:hidden}.filter-buttons button{cursor:pointer;background-color:#fff;border:none;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.filter-buttons button:hover,.filter-buttons .active{color:#fff;background-color:#b178ea}