:root{font-family:Tajawal,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.6;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary: #0a0e1a;--bg-secondary: #111827;--bg-card: rgba(17, 24, 39, .8);--bg-card-hover: rgba(30, 41, 59, .9);--bg-sidebar: rgba(15, 23, 42, .95);--bg-input: rgba(30, 41, 59, .6);--bg-glass: rgba(255, 255, 255, .03);--border-color: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .05);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #6366f1;--accent-light: #818cf8;--accent-glow: rgba(99, 102, 241, .3);--success: #10b981;--success-bg: rgba(16, 185, 129, .1);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .1);--error: #ef4444;--error-bg: rgba(239, 68, 68, .1);--info: #3b82f6;--info-bg: rgba(59, 130, 246, .1);--shadow: 0 4px 24px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .4)}[data-theme=light]{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-card: rgba(255, 255, 255, .9);--bg-card-hover: rgba(241, 245, 249, .95);--bg-sidebar: rgba(255, 255, 255, .97);--bg-input: rgba(241, 245, 249, .8);--bg-glass: rgba(0, 0, 0, .02);--border-color: rgba(0, 0, 0, .08);--border-light: rgba(0, 0, 0, .05);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--accent: #4f46e5;--accent-light: #6366f1;--accent-glow: rgba(79, 70, 229, .2);--success: #059669;--success-bg: rgba(5, 150, 105, .08);--warning: #d97706;--warning-bg: rgba(217, 119, 6, .08);--error: #dc2626;--error-bg: rgba(220, 38, 38, .08);--info: #2563eb;--info-bg: rgba(37, 99, 235, .08);--shadow: 0 4px 24px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);transition:var(--transition)}body{overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#1e1b4b,#0f172a);position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 60%);animation:pulse-glow 8s ease-in-out infinite}.login-page:after{content:"";position:absolute;bottom:-50%;left:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 60%);animation:pulse-glow 8s ease-in-out infinite reverse}@keyframes pulse-glow{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:1}}.login-card{position:relative;z-index:1;width:100%;max-width:420px;padding:2.5rem;background:#0f172acc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;box-shadow:0 25px 50px #00000080}.login-logo{text-align:center;margin-bottom:2rem}.login-logo .icon{width:72px;height:72px;margin:0 auto 1rem;background:linear-gradient(135deg,var(--accent),#8b5cf6);border-radius:1.25rem;display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:0 8px 32px #6366f166}.login-logo h1{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-logo p{color:var(--text-secondary);font-size:.875rem;margin-top:.25rem}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.form-input{width:100%;padding:.75rem 1rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:.75rem;color:var(--text-primary);font-family:inherit;font-size:.9375rem;transition:var(--transition);outline:none}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.form-input::placeholder{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:.75rem;font-family:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none}.btn-primary{width:100%;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;box-shadow:0 4px 16px #6366f166}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px #6366f180}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent)}.btn-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success)}.btn-success:hover{background:var(--success);color:#fff}.btn-ghost{background:transparent;color:var(--text-secondary);padding:.5rem}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-input)}.btn-sm{padding:.5rem 1rem;font-size:.8125rem;border-radius:.5rem}.app-layout{display:flex;min-height:100vh}.sidebar{width:280px;background:var(--bg-sidebar);border-left:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:50;transition:var(--transition);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--border-color)}.sidebar-logo{display:flex;align-items:center;gap:.75rem}.sidebar-logo .icon{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),#8b5cf6);border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.sidebar-logo h2{font-size:1rem;font-weight:700;line-height:1.3}.sidebar-logo p{font-size:.75rem;color:var(--text-muted)}.sidebar-nav{flex:1;padding:1rem;overflow-y:auto}.nav-section{margin-bottom:1.5rem}.nav-section-title{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 .75rem;margin-bottom:.5rem}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.75rem;color:var(--text-secondary);cursor:pointer;transition:var(--transition);font-size:.875rem;font-weight:500;border:none;background:none;width:100%;text-align:right;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.nav-item:hover{background:var(--bg-input);color:var(--text-primary)}.nav-item.active{background:linear-gradient(135deg,#6366f126,#8b5cf61a);color:var(--accent-light);font-weight:600}.nav-item .icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-badge{margin-right:auto;margin-left:0;background:var(--error);color:#fff;font-size:.6875rem;font-weight:700;padding:.125rem .5rem;border-radius:999px;min-width:20px;text-align:center}.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color)}.user-info{display:flex;align-items:center;gap:.75rem}.user-avatar{width:40px;height:40px;border-radius:.75rem;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;color:#fff;flex-shrink:0}.user-details{flex:1;min-width:0}.user-name{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.75rem;color:var(--text-muted)}.main-content{flex:1;margin-right:280px;min-height:100vh;display:flex;flex-direction:column}.header{padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.header-right{display:flex;align-items:center;gap:1rem}.header-title h1{font-size:1.25rem;font-weight:700}.header-title p{font-size:.8125rem;color:var(--text-muted)}.header-actions{display:flex;align-items:center;gap:.5rem}.header-btn{width:40px;height:40px;border-radius:.75rem;background:var(--bg-input);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);color:var(--text-secondary);position:relative}.header-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent)}.header-btn .badge{position:absolute;top:-4px;left:-4px;width:18px;height:18px;background:var(--error);border-radius:999px;font-size:.625rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}.search-box{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:.75rem;min-width:250px;transition:var(--transition)}.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.search-box input{border:none;background:none;outline:none;color:var(--text-primary);font-family:inherit;font-size:.875rem;width:100%}.search-box input::placeholder{color:var(--text-muted)}.search-box .icon{color:var(--text-muted);flex-shrink:0}.page-content{flex:1;padding:2rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;margin-bottom:2rem}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;transition:var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;border-radius:50%;opacity:.05;transform:translate(30%,-30%)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}.stat-card.accent:before{background:var(--accent)}.stat-card.success:before{background:var(--success)}.stat-card.warning:before{background:var(--warning)}.stat-card.info:before{background:var(--info)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.stat-icon{width:48px;height:48px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.stat-icon.accent{background:#6366f126;color:var(--accent-light)}.stat-icon.success{background:var(--success-bg);color:var(--success)}.stat-icon.warning{background:var(--warning-bg);color:var(--warning)}.stat-icon.info{background:var(--info-bg);color:var(--info)}.stat-icon.error{background:var(--error-bg);color:var(--error)}.stat-change{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:999px}.stat-change.up{background:var(--success-bg);color:var(--success)}.stat-change.down{background:var(--error-bg);color:var(--error)}.stat-value{font-size:2rem;font-weight:800;line-height:1.2;margin-bottom:.25rem}.stat-label{font-size:.8125rem;color:var(--text-muted)}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition)}.card:hover{border-color:#6366f133}.card-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color)}.card-title{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.card-body{padding:1.5rem}.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem}.subject-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.subject-card:before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--accent),#8b5cf6);opacity:0;transition:var(--transition)}.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.subject-card:hover:before{opacity:1}.subject-code{display:inline-block;font-size:.75rem;font-weight:600;color:var(--accent-light);background:#6366f11a;padding:.25rem .75rem;border-radius:999px;margin-bottom:.75rem}.subject-name{font-size:1.125rem;font-weight:700;margin-bottom:.5rem;line-height:1.4}.subject-instructor{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary);margin-bottom:1rem}.subject-meta{display:flex;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.subject-meta-item{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--text-muted)}.attendance-bar{width:100%;height:8px;background:var(--bg-input);border-radius:999px;overflow:hidden;margin-bottom:.5rem}.attendance-bar-fill{height:100%;border-radius:999px;transition:width 1s ease}.attendance-bar-fill.excellent{background:linear-gradient(90deg,#10b981,#34d399)}.attendance-bar-fill.good{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.attendance-bar-fill.warning{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.attendance-bar-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171)}.attendance-text{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted)}.attendance-percentage{font-weight:700;font-size:.875rem}.attendance-percentage.excellent{color:var(--success)}.attendance-percentage.good{color:var(--info)}.attendance-percentage.warning{color:var(--warning)}.attendance-percentage.danger{color:var(--error)}.chart-container{width:100%;padding:1rem 0}.bar-chart{display:flex;align-items:flex-end;gap:.5rem;height:200px;padding:0 .5rem}.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.375rem;height:100%;justify-content:flex-end}.bar{width:100%;max-width:40px;border-radius:.375rem .375rem 0 0;transition:height 1s ease;min-height:4px;position:relative}.bar.accent{background:linear-gradient(180deg,var(--accent),#4338ca)}.bar.success{background:linear-gradient(180deg,var(--success),#047857)}.bar.warning{background:linear-gradient(180deg,var(--warning),#b45309)}.bar.info{background:linear-gradient(180deg,var(--info),#1d4ed8)}.bar-label{font-size:.6875rem;color:var(--text-muted);white-space:nowrap}.bar-value{font-size:.6875rem;font-weight:600;color:var(--text-secondary)}.donut-chart{position:relative;width:160px;height:160px;margin:0 auto}.donut-chart svg{transform:rotate(-90deg)}.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.donut-value{font-size:1.75rem;font-weight:800;line-height:1}.donut-label{font-size:.75rem;color:var(--text-muted)}.chart-legend{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--text-secondary)}.legend-dot{width:10px;height:10px;border-radius:50%}.schedule-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border-color);border-radius:1rem;overflow:hidden}.schedule-header{background:var(--bg-card);padding:.75rem;text-align:center;font-weight:700;font-size:.875rem}.schedule-cell{background:var(--bg-secondary);padding:.5rem;min-height:120px;position:relative}.schedule-slot{background:#6366f11f;border:1px solid rgba(99,102,241,.2);border-radius:.5rem;padding:.5rem;margin-bottom:.375rem;font-size:.75rem;cursor:pointer;transition:var(--transition)}.schedule-slot:hover{background:#6366f133;border-color:var(--accent)}.schedule-slot-title{font-weight:600;font-size:.75rem;margin-bottom:.25rem;color:var(--accent-light)}.schedule-slot-time{font-size:.6875rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem}.schedule-slot-room{font-size:.6875rem;color:var(--text-muted);margin-top:.25rem}.table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table th{padding:.75rem 1rem;text-align:right;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);border-bottom:1px solid var(--border-color);white-space:nowrap}.data-table td{padding:.875rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border-light);transition:var(--transition)}.data-table tr:hover td{background:var(--bg-glass)}.data-table tr:last-child td{border-bottom:none}.badge-status{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600}.badge-status.present{background:var(--success-bg);color:var(--success)}.badge-status.absent{background:var(--error-bg);color:var(--error)}.badge-status.late{background:var(--warning-bg);color:var(--warning)}.badge-status.excused{background:var(--info-bg);color:var(--info)}.badge-status.pending{background:var(--warning-bg);color:var(--warning)}.badge-status.submitted{background:var(--info-bg);color:var(--info)}.badge-status.graded{background:var(--success-bg);color:var(--success)}.badge-status.upcoming{background:#8b5cf61a;color:#a78bfa}.badge-status.completed{background:var(--success-bg);color:var(--success)}.badge-status.missed{background:var(--error-bg);color:var(--error)}.messages-list{display:flex;flex-direction:column;gap:.75rem}.message-item{padding:1rem 1.25rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:.75rem;cursor:pointer;transition:var(--transition)}.message-item:hover{border-color:var(--accent);background:var(--bg-card-hover)}.message-item.unread{border-right:3px solid var(--accent);background:#6366f108}.message-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.message-sender{font-weight:600;font-size:.875rem}.message-date{font-size:.75rem;color:var(--text-muted)}.message-subject{font-weight:600;font-size:.9375rem;margin-bottom:.375rem}.message-preview{font-size:.8125rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--bg-input);border-radius:.75rem;margin-bottom:1.5rem;overflow-x:auto}.tab{padding:.625rem 1.25rem;border-radius:.625rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:var(--transition);white-space:nowrap;border:none;background:none;font-family:inherit}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--bg-secondary);color:var(--text-primary);font-weight:600;box-shadow:0 1px 3px #0000001a}.notification-item{display:flex;gap:1rem;padding:1rem 1.25rem;border-radius:.75rem;border:1px solid var(--border-color);transition:var(--transition);cursor:pointer}.notification-item:hover{background:var(--bg-card-hover)}.notification-item.unread{background:#6366f108;border-color:#6366f133}.notification-icon{width:40px;height:40px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notification-icon.info{background:var(--info-bg);color:var(--info)}.notification-icon.warning{background:var(--warning-bg);color:var(--warning)}.notification-icon.success{background:var(--success-bg);color:var(--success)}.notification-icon.error{background:var(--error-bg);color:var(--error)}.notification-content{flex:1}.notification-title{font-weight:600;font-size:.875rem;margin-bottom:.25rem}.notification-message{font-size:.8125rem;color:var(--text-secondary)}.notification-time{font-size:.75rem;color:var(--text-muted);margin-top:.375rem}.grade-card{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:.75rem;padding:1.25rem;display:flex;align-items:center;gap:1.25rem;transition:var(--transition)}.grade-card:hover{border-color:var(--accent)}.grade-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;flex-shrink:0;border:3px solid}.grade-circle.a{border-color:var(--success);color:var(--success);background:var(--success-bg)}.grade-circle.b{border-color:var(--info);color:var(--info);background:var(--info-bg)}.grade-circle.c{border-color:var(--warning);color:var(--warning);background:var(--warning-bg)}.grade-circle.d{border-color:var(--error);color:var(--error);background:var(--error-bg)}.grade-info{flex:1}.grade-subject{font-weight:600;margin-bottom:.25rem}.grade-details{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--text-muted)}.empty-state{text-align:center;padding:3rem 2rem;color:var(--text-muted)}.empty-state .icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state h3{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;color:var(--text-secondary)}.empty-state p{font-size:.875rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:2rem;animation:fadeIn .2s ease}.modal{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:1rem;width:100%;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color)}.modal-title{font-size:1.125rem;font-weight:700}.modal-body{padding:1.5rem}.modal-footer{display:flex;justify-content:flex-start;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-color)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.text-center{text-align:center}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--accent-light)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.gap-1{gap:.5rem}.gap-2{gap:1rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.w-full{width:100%}.hidden{display:none}.warning-banner{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--warning-bg);border:1px solid rgba(245,158,11,.3);border-radius:.75rem;margin-bottom:1.5rem}.warning-banner .icon{color:var(--warning);font-size:1.25rem;flex-shrink:0}.warning-banner p{font-size:.875rem;color:var(--warning);font-weight:500}.mobile-toggle{display:none;width:40px;height:40px;border-radius:.625rem;background:var(--bg-input);border:1px solid var(--border-color);align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);flex-shrink:0;transition:var(--transition);flex-direction:column;gap:4px;padding:10px}.mobile-toggle:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--text-primary)}.hamburger-line{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;transition:var(--transition)}.sidebar-close-btn{display:none;width:32px;height:32px;border-radius:.5rem;background:var(--bg-input);border:1px solid var(--border-color);align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:.875rem;transition:var(--transition);flex-shrink:0}.sidebar-close-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent)}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000040;z-index:39;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;-webkit-tap-highlight-color:transparent}.sidebar-overlay.open{opacity:1;visibility:visible;pointer-events:auto}body.sidebar-open{overflow:hidden;position:fixed;width:100%}@keyframes swipeHint{0%{opacity:0;transform:translate(0)}30%{opacity:1}70%{opacity:1;transform:translate(-8px)}to{opacity:0;transform:translate(-8px)}}@media(max-width:1024px){.stats-grid,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.subjects-grid{grid-template-columns:1fr}}@media(max-width:768px){.mobile-toggle,.sidebar-close-btn{display:flex}.sidebar{width:min(240px,72vw);transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 20px #00000026;will-change:transform;z-index:50}.sidebar.open{transform:translate(0)}.sidebar-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.sidebar-header .sidebar-logo .icon{width:34px;height:34px;font-size:1rem}.sidebar-header .sidebar-logo h2{font-size:.875rem}.sidebar-header .sidebar-logo p{font-size:.6875rem}.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:.75rem;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.nav-section-title{font-size:.625rem;padding:0 .5rem;margin-bottom:.375rem}.nav-item{padding:.5rem .625rem;font-size:.8125rem;gap:.625rem;border-radius:.625rem;min-height:40px}.nav-item.active{background:linear-gradient(135deg,#6366f11f,#8b5cf614)}.nav-item .icon{width:18px;height:18px;font-size:.875rem}.sidebar-footer{padding:.75rem 1rem;border-top:1px solid var(--border-color)}.user-avatar{width:32px;height:32px;font-size:.6875rem}.user-name{font-size:.8125rem}.user-role{font-size:.6875rem}.main-content{margin-right:0;width:100%;min-width:0}.header{padding:.625rem .875rem;gap:.375rem;min-height:52px}.header-right{gap:.5rem;min-width:0;flex:1}.header-title h1{font-size:.9375rem}.header-title p{display:none}.header-actions{gap:.25rem;flex-shrink:0}.search-box{display:none}.page-content{padding:.875rem;overflow-x:hidden}.stats-grid{grid-template-columns:1fr;gap:.625rem;margin-bottom:1rem}.stat-card{padding:.875rem;border-radius:.75rem}.stat-value{font-size:1.375rem}.stat-icon{width:36px;height:36px;font-size:.875rem}.grid-2,.grid-3,.grid-4,.subjects-grid{grid-template-columns:1fr;gap:.875rem}.subject-card{padding:.875rem;border-radius:.75rem}.subject-name{font-size:.9375rem}.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.875rem;padding:0 .875rem;scrollbar-width:none}.table-wrapper::-webkit-scrollbar{display:none}.data-table{min-width:560px}.data-table th{padding:.5rem .625rem;font-size:.625rem}.data-table td{padding:.5rem .625rem;font-size:.75rem}.card{border-radius:.75rem}.card-header{padding:.875rem;flex-wrap:wrap;gap:.375rem}.card-title{font-size:.875rem}.card-body{padding:.875rem}.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;margin-bottom:.875rem;border-radius:.625rem}.tabs::-webkit-scrollbar{display:none}.tab{padding:.4375rem .75rem;font-size:.75rem;white-space:nowrap;flex-shrink:0;border-radius:.5rem}.btn{padding:.5rem .875rem;font-size:.8125rem;border-radius:.625rem}.btn-sm{padding:.3125rem .625rem;font-size:.6875rem;border-radius:.5rem}.modal-overlay{padding:0;align-items:flex-end}.modal{max-width:100%;max-height:85vh;border-radius:1rem 1rem 0 0;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header,.modal-body{padding:.875rem 1rem}.modal-footer{padding:.625rem 1rem;flex-wrap:wrap}.grade-card{flex-direction:column;align-items:flex-start;gap:.625rem;padding:.875rem;border-radius:.75rem}.grade-circle{width:44px;height:44px;font-size:.875rem}.grade-details{gap:.375rem;font-size:.75rem}.assignment-card{padding:.875rem;border-radius:.625rem}.assignment-meta{gap:.375rem;font-size:.75rem}.assignment-title{font-size:.875rem}.message-item{padding:.75rem .875rem;border-radius:.625rem}.message-subject{font-size:.8125rem}.message-preview{font-size:.75rem}.notification-item{padding:.75rem;gap:.625rem;border-radius:.625rem}.notification-icon{width:32px;height:32px;font-size:.875rem}.notification-title{font-size:.8125rem}.notification-message{font-size:.75rem}.schedule-grid{grid-template-columns:1fr;overflow-x:auto}.bar-chart{height:130px}.warning-banner{padding:.625rem .875rem;gap:.375rem;margin-bottom:.875rem;border-radius:.625rem}.warning-banner p{font-size:.75rem}.import-zone{padding:1.5rem .875rem;border-radius:.75rem}.settings-section{padding:.875rem;margin-bottom:.875rem;border-radius:.75rem}.login-card{padding:1.25rem;margin:.5rem;border-radius:1rem}.login-logo .icon{width:52px;height:52px;font-size:1.375rem}.login-logo h1{font-size:1.125rem}.login-logo p{font-size:.75rem}.donut-chart{width:110px;height:110px}.donut-value{font-size:1.125rem}.badge-status{font-size:.625rem;padding:.125rem .4375rem}.header-btn{width:34px;height:34px;font-size:.8125rem;border-radius:.625rem}.header-btn .badge{width:15px;height:15px;font-size:.5rem;top:-3px;left:-3px}.score-value{font-size:1.125rem}.empty-state{padding:1.5rem .875rem}.empty-state .icon{font-size:2rem}.empty-state h3{font-size:1rem}.form-input{padding:.625rem .875rem;font-size:.875rem;border-radius:.625rem}.form-label,.search-box input{font-size:.8125rem}.attendance-bar{height:6px}h2{font-size:1rem}h3{font-size:.875rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeInUp .4s ease forwards}.animate-in:nth-child(1){animation-delay:0s}.animate-in:nth-child(2){animation-delay:.05s}.animate-in:nth-child(3){animation-delay:.1s}.animate-in:nth-child(4){animation-delay:.15s}.animate-in:nth-child(5){animation-delay:.2s}.animate-in:nth-child(6){animation-delay:.25s}.settings-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;margin-bottom:1.25rem}.settings-title{font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.toggle-switch{width:48px;height:26px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:999px;cursor:pointer;position:relative;transition:var(--transition)}.toggle-switch.active{background:var(--accent);border-color:var(--accent)}.toggle-switch:after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:var(--transition)}.toggle-switch.active:after{right:calc(100% - 22px)}.assignment-card{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:.75rem;padding:1.25rem;transition:var(--transition)}.assignment-card:hover{border-color:var(--accent)}.assignment-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.75rem}.assignment-title{font-weight:600;font-size:.9375rem}.assignment-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--text-muted);margin-bottom:.75rem}.assignment-meta-item{display:flex;align-items:center;gap:.375rem}.assignment-description{font-size:.8125rem;color:var(--text-secondary);margin-bottom:.75rem;line-height:1.6}.score-display{display:flex;align-items:center;gap:.5rem}.score-value{font-size:1.5rem;font-weight:800}.score-max{font-size:.875rem;color:var(--text-muted)}.progress-ring{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:var(--bg-input);stroke-width:8}.progress-ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease}.import-zone{border:2px dashed var(--border-color);border-radius:1rem;padding:3rem 2rem;text-align:center;transition:var(--transition);cursor:pointer}.import-zone:hover,.import-zone.dragover{border-color:var(--accent);background:#6366f108}.import-zone .icon{font-size:2.5rem;margin-bottom:1rem;color:var(--text-muted)}.import-zone h3{font-size:1rem;font-weight:600;margin-bottom:.5rem}.import-zone p{font-size:.8125rem;color:var(--text-muted)}