:root{--bg-primary: #fafafa;--bg-secondary: #f4f4f6;--bg-tertiary: #ebebef;--text-primary: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;--border-color: #e2e8f0;--border-strong: #c7d0dd;--accent-color: #4f46e5;--accent-hover: #3730a3;--accent-subtle: #eef2ff;--accent-vivid: #f97316;--error-color: #dc2626;--error-bg: #fef2f2;--success-color: #16a34a;--success-bg: #f0fdf4;--warning-color: #d97706;--warning-bg: #fffbeb;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);--shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .06);--shadow-md: 0 4px 8px rgba(15, 23, 42, .08), 0 12px 28px rgba(15, 23, 42, .08);--shadow-lg: 0 10px 20px rgba(15, 23, 42, .1), 0 24px 48px rgba(15, 23, 42, .1);--card-border: 1px solid rgba(15, 23, 42, .07);--gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-hover));--gradient-surface: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));--success-border: rgba(22, 163, 74, .3);--error-border: rgba(220, 38, 38, .3);--warning-border: rgba(217, 119, 6, .3);--overlay-color: rgba(15, 23, 42, .45);--radius-sm: 6px;--radius: 10px;--radius-lg: 16px;--radius-xl: 20px;--transition: .15s 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)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(24px);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(.94);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pageEnter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEnter{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pressDown{0%{transform:scale(1)}50%{transform:scale(.95)}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: #161b22;--bg-tertiary: #1c2333;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #2d3748;--border-strong: #3d4f6b;--accent-color: #818cf8;--accent-hover: #6366f1;--accent-subtle: #1e1f3a;--error-color: #f87171;--error-bg: #2d1515;--success-color: #4ade80;--success-bg: #0f2d1a;--warning-color: #fbbf24;--warning-bg: #2d2008;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .25);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .35), 0 20px 40px rgba(0, 0, 0, .3);--card-border: 1px solid rgba(255, 255, 255, .06);--gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-hover));--gradient-surface: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));--success-border: rgba(74, 222, 128, .3);--error-border: rgba(248, 113, 113, .3);--warning-border: rgba(251, 191, 36, .3);--overlay-color: rgba(0, 0, 0, .65);--accent-vivid: #f97316}@media(min-width:768px){.hamburger-btn,.sidebar-close-btn,.sidebar-overlay{display:none!important}.app-main{padding:28px 32px!important}}@media(max-width:767px){.hamburger-btn,.sidebar-close-btn{display:flex!important;align-items:center}.app-main{padding:16px!important}}@media(max-width:767px){h1{font-size:20px!important}table{min-width:500px}.dashboard-grid{grid-template-columns:1fr!important}.form-row{flex-direction:column!important}header{padding:0 12px!important}.card-body{padding:14px!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 label{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}.attendance-filters-row input[type=date]{flex:1!important;min-width:120px!important}.page-header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}}@media(max-width:480px){.app-main{padding:12px!important}}:root{--header-padding: 24px;--header-left-gap: 12px;--header-right-gap: 16px;--header-avatar-size: 30px}@media(max-width:320px){:root{--header-padding: 8px;--header-left-gap: 6px;--header-right-gap: 8px;--header-avatar-size: 24px}.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:8px!important}header{padding:0 8px!important}.card-body{padding:10px!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,.dashboard-card-content{gap:8px!important}.dashboard-card-value{font-size:28px!important}.dashboard-icon-container{padding:8px!important}.dashboard-icon-container svg{width:28px!important;height:28px!important;font-size:28px!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 label{width:100%!important;flex-wrap:nowrap!important}.attendance-filters-row input[type=date]{flex:1!important;min-width:0!important;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:768px){.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 var(--anim-base, .2s) 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:60ms}.card-animate:nth-child(3){animation-delay:.12s}.card-animate:nth-child(4){animation-delay:.18s}.card-animate:nth-child(5){animation-delay:.24s}.card-animate:nth-child(6){animation-delay:.3s}.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),transform .12s ease}tr.hoverable:hover{background-color:var(--bg-tertiary)}.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:10px 12px;font-size:13px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border-color);background-color:var(--bg-tertiary);letter-spacing:.04em}.td-base{padding:10px 12px;font-size:14px;color:var(--text-primary);border-bottom:1px solid var(--border-color)}.table-row-hover{transition:background-color .15s cubic-bezier(.4,0,.2,1)}.table-row-hover:hover{background-color:var(--bg-tertiary)}*,*: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}