:root{--bg-primary: #FFFFFF;--bg-secondary: #F8F9FC;--bg-tertiary: #F1F3F9;--text-primary: #111827;--text-secondary: #4B5563;--text-muted: #9CA3AF;--border-color: rgba(17, 24, 39, .08);--border-strong: rgba(17, 24, 39, .15);--accent-color: #4F46E5;--accent-hover: #4338CA;--accent-subtle: rgba(79, 70, 229, .08);--accent-vivid: #4F46E5;--accent-vivid-hover: #4338CA;--accent-vivid-subtle: rgba(79, 70, 229, .06);--error-color: #EF4444;--error-bg: rgba(239, 68, 68, .06);--error-border: rgba(239, 68, 68, .2);--success-color: #10B981;--success-bg: rgba(16, 185, 129, .06);--success-border: rgba(16, 185, 129, .2);--warning-color: #F59E0B;--warning-bg: rgba(245, 158, 11, .06);--warning-border: rgba(245, 158, 11, .2);--info-color: #3B82F6;--info-bg: rgba(59, 130, 246, .06);--info-border: rgba(59, 130, 246, .2);--shadow-xs: 0 1px 2px rgba(79, 70, 229, .04), 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 8px rgba(79, 70, 229, .06);--shadow: 0 4px 6px rgba(0, 0, 0, .03), 0 12px 24px rgba(79, 70, 229, .08);--shadow-md: 0 8px 16px rgba(0, 0, 0, .04), 0 20px 40px rgba(79, 70, 229, .1);--shadow-lg: 0 12px 24px rgba(0, 0, 0, .06), 0 32px 64px rgba(79, 70, 229, .12);--card-border: 1px solid rgba(17, 24, 39, .06);--gradient-accent: linear-gradient(135deg, #4F46E5, #7C3AED);--gradient-surface: linear-gradient(180deg, #FFFFFF, #F8F9FC);--gradient-brand: linear-gradient(135deg, #4F46E5, #3730A3);--overlay-color: rgba(17, 24, 39, .5);--radius-xs: 6px;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 20px;--radius-3xl: 24px;--radius-pill: 9999px;--transition: .15s cubic-bezier(.4, 0, .2, 1);--transition-slow: .25s cubic-bezier(.4, 0, .2, 1);--anim-fast: .12s;--anim-base: .2s;--anim-slow: .32s;--ease-out: cubic-bezier(0, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--sidebar-bg: #111827;--sidebar-border: rgba(255, 255, 255, .06);--sidebar-text: #9CA3AF;--sidebar-text-active: #FFFFFF;--sidebar-accent: #4F46E5;--sidebar-item-hover: rgba(255, 255, 255, .04);--sidebar-item-active-bg: rgba(79, 70, 229, .15);--sidebar-item-active-text: #FFFFFF;--sidebar-item-indicator: #4F46E5}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEnter{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pressDown{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}@keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes iconWiggle{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.15)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(-6deg) scale(1.05)}80%{transform:rotate(4deg) scale(1.02)}to{transform:rotate(0) scale(1)}}@keyframes formEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes successCircle{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes successCheck{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}html[data-theme=dark]{--bg-primary: #0F1117;--bg-secondary: #161922;--bg-tertiary: #1E2130;--text-primary: #F3F4F6;--text-secondary: #9CA3AF;--text-muted: #6B7280;--border-color: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .12);--accent-color: #6366F1;--accent-hover: #818CF8;--accent-subtle: rgba(99, 102, 241, .12);--accent-vivid: #6366F1;--accent-vivid-hover: #818CF8;--accent-vivid-subtle: rgba(99, 102, 241, .1);--error-color: #F87171;--error-bg: rgba(248, 113, 113, .1);--error-border: rgba(248, 113, 113, .2);--success-color: #34D399;--success-bg: rgba(52, 211, 153, .1);--success-border: rgba(52, 211, 153, .2);--warning-color: #FBBF24;--warning-bg: rgba(251, 191, 36, .1);--warning-border: rgba(251, 191, 36, .2);--info-color: #60A5FA;--info-bg: rgba(96, 165, 250, .1);--info-border: rgba(96, 165, 250, .2);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .3);--shadow-md: 0 8px 16px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 32px 64px rgba(0, 0, 0, .5);--card-border: 1px solid rgba(255, 255, 255, .06);--gradient-accent: linear-gradient(135deg, #6366F1, #8B5CF6);--gradient-surface: linear-gradient(180deg, #0F1117, #161922);--gradient-brand: linear-gradient(135deg, #6366F1, #4338CA);--overlay-color: rgba(0, 0, 0, .7);--sidebar-bg: #0A0C12;--sidebar-border: rgba(255, 255, 255, .04);--sidebar-text: #6B7280;--sidebar-text-active: #FFFFFF;--sidebar-accent: #6366F1;--sidebar-item-hover: rgba(255, 255, 255, .03);--sidebar-item-active-bg: rgba(99, 102, 241, .15);--sidebar-item-active-text: #FFFFFF;--sidebar-item-indicator: #6366F1}@media(min-width:800px){.hamburger-btn,.sidebar-close-btn,.sidebar-overlay{display:none!important}.app-main{padding:32px 40px!important}}@media(max-width:799px){.hamburger-btn,.sidebar-close-btn{display:flex!important;align-items:center}.app-main{padding:20px 16px!important}}@media(max-width:799px){h1{font-size:22px!important}table{min-width:500px}.dashboard-grid{grid-template-columns:1fr!important}.form-row{flex-direction:column!important}header{padding:0 16px!important}.card-body{padding:16px!important}.filters-row{flex-direction:column!important;align-items:stretch!important}.filters-row>*{width:100%!important}.attendance-filters-row{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.attendance-filters-row>*{width:100%!important}.page-header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}}@media(max-width:480px){.app-main{padding:16px!important}}:root{--header-padding: 28px;--header-left-gap: 12px;--header-right-gap: 16px;--header-avatar-size: 36px}@media(max-width:320px){:root{--header-padding: 10px;--header-left-gap: 6px;--header-right-gap: 8px;--header-avatar-size: 28px}.header-email{display:none!important}.header-theme-toggle{font-size:12px}.header-theme-toggle svg{width:12px!important;height:12px!important}h1{font-size:18px!important}h2{font-size:16px!important}h3{font-size:14px!important}.app-main{padding:10px!important}header{padding:0 10px!important}.card-body{padding:12px!important}.table-wrapper,.table-container{overflow-x:auto!important;-webkit-overflow-scrolling:touch}table{min-width:500px!important}.dashboard-grid,.stats-grid,.kpi-grid,.summary-grid{grid-template-columns:1fr!important}.filters-row{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.filters-row>*,.filters-row input,.filters-row select{width:100%!important;min-width:unset!important;max-width:100%!important}button,.btn,.btn-primary,.btn-secondary{padding:6px 12px!important;font-size:13px!important}.page-header{gap:8px!important}.dashboard-card-content{gap:10px!important}.dashboard-card-value{font-size:28px!important}.dashboard-icon-container{padding:8px!important;width:36px!important;height:36px!important;min-width:36px!important}.dashboard-icon-container svg{width:20px!important;height:20px!important;font-size:20px!important}.dashboard-card-wide{grid-column:span 1!important}.action-btn{padding:3px 6px!important;font-size:12px!important}.attendance-carousel-header{gap:6px!important}.attendance-carousel-nav-btn{padding:3px 6px!important;min-width:44px!important;min-height:44px!important}.attendance-kpi-grid{grid-template-columns:1fr!important}.attendance-chart-container{gap:2px!important}.attendance-chart-label{font-size:8px!important}.attendance-filters-row{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.attendance-filters-row>*{width:100%!important;min-width:unset!important;max-width:100%!important}.schedule-day-header{font-size:11px!important}.schedule-class-card{padding:4px 6px!important;font-size:11px!important}.schedule-class-detail{font-size:10px!important}.schedule-nav-row button,.schedule-nav-row .btn{padding:4px 8px!important;font-size:12px!important}.settings-logo-preview{max-width:100px!important;width:100px!important;height:auto!important}.settings-day-row{min-width:unset!important}.settings-form{gap:12px!important}.user-detail-summary-grid{grid-template-columns:1fr!important}.user-detail-calendar-grid{gap:2px!important}.user-detail-calendar-cell{padding:4px 2px!important;font-size:11px!important}.user-detail-comparison-row{grid-template-columns:1fr!important;flex-direction:column!important}}@media(min-width:800px){.modal-overlay{align-items:center!important;padding:16px!important}.modal-dialog{border-radius:var(--radius-lg)!important;max-height:90vh!important}}.page-enter{animation:pageEnter .3s var(--ease-out, cubic-bezier(0,0,.2,1)) both}.card-animate{animation:cardEnter var(--anim-slow, .32s) var(--ease-out, cubic-bezier(0,0,.2,1)) both}.card-animate:nth-child(1){animation-delay:0ms}.card-animate:nth-child(2){animation-delay:80ms}.card-animate:nth-child(3){animation-delay:.16s}.card-animate:nth-child(4){animation-delay:.24s}.card-animate:nth-child(5){animation-delay:.32s}.card-animate:nth-child(6){animation-delay:.4s}.table-container{border-radius:16px;border:1px solid var(--border-color);overflow:hidden;background-color:var(--bg-primary)}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--border-color) 50%,var(--bg-tertiary) 75%);background-size:400px 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--radius-sm)}.btn-press:active{animation:pressDown .15s ease}input[type=checkbox]:checked{animation:checkPop .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1))}.count-up{animation:countUp .4s var(--ease-out, cubic-bezier(0,0,.2,1)) both}tr.hoverable{transition:background-color var(--transition, .15s)}tr.hoverable:hover{background-color:#4f46e505}.table-row-hover{transition:background-color .15s cubic-bezier(.4,0,.2,1)}.table-row-hover:hover{background-color:#4f46e505}.nav-icon-active{animation:iconWiggle .45s cubic-bezier(.36,.07,.19,.97) both;display:flex;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1)}.feedback-banner{animation:slideDown .2s var(--ease-out, cubic-bezier(0,0,.2,1)) both}.btn-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .55s linear infinite;display:inline-block;flex-shrink:0}.table-base{width:100%;border-collapse:collapse}.th-base{text-align:left;padding:14px 20px;font-size:12px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border-color);background-color:transparent;letter-spacing:.05em;text-transform:uppercase;position:sticky;top:0;z-index:1}.td-base{padding:14px 20px;font-size:14px;color:var(--text-primary);border-bottom:1px solid var(--border-color);transition:background-color .15s cubic-bezier(.4,0,.2,1)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Plus Jakarta Sans,system-ui,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.5}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.25;letter-spacing:-.02em}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:var(--radius-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}tbody tr{transition:background-color var(--transition)}tbody tr:hover{background-color:var(--bg-tertiary)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px!important;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition)}select:focus{outline:none;border-color:var(--accent-color)!important;box-shadow:0 0 0 3px #5b5ef41f}input:focus{outline:none;border-color:var(--accent-color)!important;box-shadow:0 0 0 3px #5b5ef41f}.modal-overlay,.modal-dialog{will-change:opacity,transform}.auth-register-link{transition:color var(--transition),text-decoration-color var(--transition)}.auth-register-link:hover{text-decoration:underline;text-underline-offset:3px;color:var(--accent-hover, #4338CA)}.auth-register-link:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;border-radius:6px}@media(max-width:425px){.schedule-weekly-grid{grid-template-columns:1fr!important;min-height:auto!important;gap:8px!important}.schedule-nav-row{flex-wrap:nowrap!important;justify-content:space-between!important;overflow:hidden}.schedule-nav-row button{padding:6px 8px!important;font-size:11px!important;white-space:nowrap;flex-shrink:0}.schedule-nav-row span{font-size:13px!important;min-width:0!important;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}}