:root{--primary-blue: #3B82F6;--primary-blue-dark: #2563EB;--primary-blue-light: #DBEAFE;--primary-green: #10B981;--primary-green-dark: #059669;--primary-green-light: #D1FAE5;--primary-orange: #F59E0B;--primary-orange-dark: #D97706;--primary-orange-light: #FEF3C7;--primary-red: #EF4444;--primary-red-dark: #DC2626;--primary-red-light: #FEE2E2;--primary-purple: #8B5CF6;--primary-purple-dark: #7C3AED;--primary-purple-light: #EDE9FE;--primary-cyan: #06B6D4;--primary-cyan-dark: #0891B2;--primary-cyan-light: #CFFAFE;--primary-pink: #EC4899;--primary-pink-dark: #DB2777;--primary-pink-light: #FCE7F3;--bg-primary: #F8FAFC;--bg-secondary: #F1F5F9;--bg-tertiary: #E2E8F0;--bg-white: #FFFFFF;--bg-gradient: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 50%, #F8FAFC 100%);--text-primary: #1E293B;--text-secondary: #475569;--text-muted: #64748B;--text-light: #94A3B8;--text-white: #FFFFFF;--border-primary: #E2E8F0;--border-light: #F1F5F9;--border-focus: #3B82F6;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-blue: 0 4px 14px rgba(59, 130, 246, .35);--shadow-green: 0 4px 14px rgba(16, 185, 129, .35);--shadow-orange: 0 4px 14px rgba(245, 158, 11, .35);--shadow-red: 0 4px 14px rgba(239, 68, 68, .35);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-2xl: 24px;--radius-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-md: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-slower: .5s ease;--chart-color-1: #3B82F6;--chart-color-2: #8B5CF6;--chart-color-3: #EC4899;--chart-color-4: #F59E0B;--chart-color-5: #10B981;--chart-color-6: #06B6D4;--mkt-display-xl: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);--mkt-display-lg: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);--mkt-display-md: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);--mkt-body-lg: clamp(1rem, .95rem + .25vw, 1.15rem);--mkt-body: 1rem;--mkt-container: 1200px;--mkt-section-y: clamp(3rem, 1.8rem + 5vw, 6rem);--mkt-gutter: clamp(1rem, .55rem + 2vw, 2rem)}.bold-header-grid::part(header-cell){font-weight:700}.hoverable-grid::part(body-cell){background-color:transparent!important;transition:background-color .2s,color .2s}.hoverable-grid::part(body-row):hover{background-color:#e0f2fe!important}.hoverable-grid::part(body-row):hover .hoverable-grid::part(body-cell){color:#639!important}.clickable-grid::part(body-row),.clickable-grid::part(body-cell){cursor:pointer}.clickable-grid vaadin-grid-cell-content{cursor:pointer}.attendance-selected-cell{border-left:2px solid rgb(74,129,217)!important;border-right:2px solid rgb(74,129,217)!important}.attendance-selected-bottom-cell{border-bottom:2px solid rgb(74,129,217)!important}.attendance-selected-date-cell{border-left:2px solid rgb(74,129,217)!important;border-right:2px solid rgb(74,129,217)!important;border-top:2px solid rgb(74,129,217)!important}.attendance-table vaadin-grid-cell-content{padding:0;height:100%;width:100%}.attendance-grid::part(cell) [part~=row-green]{background-color:#86efac}.attendance-grid::part(cell) [part~=row-red]{background-color:#fca5a5}.attendance-grid::part(cell){padding:0!important}.attendance-grid::part(body-cell){padding:0!important}.attendance-grid::part(header-cell){padding:0!important}.student-payment-schedule-item:hover{cursor:pointer;box-shadow:0 4px 8px #0003}.hover-cursor{cursor:pointer}