:root {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #152d50;
  background: #f2f7ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #152d50;
  --muted: #7889a1;
  --line: #dce7f5;
  --paper: #fff;
  --moss: #0b3c91;
  --green: #0753e9;
  --coral: #0753e9;
  --soft-green: #e9f3eb;
  --soft-amber: #fbf0db;
  --soft-coral: #f9eae5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
[data-page][hidden] { display: none !important; }
body { margin: 0; min-width: 360px; min-height: 100vh; background: #f2f7ff; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #93baa0; outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { width: 236px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 27px 16px 17px; color: #18355e; background: #e8f2ff; z-index: 2; border-right: 1px solid #d9e7f8; }
.brand { display: block; margin: 0 9px 35px; color: inherit; text-decoration: none; }
.brand-picture, .brand-logo { display: block; width: 100%; }
.brand-logo { height: auto; object-fit: contain; }
.side-label, .workspace-kicker, .section-overline, .eyebrow, .dialog-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.side-label { margin: 0 12px 12px; color: #8396b0; }
.side-nav { display: grid; gap: 5px; }
.nav-item { min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 5px; color: #5f7390; text-decoration: none; font-size: 13px; font-weight: 500; transition: background .16s, color .16s; }
.nav-item:hover, .nav-item.active { color: #113e88; background: #d8e9ff; }
.nav-item.active { box-shadow: inset 2px 0 #0753e9; }
.nav-icon { width: 17px; color: #3972c1; text-align: center; font-size: 17px; }
.nav-count { margin-left: auto; min-width: 22px; padding: 3px 5px; border-radius: 20px; color: #16458f; background: #cfe2ff; font-size: 12px; text-align: center; }
.side-bottom { margin-top: auto; }
.workspace-card { padding: 15px 13px 13px; border: 1px solid #d5e4f6; border-radius: 5px; background: rgba(255,255,255,.75); }
.workspace-kicker { color: #8297b4; font-size: 10px; }
.workspace-name { margin: 8px 0 10px; overflow: hidden; color: #18355e; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace-edit { display: flex; width: 100%; justify-content: space-between; padding: 0; border: 0; color: #47648a; background: none; font-size: 12px; text-align: left; }
.workspace-edit:hover { color: #0753e9; }
.user-session-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 11px; border: 1px solid #d5e4f6; border-radius: 4px; background: rgba(255,255,255,.58); }
.user-session-card > div { display: grid; gap: 3px; min-width: 0; }
.user-session-card strong { overflow: hidden; color: #294b77; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-session-card small { color: #8194ad; font-size: 10px; }
.user-session-card button { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid #d7e4f4; border-radius: 4px; color: #345c8e; background: white; font-size: 16px; }
.user-session-card button:hover { background: #edf5ff; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin: 17px 3px 0; color: #6d83a0; font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4c91ef; box-shadow: 0 0 0 3px rgba(76,145,239,.12); }
.main-content { max-width: 1600px; margin-left: 236px; padding: 0 48px 30px; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe9f5; }
.recovery-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 11px 14px; border: 1px solid #e3bc78; border-radius: 4px; color: #78541d; background: #fff8e9; font-size: 12px; }
.recovery-banner[hidden] { display: none !important; }
.recovery-banner button { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #e2c98e; border-radius: 3px; color: #78541d; background: #fffdf7; font-size: 11px; }
.recovery-banner button:hover { background: #fff2d1; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #9a9f97; font-size: 12px; }
.breadcrumb strong { color: #344e72; font-weight: 600; }
.crumb-slash { color: #c6cbc3; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.currency-badge { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #d9e6f5; border-radius: 4px; color: #59708e; background: #fff; font-size: 11px; font-weight: 700; }
.currency-badge strong { color: #0753e9; font-size: 15px; }
.icon-button, .avatar { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: #3c5c83; background: #fff; font-size: 17px; }
.icon-button:hover { border-color: #a9c7ef; background: #f4f9ff; }
.avatar { border: 0; border-radius: 50%; color: #16458f; background: #d7e8ff; font-weight: 700; font-size: 12px; }
.page-heading { min-height: 153px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 29px 0 25px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #868e83; font-size: 11px; }
.eyebrow-line { width: 19px; height: 1px; background: #0753e9; }
h1, h2, p { margin-top: 0; }
h1 { margin: 8px 0 4px; color: #132f58; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; font-weight: 700; letter-spacing: 0; }
.heading-period { color: var(--coral); }
.page-subtitle { margin: 0; color: #7889a1; font-size: 12px; }
.heading-controls { display: flex; align-items: center; gap: 9px; }
.overview-filter-bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 10px 12px; border: 1px solid #dce7f5; border-radius: 5px; background: #fff; }
.overview-filter-title { display: grid; gap: 3px; min-width: 116px; }
.overview-filter-title .section-overline { margin: 0; }
.overview-filter-title strong { color: #294b77; font-size: 12px; }
.overview-filter-control select { min-width: 150px; height: 34px; padding: 0 10px; border: 1px solid #d7e4f4; border-radius: 4px; color: #405a7b; background: #fff; font-size: 12px; }
.overview-reset { min-height: 34px; }
.overview-scope-count { margin-left: auto; color: #7488a2; font-size: 11px; text-align: right; }
.month-picker input, .filter-control select { height: 35px; padding: 0 10px; border: 1px solid #d7e4f4; border-radius: 4px; color: #405a7b; background: #fff; font-size: 12px; }
.button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 600; transition: background .16s, transform .16s, border-color .16s; }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: #0b3c91; }
.button-primary:hover { background: #082f74; }
.button-plus { font-size: 19px; line-height: 10px; font-weight: 400; }
.button-secondary { border-color: #d8e4f2; color: #425d80; background: white; }
.button-secondary:hover { background: #f2f7ff; }
.button-export { min-height: 34px; padding: 0 9px; border-color: #d7e4f4; color: #2455a0; background: #fff; white-space: nowrap; }
.button-export:hover { border-color: #a8c8f1; background: #edf5ff; }
.connect-excel[data-connected="true"] { border-color: #b8d2f2; color: #174d92; background: #eaf3ff; }
.excel-icon { font-size: 15px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.metric-expenses, .metric-net { border-color: #dce7f5; }
.metric-net .metric-value { color: #287047; }
.metric-net-loss .metric-value { color: #b2553d; }
.expense-summary { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; padding: 13px 15px; border: 1px solid #dce7f5; border-radius: 5px; color: #6d83a0; background: #fff; font-size: 12px; }
.expense-summary strong { color: #294b77; }
.expense-table { min-width: 520px; }
.expense-table td strong { color: #294b77; font-weight: 600; }
.expense-table tbody td:nth-last-child(2) { color: #526e90; }
.bill-attachment-status { color: #526e90; font-size: 11px; overflow-wrap: anywhere; }
.bill-remove-option { display: inline-flex; align-items: center; gap: 7px; color: #7b5660; font-size: 11px; }
.bill-remove-option input { accent-color: #b2553d; }
.optional-label { color: #8998aa; font-weight: 400; }
.bill-view-button { padding: 4px 8px; border: 1px solid #d7e4f4; border-radius: 4px; color: #2455a0; background: #fff; font-size: 11px; }
.bill-view-button:hover { background: #edf5ff; }
.bill-preview { display: grid; justify-items: start; gap: 12px; }
.bill-preview-image, .bill-preview-pdf { width: 100%; max-height: 65vh; border: 1px solid #e1eaf5; border-radius: 4px; object-fit: contain; }
.bill-preview-pdf { height: 65vh; }
.metric { min-height: 130px; padding: 15px 16px 13px; border: 1px solid #e7e9e2; border-radius: 5px; background: #fff; }
.metric-collection { color: #f5f9ff; border-color: #0753e9; background: #0753e9; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #8191a8; font-size: 12px; }
.metric-collection .metric-top { color: #d9e8ff; }
.metric-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #2459a0; background: #e8f2ff; font-size: 13px; }
.metric-collection .metric-icon { color: #e4efff; background: rgba(255,255,255,.15); }
.icon-due { color: #b27b32; background: #fbf1dd; }
.icon-students { color: #4c7780; background: #e9f3f4; }
.icon-rate { color: #b76248; background: #f9ede7; font-size: 12px; }
.metric-value { margin-top: 14px; color: #29362c; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 700; letter-spacing: 0; }
.metric-collection .metric-value { color: #fff; }
.metric-note { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: #929991; font-size: 11px; }
.metric-collection .metric-note { color: #d7e6ff; }
.metric-dot { width: 5px; height: 5px; border-radius: 50%; }
.metric-dot.green { background: #a7cf88; }
.metric-rate .metric-value { margin: 9px 0 5px; font-size: 22px; }
.rate-track { height: 3px; overflow: hidden; border-radius: 3px; background: #edf3fc; }
.rate-track span { height: 100%; display: block; border-radius: inherit; background: #0753e9; transition: width .25s ease; }
.metric-rate .metric-note { margin-top: 5px; }
.ledger-section { margin-top: 30px; }
.section-heading, .activity-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.section-overline { margin-bottom: 5px; color: #7c8ea8; font-size: 10px; }
h2 { margin-bottom: 0; color: #1b385f; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.ledger-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 7px; }
.search-box { width: 190px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid #d7e4f4; border-radius: 4px; background: white; }
.search-icon { color: #7b94b3; font-size: 23px; transform: rotate(-20deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: #294567; background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #95a7bf; }
.filter-control select { height: 34px; }
.filter-control select { max-width: 156px; }
.table-wrap { overflow: auto; contain: paint; border: 1px solid #e7e9e2; border-radius: 5px 5px 0 0; background: #fff; }
table { width: 100%; min-width: 990px; border-collapse: collapse; text-align: left; }
thead { background: #f6f9fe; }
th { height: 37px; padding: 0 14px; border-bottom: 1px solid #e2ebf6; color: #7e91aa; font-size: 10px; font-weight: 700; letter-spacing: .65px; white-space: nowrap; }
td { height: 62px; padding: 8px 14px; border-bottom: 1px solid #edf2f8; color: #506784; font-size: 12px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbff; }
.student-cell { display: flex; align-items: center; gap: 9px; }
.student-avatar { width: 31px; height: 31px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; color: #2255a0; background: #e3efff; font-size: 11px; font-weight: 700; }
.avatar-1 { color: #956648; background: #f3e9dc; }
.avatar-2 { color: #4a7180; background: #e1eef0; }
.avatar-3 { color: #8c5e68; background: #f3e5e9; }
.avatar-4 { color: #756847; background: #f0eddc; }
.student-details { display: grid; gap: 3px; }
.student-details strong { color: #243f64; font-size: 12px; font-weight: 600; }
.student-name-link { justify-self: start; padding: 0; border: 0; color: #243f64; background: transparent; font-size: inherit; font-weight: 600; text-align: left; }
.student-name-link:hover { color: #0753e9; text-decoration: underline; text-underline-offset: 2px; }
.student-details span, .paid-cell small { color: #a0a69e; font-size: 11px; }
.course-name { display: block; color: #3a567a; }
.course-detail { display: block; margin-top: 4px; color: #8c9db2; font-size: 11px; }
.amount-cell { color: #354f71; font-weight: 600; }
.paid-cell { display: grid; gap: 3px; color: #32598d; font-weight: 600; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-paid { color: #32734d; background: var(--soft-green); }
.status-partial { color: #9a6b20; background: var(--soft-amber); }
.status-due { color: #b2553d; background: var(--soft-coral); }
.status-archived { color: #6f7770; background: #eef0ed; }
.row-actions { display: flex; align-items: center; justify-content: end; gap: 4px; }
.row-action { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 4px; color: #8294ab; background: transparent; font-size: 14px; }
.row-action:hover { border-color: #dbe7f6; color: #174d9e; background: #f1f7ff; }
.menu-trigger { font-size: 22px; line-height: 1; }
.action-popover { position: fixed; inset: auto; width: 184px; max-width: calc(100vw - 16px); margin: 0; padding: 5px; overflow: visible; border: 1px solid #dce7f5; border-radius: 5px; color: #294b77; background: #fff; box-shadow: 0 10px 28px rgba(20,52,94,.18); z-index: 20; }
.action-menu { display: grid; gap: 2px; }
.action-menu-item { width: 100%; min-height: 34px; padding: 0 9px; border: 0; border-radius: 3px; color: #345478; background: transparent; font-size: 12px; text-align: left; }
.action-menu-item:hover { background: #f0f6ff; }
.action-menu-divider { height: 1px; margin: 3px 4px; background: #e6edf6; }
.action-menu-danger { color: #af3f48; }
.action-menu-danger:hover { background: #fff1f1; }
.button-small { min-height: 27px; padding: 0 8px; font-size: 11px; }
.button-pay { color: #2259a4; background: #eaf3ff; }
.button-pay:hover { background: #dcecff; }
.button-muted { color: #73839a; background: #eef2f7; }
.button-danger { color: #a3483e; background: #fff0ed; }
.button-danger:hover { background: #ffe2dc; }
.table-footer { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #e1eaf5; border-top: 0; border-radius: 0 0 5px 5px; color: #8597ae; background: #f8fbff; font-size: 11px; }
.table-footer-note { display: flex; align-items: center; gap: 7px; }
.table-footer-note .status-dot { width: 5px; height: 5px; }
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #8294ab; font-size: 12px; }
.empty-state strong { color: #294b77; font-size: 14px; }
.empty-icon { width: 37px; height: 37px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 50%; color: #2860a7; background: #eaf3ff; font-size: 20px; }
.empty-state .button { margin-top: 7px; }
.class-management-section { margin-top: 31px; }
.class-table-wrap { overflow: auto; contain: paint; border: 1px solid #dfe9f5; border-radius: 5px; background: #fff; }
.class-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.class-table thead { background: #f6f9fe; }
.class-table th { padding: 0 14px; }
.class-table td { height: 52px; padding: 8px 14px; border-bottom: 1px solid #edf2f8; color: #506784; font-size: 12px; }
.class-table tbody tr:last-child td { border-bottom: 0; }
.class-table td strong { color: #294b77; font-weight: 600; }
.class-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.class-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.class-status-active { color: #2865aa; background: #eaf3ff; }
.class-status-archived { color: #78879b; background: #eef2f7; }
.class-empty { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8294ab; font-size: 12px; }
.class-empty strong { color: #294b77; font-size: 13px; }
.accounts-section { margin-top: 20px; }
.account-access-note { margin-bottom: 14px; padding: 11px 13px; border: 1px solid #dce7f5; border-radius: 4px; color: #58708e; background: #fff; font-size: 12px; }
.account-table { min-width: 760px; }
.account-role-select { min-width: 140px; height: 32px; padding: 0 8px; border: 1px solid #d7e4f4; border-radius: 4px; color: #405a7b; background: #fff; font-size: 12px; }
.account-table .row-actions { gap: 7px; }
.account-table .button { white-space: nowrap; }
.overview-dues { margin-top: 26px; }
.overview-dues-wrap { border-radius: 5px; }
.overview-dues-table { min-width: 900px; }
.overview-dues-table td { height: 58px; }
.overview-dues-empty { padding: 28px 16px; color: #6d83a0; font-size: 13px; text-align: center; }
.student-photo { object-fit: cover; }
.student-avatar.student-photo-button { padding: 0; overflow: hidden; cursor: zoom-in; }
.student-photo-button .student-photo { display: block; width: 100%; height: 100%; }
.student-photo-viewer { display: grid; place-items: center; min-height: 220px; }
.student-photo-viewer img { display: block; width: min(100%, 520px); max-height: 68vh; object-fit: contain; border-radius: 6px; }
.photo-field { display: flex; align-items: center; gap: 14px; }
.photo-preview { width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #d7e4f4; border-radius: 50%; color: #2455a0; background: #eaf3ff; font-size: 22px; font-weight: 700; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-controls { display: grid; justify-items: start; gap: 7px; }
.photo-controls small { color: #8294ab; font-size: 11px; }
.photo-upload { position: relative; overflow: hidden; }
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-remove { font-size: 12px; }
.student-avatar.student-photo { border: 1px solid #dce7f5; }
.history-summary .student-photo { width: 38px; height: 38px; }
.activity-section { margin-top: 28px; }
.activity-title { align-items: end; margin-bottom: 10px; }
.activity-ledger-tools { display: flex; align-items: end; gap: 12px; margin-bottom: 10px; padding: 0 0 10px; border-bottom: 1px solid #e7e9e2; }
.activity-date-field { display: grid; gap: 5px; color: #607591; font-size: 11px; font-weight: 600; }
.activity-date-field input { height: 34px; padding: 0 9px; border: 1px solid #d9e5f4; border-radius: 4px; color: #2a466b; background: #fff; font: inherit; }
.activity-date-summary { margin: 0 0 3px auto; color: #8193aa; font-size: 11px; }
.text-button { padding: 0 0 3px; border: 0; color: #35639f; background: none; font-size: 12px; font-weight: 600; }
.text-button span { margin-left: 5px; }
.text-button:hover { color: #0753e9; }
.activity-list { overflow: hidden; border: 1px solid #e7e9e2; border-radius: 5px; background: #fff; }
.activity-row { width: 100%; min-height: 52px; display: grid; grid-template-columns: 28px minmax(150px, 1fr) minmax(100px, .8fr) minmax(80px, .6fr) 145px 18px; align-items: center; gap: 10px; padding: 7px 14px; border: 0; border-bottom: 1px solid #eaf0f7; color: #607591; background: transparent; text-align: left; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { background: #f7faff; }
.activity-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #2861aa; background: #eaf3ff; font-size: 14px; }
.activity-person { display: grid; gap: 3px; }
.activity-person strong { color: #314d72; font-size: 12px; font-weight: 600; }
.activity-person small, .activity-month, .activity-receipt { color: #8799b0; font-size: 11px; }
.activity-amount { color: #245ea7; font-size: 12px; font-weight: 700; }
.activity-arrow { color: #8ca0b8; }
.activity-empty { padding: 22px; color: #8194ad; font-size: 12px; text-align: center; }
.page-footer { display: flex; justify-content: space-between; margin-top: 25px; color: #8193aa; font-size: 10px; font-weight: 600; letter-spacing: .7px; }
.footer-divider { margin: 0 6px; color: #0753e9; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-dialog { width: min(520px, calc(100vw - 28px)); max-height: min(88vh, 800px); padding: 0; overflow: auto; border: 1px solid #dce7f5; border-radius: 7px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgba(17,48,94,.18); }
.app-dialog:has(.report-sheet) { width: min(1040px, calc(100vw - 28px)); }
.app-dialog::backdrop { background: rgba(22,47,83,.38); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: start; justify-content: space-between; padding: 22px 24px 17px; border-bottom: 1px solid #edf0ea; }
.dialog-eyebrow { margin-bottom: 6px; color: #8194ad; font-size: 10px; }
.dialog-head h2 { font-size: 21px; }
.close-button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #dce7f5; border-radius: 4px; color: #526b8d; background: #fff; font-size: 21px; line-height: 1; }
.close-button:hover { background: #f2f7ff; }
.dialog-body { padding: 20px 24px 24px; }
.form-stack { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field label { color: #455f81; font-size: 12px; font-weight: 600; }
.field label em { color: #c8664b; font-style: normal; }
.field input, .field select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d9e5f4; border-radius: 4px; outline: 0; color: #2a466b; background: white; font-size: 12px; }
.field input:focus, .field select:focus { border-color: #75a6ed; box-shadow: 0 0 0 3px rgba(65,132,228,.12); }
.field input::placeholder { color: #9aaac0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-with-prefix { display: flex; align-items: center; height: 38px; border: 1px solid #d9e5f4; border-radius: 4px; }
.input-with-prefix:focus-within { border-color: #75a6ed; box-shadow: 0 0 0 3px rgba(65,132,228,.12); }
.input-with-prefix span { padding-left: 10px; color: #627e9f; font-size: 12px; }
.input-with-prefix input { height: 36px; border: 0; box-shadow: none !important; }
.form-hint { margin: -5px 0 0; color: #8294ab; font-size: 11px; line-height: 1.5; }
.form-actions { display: flex; justify-content: end; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid #edf0ea; }
.receipt-wrap { padding: 1px 0 5px; }
.receipt-sheet { padding: 24px; border: 1px solid #dce7f5; border-radius: 4px; background: #fff; }
.receipt-brand { display: flex; align-items: center; gap: 10px; }
.receipt-logo { width: 126px; height: 68px; object-fit: contain; }
.receipt-brand > div { display: grid; gap: 4px; }
.receipt-brand > div strong { color: #153761; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; }
.receipt-brand > div small, .receipt-number span, .receipt-student > span, .receipt-grid span, .receipt-total span, .receipt-balance span { color: #949c92; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.receipt-stamp { margin-left: auto; padding: 5px 8px; border: 1px solid #a8c9f5; border-radius: 3px; color: #1c60ad; font-size: 10px; font-weight: 700; letter-spacing: 1px; transform: rotate(-5deg); }
.receipt-number { display: flex; justify-content: space-between; margin-top: 24px; }
.receipt-number strong { color: #4b584c; font-size: 12px; }
.receipt-rule { height: 1px; margin: 12px 0 17px; background: #e9ece5; }
.receipt-student { display: grid; gap: 5px; }
.receipt-student strong { color: #334236; font-size: 16px; }
.receipt-student small { color: #92998f; font-size: 11px; }
.receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 12px; margin-top: 22px; padding: 16px 0; border-top: 1px solid #edf0ea; border-bottom: 1px solid #edf0ea; }
.receipt-grid > div { display: grid; gap: 5px; }
.receipt-grid strong { color: #49564b; font-size: 12px; }
.receipt-total, .receipt-balance { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; }
.receipt-total strong { color: #164d9a; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.receipt-balance { padding-top: 8px; }
.receipt-balance strong { color: #737f73; font-size: 12px; }
.receipt-signature { width: 140px; margin: 28px 0 0 auto; padding-top: 7px; border-top: 1px solid #aab3a7; color: #a0a69d; font-size: 10px; text-align: center; }
.receipt-thanks { margin-top: 20px; padding-top: 10px; border-top: 1px dashed #e2e7df; color: #7f8c7e; font-size: 11px; text-align: center; }
.receipt-actions { margin-top: 14px; }
.report-sheet { color: #19395f; }
.report-header { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 2px solid #0753e9; }
.report-header img { width: 112px; height: 62px; object-fit: contain; }
.report-header h3 { margin: 0; color: #153761; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; }
.report-header p { margin: 4px 0 0; color: #7589a5; font-size: 11px; }
.report-summary { margin: 11px 0; color: #6c809a; font-size: 11px; }
.report-table-wrap { max-height: 50vh; overflow: auto; }
.report-table { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; }
.report-table th { height: auto; padding: 8px 6px; background: #eaf3ff; color: #214d86; font-size: 10px; }
.report-table td { height: auto; padding: 7px 6px; border-bottom: 1px solid #e3ebf5; color: #405b7c; font-size: 11px; white-space: normal; vertical-align: top; }
.report-table td strong { display: block; color: #234773; }
.report-table td small { display: block; margin-top: 3px; color: #7488a2; font-size: 10px; line-height: 1.35; }
.report-sheet footer { margin-top: 10px; color: #8193aa; font-size: 10px; }
.report-sheet + .form-actions { margin-top: 12px; }
.history-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 12px; border-radius: 4px; background: #f7f9f4; }
.history-summary > div { display: grid; gap: 4px; }
.history-summary > div strong { color: #344238; font-size: 12px; }
.history-summary > div small, .history-fee small { color: #9aa197; font-size: 11px; }
.history-fee { display: grid; gap: 3px; margin-left: auto; color: #49634e; font-size: 12px; font-weight: 700; text-align: right; }
.history-list { display: grid; max-height: 300px; overflow: auto; }
.history-month-list { display: grid; max-height: min(55vh, 440px); overflow: auto; border-top: 1px solid #e4edf8; }
.history-month-row { display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(90px, auto) auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 2px; border-bottom: 1px solid #eaf0f7; }
.history-month-info { display: grid; gap: 4px; }
.history-month-info strong { color: #294b77; font-size: 12px; }
.history-month-info small { color: #8294ab; font-size: 11px; }
.history-month-balance { color: #345478; font-size: 11px; text-align: right; }
.history-month-receipts { display: flex; gap: 4px; }
.history-month-receipts button { padding: 4px 6px; border: 1px solid #dbe7f6; border-radius: 3px; color: #2455a0; background: #f5f9ff; font-size: 10px; }
.history-month-receipts button:hover { background: #eaf3ff; }
.full-ledger { display: grid; max-height: min(60vh, 480px); overflow: auto; }
.ledger-payment-row { min-height: 57px; display: grid; grid-template-columns: 28px minmax(130px, 1fr) minmax(90px, .8fr) minmax(90px, .8fr) auto 16px; align-items: center; gap: 9px; padding: 7px 2px; border: 0; border-bottom: 1px solid #edf0ea; color: #657066; background: white; text-align: left; }
.ledger-payment-row:hover { background: #fafbf8; }
.ledger-payment-month, .ledger-payment-date { color: #929b91; font-size: 11px; }
.history-row { min-height: 55px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #edf0ea; }
.history-row > div { display: grid; gap: 4px; }
.history-row > div strong { color: #435146; font-size: 12px; }
.history-row > div small { color: #9ba197; font-size: 11px; }
.history-row > strong { margin-left: auto; color: #47694d; font-size: 12px; }
.history-receipt { width: 27px; height: 27px; border: 0; border-radius: 4px; color: #738476; background: #f3f6f0; }
.history-empty { padding: 25px 8px; color: #969e94; font-size: 12px; text-align: center; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 10; max-width: calc(100vw - 32px); padding: 11px 15px; border: 1px solid #c5dcfa; border-radius: 4px; color: #f3f8ff; background: #103c80; box-shadow: 0 8px 25px rgba(28,58,104,.18); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error { border-color: #efc6b8; background: #9e513e; }
.button-whatsapp { border-color: #c6e8d2; color: #187747; background: #effaf3; }
.button-whatsapp:hover { background: #e2f5e9; }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .55; }
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(340px, 480px); align-items: center; gap: clamp(32px, 7vw, 100px); padding: 42px clamp(24px, 7vw, 100px); background: linear-gradient(125deg, #e8f2ff 0%, #f8fbff 48%, #fff 100%); }
.auth-screen[hidden], .app-shell[hidden] { display: none !important; }
.auth-brand { display: grid; place-items: center; }
.auth-brand img { display: block; width: min(100%, 620px); max-height: 370px; object-fit: contain; }
.auth-panel { width: 100%; padding: 34px; border: 1px solid #dce7f5; border-radius: 7px; background: #fff; box-shadow: 0 18px 48px rgba(29,68,120,.1); }
.auth-panel h1 { margin: 10px 0 7px; font-size: 29px; }
.auth-panel > .page-subtitle { margin-bottom: 22px; line-height: 1.5; }
.auth-form { gap: 15px; }
.remember-login { display: flex; align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid #dce7f5; border-radius: 4px; color: #365577; background: #f8fbff; cursor: pointer; }
.remember-login input { width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #0753e9; }
.remember-login span { display: grid; gap: 3px; }
.remember-login strong { font-size: 12px; font-weight: 600; }
.remember-login small { color: #8294ab; font-size: 11px; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-error { padding: 9px 10px; border: 1px solid #edc8c4; border-radius: 4px; color: #943f3f; background: #fff4f2; font-size: 12px; }
.auth-local-note { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid #e8eef6; color: #8192a8; font-size: 10px; line-height: 1.5; }

@media (max-width: 1120px) {
  .main-content { padding-right: 28px; padding-left: 28px; }
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sidebar { width: 62px; align-items: center; padding: 18px 7px 12px; }
  .brand { width: 46px; margin: 0 0 30px; }
  .brand-logo { width: 46px; height: 35px; object-fit: contain; }
  .side-label { display: none; }
  .side-nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; font-size: 0; }
  .nav-item .nav-icon { font-size: 19px; }
  .nav-item .nav-count, .side-bottom .workspace-card { display: none; }
  .sidebar-foot { width: 8px; overflow: hidden; margin-bottom: 2px; font-size: 0; }
  .main-content { margin-left: 62px; padding: 0 18px 24px; }
  .side-bottom .user-session-card { width: 44px; justify-content: center; padding: 6px 0; }
  .user-session-card > div { display: none; }
  .user-session-card button { width: 30px; }
  .topbar { height: 58px; }
  .currency-badge { padding: 6px 7px; }
  .top-actions { gap: 7px; }
  .page-heading { align-items: start; flex-direction: column; padding: 24px 0 19px; }
  .overview-filter-bar { flex-wrap: wrap; }
  .overview-filter-title { flex: 1 1 100%; }
  .overview-filter-control { flex: 1 1 calc(50% - 5px); }
  .overview-filter-control select { width: 100%; min-width: 0; }
  .overview-scope-count { flex: 1 1 100%; margin-left: 0; text-align: left; }
  h1 { font-size: 27px; }
  .heading-controls { width: 100%; }
  .heading-controls .month-picker { flex: 1; }
  .heading-controls .month-picker input { width: 100%; }
  .metrics { gap: 8px; }
  .metric { min-height: 118px; padding: 12px; }
  .metric-value { font-size: 21px; }
  .metric-top { font-size: 11px; }
  .section-heading { align-items: start; flex-direction: column; }
  .ledger-actions { width: 100%; justify-content: start; }
  .search-box { flex: 1 1 100%; width: auto; }
  .filter-control { flex: 1 1 calc(50% - 5px); }
  .filter-control select { width: 100%; max-width: none; }
  .button-export { flex: 1 1 calc(50% - 5px); }
  .top-actions .connect-excel { width: 34px; min-width: 34px; flex: 0 0 34px; padding: 0; }
  .connect-excel .connect-label { display: none; }
  .activity-row { grid-template-columns: 28px minmax(120px, 1fr) auto 16px; }
  .activity-month, .activity-receipt { display: none; }
  .activity-ledger-tools { flex-wrap: wrap; }
  .ledger-payment-row { grid-template-columns: 28px minmax(115px, 1fr) auto 16px; }
  .ledger-payment-month, .ledger-payment-date { display: none; }
  .page-footer { font-size: 9px; }
}
@media (max-width: 460px) {
  body { min-width: 320px; }
  .main-content { padding-right: 12px; padding-left: 12px; }
  .sidebar { width: 52px; }
  .brand { width: 38px; }
  .brand-logo { width: 38px; }
  .main-content { margin-left: 52px; }
  .auth-screen { grid-template-columns: 1fr; align-content: center; gap: 20px; padding: 24px 16px; }
  .auth-brand img { width: min(54vw, 230px); max-height: 120px; }
  .auth-panel { max-width: 440px; margin: 0 auto; padding: 22px 18px; }
  .auth-panel h1 { font-size: 26px; }
  .top-actions { gap: 5px; }
  .currency-badge { padding: 5px 6px; font-size: 10px; }
  .breadcrumb { gap: 6px; font-size: 11px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 110px; padding: 10px; }
  .metric-top { gap: 3px; font-size: 10px; }
  .metric-icon { width: 20px; height: 20px; }
  .metric-value { margin-top: 12px; font-size: 19px; }
  .metric-note { font-size: 10px; }
  .activity-row { gap: 6px; padding-right: 9px; padding-left: 9px; }
  .activity-date-summary { flex-basis: 100%; margin-left: 0; }
  .dialog-head { padding-right: 17px; padding-left: 17px; }
  .dialog-body { padding: 16px 17px 18px; }
  .field-grid { grid-template-columns: 1fr; }
  .history-month-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .history-month-balance { grid-column: 2; grid-row: 2; }
  .history-month-receipts { grid-column: 1 / -1; }
}
@media print {
  @page { size: landscape; margin: 10mm; }
  body.printing-report .report-table { min-width: 100%; }
  body.printing-report .report-table td { font-size: 10px; }
  body.printing-report .report-table td small { font-size: 9px; }
}