:root {
    --purple-950: #2e1065;
    --purple-900: #3b0764;
    --purple-800: #4c1d95;
    --purple-700: #5b21b6;
    --purple-600: #6d28d9;
    --purple-500: #7c3aed;
    --purple-400: #a78bfa;
    --purple-200: #ddd6fe;
    --purple-100: #ede9fe;
    --purple-50: #f7f5ff;
    --ink: #201a2f;
    --muted: #746c83;
    --line: #e8e3ef;
    --surface: #ffffff;
    --canvas: #f6f4f9;
    --success: #16845b;
    --warning: #b36512;
    --danger: #be3b55;
    --blue: #3767cf;
    --sidebar-width: 266px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Segoe UI", Inter, Arial, sans-serif; color: var(--ink); background: var(--canvas); }
body { min-width: 320px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }

.btn, .form-control, .form-select, .alert, .card { border-radius: 1px !important; }
.btn { min-height: 42px; padding: .62rem 1rem; font-weight: 650; letter-spacing: -.01em; }
.purple-button { color: white; border: 0; background: linear-gradient(135deg, var(--purple-500), var(--purple-700)); box-shadow: 0 8px 20px rgba(91, 33, 182, .18); }
.purple-button:hover, .purple-button:focus { color: white; background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); transform: translateY(-1px); }
.white-button { border: 1px solid var(--line); background: white; color: var(--ink); }
.white-button:hover { border-color: var(--purple-400); color: var(--purple-700); background: var(--purple-50); }
.square-input { border: 1px solid #dcd5e6; min-height: 46px; padding: .7rem .8rem; background: white; }
.square-input:focus { border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(124, 58, 237, .1); }
.text-button { appearance: none; border: 0; background: none; color: var(--purple-600); font-weight: 650; padding: 0; }
.text-purple { color: var(--purple-500) !important; }
.eyebrow { display: block; color: var(--purple-600); font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; margin-bottom: .45rem; }
.eyebrow.light { color: var(--purple-200); }

/* Brand block */
.brand-mark { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 2px; width: 20px; height: 20px; flex: 0 0 auto; }
.brand-mark span { background: var(--purple-400); }
.brand-mark span:first-child, .brand-mark span:last-child { background: white; }
.brand-mark.light-mark { grid-template-columns: repeat(2, 11px); grid-template-rows: repeat(2, 11px); width: 24px; height: 24px; }
.brand-mark.small-mark { grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); width: 16px; height: 16px; }

/* Login */
.login-layout { min-height: 100vh; background: white; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(480px, 1.08fr); }
.login-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 48px 56px 34px; color: white; background: linear-gradient(145deg, var(--purple-950) 0%, var(--purple-700) 52%, var(--purple-500) 100%); }
.login-brand-panel::before, .login-brand-panel::after { content: ""; position: absolute; pointer-events: none; }
.login-brand-panel::before { width: 370px; height: 370px; right: -180px; top: 15%; border: 1px solid rgba(255,255,255,.13); box-shadow: -52px 52px 0 rgba(255,255,255,.035), -104px 104px 0 rgba(255,255,255,.025); transform: rotate(45deg); }
.login-brand-panel::after { inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent); }
.login-brand-top { display: flex; gap: 13px; align-items: center; position: relative; z-index: 1; }
.login-brand-top strong, .login-brand-top small { display: block; }
.login-brand-top strong { font-size: 1.15rem; letter-spacing: -.025em; }
.login-brand-top small { color: rgba(255,255,255,.62); font-size: .73rem; text-transform: uppercase; letter-spacing: .14em; }
.login-copy { position: relative; z-index: 1; margin: auto 0; max-width: 550px; padding: 50px 0; }
.login-copy h1 { font-size: clamp(2.55rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.065em; font-weight: 760; margin-bottom: 1.8rem; }
.login-copy h1 em { color: var(--purple-200); font-style: normal; }
.login-copy p { max-width: 470px; color: rgba(255,255,255,.73); font-size: 1rem; line-height: 1.65; }
.login-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.18); background: rgba(32, 12, 70, .25); }
.login-feature-grid > div { padding: 18px; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; }
.login-feature-grid > div + div { border-left: 1px solid rgba(255,255,255,.16); }
.login-feature-grid span { color: var(--purple-200); font-size: .7rem; font-weight: 800; }
.login-feature-grid strong, .login-feature-grid small { grid-column: 2; display: block; }
.login-feature-grid strong { font-size: .87rem; }
.login-feature-grid small { color: rgba(255,255,255,.58); font-size: .7rem; margin-top: 3px; }
.login-copyright { position: relative; z-index: 1; margin-top: 26px; color: rgba(255,255,255,.45); }
.login-form-panel { display: grid; place-items: center; padding: 42px; background: linear-gradient(135deg, #fff 45%, #faf8ff 100%); }
.login-form-wrap { width: 100%; max-width: 430px; }
.login-kicker { display: inline-block; background: var(--purple-100); color: var(--purple-700); border-left: 3px solid var(--purple-500); padding: 6px 9px; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; margin-bottom: 18px; }
.login-form-wrap h2 { font-size: 2rem; letter-spacing: -.045em; margin-bottom: .45rem; }
.login-subtitle { color: var(--muted); margin-bottom: 2rem; }
.login-form-wrap .form-label { color: #4b4359; font-size: .8rem; font-weight: 700; margin-bottom: .45rem; }
.login-form-wrap .form-check-label { color: var(--muted); font-size: .82rem; }
.form-check-input:checked { background-color: var(--purple-600); border-color: var(--purple-600); }
.validation-message { display: block; color: #b4233d; font-size: .73rem; margin-top: 4px; }
.login-submit { display: flex; align-items: center; justify-content: space-between; padding-left: 1.1rem; }
.square-alert { font-size: .82rem; border: 0; border-left: 3px solid #c43d55; }
.demo-login-block { margin-top: 25px; border: 1px solid var(--purple-200); border-left: 4px solid var(--purple-500); background: var(--purple-50); padding: 15px 16px; }
.demo-login-block > div { display: flex; align-items: center; gap: 7px; font-size: .84rem; }
.demo-dot { width: 7px; height: 7px; background: var(--success); }
.demo-login-block p { margin: 5px 0 10px; color: var(--muted); font-size: .76rem; }
.demo-login-block code { display: block; color: var(--purple-800); font-size: .75rem; background: white; border: 1px solid #e6def4; padding: 4px 7px; margin-top: 4px; }
.demo-login-block button { margin-top: 11px; color: var(--purple-700); border: 0; background: none; padding: 0; font-weight: 750; font-size: .78rem; }
.preview-account-list { display: grid; gap: 7px; margin: 10px 0; }
.demo-login-block .preview-account { width: 100%; margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--ink); background: white; border: 1px solid var(--purple-100); text-align: left; }
.preview-account > span:nth-child(2) { min-width: 0; flex: 1; }
.preview-account strong, .preview-account small { display: block; }
.preview-account small { margin-top: 2px; color: var(--muted); font-size: .66rem; font-weight: 500; }
.preview-account b { color: var(--purple-600); font-size: 1rem; }
.preview-avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: white; background: var(--purple-700); font-size: .66rem; }
.preview-avatar.teacher { color: var(--ink); background: #f2c94c; }
.login-help { text-align: center; color: var(--muted); font-size: .77rem; margin-top: 22px; }
.login-help a { color: var(--purple-700); font-weight: 650; }

/* Portal chrome */
.portal-shell { min-height: 100vh; display: flex; background: var(--canvas); }
.portal-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; color: white; background: linear-gradient(175deg, var(--purple-950) 0%, var(--purple-800) 58%, var(--purple-700) 100%); overflow-y: auto; }
.portal-sidebar::after { content: ""; position: fixed; pointer-events: none; left: 0; bottom: 0; width: var(--sidebar-width); height: 38%; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, transparent, #000); }
.sidebar-brand { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.1); position: relative; z-index: 1; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { letter-spacing: -.025em; font-size: 1rem; }
.sidebar-brand small { color: rgba(255,255,255,.5); font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; }
.sidebar-close { margin-left: auto; border: 0; background: rgba(255,255,255,.1); color: white; width: 32px; height: 32px; font-size: 1.3rem; }
.school-switcher { position: relative; z-index: 1; margin: 18px 16px 12px; padding: 12px; display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); }
.school-tile { width: 38px; height: 38px; display: grid; place-items: center; background: linear-gradient(135deg, white, var(--purple-200)); color: var(--purple-800); font-size: .74rem; font-weight: 850; }
.school-switcher small, .school-switcher strong { display: block; min-width: 0; }
.school-switcher small { color: rgba(255,255,255,.5); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.school-switcher strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; margin-top: 2px; }
.switcher-arrow { color: rgba(255,255,255,.55); }
.portal-nav { position: relative; z-index: 1; padding: 10px 14px; }
.nav-caption { display: block; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; font-weight: 750; padding: 8px 10px; }
.nav-caption.second { margin-top: 20px; }
.portal-nav-link { height: 45px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; margin: 4px 0; padding: 0 10px; color: rgba(255,255,255,.68); text-decoration: none; font-size: .8rem; font-weight: 600; border-left: 3px solid transparent; transition: .18s ease; }
.portal-nav-link:hover { color: white; background: rgba(255,255,255,.07); }
.portal-nav-link.active { color: white; background: linear-gradient(90deg, rgba(167,139,250,.28), rgba(255,255,255,.06)); border-left-color: var(--purple-400); }
.nav-glyph { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); font-size: .66rem; font-weight: 850; }
.portal-nav-link.active .nav-glyph { color: var(--purple-900); background: white; border-color: white; }
.nav-count { padding: 2px 6px; color: white; background: rgba(255,255,255,.12); font-size: .62rem; }
.nav-dot { width: 6px; height: 6px; background: #ffc875; }
.disabled-link { opacity: .5; cursor: not-allowed; }
.disabled-link small { text-transform: uppercase; font-size: .55rem; color: var(--purple-200); }
.sidebar-footer { position: relative; z-index: 1; margin-top: auto; padding: 14px; }
.help-block { display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(30,10,65,.23); }
.help-icon { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-weight: 800; }
.help-block strong, .help-block small { display: block; }
.help-block strong { font-size: .73rem; }
.help-block small { color: rgba(255,255,255,.48); font-size: .62rem; margin-top: 2px; }
.logout-link { width: 100%; display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 0; color: rgba(255,255,255,.58); background: transparent; text-align: left; font-size: .73rem; }
.logout-link:hover { color: white; background: rgba(255,255,255,.06); }
.portal-workspace { min-width: 0; width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); }
.portal-topbar { position: sticky; z-index: 20; top: 0; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-left small, .topbar-left strong { display: block; }
.topbar-left small { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; }
.topbar-left strong { font-size: .9rem; margin-top: 2px; }
.menu-button { width: 38px; height: 38px; border: 1px solid var(--line); background: white; color: var(--purple-700); }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.demo-chip { display: flex; gap: 7px; align-items: center; padding: 6px 9px; color: var(--purple-700); background: var(--purple-50); border: 1px solid var(--purple-200); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.demo-chip span { width: 6px; height: 6px; background: var(--success); }
.notification-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); background: white; color: var(--purple-700); font-size: 1.15rem; }
.notification-button span { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; display: grid; place-items: center; background: var(--purple-600); color: white; font-size: .58rem; }
.profile-block { display: flex; align-items: center; gap: 9px; padding-left: 15px; border-left: 1px solid var(--line); }
.profile-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--purple-500), var(--purple-800)); font-size: .7rem; font-weight: 800; }
.profile-block strong, .profile-block small { display: block; }
.profile-block strong { font-size: .76rem; }
.profile-block small { color: var(--muted); font-size: .62rem; margin-top: 2px; }
.portal-content { padding: 30px; max-width: 1600px; margin: 0 auto; }

/* Dashboard */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.055em; margin-bottom: .35rem; }
.page-heading p { color: var(--muted); font-size: .85rem; margin: 0; }
.compact-heading { align-items: center; }
.heading-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card { position: relative; min-height: 166px; padding: 20px; overflow: hidden; border: 1px solid var(--line); background: white; }
.metric-card::after { content: ""; position: absolute; right: -26px; bottom: -42px; width: 95px; height: 95px; border: 15px solid var(--purple-50); transform: rotate(45deg); }
.metric-card.primary-metric { color: white; border: 0; background: linear-gradient(145deg, var(--purple-600), var(--purple-800)); }
.metric-card.primary-metric::after { border-color: rgba(255,255,255,.08); }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.metric-top small { color: var(--muted); font-size: .65rem; }
.primary-metric .metric-top small { color: rgba(255,255,255,.63); }
.metric-top .positive { color: var(--success); }
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); font-size: .7rem; font-weight: 850; }
.metric-icon.soft { color: var(--purple-700); background: var(--purple-100); border-color: var(--purple-200); }
.metric-icon.amber { color: var(--warning); background: #fff4dd; border-color: #f5dfb6; }
.metric-icon.blue { color: var(--blue); background: #eaf0ff; border-color: #d7e1fb; }
.metric-card > strong { position: relative; z-index: 1; display: block; font-size: 1.8rem; letter-spacing: -.045em; line-height: 1; }
.metric-card > span { position: relative; z-index: 1; display: block; color: var(--muted); font-size: .71rem; margin-top: 7px; }
.primary-metric > span { color: rgba(255,255,255,.63); }
.metric-card > a { position: relative; z-index: 1; display: inline-block; color: var(--purple-700); font-size: .69rem; font-weight: 750; margin-top: 13px; text-decoration: none; }
.micro-bars { position: absolute; z-index: 1; right: 18px; bottom: 18px; height: 42px; display: flex; align-items: end; gap: 4px; }
.micro-bars i { width: 5px; background: rgba(255,255,255,.32); }
.metric-line { position: relative; z-index: 1; height: 4px; margin-top: 18px; background: var(--purple-100); }
.metric-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple-400), var(--purple-700)); }
.attendance-dots { position: relative; z-index: 1; display: flex; gap: 5px; margin-top: 18px; }
.attendance-dots i { width: 10px; height: 10px; background: #8ed7bd; }
.attendance-dots i.off { background: #e7e2ec; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 17px; }
.panel-block { border: 1px solid var(--line); background: white; }
.panel-heading { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: 1.05rem; letter-spacing: -.025em; margin: 0; }
.panel-heading .eyebrow { margin-bottom: 2px; font-size: .59rem; }
.panel-heading > a { color: var(--purple-700); font-size: .7rem; font-weight: 750; text-decoration: none; }
.square-count { width: 28px; height: 28px; display: grid; place-items: center; color: var(--danger); background: #fff0f3; font-size: .7rem; font-weight: 800; }
.finance-visual { min-height: 245px; display: grid; grid-template-columns: 210px 1fr; align-items: center; padding: 25px 30px; }
.collection-ring { --progress: 0; width: 156px; height: 156px; display: grid; place-items: center; background: conic-gradient(var(--purple-600) calc(var(--progress) * 1%), var(--purple-100) 0); position: relative; }
.collection-ring::after { content: ""; position: absolute; inset: 17px; background: white; }
.collection-ring span { position: relative; z-index: 1; text-align: center; }
.collection-ring strong, .collection-ring small { display: block; }
.collection-ring strong { font-size: 1.8rem; letter-spacing: -.05em; }
.collection-ring small { color: var(--muted); font-size: .65rem; }
.collection-breakdown { display: grid; gap: 16px; }
.collection-breakdown > div { display: flex; align-items: center; gap: 10px; }
.collection-breakdown p { margin: 0; }
.collection-breakdown small, .collection-breakdown strong { display: block; }
.collection-breakdown small { color: var(--muted); font-size: .67rem; }
.collection-breakdown strong { font-size: .9rem; margin-top: 2px; }
.legend { width: 8px; height: 28px; background: var(--purple-600); }
.legend.pale { background: var(--purple-200); }
.collection-note { border: 1px solid #d7eee5; background: #f2fbf7; padding: 10px; margin-top: 3px; }
.collection-note > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--success); background: #dcf5e9; }
.attention-row { display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid var(--line); text-decoration: none; }
.attention-row:hover { background: var(--purple-50); }
.attention-row > span:last-child { color: var(--purple-600); }
.attention-row p, .child-cell p, .guardian-cell, .activity-row p, .payment-person p { margin: 0; }
.attention-row strong, .attention-row small, .child-cell strong, .child-cell small, .guardian-cell strong, .guardian-cell small, .activity-row strong, .activity-row small, .payment-person strong, .payment-person small { display: block; }
.attention-row strong { font-size: .75rem; }
.attention-row small { color: var(--muted); font-size: .65rem; margin-top: 3px; }
.child-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--purple-700); background: var(--purple-100); border: 1px solid var(--purple-200); font-size: .65rem; font-weight: 850; }
.child-avatar.large { width: 40px; height: 40px; }
.child-avatar.xlarge { width: 48px; height: 48px; font-size: .73rem; }
.activity-list { padding: 5px 18px 12px; }
.activity-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-avatar { width: 33px; height: 33px; display: grid; place-items: center; font-size: .58rem; font-weight: 850; background: var(--purple-100); color: var(--purple-700); }
.activity-avatar.rose { color: #b23156; background: #ffedf3; }
.activity-avatar.blue { color: #315fb8; background: #eaf0ff; }
.activity-avatar.amber { color: #a25b0a; background: #fff2dc; }
.activity-row strong { font-size: .72rem; }
.activity-row small { color: var(--muted); font-size: .63rem; margin-top: 3px; }
.activity-row time { color: #9a93a4; font-size: .6rem; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; }
.quick-grid a, .quick-grid button { min-height: 106px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-content: center; padding: 14px; text-align: left; color: var(--ink); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; text-decoration: none; }
.quick-grid a:nth-child(even), .quick-grid button:nth-child(even) { border-right: 0; }
.quick-grid a:hover, .quick-grid button:hover { background: var(--purple-50); }
.quick-grid > * > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; color: var(--purple-700); background: var(--purple-100); font-size: .65rem; font-weight: 850; }
.quick-grid strong { font-size: .72rem; }
.quick-grid small { color: var(--muted); font-size: .61rem; margin-top: 3px; }

/* Toolbars and tables */
.inline-notice { display: flex; align-items: center; gap: 9px; padding: 12px 14px; margin-bottom: 15px; color: #176346; background: #effaf5; border-left: 4px solid var(--success); font-size: .78rem; }
.inline-notice > span { font-weight: 900; }
.inline-notice button { margin-left: auto; border: 0; background: none; color: inherit; font-size: 1.1rem; }
.directory-toolbar, .ledger-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--line); border-bottom: 0; background: white; }
.search-box { min-width: 280px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); background: #fbfafc; }
.search-box span { color: var(--purple-600); font-size: 1rem; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .76rem; }
.filter-tabs { display: flex; gap: 2px; }
.filter-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 10px 11px; font-size: .7rem; font-weight: 650; }
.filter-tabs button.active { color: var(--purple-700); border-bottom-color: var(--purple-600); background: var(--purple-50); }
.filter-tabs span { margin-left: 4px; color: #958da1; }
.table-block { border: 1px solid var(--line); background: white; }
.table-meta { display: flex; justify-content: space-between; padding: 12px 15px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .66rem; }
.table-meta strong { color: var(--ink); }
.portal-table { min-width: 880px; }
.portal-table th { height: 43px; padding: 0 15px; vertical-align: middle; color: #8c8497; background: #faf9fb; border-bottom: 1px solid var(--line); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.portal-table td { height: 68px; padding: 10px 15px; color: #4c4558; border-color: #eeeaf2; font-size: .72rem; }
.portal-table tbody tr { cursor: pointer; }
.portal-table tbody tr:hover { background: #fcfaff; }
.child-cell { display: flex; align-items: center; gap: 10px; }
.child-cell strong, .guardian-cell strong { color: var(--ink); font-size: .72rem; }
.child-cell small, .guardian-cell small { color: var(--muted); font-size: .62rem; margin-top: 3px; }
.class-chip, .status-chip, .payment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; font-size: .61rem; font-weight: 700; }
.class-chip { color: var(--purple-700); background: var(--purple-50); border: 1px solid var(--purple-100); }
.status-chip i, .payment-chip i { width: 6px; height: 6px; }
.alert-chip { color: #a74256; background: #fff1f4; }
.alert-chip i { background: #d2556d; }
.clear-chip { color: var(--success); background: #eef9f4; }
.clear-chip i { background: var(--success); }
.row-action { width: 30px; height: 30px; border: 1px solid var(--line); background: white; color: var(--purple-700); }
.row-action:hover { color: white; background: var(--purple-600); border-color: var(--purple-600); }

/* Child drawer */
.drawer-scrim, .modal-scrim { position: fixed; z-index: 40; inset: 0; border: 0; background: rgba(24, 14, 39, .4); backdrop-filter: blur(2px); }
.mobile-scrim { position: fixed; z-index: 25; inset: 0; border: 0; background: rgba(24, 14, 39, .46); backdrop-filter: none; }
.care-drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(520px, 94vw); display: flex; flex-direction: column; background: white; box-shadow: -24px 0 60px rgba(35, 15, 70, .16); animation: slideIn .2s ease-out; }
@keyframes slideIn { from { transform: translateX(35px); opacity: .5; } }
.drawer-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; color: white; background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); }
.drawer-header > div, .payment-person { display: flex; align-items: center; gap: 11px; }
.drawer-header p { margin: 0; }
.drawer-header strong, .drawer-header small { display: block; }
.drawer-header strong { font-size: .88rem; }
.drawer-header small { color: rgba(255,255,255,.65); font-size: .65rem; margin-top: 3px; }
.drawer-header .child-avatar { color: var(--purple-800); background: white; border-color: white; }
.drawer-header button, .modal-title-row > button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.28); color: white; background: rgba(255,255,255,.1); font-size: 1.25rem; }
.drawer-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: #faf9fc; }
.drawer-summary > div { padding: 13px 15px; border-right: 1px solid var(--line); }
.drawer-summary > div:last-child { border-right: 0; }
.drawer-summary small, .drawer-summary strong { display: block; }
.drawer-summary small { color: var(--muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .05em; }
.drawer-summary strong { font-size: .69rem; margin-top: 4px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-section-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.drawer-section-title span { font-size: .82rem; font-weight: 750; }
.drawer-section-title small { color: var(--muted); font-size: .61rem; }
.drawer-body label, .payment-modal label { display: block; color: #554d61; font-size: .68rem; font-weight: 750; margin: 13px 0 5px; }
.drawer-body textarea { min-height: 62px; font-size: .73rem; resize: vertical; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #faf9fc; }

/* Finance */
.finance-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-bottom: 15px; background: white; }
.finance-summary-grid article { min-height: 122px; padding: 19px; border-right: 1px solid var(--line); position: relative; }
.finance-summary-grid article:last-child { border-right: 0; }
.finance-summary-grid small, .finance-summary-grid strong, .finance-summary-grid span { display: block; }
.finance-summary-grid small { color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .06em; }
.finance-summary-grid strong { font-size: 1.45rem; letter-spacing: -.045em; margin-top: 14px; }
.finance-summary-grid span { color: var(--muted); font-size: .63rem; margin-top: 5px; }
.finance-summary-grid .received { border-top: 3px solid var(--success); }
.finance-summary-grid .outstanding { border-top: 3px solid #d99a39; }
.finance-summary-grid .collection { border-top: 3px solid var(--purple-600); }
.finance-summary-grid .collection div { height: 5px; margin-top: 13px; background: var(--purple-100); }
.finance-summary-grid .collection div span { display: block; height: 100%; margin: 0; background: linear-gradient(90deg, var(--purple-500), var(--purple-700)); }
.finance-ledger { border-top: 0; }
.ledger-toolbar { border: 0; border-bottom: 1px solid var(--line); }
.period-block { display: flex; align-items: center; gap: 9px; }
.period-block button { width: 30px; height: 36px; border: 1px solid var(--line); background: white; color: var(--purple-700); }
.period-block small, .period-block strong { display: block; }
.period-block small { color: var(--muted); font-size: .57rem; text-transform: uppercase; }
.period-block strong { font-size: .75rem; margin-top: 2px; }
.compact-search { margin-left: auto; min-width: 240px; }
.status-select { width: 150px; min-height: 42px; font-size: .7rem; }
.finance-table tbody tr { cursor: default; }
.paid-value { color: var(--success) !important; font-weight: 700; }
.due-value { color: #b86b16 !important; font-weight: 700; }
.reference-code { color: #61586d; background: #f5f2f8; border: 1px solid #ebe5f1; padding: 4px 6px; font-size: .61rem; }
.payment-chip.paid { color: var(--success); background: #edf9f4; }
.payment-chip.paid i { background: var(--success); }
.payment-chip.partial { color: #9c630f; background: #fff5df; }
.payment-chip.partial i { background: #d59330; }
.payment-chip.unpaid { color: #b53f56; background: #fff0f3; }
.payment-chip.unpaid i { background: #ce5068; }
.ledger-action { border: 1px solid var(--purple-200); color: var(--purple-700); background: white; padding: 6px 8px; font-size: .62rem; font-weight: 750; white-space: nowrap; }
.ledger-action:hover { color: white; border-color: var(--purple-600); background: var(--purple-600); }
.ledger-footer { display: flex; justify-content: space-between; padding: 12px 15px; color: var(--muted); background: #faf9fb; font-size: .63rem; }
.payment-modal { position: fixed; z-index: 60; top: 50%; left: 50%; width: min(460px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow-y: auto; transform: translate(-50%, -50%); background: white; border-top: 5px solid var(--purple-600); box-shadow: 0 24px 80px rgba(35, 15, 70, .28); padding: 22px; }
.modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-title-row h2 { font-size: 1.35rem; letter-spacing: -.04em; }
.modal-title-row > button { color: var(--muted); border-color: var(--line); background: white; }
.payment-person { padding: 12px; margin: 8px 0 12px; background: var(--purple-50); border: 1px solid var(--purple-100); }
.payment-person strong { font-size: .78rem; }
.payment-person small { color: var(--muted); font-size: .63rem; margin-top: 3px; }
.amount-balance { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.amount-balance div { padding: 10px 12px; }
.amount-balance div + div { border-left: 1px solid var(--line); }
.amount-balance small, .amount-balance strong { display: block; }
.amount-balance small { color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.amount-balance strong { font-size: .86rem; margin-top: 3px; }
.money-input { height: 47px; display: flex; border: 1px solid #dcd5e6; }
.money-input:focus-within { border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.money-input span { width: 44px; display: grid; place-items: center; color: var(--purple-700); background: var(--purple-50); border-right: 1px solid #dcd5e6; font-weight: 800; }
.money-input input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 10px; font-weight: 700; }
.payment-modal .square-input { font-size: .74rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }

.portal-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 13px; background: var(--purple-50); }
.empty-page { min-height: 60vh; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-page > span { color: var(--purple-400); font-size: 3rem; font-weight: 850; }
.empty-page h1 { font-size: 1.7rem; }
.empty-page p { color: var(--muted); }

#blazor-error-ui { display: none; position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; padding: 10px 16px; color: white; background: #9f253c; }
.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; inset: 30vh 0 auto; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--purple-100); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--purple-600); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 700; color: var(--purple-700); inset: calc(30vh + 2.4rem) 0 auto; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .finance-summary-grid { grid-template-columns: 1fr 1fr; }
    .finance-summary-grid article:nth-child(2) { border-right: 0; }
    .finance-summary-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 991.98px) {
    .portal-sidebar { width: min(var(--sidebar-width), 88vw); transform: translateX(-100%); transition: transform .2s ease; will-change: transform; box-shadow: none; }
    .portal-sidebar::after { width: min(var(--sidebar-width), 88vw); }
    .portal-sidebar.mobile-open { transform: translateX(0); box-shadow: 18px 0 48px rgba(24, 14, 39, .28); }
    .portal-workspace { width: 100%; margin-left: 0; }
    .portal-content { padding: 22px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-brand-panel { min-height: 420px; padding: 34px; }
    .login-copy { padding: 58px 0 34px; }
    .login-copy h1 { font-size: 3.2rem; }
    .login-form-panel { padding: 50px 24px; }
    .ledger-toolbar { flex-wrap: wrap; }
    .compact-search { margin-left: 0; flex: 1; }
}

@media (max-width: 767.98px) {
    .portal-topbar { height: 68px; padding: 0 16px; }
    .demo-chip { display: none; }
    .portal-content { padding: 18px 14px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .btn { flex: 1; }
    .metric-grid, .finance-summary-grid { grid-template-columns: 1fr; }
    .finance-summary-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
    .finance-visual { grid-template-columns: 1fr; gap: 25px; justify-items: center; }
    .collection-breakdown { width: 100%; }
    .directory-toolbar { align-items: stretch; flex-direction: column; }
    .search-box { min-width: 0; width: 100%; }
    .filter-tabs { overflow-x: auto; }
    .filter-tabs button { white-space: nowrap; }
    .ledger-toolbar { align-items: stretch; }
    .period-block { width: 100%; justify-content: space-between; }
    .compact-search, .status-select { width: 100%; }
    .ledger-footer { flex-direction: column; gap: 5px; }
    .drawer-summary { grid-template-columns: 1fr; }
    .drawer-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .login-feature-grid { grid-template-columns: 1fr; }
    .login-feature-grid > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
}

@media (max-width: 520px) {
    .login-brand-panel { min-height: 360px; padding: 26px 22px; }
    .login-copy h1 { font-size: 2.5rem; }
    .login-copy p { font-size: .87rem; }
    .login-feature-grid { display: none; }
    .login-copyright { display: none; }
    .login-form-panel { padding: 36px 18px; }
    .profile-block { padding-left: 8px; }
    .notification-button { display: none; }
    .metric-grid { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr; }
    .quick-grid a, .quick-grid button { border-right: 0; }
}
/* Finance receipts and secure class communication */
.live-pill,.secure-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem .85rem;border-radius:999px;background:#e8f7ef;color:#267556;font-size:.78rem;font-weight:800}.live-pill i{width:8px;height:8px;border-radius:50%;background:#42a779;box-shadow:0 0 0 5px rgba(66,167,121,.13)}
.payment-history-card{margin-top:1.2rem;overflow:hidden;border:1px solid var(--border,#e7e3db);border-radius:18px;background:#fff}.history-heading{display:flex;align-items:center;justify-content:space-between;padding:1.35rem 1.5rem;border-bottom:1px solid #ece8df}.history-heading h2{margin:.2rem 0 0;font-size:1.25rem}.history-heading>span{color:#746d61;font-size:.78rem}
.receipt-modal{position:fixed;z-index:60;top:50%;left:50%;width:min(440px,calc(100vw - 2rem));padding:1.6rem;transform:translate(-50%,-50%);border-radius:24px;background:#fff;box-shadow:0 28px 90px rgba(24,20,15,.28);text-align:center}.receipt-brand{display:flex;align-items:center;gap:.65rem;text-align:left}.receipt-brand>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#f2c94c;font-weight:900}.receipt-brand div{display:flex;flex:1;flex-direction:column}.receipt-brand small{color:#9b7100;font-size:.55rem;letter-spacing:.15em}.receipt-brand button{border:0;background:transparent;font-size:1.5rem}.receipt-success{display:grid;width:54px;height:54px;margin:1.5rem auto .8rem;place-items:center;border-radius:50%;background:#e4f5ec;color:#27805b;font-size:1.5rem;font-weight:900}.receipt-modal h2{margin:0}.receipt-number{color:#837c70;font-family:monospace}.receipt-amount{margin:1.25rem 0;padding:1.1rem;border-radius:16px;background:#fff8dc}.receipt-amount small{display:block;color:#746d61}.receipt-amount strong{font-size:2rem}.receipt-modal dl{margin:0;text-align:left}.receipt-modal dl div{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid #eee9df}.receipt-modal dt{color:#7a7368;font-weight:500}.receipt-modal dd{margin:0;font-weight:800}.receipt-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.3rem}
.communications-shell{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:680px;overflow:hidden;border:1px solid #e6e1d6;border-radius:22px;background:#fff}.group-rail{padding:1rem;border-right:1px solid #e8e3da;background:#fbfaf6}.group-rail-title{display:flex;align-items:center;justify-content:space-between;padding:.4rem .3rem 1rem}.group-rail-title span{display:grid;min-width:24px;height:24px;place-items:center;border-radius:12px;background:#fff1ba;color:#825f00;font-size:.72rem;font-weight:900}.group-row{display:flex;width:100%;align-items:center;gap:.75rem;margin-bottom:.45rem;padding:.85rem;border:0;border-radius:15px;background:transparent;text-align:left}.group-row:hover,.group-row.active{background:#fff2bd}.group-avatar{display:grid;flex:0 0 45px;height:45px;place-items:center;border-radius:14px;background:#1e1e1a;color:#fff;font-weight:900}.group-row>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.group-row small{margin-top:.2rem;overflow:hidden;color:#756e62;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.group-row>b{display:grid;min-width:22px;height:22px;place-items:center;border-radius:11px;background:#f16f5f;color:white;font-size:.68rem}.auto-link-note{display:flex;gap:.7rem;margin-top:1rem;padding:1rem;border-radius:15px;background:#e9f7f0;color:#24684e}.auto-link-note p{display:flex;margin:0;flex-direction:column}.auto-link-note small{margin-top:.25rem;color:#56806d;font-size:.67rem;line-height:1.4}
.communication-workspace{min-width:0;background:#f7f4ec}.feed-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e3ded3;background:#fff}.feed-header h2{margin:.2rem 0;font-size:1.45rem}.feed-header p{margin:0;color:#7e776c;font-size:.75rem}.composer-card{margin:1.25rem;padding:1.2rem;border:1px solid #e4ded2;border-radius:18px;background:#fff}.composer-author,.post-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}.composer-author>span,.post-meta>span{display:grid;width:40px;height:40px;place-items:center;border-radius:13px;background:#f2c94c;font-weight:900}.composer-author p,.post-meta p{display:flex;margin:0;flex:1;flex-direction:column}.composer-author small,.post-meta small{margin-top:.15rem;color:#827b70;font-size:.68rem}.composer-tools{display:flex;align-items:center;gap:.75rem;margin-top:.85rem}.upload-button{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem .8rem;border:1px solid #ddd6ca;border-radius:10px;font-weight:800}.composer-image{position:relative;margin-top:.75rem}.composer-image img{width:160px;height:110px;object-fit:cover;border-radius:12px}.composer-image button{position:absolute;top:6px;left:125px;width:27px;height:27px;border:0;border-radius:50%;background:#1f1f1bcc;color:#fff}.composer-image small{display:block;color:#817a70}.class-feed{display:grid;gap:1rem;padding:0 1.25rem 1.5rem}.class-post{padding:1.2rem;border:1px solid #e5dfd4;border-radius:18px;background:#fff}.post-meta>b{color:#9b7100;font-size:.72rem}.post-body{color:#302e29;line-height:1.65}.post-image{width:100%;max-height:360px;margin-top:.5rem;border-radius:15px;object-fit:cover}.class-post footer{display:flex;justify-content:space-between;margin-top:1rem;padding-top:.8rem;border-top:1px solid #eee9df;color:#777064;font-size:.67rem}.message-empty{display:grid;min-height:580px;place-items:center;align-content:center;text-align:center}.message-empty>span{font-size:2.5rem}.message-empty h2{margin:.7rem 0 .25rem}.message-empty p{color:#81796e}
.composer-actions{display:flex;align-items:center;gap:.8rem;margin-top:1rem}.composer-actions .purple-button{margin-left:auto}.image-picker{position:relative;overflow:hidden;padding:.7rem .85rem;border:1px solid #ddd6ca;border-radius:10px;background:#fff;font-size:.75rem;font-weight:800;cursor:pointer}.image-picker input{position:absolute;inset:0;opacity:0;cursor:pointer}.pin-toggle{display:flex;align-items:center;gap:.4rem;color:#665f55;font-size:.75rem}
@media(max-width:850px){.communications-shell{grid-template-columns:1fr}.group-rail{border-right:0;border-bottom:1px solid #e8e3da}.communication-workspace{min-height:500px}.secure-chip{display:none}.receipt-actions{grid-template-columns:1fr}}