:root{--c-primary:#e11d48;--c-primary-50:#fff1f2;--c-primary-100:#ffe4e6;--c-primary-200:#fecdd3;--c-primary-500:#f43f5e;--c-primary-600:#e11d48;--c-primary-700:#be123c;--c-primary-800:#9f1239;--c-accent:#0ea5e9;--c-accent-50:#f0f9ff;--c-accent-100:#e0f2fe;--c-accent-200:#bae6fd;--c-accent-500:#0ea5e9;--c-accent-600:#0284c7;--c-accent-700:#0369a1;--c-bg:#fafaf9;--c-surface:#fff;--c-surface-2:#f5f5f4;--c-border:#e7e5e4;--c-border-strong:#d6d3d1;--c-text:#1c1917;--c-text-muted:#57534e;--c-text-subtle:#78716c;--c-success:#16a34a;--c-warning:#f59e0b;--c-danger:#dc2626;--radius-sm:6px;--radius:10px;--radius-lg:14px;--radius-xl:20px;--shadow-sm:0 1px 2px #1c19170a,0 1px 1px #1c191708;--shadow:0 2px 6px #1c19170f,0 1px 2px #1c19170a;--shadow-md:0 8px 24px -8px #1c19171f,0 4px 8px -4px #1c19170f;--shadow-lg:0 20px 48px -16px #1c19172e,0 8px 16px -8px #1c191714;--t-fast:.14s;--t-base:.22s;--t-slow:.38s;--ease:cubic-bezier(.22,1,.36,1)}[data-theme=redblue]{--c-primary:#e11d48;--c-primary-50:#fff1f2;--c-primary-100:#ffe4e6;--c-primary-200:#fecdd3;--c-primary-500:#f43f5e;--c-primary-600:#e11d48;--c-primary-700:#be123c;--c-primary-800:#9f1239;--c-accent:#0ea5e9;--c-accent-50:#f0f9ff;--c-accent-100:#e0f2fe;--c-accent-200:#bae6fd;--c-accent-500:#0ea5e9;--c-accent-600:#0284c7;--c-accent-700:#0369a1}[data-theme=bluered]{--c-primary:#1d4ed8;--c-primary-50:#eff6ff;--c-primary-100:#dbeafe;--c-primary-200:#bfdbfe;--c-primary-500:#3b82f6;--c-primary-600:#1d4ed8;--c-primary-700:#1e40af;--c-primary-800:#1e3a8a;--c-accent:#e11d48;--c-accent-50:#fff1f2;--c-accent-100:#ffe4e6;--c-accent-200:#fecdd3;--c-accent-500:#f43f5e;--c-accent-600:#e11d48;--c-accent-700:#be123c}[data-theme=emerald]{--c-primary:#059669;--c-primary-50:#ecfdf5;--c-primary-100:#d1fae5;--c-primary-200:#a7f3d0;--c-primary-500:#10b981;--c-primary-600:#059669;--c-primary-700:#047857;--c-primary-800:#065f46;--c-accent:#f59e0b;--c-accent-50:#fffbeb;--c-accent-100:#fef3c7;--c-accent-200:#fde68a;--c-accent-500:#f59e0b;--c-accent-600:#d97706;--c-accent-700:#b45309}[data-theme=violet]{--c-primary:#7c3aed;--c-primary-50:#f5f3ff;--c-primary-100:#ede9fe;--c-primary-200:#ddd6fe;--c-primary-500:#8b5cf6;--c-primary-600:#7c3aed;--c-primary-700:#6d28d9;--c-primary-800:#5b21b6;--c-accent:#ec4899;--c-accent-50:#fdf2f8;--c-accent-100:#fce7f3;--c-accent-200:#fbcfe8;--c-accent-500:#ec4899;--c-accent-600:#db2777;--c-accent-700:#be185d}[data-anim=low]{--t-fast:0s;--t-base:80ms;--t-slow:.12s}[data-anim=medium]{--t-fast:.14s;--t-base:.22s;--t-slow:.38s}[data-anim=high]{--t-fast:.2s;--t-base:.32s;--t-slow:.54s}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;font-family:Sarabun,system-ui,sans-serif;font-size:15px;line-height:1.5}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}input,select,textarea{outline:none}.mono{font-family:JetBrains Mono,ui-monospace,monospace}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d6d3d1 padding-box padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#a8a29e padding-box padding-box;border:2px solid #0000}#root{min-height:100vh}.app-shell{grid-template-columns:264px 1fr;min-height:100vh;display:grid}.app-main{flex-direction:column;min-width:0;min-height:100vh;display:flex}.page{flex:1;min-width:0;padding:28px 32px 64px}.page-header{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.page-title{letter-spacing:-.01em;margin:0;font-size:26px;font-weight:700}.page-subtitle{color:var(--c-text-muted);margin:4px 0 0;font-size:14px}.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-header{border-bottom:1px solid var(--c-border);justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.card-title{margin:0;font-size:15px;font-weight:700}.card-body{padding:20px}.stat-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);padding:20px;position:relative;overflow:hidden}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card .stat-icon{background:var(--c-primary-50);width:40px;height:40px;color:var(--c-primary-700);border-radius:10px;place-items:center;margin-bottom:12px;display:grid}.stat-card .stat-value{letter-spacing:-.02em;font-size:28px;font-weight:700}.stat-card .stat-label{color:var(--c-text-muted);font-size:13px}.btn{border-radius:var(--radius);background:var(--c-surface);border:1px solid var(--c-border-strong);color:var(--c-text);transition:all var(--t-fast) var(--ease);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:9px 16px;font-weight:600;display:inline-flex}.btn:hover{background:var(--c-surface-2)}.btn:active{transform:translateY(.5px)}.btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.btn-primary:hover{background:var(--c-primary-700);border-color:var(--c-primary-700)}.btn-accent{background:var(--c-accent);border-color:var(--c-accent);color:#fff}.btn-ghost{background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--c-surface-2)}.btn-danger{background:var(--c-danger);border-color:var(--c-danger);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-sm{padding:6px 11px;font-size:13px}.btn-icon{width:36px;padding:0}.btn-icon.btn-sm{width:30px;height:30px}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--c-text-muted);font-size:13px;font-weight:600}.input,.select,.textarea{border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-surface);width:100%;color:var(--c-text);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);padding:9px 12px}.input:focus,.select:focus,.textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--c-primary) 18%,transparent)}.textarea{resize:vertical;min-height:80px}.badge{background:var(--c-surface-2);color:var(--c-text-muted);border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex}.badge-primary{background:var(--c-primary-100);color:var(--c-primary-800)}.badge-accent{background:var(--c-accent-100);color:var(--c-accent-700)}.badge-success{color:#166534;background:#dcfce7}.badge-warning{color:#92400e;background:#fef3c7}.badge-danger{color:#991b1b;background:#fee2e2}.table{border-collapse:separate;border-spacing:0;width:100%}.table th{text-align:left;color:var(--c-text-muted);background:var(--c-surface-2);border-bottom:1px solid var(--c-border);text-transform:uppercase;letter-spacing:.04em;z-index:1;padding:12px 14px;font-size:12px;font-weight:600;position:sticky;top:0}.table td{border-bottom:1px solid var(--c-border);padding:12px 14px;font-size:14px}.table tbody tr{transition:background var(--t-fast) var(--ease)}.table tbody tr:hover{background:var(--c-primary-50)}.table tr:last-child td{border-bottom:none}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--t-base) var(--ease);background:#1c191773;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--c-surface);border-radius:var(--radius-xl);width:100%;max-width:min(92vw,720px);max-height:88vh;box-shadow:var(--shadow-lg);animation:modalPop var(--t-base) var(--ease);flex-direction:column;display:flex}.modal-header{border-bottom:1px solid var(--c-border);justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.modal-title{margin:0;font-size:18px;font-weight:700}.modal-body{flex:1;padding:22px 24px;overflow-y:auto}.modal-footer{border-top:1px solid var(--c-border);justify-content:flex-end;gap:10px;padding:14px 24px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPop{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.fade-in{animation:fadeIn var(--t-base) var(--ease)}.slide-up,.stagger>*{animation:slideUp var(--t-slow) var(--ease) both}.stagger>:first-child{animation-delay:0s}.stagger>:nth-child(2){animation-delay:60ms}.stagger>:nth-child(3){animation-delay:.12s}.stagger>:nth-child(4){animation-delay:.18s}.stagger>:nth-child(5){animation-delay:.24s}.stagger>:nth-child(6){animation-delay:.3s}.sidebar{background:var(--c-surface);border-right:1px solid var(--c-border);flex-direction:column;height:100vh;display:flex;position:sticky;top:0}.sidebar-brand{border-bottom:1px solid var(--c-border);align-items:center;gap:12px;padding:18px 18px 14px;display:flex}.sidebar-brand img{object-fit:contain;width:44px;height:44px}.sidebar-brand .brand-text{flex-direction:column;line-height:1.25;display:flex}.sidebar-brand .brand-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.sidebar-brand .brand-sub{color:var(--c-text-muted);font-size:11px}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 10px;display:flex;overflow-y:auto}.nav-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-subtle);padding:14px 12px 6px;font-size:11px;font-weight:700}.nav-item{border-radius:var(--radius);color:var(--c-text-muted);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);cursor:pointer;text-align:left;align-items:center;gap:12px;padding:9px 12px;font-size:14px;font-weight:500;display:flex}.nav-item:hover{background:var(--c-surface-2);color:var(--c-text)}.nav-item.active{background:var(--c-primary-50);color:var(--c-primary-700);font-weight:600}.nav-icon{place-items:center;width:20px;height:20px;display:grid}.sidebar-footer{border-top:1px solid var(--c-border);align-items:center;gap:10px;padding:12px;display:flex}.avatar{background:var(--c-primary);color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-size:13px;font-weight:700;display:grid}.toast-stack{z-index:200;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast{background:var(--c-text);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);animation:slideUp var(--t-base) var(--ease);align-items:center;gap:10px;min-width:240px;padding:12px 18px;display:flex}.toast.toast-success{background:var(--c-success)}.toast.toast-danger{background:var(--c-danger)}.tabs{border-bottom:1px solid var(--c-border);gap:4px;margin-bottom:20px;display:flex}.tab-trigger{color:var(--c-text-muted);cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 16px;font-weight:600}.tab-trigger:hover{color:var(--c-text)}.tab-trigger.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}.login-shell{grid-template-columns:1fr 1fr;min-height:100vh;display:grid}.login-art{background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-800) 55%,var(--c-accent-700) 100%);color:#fff;flex-direction:column;justify-content:space-between;padding:56px;display:flex;position:relative;overflow:hidden}.login-art:before,.login-art:after{content:"";filter:blur(48px);opacity:.45;border-radius:50%;position:absolute}.login-art:before{background:var(--c-accent-500);width:380px;height:380px;top:-120px;right:-120px}.login-art:after{opacity:.18;background:#fff;width:280px;height:280px;bottom:-80px;left:-80px}.login-form-wrap{place-items:center;padding:56px;display:grid}.login-form-card{width:100%;max-width:380px}.row{align-items:center;gap:12px;display:flex}.spacer{flex:1}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.muted{color:var(--c-text-muted)}.subtle{color:var(--c-text-subtle)}.center{place-items:center;display:grid}.empty{text-align:center;color:var(--c-text-muted);padding:48px 24px}.empty-icon{background:var(--c-surface-2);width:56px;height:56px;color:var(--c-text-subtle);border-radius:14px;place-items:center;margin:0 auto 16px;display:grid}.progress{background:var(--c-surface-2);border-radius:999px;height:8px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,var(--c-primary),var(--c-accent));height:100%;transition:width var(--t-slow) var(--ease);border-radius:999px}.mobile-topbar{background:var(--c-surface);border-bottom:1px solid var(--c-border);z-index:40;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:none;position:sticky;top:0}.mobile-topbar .mt-brand{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.mobile-topbar .mt-brand img{object-fit:contain;flex-shrink:0;width:34px;height:34px}.mobile-topbar .mt-brand .mt-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.mobile-topbar .mt-brand .mt-sub{color:var(--c-text-muted);font-size:11px}.mobile-topbar .mt-burger{background:var(--c-surface-2);width:40px;height:40px;color:var(--c-text);border-radius:10px;flex-shrink:0;place-items:center;display:grid}.sidebar-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:49;animation:fadeIn var(--t-base) var(--ease);background:#1c191773;display:none;position:fixed;inset:0}.sidebar-backdrop.open{display:block}[data-anim=low] .stagger>*,[data-anim=low] .fade-in,[data-anim=low] .slide-up{animation-duration:0s}@media (width<=1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.login-shell{grid-template-columns:1fr}.login-art{min-height:240px;padding:36px 28px}.login-form-wrap{padding:36px 28px}.page{padding:22px 22px 56px}}@media (width<=720px){body{font-size:14px}.dashboard-cols,.calendar-cols,.mascot-cols,.school-cols,.student-detail-cols{grid-template-columns:1fr!important}.app-shell{grid-template-columns:1fr}.sidebar{z-index:50;width:280px;height:100vh;transition:transform var(--t-base) var(--ease);box-shadow:var(--shadow-lg);position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-topbar{display:flex}.page{padding:16px 14px 80px}.page-header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}.page-title{font-size:22px}.grid-4{grid-template-columns:repeat(2,1fr);gap:10px}.grid-3,.grid-2{grid-template-columns:1fr;gap:10px}.stat-card{padding:14px}.stat-card .stat-value{font-size:22px}.tabs{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab-trigger{white-space:nowrap;flex-shrink:0;padding:10px 12px;font-size:13px}.card-header{flex-direction:column;align-items:stretch;gap:10px;padding:14px}.card-body{padding:14px}.btn{padding:8px 12px;font-size:13px}.modal{max-height:92vh;max-width:96vw!important}.modal-body{padding:16px 18px}.toast-stack{align-items:stretch;bottom:12px;left:12px;right:12px}.toast{width:100%;min-width:0;padding:10px 14px;font-size:13px}.login-shell{grid-template-columns:1fr}.login-art{min-height:auto;padding:28px 22px}.login-form-wrap{padding:28px 22px}}@media (width<=420px){.grid-4{grid-template-columns:1fr 1fr;gap:8px}.page-title{font-size:20px}}@media print{.sidebar,.mobile-topbar,.toast-stack,.sidebar-backdrop{display:none!important}.app-shell{grid-template-columns:1fr}.page{padding:0}}