@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600&display=swap');
:root {--bg: #07080f;--card: #0f111c;--accent: #8f5cf8;--accent-2: #5cc2f8;--text: #f5f6ff;--muted: #7980a6;--danger: #ff6584;--success: #58d7a1;--gradient: linear-gradient(135deg,#8f5cf8,#5cc2f8);}
* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Unbounded', sans-serif;color: var(--text);} body {background: var(--bg);min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 40px;} #app {width: 100%;max-width: 1200px;transition: .6s ease;} .screen {display: none;} .screen.active {display: block;width: 100%;}
.login-container {background: rgba(15,17,28,.96);border-radius: 30px;padding: 60px;box-shadow: 0 30px 70px rgba(0,0,0,.4);display: flex;flex-direction: column;gap: 30px;min-width: 380px;align-items: center;backdrop-filter: blur(20px);} .logo {text-align: center;} .logo-icon {width: 80px;height: 80px;background: var(--gradient);border-radius: 22px;font-size: 36px;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px auto;font-weight: 600;} .logo h1 {font-size: 32px;letter-spacing: 3px;} .subtitle {text-transform: uppercase;font-size: 12px;letter-spacing: 5px;color: var(--muted);} .form {width: 100%;display: flex;flex-direction: column;gap: 15px;} .form-group input, .form-group select, .form-group textarea {width: 100%;padding: 18px 20px;border-radius: 16px;border: 1px solid rgba(255,255,255,.1);background: rgba(7,8,15,.8);font-size: 15px;transition: .3s;} .form-group input:focus, .form-group select:focus, .form-group textarea:focus {border-color: var(--accent);} .btn {padding: 16px 28px;border: none;border-radius: 18px;font-size: 15px;font-weight: 600;background: rgba(255,255,255,.08);cursor: pointer;transition: .3s;} .btn-primary {background: var(--gradient);} .btn:hover {transform: translateY(-2px);box-shadow: 0 10px 25px rgba(0,0,0,.2);} .btn-sm {padding: 10px 18px;border-radius: 12px;font-size: 13px;} .error-message {color: var(--danger);font-size: 13px;text-align: center;min-height: 20px;} .footer {font-size: 12px;text-transform: uppercase;letter-spacing: 4px;color: var(--muted);} .navbar {background: rgba(15,17,28,.96);border-radius: 24px;padding: 20px 30px;margin-bottom: 25px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0 20px 40px rgba(0,0,0,.3);} .nav-brand {display: flex;align-items: center;gap: 15px;font-size: 18px;letter-spacing: 4px;text-transform: uppercase;} .nav-logo {width: 46px;height: 46px;border-radius: 16px;background: var(--gradient);display: flex;align-items: center;justify-content: center;font-weight: 600;} .container {display: grid;grid-template-columns: 260px 1fr;gap: 25px;} .sidebar {background: rgba(15,17,28,.96);border-radius: 24px;padding: 25px;box-shadow: 0 15px 50px rgba(0,0,0,.3);} .menu {list-style: none;display: flex;flex-direction: column;gap: 12px;} .menu-item {display: flex;align-items: center;gap: 15px;padding: 14px 18px;border-radius: 18px;cursor: pointer;font-size: 15px;color: var(--muted);transition: .3s;} .menu-item .icon {font-size: 18px;} .menu-item.active, .menu-item:hover {background: rgba(255,255,255,.08);color: var(--text);} .content {background: rgba(15,17,28,.96);border-radius: 24px;padding: 35px;box-shadow: 0 20px 60px rgba(0,0,0,.35);} .view {display: none;} .view.active {display: block;} .view-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;} .stats-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 20px;} .stat-card {background: rgba(255,255,255,.02);border-radius: 20px;padding: 25px;display: flex;flex-direction: column;gap: 12px;border: 1px solid rgba(255,255,255,.05);} .stat-label {color: var(--muted);font-size: 13px;text-transform: uppercase;letter-spacing: 3px;} .stat-value {font-size: 32px;font-weight: 600;} .table-container {width: 100%;overflow: auto;border-radius: 20px;border: 1px solid rgba(255,255,255,.05);} .data-table {width: 100%;border-collapse: collapse;} .data-table th, .data-table td {padding: 16px 20px;text-align: left;color: var(--muted);border-bottom: 1px solid rgba(255,255,255,.05);} .data-table th {text-transform: uppercase;font-size: 12px;letter-spacing: 2px;color: var(--text);} .data-table tbody tr:hover {background: rgba(255,255,255,.02);} .schedule-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 18px;} .schedule-card {border-radius: 18px;padding: 20px;background: rgba(255,255,255,.02);border: 1px solid rgba(255,255,255,.05);} .schedule-card h4 {margin-bottom: 8px;} .schedule-card .time {font-size: 13px;color: var(--muted);margin-bottom: 12px;} .homework-list {display: grid;gap: 18px;} .homework-card {padding: 22px;border-radius: 20px;background: rgba(255,255,255,.02);border: 1px solid rgba(255,255,255,.05);} .homework-card h4 {margin-bottom: 12px;} .homework-card .meta {display: flex;gap: 15px;font-size: 13px;color: var(--muted);} .modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(7,8,15,.85);display: none;align-items: center;justify-content: center;padding: 30px;} .modal-overlay.active {display: flex;} .modal {background: rgba(15,17,28,.98);border-radius: 24px;padding: 30px;width: 100%;max-width: 520px;box-shadow: 0 25px 70px rgba(0,0,0,.45);} .modal-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} .modal-close {background: none;border: none;font-size: 28px;color: var(--muted);cursor: pointer;} .modal-body {display: flex;flex-direction: column;gap: 14px;} .tag {padding: 6px 14px;border-radius: 12px;background: rgba(255,255,255,.06);font-size: 12px;text-transform: uppercase;letter-spacing: 2px;color: var(--muted);} .badge {padding: 6px 12px;border-radius: 16px;font-size: 12px;} .badge-success {background: rgba(88,215,161,.2);color: var(--success);} .badge-danger {background: rgba(255,101,132,.2);color: var(--danger);} .badge-info {background: rgba(92,194,248,.2);color: var(--accent-2);} .muted {color: var(--muted);} @media (max-width: 1024px) {.container {grid-template-columns: 1fr;} .sidebar {order: 2;} .content {order: 1;}} @media (max-width: 768px) {body {padding: 20px;} .login-container {padding: 40px 30px;} .navbar {flex-direction: column;gap: 15px;} .view-header {flex-direction: column;gap: 15px;} .table-container {border-radius: 16px;}}