:root {
  --forest-950: #092a21;
  --forest-900: #103d2f;
  --forest-800: #16543e;
  --forest-700: #1e6a4c;
  --gold-500: #e3ad37;
  --gold-300: #f3d788;
  --ink: #1b3028;
  --muted-ink: #718078;
  --paper: #f5f6f1;
  --line: #e5e9df;
}

body { color: var(--ink); background: radial-gradient(ellipse at 78% 0%, #edf3e8 0, transparent 34rem), var(--paper); }
.topbar { position: sticky; top: 0; z-index: 20; height: auto; min-height: 104px; padding: 8px clamp(18px, 4vw, 56px); gap: 28px; background: linear-gradient(105deg, var(--forest-950), var(--forest-900) 68%, #174d38); border-bottom: 3px solid var(--gold-500); box-shadow: 0 8px 26px #0b31251c; }
.brand { gap: 15px; color: #fff; font: 800 16px Manrope, 'DM Sans', sans-serif; letter-spacing: -.02em; }
.brand small { color: #d1dfd4; font-size: 11px; letter-spacing: .04em; }
.school-logo { width: 70px; height: 86px; flex: 0 0 70px; padding: 3px; object-fit: contain; background: #fffaf0; border: 1px solid #efd486; border-radius: 15px; box-shadow: 0 5px 20px #04180f40; }
.account { color: #fff; }
.account small { color: #d1dfd4; }
.link-button { padding: 10px 15px; color: #fff7e5; background: #ffffff12; border: 1px solid #ffffff28; border-radius: 10px; }
.link-button:hover { color: var(--forest-950); background: var(--gold-300); border-color: var(--gold-300); }

.app-shell { max-width: 1660px; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; padding: 22px 24px 0; }
.app-shell .page { margin: 26px 0 58px; padding: 0 12px; }
.app-sidebar { top: 126px; max-height: calc(100vh - 144px); padding: 20px 13px; background: linear-gradient(155deg, #103d2f, #0b3025 72%); border: 1px solid #d5bd6e; border-radius: 20px; box-shadow: 0 16px 34px #123e2b20; scrollbar-color: #6b9279 transparent; }
.side-label { color: #edcc75; font-size: 10px; letter-spacing: .16em; }
.side-link { min-height: 42px; padding: 7px 10px; color: #e3ece5; border-radius: 11px; font-size: 12px; transition: background .18s ease, transform .18s ease, color .18s ease; }
.side-link:hover, .a.side-link:hover { color: #fff; background: #ffffff14; transform: translateX(2px); }
.side-icon { width: 27px; height: 27px; flex-basis: 27px; color: #f8e5ae; background: #ffffff12; border: 1px solid #ffffff19; border-radius: 9px; font-size: 11px; }
.side-link.restricted { color: #a8b8ad; }
.side-link.restricted .side-icon { color: #a8b8ad; background: #ffffff08; }
.side-link.restricted small { color: #adc0b2; }

.page { color: var(--ink); }
.page-heading { margin-bottom: 28px; }
.eyebrow { color: var(--forest-700); font-size: 10px; letter-spacing: .16em; }
.page-heading h1, .welcome h1 { color: var(--forest-950); font-weight: 800; }
.role-chip { color: var(--forest-800); background: #e9f1e8; border-color: #d6e3d3; }
.section-card, .metric-card, .login-card { border-color: var(--line); border-radius: 20px; box-shadow: 0 12px 32px #23452a0b; }
.section-card { padding: 27px; }
.section-title h2, .form-card h2 { color: var(--forest-950); }
.text-link { color: var(--forest-700); }
.primary-button, .row-edit button, .small-button { color: #fff; background: linear-gradient(120deg, var(--forest-800), var(--forest-700)); box-shadow: 0 5px 13px #14563b25; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.primary-button:hover, .row-edit button:hover, .small-button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 18px #14563b30; }
.small-button.danger { color: #9d3930; background: #fff0ed; box-shadow: none; }
.student-form input:focus, .student-form select:focus, .student-form textarea:focus, .login-card input:not([type=hidden]):focus { border-color: var(--forest-700); box-shadow: 0 0 0 3px #1e6a4c18; }
th { color: #5e6c63; background: #f0f3ec; }
td, th { border-color: #e9ede5; }
.module-card { position: relative; min-height: 208px; flex-direction: column; align-items: flex-start; gap: 13px; padding: 24px 21px 18px; overflow: hidden; border: 1px solid #d8e2d2; border-radius: 20px; background: linear-gradient(145deg, #fff 0%, #f7f9f4 100%); box-shadow: 0 9px 22px #23452a0c; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.module-card::before { position: absolute; inset: 0 0 auto; height: 6px; content: ''; background: linear-gradient(90deg, var(--gold-500), var(--forest-700)); }
.module-card::after { position: absolute; right: -34px; top: 24px; width: 122px; height: 122px; content: ''; border: 1px solid #52764717; border-radius: 50%; box-shadow: 0 0 0 15px #52764709, 0 0 0 31px #52764706; pointer-events: none; }
.module-card:hover { transform: translateY(-5px); border-color: #aabd9f; box-shadow: 0 18px 35px #23452a1c; }
.module-card:focus-visible, .quick-module:focus-visible { outline: 3px solid #c39c43; outline-offset: 3px; }
.module-card-copy { position: relative; z-index: 1; }
.module-card-copy { flex: 1; }
.module-card-copy strong { color: var(--forest-950); font-size: 16px; letter-spacing: -.025em; }
.module-card-copy small { max-width: 34ch; font-size: 11px; }
.module-icon { position: relative; z-index: 1; flex: 0 0 58px; width: 58px; height: 58px; padding: 0; color: #fff8df; background: transparent; border: 0; border-radius: 18px; filter: drop-shadow(0 7px 9px #163c2d28); }
.module-card .module-status { position: relative; z-index: 1; }
.locked-module { filter: saturate(.55); }
.section-card.student-id-card-section { margin: 18px 0; padding: 0; overflow: hidden; border: 1px solid #dce6d7; border-radius: 16px; background: linear-gradient(135deg, #fff, #f6f8f2); }
.student-id-card-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; color: var(--forest-950); cursor: pointer; list-style: none; }
.student-id-card-section > summary::-webkit-details-marker { display: none; }
.student-id-card-section > summary::after { content: '＋'; color: var(--forest-700); font-size: 18px; }
.student-id-card-section[open] > summary::after { content: '−'; }
.student-id-card-section > summary > span:first-child { display: grid; gap: 4px; }
.student-id-card-section > summary strong { font: 800 14px Manrope, 'DM Sans', sans-serif; }
.student-id-card-section > summary small { color: var(--muted-ink); font-size: 11px; }
.student-card-count { padding: 5px 9px; color: var(--forest-800); background: #e8f0e4; border-radius: 20px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.student-id-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 14px 14px; }
.student-id-card-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; color: var(--ink); background: #fff; border: 1px solid #e4eae0; border-radius: 12px; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.student-id-card-link:hover { transform: translateY(-1px); border-color: #bdcfb5; box-shadow: 0 7px 16px #244a2b10; }
.student-id-card-mark { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: #fff8df; background: linear-gradient(145deg, var(--forest-800), var(--forest-700)); border: 1px solid #c9a64e; border-radius: 10px; font-size: 10px; font-weight: 900; }
.student-id-card-copy { display: grid; flex: 1; min-width: 0; gap: 3px; }
.student-id-card-copy strong { overflow: hidden; color: var(--forest-950); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.student-id-card-copy small { overflow: hidden; color: var(--muted-ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.student-id-card-print { color: var(--forest-700); font-size: 9px; font-weight: 800; white-space: nowrap; }
.module-status.available { color: #16633e; background: #e7f4e7; }

.dashboard-hero { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 34px; min-height: 306px; margin: 0 0 38px; padding: 38px 44px; overflow: hidden; color: #fff; background: linear-gradient(112deg, #0b3025 0%, #124633 59%, #1a5a40 100%); border: 1px solid #c8aa58; border-radius: 27px; box-shadow: 0 20px 46px #113d2b28; }
.dashboard-hero::after { position: absolute; z-index: -1; right: 150px; bottom: -200px; width: 460px; height: 460px; content: ''; border: 1px solid #f0d88a26; border-radius: 50%; box-shadow: 0 0 0 34px #f0d88a0a, 0 0 0 75px #f0d88a08; }
.dashboard-hero-copy { position: relative; z-index: 1; max-width: 670px; }
.hero-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #f1d789; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.hero-kicker span, .snapshot-label span { width: 8px; height: 8px; background: var(--gold-500); border-radius: 50%; box-shadow: 0 0 0 4px #e3ad3724; }
.dashboard-hero h1 { margin: 0; color: #fff; font: 500 clamp(29px, 3.2vw, 43px)/1.14 Manrope, 'DM Sans', sans-serif; letter-spacing: -.045em; }
.dashboard-hero h1 strong { color: #f5d87f; font-weight: 800; overflow-wrap: anywhere; }
.hero-intro { max-width: 510px; margin: 15px 0 22px; color: #d1e0d5; font-size: 14px; line-height: 1.7; }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; color: #fff8e7; background: #ffffff12; border: 1px solid #ffffff22; border-radius: 99px; font-size: 11px; font-weight: 700; }
.hero-tag-dot { width: 7px; height: 7px; background: #f1cf70; border-radius: 50%; }
.hero-tag-muted { color: #bcd1c1; font-size: 11px; }
.hero-header-link { display: inline-flex; align-items: center; gap: 5px; min-width: 30px; justify-content: center; padding: 6px 9px; color: #fff8e6; background: #ffffff12; border: 1px solid #ffffff27; border-radius: 8px; text-decoration: none; font-size: 12px; }
.hero-header-link:hover { color: var(--forest-950); background: var(--gold-300); }
.dashboard-hero-brand { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; flex: 0 0 180px; text-align: center; }
.dashboard-logo-frame { display: grid; place-items: center; width: 146px; height: 174px; padding: 8px; background: linear-gradient(145deg, #fff9e8, #f0d888); border: 1px solid #f8e7ad; border-radius: 24px; box-shadow: 0 14px 36px #061c1460, inset 0 0 0 4px #fff9e8; transform: rotate(2deg); }
.dashboard-logo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.dashboard-brand-copy strong, .dashboard-brand-copy span { display: block; }
.dashboard-brand-copy strong { color: #fff8e6; font: 800 13px Manrope, 'DM Sans', sans-serif; }
.dashboard-brand-copy span { margin-top: 4px; color: #c8d8cb; font-size: 10px; }
.hero-orb { position: absolute; z-index: -1; display: block; border-radius: 50%; background: #e5bd5a0b; }
.hero-orb-one { top: -104px; right: 250px; width: 300px; height: 300px; }
.hero-orb-two { right: -60px; bottom: -135px; width: 300px; height: 300px; }
.dashboard-section { margin-bottom: 22px; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 0 2px 16px; }
.dashboard-section-heading .eyebrow { margin-bottom: 6px; }
.dashboard-section-heading h2 { margin: 0; color: var(--forest-950); font: 800 22px Manrope, 'DM Sans', sans-serif; letter-spacing: -.03em; }
.snapshot-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #627266; background: #edf2e8; border-radius: 99px; font-size: 10px; font-weight: 700; }
.snapshot-label span { width: 7px; height: 7px; background: #4e9a69; box-shadow: 0 0 0 4px #4e9a6917; }
.metrics { gap: 18px; margin-bottom: 0; }
.dashboard-section .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { position: relative; display: flex; align-items: center; gap: 18px; min-height: 144px; padding: 24px 27px; overflow: hidden; }
.metric-link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.metric-link:hover, .metric-link:focus-visible { transform: translateY(-2px); border-color: #c9d8c9; box-shadow: 0 15px 30px #123e2b14; }
.metric-link:focus-visible { outline: 3px solid #d8b74e; outline-offset: 3px; }
.metric-card::before { position: absolute; inset: 0 auto 0 0; width: 5px; content: ''; background: linear-gradient(var(--gold-500), #f0d889); }
.staff-metric::before { background: linear-gradient(#5d9c72, #a7c4a4); }
.metric-icon { flex: 0 0 50px; width: 50px; height: 50px; color: #fff8e6; background: linear-gradient(145deg, var(--forest-800), var(--forest-700)); border-radius: 16px; font-size: 17px; box-shadow: 0 8px 18px #14563b27; }
.metric-icon.gold { color: #6c4b09; background: linear-gradient(145deg, #f8e8b2, #e9bf5e); box-shadow: 0 8px 18px #a8812822; }
.metric-copy { position: relative; z-index: 1; }
.metric-card p { margin: 0 0 6px; color: #6f7d72; font-size: 12px; font-weight: 700; }
.metric-card strong { color: var(--forest-950); font: 800 36px Manrope, 'DM Sans', sans-serif; letter-spacing: -.04em; }
.metric-card small { color: #89958b; font-size: 10px; }
.metric-watermark { position: absolute; right: 20px; bottom: -26px; color: #d6bc6a12; font-size: 120px; line-height: 1; }
.dashboard-modules { padding: 25px 27px 28px; }
.dashboard-modules .section-title { margin-bottom: 20px; }
.dashboard-modules .section-title h2 { margin: 0 0 5px; color: var(--forest-950); font: 800 21px Manrope, 'DM Sans', sans-serif; letter-spacing: -.03em; }
.dashboard-modules .section-title .eyebrow { margin-bottom: 6px; }
.dashboard-all-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; color: var(--forest-800); background: #edf3e9; border-radius: 10px; text-decoration: none; white-space: nowrap; font-size: 11px; font-weight: 800; }
.dashboard-all-link:hover { color: #fff; background: var(--forest-800); }
.dashboard-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-module { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 88px; padding: 16px; overflow: hidden; color: var(--ink); background: linear-gradient(135deg, #fff, #f5f8f1); border: 1px solid #dce6d7; border-radius: 17px; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.quick-module:hover { transform: translateY(-3px); border-color: #bdcfb5; box-shadow: 0 13px 27px #244a2b17; }
.quick-module-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; color: #fff6df; background: linear-gradient(145deg, var(--forest-800), var(--forest-700)); border: 1px solid #c9a64e; border-radius: 14px; box-shadow: 0 6px 14px #163c2d22; }
.quick-module-copy { flex: 1; min-width: 0; }
.quick-module-copy strong { display: block; overflow: hidden; color: var(--forest-950); text-overflow: ellipsis; white-space: nowrap; font: 800 12px Manrope, 'DM Sans', sans-serif; }
.quick-module-copy small { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted-ink); font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.quick-module-arrow { align-self: flex-start; color: #9aac98; font-size: 14px; }
.metric-link { color: inherit; text-decoration: none; }
.metric-link:hover { transform: translateY(-3px); border-color: #cfdbc4; box-shadow: 0 18px 40px #123e2b18; }
.attention-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 10px; }
.attention-item { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 14px 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.attention-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #123e2b12; }
.attention-marker { width: 10px; height: 10px; flex: 0 0 10px; background: #d5a23b; border-radius: 50%; box-shadow: 0 0 0 5px #d5a23b20; }
.priority-high .attention-marker { background: #bf5146; box-shadow: 0 0 0 5px #bf514620; }
.attention-item>span:nth-child(2) { flex: 1; min-width: 0; }
.attention-item strong, .attention-item small { display: block; }
.attention-item strong { color: var(--forest-950); font-size: 12px; line-height: 1.5; }
.attention-item small { margin-top: 4px; color: var(--muted-ink); font-size: 10px; }
.attention-action { color: var(--forest-700); font-size: 10px; font-weight: 800; white-space: nowrap; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr); gap: 18px; margin-bottom: 22px; }
.dashboard-lower-grid .section-card { min-width: 0; margin: 0; }
.dashboard-lower-grid .section-title { align-items: start; }
.dashboard-lower-grid .section-title h2, .dashboard-timeline .section-title h2 { margin: 0; color: var(--forest-950); font: 800 21px Manrope, 'DM Sans', sans-serif; letter-spacing: -.03em; }
.collection-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; height: 170px; margin: 24px 0 18px; padding: 0 3px; }
.collection-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 6px; }
.collection-bar-track { display: flex; align-items: end; justify-content: center; width: 100%; height: 112px; padding: 0 10px; border-bottom: 1px solid var(--line); background: linear-gradient(to top, #f7f8f4, #fff); border-radius: 8px 8px 0 0; }
.collection-bar { width: min(100%, 26px); height: max(3px, var(--bar-height)); background: linear-gradient(180deg, #eac968, var(--forest-700)); border-radius: 7px 7px 2px 2px; transform-origin: bottom; animation: bar-rise .55s ease-out both; }
.collection-day strong { max-width: 100%; overflow: hidden; color: var(--forest-900); font-size: 9px; text-overflow: ellipsis; }
.collection-day small { color: var(--muted-ink); font-size: 9px; }
.finance-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.finance-highlights a { min-width: 0; color: inherit; text-decoration: none; }
.finance-highlights a:hover strong { color: var(--forest-700); }
.finance-highlights small, .finance-highlights strong { display: block; }
.finance-highlights small { color: var(--muted-ink); font-size: 10px; }
.finance-highlights strong { margin-top: 5px; color: var(--forest-950); font: 800 clamp(13px, 1.6vw, 19px) Manrope, 'DM Sans', sans-serif; overflow-wrap: anywhere; }
.school-health ul { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.school-health li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #edf0e9; color: #536458; font-size: 11px; }
.school-health li strong { color: var(--forest-800); text-align: right; font-size: 11px; }
.school-health li strong.unavailable { max-width: 120px; color: #8a918c; font-size: 9px; font-weight: 500; }
.dashboard-timeline { margin-bottom: 22px; }
.dashboard-timeline ol { position: relative; display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.dashboard-timeline ol::before { position: absolute; top: 8px; bottom: 8px; left: 72px; width: 1px; content: ''; background: #dfe6d9; }
.dashboard-timeline li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 30px; padding: 10px 0; }
.dashboard-timeline li::before { position: absolute; top: 17px; left: 68px; width: 9px; height: 9px; content: ''; background: var(--gold-500); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c8d5c4; }
.dashboard-timeline time { color: var(--forest-700); font-size: 10px; font-weight: 800; }
.dashboard-timeline li strong, .dashboard-timeline li small { display: block; }
.dashboard-timeline li strong { color: var(--forest-950); font-size: 12px; }
.dashboard-timeline li small { margin-top: 4px; color: var(--muted-ink); font-size: 10px; }
.dashboard-gallery { margin: 0 0 22px; }
.gallery-viewer { position: relative; min-height: 280px; overflow: hidden; background: linear-gradient(135deg, #0b3025, #1a5a40); border: 1px solid #c8aa58; border-radius: 16px; }
.gallery-slide { position: relative; height: 340px; margin: 0; animation: gallery-fade .3s ease-out; }
.gallery-slide[hidden] { display: none; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-slide figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 20px 17px; color: #fff8e6; background: linear-gradient(transparent, #08291fe8); font: 700 15px Manrope, 'DM Sans', sans-serif; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 12px; }
.gallery-position { color: var(--muted-ink); font-size: 10px; font-weight: 700; }
@keyframes gallery-fade { from { opacity: .65; } to { opacity: 1; } }
.empty-state { margin: 0; padding: 16px; color: #7b887d; background: #f8f9f6; border-radius: 11px; font-size: 12px; }
.quick-actions { margin: 26px 0; }
.quick-actions nav { display: flex; flex-wrap: wrap; gap: 9px; }
.quick-actions nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 8px 12px; color: var(--forest-800); background: #fff; border: 1px solid #dfe7d9; border-radius: 10px; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .16s ease, transform .16s ease, border-color .16s ease; }
.quick-actions nav a span { color: #a48637; }
.quick-actions nav a:hover { transform: translateY(-1px); background: #f4f7ef; border-color: #c6d5bc; }
.activity-actor { display: block; margin-top: 4px; color: #839084; font-size: 10px; }
.finance-section-nav { position: sticky; top: 116px; z-index: 5; display: flex; gap: 8px; margin: -8px 0 18px; padding: 9px; overflow-x: auto; background: #f5f6f1eF; border: 1px solid #e1e7dc; border-radius: 13px; backdrop-filter: blur(12px); }
.finance-section-nav a { flex: 0 0 auto; padding: 9px 12px; color: var(--forest-800); background: #fff; border: 1px solid #e5eadf; border-radius: 9px; text-decoration: none; font-size: 10px; font-weight: 750; }
.finance-section-nav a:hover { color: #fff8e6; background: var(--forest-800); border-color: var(--forest-800); }
#defaulters, #credits, #payment-entry, #payments { scroll-margin-top: 180px; }
.ask-moonstone { position: relative; margin: 26px 0; padding: 25px 28px; color: #f6f7ec; background: linear-gradient(112deg, #0b3025, #174d38); border: 1px solid #c8aa58; border-radius: 20px; box-shadow: 0 14px 32px #123e2b16; }
.ask-moonstone .eyebrow { color: #f1d789; }
.ask-moonstone h2 { margin: 0; color: #fff8e6; font: 800 22px Manrope, 'DM Sans', sans-serif; }
.ask-moonstone p:not(.eyebrow) { margin: 7px 0 0; color: #cddbd0; font-size: 11px; }
.ask-moonstone form { display: flex; gap: 9px; margin-top: 17px; }
.ask-moonstone input, .ask-followup input { flex: 1; min-width: 0; height: 44px; padding: 0 13px; background: #fff; border: 1px solid #dfe6da; border-radius: 10px; font: inherit; }
.ask-moonstone .primary-button { flex: 0 0 auto; color: var(--forest-950); background: linear-gradient(135deg, #f5df9d, #e3ad37); box-shadow: none; }
.ask-moonstone details { margin-top: 12px; color: #d5dfd4; font-size: 10px; }
.ask-moonstone summary { display: inline-block; cursor: pointer; color: #f5d87f; }
.ask-moonstone details span { display: block; margin-top: 7px; }
.ask-answer h2 { margin: 4px 0 12px; color: var(--forest-950); font: 700 20px Manrope, 'DM Sans', sans-serif; }
.ask-answer-copy { margin: 0 0 18px; color: #44594a; font-size: 16px; line-height: 1.7; }
.ask-followup { display: flex; align-items: center; gap: 10px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.ask-followup label { color: #526357; font-size: 11px; font-weight: 700; }
.ask-followup .secondary-button { flex: 0 0 auto; }
@keyframes bar-rise { from { transform: scaleY(.08); opacity: .55; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 226px minmax(0, 1fr); gap: 16px; padding: 18px 14px 0; }
  .app-shell .page { padding: 0 4px; }
  .dashboard-hero { padding: 32px; }
  .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .dashboard-section .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { min-height: 82px; padding: 7px 14px; }
  .school-logo { width: 54px; height: 66px; flex-basis: 54px; border-radius: 12px; }
  .brand { gap: 10px; font-size: 13px; }
  .app-shell { padding: 10px 10px 0; }
  .app-sidebar { top: 0; max-height: 224px; margin: 6px 0 14px; padding: 12px 9px; }
  .app-shell .page { margin: 19px 0 36px; padding: 0 2px; }
  .dashboard-hero { min-height: 0; padding: 27px 23px; border-radius: 22px; }
  .dashboard-hero h1 { font-size: clamp(27px, 7vw, 36px); }
  .dashboard-hero-brand { flex-basis: 138px; }
  .dashboard-logo-frame { width: 112px; height: 137px; border-radius: 19px; }
}
@media (max-width: 560px) {
  .topbar { min-height: 74px; }
  .school-logo { width: 46px; height: 57px; flex-basis: 46px; }
  .brand { font-size: 11px; }
  .brand small { font-size: 9px; }
  .dashboard-hero { display: block; padding: 24px 21px; }
  .dashboard-hero-brand { display: flex; justify-items: initial; gap: 12px; margin-top: 22px; text-align: left; }
  .dashboard-logo-frame { width: 72px; height: 88px; padding: 5px; border-radius: 15px; }
  .dashboard-brand-copy strong { font-size: 12px; }
  .dashboard-brand-copy span { max-width: 160px; line-height: 1.45; }
  .dashboard-section-heading { align-items: start; flex-direction: column; }
  .dashboard-section-heading h2 { font-size: 19px; }
  .dashboard-section .metrics { grid-template-columns: 1fr; }
  .metric-card { min-height: 124px; padding: 20px; }
  .dashboard-modules { padding: 20px 17px; }
  .dashboard-modules .section-title { align-items: start; flex-direction: column; gap: 14px; }
  .dashboard-quick-grid { grid-template-columns: 1fr; gap: 9px; }
  .finance-highlights { gap: 7px; }
  .finance-highlights small { font-size: 9px; }
  .collection-chart { gap: 5px; }
  .ask-moonstone { padding: 21px 18px; }
  .ask-moonstone form { align-items: stretch; flex-direction: column; }
  .ask-moonstone .primary-button { min-height: 42px; }
  .ask-followup { align-items: stretch; flex-direction: column; }
  .gallery-viewer { min-height: 190px; }
  .gallery-slide { height: 230px; }
  .section-card { padding: 19px; }
  .student-id-card-grid { grid-template-columns: 1fr; }
  .student-id-card-section > summary { gap: 8px; padding: 15px; }
  .student-id-card-print { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Quiet, consistent interaction details across every school workspace. */
::selection { color: #fff; background: var(--forest-700); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #e3ad37a8;
  outline-offset: 3px;
}
.side-link.active {
  color: #fff8e6;
  background: linear-gradient(100deg, #e3ad3726, #ffffff0b);
  box-shadow: inset 3px 0 0 var(--gold-500);
}
.side-link.active .side-icon {
  color: var(--forest-950);
  background: linear-gradient(145deg, #f3d788, #e3ad37);
  border-color: #f3d788;
}
.section-card, .metric-card, .login-card, .app-sidebar {
  box-shadow: 0 12px 32px #123e2b0b, 0 2px 5px #123e2b05;
}
.metric-card, .section-card, .login-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Distinctive letter badges for the module list in the sidebar. */
.module-nav .side-icon {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  color: #f8e5ae;
  background: linear-gradient(145deg, #286849, #174b37);
  border: 1px solid #d8bd68a8;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #ffffff28, 0 3px 8px #061b1333;
  font: 800 13px Manrope, 'DM Sans', sans-serif;
  letter-spacing: -.04em;
}
.module-nav .side-link:hover .side-icon {
  color: var(--forest-950);
  background: linear-gradient(145deg, #f6dfa0, #e3ad37);
  border-color: #f3d788;
  transform: translateY(-1px);
}
.module-nav .side-link.active .side-icon {
  color: var(--forest-950);
  background: linear-gradient(145deg, #f8e7b2, #e3ad37);
  border-color: #f3d788;
  box-shadow: 0 3px 9px #04180f45;
}
.module-nav .side-link.restricted .side-icon {
  color: #bdc9be;
  background: linear-gradient(145deg, #315444, #254736);
  border-color: #ffffff20;
  box-shadow: none;
}
.metric-card:hover, .section-card:hover, .login-card:hover {
  border-color: #d5dfce;
  box-shadow: 0 16px 38px #123e2b12, 0 3px 8px #123e2b06;
}
.table-card tbody tr { transition: background-color .16s ease; }
.table-card tbody tr:hover { background: #f8faf5; }
.table-card tbody tr:last-child td { border-bottom: 0; }
.page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.page select,
.page textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.page select:focus,
.page textarea:focus {
  border-color: var(--forest-700);
  outline: 0;
  box-shadow: 0 0 0 3px #1e6a4c18;
}
.alert, .notice { border: 1px solid transparent; line-height: 1.55; }
.notice.success { border-color: #cce6d4; }
.notice.error, .alert { border-color: #f1d0ca; }
.notice.info { border-color: #d7e2f0; }
.text-link, .dashboard-all-link, .quick-module, .module-card { transition-duration: .2s; }
.dashboard-hero { background: radial-gradient(circle at 79% 18%, #ffffff12 0 2px, transparent 3px 100%), linear-gradient(118deg, #092b22 0%, #124633 54%, #236449 100%); }
.dashboard-logo-frame { padding: 9px; border: 1px solid #ffffff50; background: linear-gradient(145deg, #ffffff30, #ffffff0d); box-shadow: 0 18px 42px #061f1740, inset 0 1px 0 #ffffff75; }
.metric-card { border-color: #e1e9dc; background: linear-gradient(145deg, #fff 0%, #fbfcf8 100%); box-shadow: 0 10px 26px #23452a0a; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.metric-card:hover { transform: translateY(-3px); border-color: #c7d5b5; box-shadow: 0 18px 34px #23452a14; }
.attention-panel { padding: 22px 24px; border: 1px solid #e6eadf; border-radius: 18px; background: linear-gradient(135deg, #fff 0%, #fbfcf8 100%); box-shadow: 0 10px 28px #23452a09; }
.dashboard-gallery, .dashboard-timeline, .dashboard-activity, .dashboard-lower-grid .section-card { border-color: #e4e9df; box-shadow: 0 12px 30px #23452a0a; }
.dashboard-gallery .gallery-viewer { border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #e9efe4, #f8f8f2); }
.dashboard-gallery .gallery-slide img { border-radius: 15px; }
.dashboard-modules { border-color: #e2e9dd; background: linear-gradient(145deg, #fff 0%, #f9fbf6 100%); }
.quick-module { box-shadow: 0 5px 14px #23452a08; }
.quick-module:hover { box-shadow: 0 12px 26px #23452a16; }
@media (max-width: 650px) {
  .side-link.active { box-shadow: inset 3px 0 0 var(--gold-500); }
  .page-heading { align-items: flex-start; gap: 12px; }
  .attention-panel { padding: 18px 16px; }
  .dashboard-hero { border-radius: 20px; }
}

/* Illustrated module cards: local gradients and the existing module SVG marks. */
.module-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 17px; }
.module-card { display: flex; min-height: 255px; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 17px; overflow: hidden; border: 1px solid #dce5d7; border-radius: 19px; background: #fff; box-shadow: 0 10px 24px #173b7a0b; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.module-card::before { display: none; }
.module-card::after { display: none; }
.module-card:hover { transform: translateY(-4px); border-color: #b5c9ad; box-shadow: 0 18px 34px #173b7a19; }
.module-card-art { position: relative; display: grid; place-items: center; height: 124px; margin-bottom: 16px; overflow: hidden; background: radial-gradient(ellipse at 70% 25%, #fff9 0 2%, transparent 3%), radial-gradient(ellipse at 22% 88%, #ffffff30 0 14%, transparent 15%), linear-gradient(135deg, #d9e9d8, #9bc2a0 54%, #477b60); }
.module-card-art::before, .quick-module-art::before { position: absolute; content: ''; width: 120px; height: 120px; right: -22px; top: -46px; border: 1px solid #ffffff70; border-radius: 40% 60% 55% 45%; transform: rotate(28deg); box-shadow: 0 0 0 13px #ffffff1c, 0 0 0 28px #ffffff12; }
.module-card-art::after { position: absolute; content: ''; width: 76px; height: 76px; left: 22px; bottom: -52px; border: 1px solid #fff8; border-radius: 50%; box-shadow: 0 0 0 11px #ffffff24; }
.module-card-art[data-tone="finance"], .module-card-art:has([data-icon="finance"]) { background: radial-gradient(circle at 75% 30%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #f2dea1, #d8ad55 54%, #986b26); }
.module-card-art:has([data-icon="people"]) { background: radial-gradient(circle at 75% 30%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #d7e7fa, #8cb6d8 54%, #416e9e); }
.module-card-art:has([data-icon="operations"]) { background: radial-gradient(circle at 75% 30%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #e3d9f1, #a68bc4 54%, #655181); }
.module-card-art:has([data-icon="analytics"]) { background: radial-gradient(circle at 75% 30%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #d7eee1, #86c1a0 54%, #367457); }
.module-card-art:has([data-icon="communication"]) { background: radial-gradient(circle at 75% 30%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #f3d9d5, #d99b8b 54%, #a0554c); }
.module-card .module-icon { position: relative; z-index: 1; width: 64px; height: 64px; padding: 0; border-radius: 20px; filter: drop-shadow(0 9px 12px #18382640); transform: rotate(-5deg); transition: transform .2s ease; }
.module-card:hover .module-icon { transform: rotate(0) scale(1.08); }
.module-card-copy { display: block; padding: 0 17px; }
.module-card-copy strong { font-size: 14px; }
.module-card-copy small { margin-top: 5px; }
.module-card .module-status { align-self: flex-start; margin: auto 17px 0; }
.locked-module { filter: saturate(.72); }
.quick-module { display: flex; min-height: 164px; flex-direction: column; align-items: stretch; gap: 12px; padding: 0 14px 13px; border-radius: 16px; }
.quick-module-art { position: relative; display: grid; place-items: center; height: 72px; margin: 0 -14px; overflow: hidden; border-radius: 15px 15px 10px 10px; background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #d8e9d8, #83b797 58%, #28684a); }
.quick-module-art .quick-module-icon { position: relative; z-index: 1; width: 42px; height: 42px; padding: 0; border: 1px solid #ffffffb0; border-radius: 14px; box-shadow: 0 7px 14px #163c2d30; }
.quick-module-art:has([data-icon="finance"]) { background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #f4e7bd, #dcbb70 58%, #a77a32); }
.quick-module-art:has([data-icon="people"]) { background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #dceafa, #93b9d8 58%, #4a759e); }
.quick-module-art:has([data-icon="operations"]) { background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #e9e0f3, #b49aca 58%, #745b91); }
.quick-module-art:has([data-icon="analytics"]) { background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #dcf0e3, #8dc6a5 58%, #3e805f); }
.quick-module-art:has([data-icon="communication"]) { background: radial-gradient(circle at 75% 25%, #fff9 0 2%, transparent 3%), linear-gradient(135deg, #f4dfda, #dda49a 58%, #a95d54); }
.quick-module-copy strong { font-size: 12px; }
.quick-module-copy small { -webkit-line-clamp: 1; }
.quick-module-arrow { position: absolute; right: 13px; bottom: 14px; }
.module-nav .side-icon { display: block; flex: 0 0 29px; width: 29px; height: 29px; padding: 0; border-radius: 9px; }
.module-nav .side-link:hover .side-icon, .module-nav .side-link.active .side-icon { transform: scale(1.08); }
@media (max-width: 650px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .module-card { min-height: 245px; }
  .module-card-art { height: 105px; }
  .module-card-copy { padding: 0 13px; }
  .module-card .module-status { margin-left: 13px; margin-right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .module-card, .quick-module, .module-card .module-icon, .metric-link { transition: none; }
}


/* Executive dashboard refinements */
.topbar-search-button { display:flex; align-items:center; gap:9px; min-width:210px; margin-left:auto; padding:9px 12px; color:#eaf1e9; background:#ffffff10; border:1px solid #ffffff2b; border-radius:11px; font:600 11px 'DM Sans',sans-serif; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.topbar-search-button:hover,.topbar-search-button:focus-visible { background:#ffffff1b; border-color:#e3c566; outline:none; }
.topbar-search-button>span:first-child { color:#f2d780; font-size:18px; line-height:1; }
.topbar-search-button kbd { margin-left:auto; padding:3px 5px; color:#d8e3d9; background:#ffffff12; border:1px solid #ffffff25; border-radius:5px; font:500 9px 'DM Sans',sans-serif; white-space:nowrap; }
.health-overview .dashboard-section-heading { align-items:flex-end; }
.health-overview .dashboard-section-heading .muted { max-width:600px; margin-top:7px; font-size:11px; }
.health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.health-indicator { display:grid; gap:10px; min-width:0; padding:17px 18px; color:inherit; background:linear-gradient(145deg,#fff,#f7f9f4); border:1px solid #e2e8de; border-radius:15px; text-decoration:none; box-shadow:0 8px 24px #183d2c08; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.health-indicator:hover,.health-indicator:focus-visible { transform:translateY(-2px); border-color:#c4d4bd; box-shadow:0 13px 28px #183d2c13; outline:none; }
.health-indicator-top { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#647367; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.health-indicator-mark { display:grid; place-items:center; width:22px; height:22px; color:#236143; background:#e8f2e7; border-radius:50%; font-size:11px; }
.health-indicator>strong { overflow-wrap:anywhere; color:var(--forest-950); font:800 clamp(16px,2vw,22px) Manrope,'DM Sans',sans-serif; letter-spacing:-.035em; }
.health-indicator>small { color:#879387; font-size:10px; line-height:1.45; }
.health-indicator.health-empty .health-indicator-mark { color:#748073; background:#eef0eb; }
.health-indicator.health-attention .health-indicator-mark { color:#945d18; background:#fff0d3; }
.intelligence-briefing { margin:0 0 22px; padding:23px 25px; border-color:#d9e4d6; background:linear-gradient(130deg,#fff 0%,#f8faf5 100%); }
.intelligence-briefing .section-title { align-items:flex-start; }
.intelligence-briefing .section-title h2 { color:var(--forest-950); font:800 20px Manrope,'DM Sans',sans-serif; }
.intelligence-briefing .section-title .muted { margin-top:5px; font-size:11px; }
.verified-badge { display:inline-flex; flex:none; align-items:center; gap:6px; padding:7px 10px; color:#286344; background:#eaf4e9; border:1px solid #d8e9d6; border-radius:30px; font-size:9px; font-weight:800; }
.intelligence-briefing ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:16px 0; padding:0; list-style:none; }
.intelligence-briefing li { display:flex; align-items:flex-start; gap:10px; padding:12px 0; color:#405447; border-top:1px solid #e9eee5; font-size:12px; line-height:1.55; }
.briefing-bullet { flex:0 0 7px; width:7px; height:7px; margin-top:5px; background:var(--gold-500); border-radius:50%; box-shadow:0 0 0 4px #d7b84e20; }
.intelligence-briefing .text-link { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; }
@media (max-width:900px) { .topbar-search-button { min-width:0; padding:9px; } .topbar-search-button>span:nth-child(2) { display:none; } .health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .topbar { gap:10px; } .topbar-search-button { margin-left:auto; padding:8px; } .topbar-search-button kbd { display:none; } .health-grid { grid-template-columns:1fr 1fr; gap:8px; } .health-indicator { padding:13px; } .health-indicator>strong { font-size:16px; } .intelligence-briefing { padding:19px 17px; } .intelligence-briefing ul { grid-template-columns:1fr; } .intelligence-briefing .verified-badge { font-size:0; } .intelligence-briefing .verified-badge span { font-size:11px; } }
@media (max-width:390px) { .health-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .health-indicator,.topbar-search-button { transition:none; } .health-indicator:hover { transform:none; } }

.academic-intelligence { margin:0 0 22px; padding:24px 26px; border-color:#e1e8dc; }
.academic-intelligence .section-title { align-items:flex-start; }
.academic-intelligence .section-title h2 { margin:0 0 5px; color:var(--forest-950); font:800 20px Manrope,'DM Sans',sans-serif; }
.academic-intelligence .section-title .muted { max-width:560px; font-size:11px; }
.academic-breakdown-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:18px; }
.academic-breakdown-grid h3 { margin:0; padding-bottom:9px; color:#6d7b6f; border-bottom:1px solid #e6ece2; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.academic-breakdown-grid ol { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.academic-breakdown-grid li { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:11px 2px; border-bottom:1px solid #edf1e9; }
.academic-breakdown-grid li>span { min-width:0; }
.academic-breakdown-grid li strong,.academic-breakdown-grid li small { display:block; }
.academic-breakdown-grid li strong { overflow:hidden; color:#304b38; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.academic-breakdown-grid li small { margin-top:4px; color:#89958b; font-size:9px; }
.academic-breakdown-grid li b { flex:none; color:var(--forest-800); font:800 14px Manrope,'DM Sans',sans-serif; }
@media(max-width:560px) { .academic-intelligence { padding:20px 17px; } .academic-breakdown-grid { grid-template-columns:1fr; gap:17px; } }

.student-pulse ul,.staff-command-centre ul { display:grid; gap:0; margin:14px 0 0; padding:0; list-style:none; }
.student-pulse li,.staff-command-centre li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; color:#536458; border-top:1px solid #edf0e9; font-size:11px; }
.student-pulse li strong,.staff-command-centre li strong { color:var(--forest-800); text-align:right; font-size:11px; }
.student-pulse li strong.unavailable { max-width:150px; color:#899387; font-size:9px; font-weight:500; }
.verified-achievements { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:24px; margin:0 0 22px; padding:21px 25px; background:linear-gradient(110deg,#0c3528,#174d38); border:1px solid #c8aa58; border-radius:17px; box-shadow:0 12px 28px #123e2b12; }
.verified-achievements .eyebrow { margin:0 0 6px; color:#f1d789; }
.verified-achievements h2 { margin:0; color:#fff8e6; font:800 17px Manrope,'DM Sans',sans-serif; }
.verified-achievements p:not(.eyebrow) { margin:5px 0 0; color:#cad9ce; font-size:10px; }
.verified-achievements>strong { color:#f5d87f; font:800 30px Manrope,'DM Sans',sans-serif; }
.verified-achievements>a { padding:9px 12px; color:#183c2b; background:linear-gradient(135deg,#f5df9d,#e3ad37); border-radius:9px; text-decoration:none; font-size:10px; font-weight:800; white-space:nowrap; }
@media(max-width:560px) { .verified-achievements { grid-template-columns:1fr auto; gap:10px; padding:18px; } .verified-achievements>a { grid-column:1/-1; width:max-content; } }
/* Live dashboard and finance overview additions use Moonstone's forest and gold palette. */
.today-pulse{margin:-14px 0 30px;padding:22px 24px 18px;border:1px solid #dce6d6;border-radius:20px;background:linear-gradient(120deg,#fff 0%,#f8faf5 100%);box-shadow:0 12px 30px #123e2b0b}
.today-pulse-heading{display:flex;align-items:center;gap:12px;margin:0 2px 15px}
.today-pulse-heading>div{flex:1;min-width:0}
.today-pulse-heading .eyebrow{margin:0 0 4px;color:#a18231;font-size:9px}
.today-pulse-heading h2{margin:0;color:#123d2d;font:800 17px Manrope,'DM Sans',sans-serif}
.today-pulse-heading p:last-child{margin:4px 0 0;color:#79877a;font-size:11px}
.pulse-live-dot,.finance-command-kicker span{width:9px;height:9px;flex:none;border-radius:50%;background:#4b9b68;box-shadow:0 0 0 4px #4b9b681c}
.pulse-date{flex:none;padding:7px 10px;border:1px solid #e5eadd;border-radius:9px;background:#fff;color:#64745f;font-size:10px;font-weight:700}
.today-pulse-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.pulse-stat{display:flex;align-items:center;gap:12px;min-width:0;min-height:84px;padding:13px 14px;border:1px solid #e6ebdf;border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pulse-stat:hover,.pulse-stat:focus-visible{transform:translateY(-2px);border-color:#cbd8be;box-shadow:0 10px 22px #123e2b10;outline:none}
.pulse-stat-icon{display:grid;place-items:center;width:35px;height:35px;flex:none;border-radius:11px;background:#eaf2e7;color:#286449;font:800 14px Manrope,sans-serif}
.pulse-stat-icon.gold{background:#faf1d9;color:#997526}
.pulse-stat-copy{display:grid;gap:3px;min-width:0;flex:1}
.pulse-stat-copy small{color:#718070;font-size:10px;font-weight:700}
.pulse-stat-copy strong{overflow:hidden;color:#173f30;font:800 clamp(16px,2vw,22px) Manrope,'DM Sans',sans-serif;text-overflow:ellipsis;white-space:nowrap}
.pulse-stat-copy>span{overflow:hidden;color:#899487;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.pulse-trend{color:#ae8c34;font-size:18px;font-weight:800}
.pulse-ring{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:conic-gradient(#337b55 var(--pulse-value),#eaf0e5 0);position:relative}
.pulse-ring::before{position:absolute;inset:4px;border-radius:50%;background:#fff;content:''}
.pulse-ring b{position:relative;color:#315c42;font-size:9px}
.finance-command-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(255px,.7fr);gap:24px;align-items:center;margin:14px 0 17px;padding:23px 26px;overflow:hidden;border:1px solid #cdb66e;border-radius:19px;color:#fff;background:radial-gradient(circle at 84% 8%,#ffffff16 0 2px,transparent 3px 100%),linear-gradient(112deg,#0b3025 0%,#124633 62%,#1a5a40 100%);box-shadow:0 16px 38px #113d2b20}
.finance-report-periods{margin:16px 0 19px;padding:17px;border:1px solid #e2e8dc;border-radius:15px;background:linear-gradient(145deg,#fff,#fafbf8);box-shadow:0 8px 24px #123e2b0a}
.finance-report-heading{margin:0 0 12px}.finance-report-heading .eyebrow{margin:0 0 4px;color:#a18231;font-size:9px;font-weight:800;letter-spacing:.12em}.finance-report-heading h2{margin:0;color:#173f30;font:800 17px Manrope,'DM Sans',sans-serif}.finance-report-heading p:last-child{margin:4px 0 0;color:#788675;font-size:10px}
.finance-report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.finance-report-card{display:grid;gap:6px;min-width:0;padding:13px;border:1px solid #e7ebdf;border-radius:11px;background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.finance-report-card:hover{transform:translateY(-2px);border-color:#d8c77c;box-shadow:0 8px 19px #123e2b10}.finance-report-card>span{color:#748174;font-size:10px;font-weight:700}.finance-report-card>strong{overflow:hidden;color:#234a37;font:800 clamp(15px,1.7vw,21px) Manrope,'DM Sans',sans-serif;text-overflow:ellipsis;white-space:nowrap}.finance-report-card>small{overflow:hidden;color:#929b8f;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.finance-report-card>div{display:flex;gap:6px;margin-top:3px}.finance-report-card>div a{padding:5px 8px;border:1px solid #e3e9dc;border-radius:7px;color:#286449;font-size:9px;font-weight:750;text-decoration:none}.finance-report-card>div a:hover{background:#f5f8f2;border-color:#cfdcc9}
.finance-command-copy{min-width:0}
.finance-command-kicker{display:flex;align-items:center;gap:9px;margin:0 0 9px;color:#f1d988;font-size:9px;font-weight:800;letter-spacing:.14em}
.finance-command-kicker span{width:7px;height:7px;background:#f1d988;box-shadow:0 0 0 4px #f1d98822}
.finance-command-copy h2{margin:0;color:#fff;font:800 clamp(19px,2.5vw,27px) Manrope,'DM Sans',sans-serif;letter-spacing:-.025em}
.finance-command-copy h2 i{color:#e5ca77;font-style:normal}
.finance-command-copy>p:not(.finance-command-kicker){margin:7px 0 0;color:#d1dfd4;font-size:11px;line-height:1.55}
.finance-command-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.finance-command-actions a{padding:8px 11px;border:1px solid #ffffff40;border-radius:9px;color:#fff;text-decoration:none;font-size:10px;font-weight:700;transition:background .16s ease,border-color .16s ease}
.finance-command-actions a:first-child{border-color:#e2c568;background:#e2c568;color:#173b2b}
.finance-command-actions a:hover{border-color:#f5dd94;background:#f5dd94;color:#173b2b}
.finance-command-progress{padding:16px 17px;border:1px solid #ffffff30;border-radius:14px;background:#ffffff12;backdrop-filter:blur(8px)}
.finance-command-progress>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:8px}
.finance-command-progress>div:first-child small{color:#e0e9df;font-size:10px;font-weight:700}
.finance-command-progress>div:first-child strong{color:#f4d779;font:800 30px Manrope,'DM Sans',sans-serif;line-height:1}
.finance-command-progress>div:first-child strong span{font-size:16px}
.finance-command-track{height:8px;margin:13px 0 15px;overflow:hidden;border-radius:10px;background:#ffffff30}
.finance-command-track span{display:block;width:var(--progress);height:100%;border-radius:10px;background:linear-gradient(90deg,#e6c763,#f5e6a7);transform-origin:left;animation:finance-progress-in .8s cubic-bezier(.2,.75,.25,1) both}
.finance-command-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.finance-command-totals span{display:grid;gap:4px;min-width:0}
.finance-command-totals small{color:#c8d8ca;font-size:9px}
.finance-command-totals b{overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.teacher-workspace-overview{margin:0 0 22px;padding:22px;border:1px solid #dfe7d9;border-radius:20px;background:linear-gradient(135deg,#fff 0%,#f8faf5 100%);box-shadow:0 12px 30px #123e2b0b}
.teacher-workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.teacher-workspace-heading .eyebrow{margin:0 0 5px;color:#a18231;font-size:9px}
.teacher-workspace-heading h2{margin:0;color:#163e2e;font:800 20px Manrope,'DM Sans',sans-serif}
.teacher-workspace-heading p:last-child{margin:5px 0 0;color:#788675;font-size:11px}
.teacher-report-action{flex:none;padding:9px 12px;border-radius:9px;background:#173f30;color:white;text-decoration:none;font-size:10px;font-weight:750}
.teacher-workspace-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:13px}
.teacher-workspace-stats article{display:grid;gap:5px;padding:12px 14px;border:1px solid #e6ebdf;border-radius:11px;background:#fff}
.teacher-workspace-stats small{color:#7c8879;font-size:9px;font-weight:700}
.teacher-workspace-stats strong{color:#173f30;font:800 21px Manrope,'DM Sans',sans-serif}
.teacher-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.teacher-class-card{min-width:0;padding:15px;border:1px solid #e3e9dc;border-radius:13px;background:#fff}
.teacher-class-card-heading{display:flex;align-items:center;gap:10px}
.teacher-class-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #e4d59f;border-radius:11px;background:linear-gradient(145deg,#faf0ce,#e8d583);color:#5e4e20;font:800 14px Manrope,sans-serif}
.teacher-class-card-heading>span:last-child{display:grid;gap:3px;min-width:0}
.teacher-class-card-heading strong{overflow:hidden;color:#234634;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.teacher-class-card-heading small{color:#899487;font-size:9px}
.teacher-subject-chips{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.teacher-subject-chips span{padding:5px 8px;border:1px solid #e6ebdf;border-radius:20px;background:#f8faf6;color:#536a58;font-size:9px;font-weight:700}
.teacher-roster{border-top:1px solid #edf0e8;padding-top:9px}
.teacher-roster summary{display:flex;justify-content:space-between;cursor:pointer;color:#506554;font-size:10px;font-weight:750;list-style:none}
.teacher-roster summary::-webkit-details-marker{display:none}
.teacher-roster summary span{color:#a18331}
.teacher-roster ul{display:grid;gap:0;margin:7px 0 0;padding:0;list-style:none}
.teacher-roster li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px;border-top:1px solid #f0f2ed}
.teacher-roster li>span{display:grid;gap:2px;min-width:0}
.teacher-roster li strong{overflow:hidden;color:#33483a;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.teacher-roster li small{color:#8d978b;font-size:9px}
.teacher-roster li a{flex:none;color:#286449;font-size:9px;font-weight:750;text-decoration:none}
.teacher-roster-empty{color:#8d978b;font-size:10px}
.teacher-assignment-empty{grid-column:1/-1;padding:20px;border:1px dashed #d9e2d4;border-radius:12px;background:#fbfcf9;color:#596e5d}
.teacher-assignment-empty strong{font-size:12px}
.teacher-assignment-empty p{margin:5px 0 0;font-size:10px}
#finance-dashboard .finance-kpi strong{color:#234a37}
#finance-dashboard .finance-kpi.collected strong{color:#33734e}
#finance-dashboard .finance-kpi.owing strong{color:#9e4b43}
#finance-dashboard .finance-bar-column span{background:linear-gradient(180deg,#d9bd61,#2d694a)}
#finance-dashboard .finance-method-bars i{background:linear-gradient(90deg,#d9bd61,#2d694a)}
#finance-dashboard .finance-progress span{background:linear-gradient(90deg,#d9bd61,#33734e)}
#finance-dashboard .finance-chart-card{border-color:#e3e9dc;box-shadow:0 8px 24px #123e2b0b}
@keyframes finance-progress-in{from{transform:scaleX(.03)}to{transform:scaleX(1)}}
@media(max-width:760px){.finance-command-hero{grid-template-columns:1fr;gap:18px;padding:20px}.today-pulse{padding:18px}.today-pulse-grid{grid-template-columns:1fr}}
@media(max-width:760px){.finance-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-report-periods{padding:14px}}
@media(max-width:650px){.teacher-workspace-overview{padding:18px}.teacher-workspace-heading{align-items:flex-start;flex-direction:column}.teacher-workspace-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-class-grid{grid-template-columns:1fr}}
@media(max-width:460px){.today-pulse-heading{align-items:flex-start}.pulse-date{font-size:9px;padding:6px 7px}.pulse-stat{min-height:76px}.finance-command-progress{padding:14px}}
@media(prefers-reduced-motion:reduce){.finance-command-track span{animation:none}}

/* Progressive web app shell and phone navigation */
#pwa-loading{position:fixed;inset:0 auto auto 0;z-index:2000;width:34%;height:3px;background:linear-gradient(90deg,#e3ad37,#f3d788);box-shadow:0 0 12px #e3ad3760;pointer-events:none;animation:pwa-loading-progress 1.2s ease-out both}#pwa-loading.complete{width:100%;opacity:0;transition:width .18s ease,opacity .25s ease .18s}@keyframes pwa-loading-progress{from{width:5%}to{width:82%}}
#pwa-connection{position:fixed;top:0;left:50%;z-index:2100;transform:translateX(-50%);width:min(620px,calc(100% - 20px));padding:10px 14px;border:1px solid #e3ad37;border-radius:0 0 12px 12px;background:#fff7df;color:#604d20;box-shadow:0 8px 24px #123e2b18;font-size:12px;font-weight:700}#pwa-connection[hidden]{display:none}#pwa-connection span{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#b47919}
.pwa-install-button{min-height:36px;padding:0 12px;border:1px solid #e3ad37;border-radius:9px;background:#f3d788;color:#173b2b;font:700 11px 'DM Sans',sans-serif;cursor:pointer}.pwa-install-button[hidden]{display:none}
.pwa-bottom-nav{display:none}
@media(max-width:650px){body:has(.pwa-bottom-nav){padding-bottom:calc(74px + env(safe-area-inset-bottom))}.app-sidebar{display:none!important}.app-shell .page{margin-bottom:22px;padding-bottom:18px}.pwa-bottom-nav{position:fixed;inset:auto 0 0;z-index:1000;display:flex;justify-content:space-around;gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #dfe7dc;background:#ffffffed;backdrop-filter:blur(14px);box-shadow:0 -8px 28px #102d2012}.pwa-bottom-nav a{display:grid;justify-items:center;align-content:center;gap:3px;flex:1;min-width:0;min-height:49px;border-radius:10px;color:#647369;text-decoration:none;font-size:9px;font-weight:700}.pwa-bottom-nav a span{display:grid;place-items:center;width:27px;height:25px;color:#286449;font-size:18px;font-weight:800}.pwa-bottom-nav a[aria-current=page]{background:#edf3e8;color:#173f30}.pwa-bottom-nav a[aria-current=page] span{color:#a18231}.app-shell .page>.page-heading{gap:12px}.app-shell .page>.page-heading h1{font-size:25px}.app-shell .page>.page-heading .secondary-button{flex:none}.account{gap:7px}.pwa-install-button{min-height:34px;padding:0 9px;font-size:10px}.attendance-register,.report-entry-table,.student-result-group table{min-width:700px}.report-entry-table input[type=number]{min-height:44px}.teacher-class-card{padding:14px}.finance-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px){.pwa-bottom-nav{padding-left:3px;padding-right:3px}.pwa-bottom-nav a{font-size:8px}.brand{gap:8px}.brand span{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account .link-button{padding:8px 9px;font-size:11px}.finance-report-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){#pwa-loading{animation:none;width:100%;opacity:0;transition:none}}

.pwa-dashboard-install{display:grid;justify-items:center;gap:7px;max-width:190px;margin-top:2px}.pwa-dashboard-install[hidden]{display:none}.pwa-dashboard-install .pwa-install-button{min-height:40px;padding:0 14px;border-color:#e5c45e;background:linear-gradient(135deg,#f6df9b,#e8c55b);box-shadow:0 5px 16px #061f1730;font-size:11px}.pwa-dashboard-install .pwa-install-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #061f1740}.pwa-install-button.is-installed{border-color:#80b58c;background:#e3f2e5;color:#215b39;cursor:default;box-shadow:none}.pwa-install-status{max-width:190px;color:#d8e5d8;font-size:10px;line-height:1.4;text-align:center}.pwa-install-dialog{width:min(440px,calc(100% - 28px));padding:24px;border:1px solid #d9c36c;border-radius:20px;background:#fff;color:#24352b;box-shadow:0 24px 80px #071d1545}.pwa-install-dialog::backdrop{background:#061b15a8;backdrop-filter:blur(3px)}.pwa-install-dialog-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid #edf0e8}.pwa-install-dialog-head img{width:45px;height:45px;border-radius:10px;background:#0b3025}.pwa-install-dialog-head>span{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:1;color:#a18231;font-size:9px;font-weight:800;letter-spacing:.12em}.pwa-install-dialog-head button{width:34px;height:34px;border:0;border-radius:9px;background:#f3f5ef;color:#607064;font-size:22px;cursor:pointer}.pwa-install-dialog h2{margin:17px 0 10px;color:#173f30;font:800 20px Manrope,'DM Sans',sans-serif}.pwa-install-dialog ol{display:grid;gap:9px;margin:0;padding-left:22px;color:#5e6c60;font-size:13px;line-height:1.5}.pwa-install-dialog>p{margin:15px 0;color:#758176;font-size:11px}.pwa-install-dialog .primary-button{width:100%;margin:4px 0 0;background:#173f30}
@media(max-width:650px){.dashboard-hero-brand{flex-wrap:wrap}.pwa-dashboard-install{flex:1 1 100%;justify-items:stretch;max-width:none;margin-left:58px}.pwa-dashboard-install .pwa-install-button{text-align:center}.pwa-install-status{max-width:none;text-align:left}}
@media(prefers-reduced-motion:reduce){.pwa-dashboard-install .pwa-install-button{transition:none}}