:root {
  --bg:#f5f7f7; --surface:#fff; --ink:#182c28; --muted:#687a75; --line:#e5ece9;
  --green:#1a6b57; --forest:#123c35; --mint:#eaf5ee; --mint-strong:#c8eccf;
  --amber:#9a5a15; --amber-bg:#fff5e5; --red:#ad4040; --red-bg:#fff0ef;
  --radius:18px; --shadow:0 3px 12px rgba(28,53,43,.035);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink); background:var(--bg); font-synthesis:none; -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid #67a994; outline-offset:3px; }
input,select { min-width:0; }
.icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;top:-80px;left:20px;z-index:100;background:var(--forest);color:white;padding:12px 18px;border-radius:10px; }
.skip-link:focus { top:10px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:248px; background:#fff; border-right:1px solid var(--line);padding:33px 20px 20px; display:flex; flex-direction:column;z-index:20; }
.brand { display:flex;align-items:center;gap:12px;padding:0 8px;font-size:26px;font-weight:750;letter-spacing:-1px; }
.brand-caption { display:block;font-size:8px;letter-spacing:1.6px;font-weight:650;color:var(--muted);margin-top:2px; }
.brand-mark { width:43px;height:43px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:var(--forest);color:#d9f2b5;box-shadow:0 4px 9px #123c3515; }
.brand-mark .icon { width:24px;height:24px; }
.workspace-card { display:flex;gap:10px;align-items:center;margin:36px 0 29px;padding:13px 10px;border:1px solid var(--line);border-radius:12px;background:#fbfcfb; }
.workspace-icon { width:32px;height:34px;color:#54806a;background:#eaf2eb;border-radius:8px; }
.workspace-card strong { display:block;font-size:12px;font-weight:650; }
.workspace-card div>span { display:block;font-size:11px;color:var(--muted);margin-top:2px; }
.nav-label { color:#86918d;letter-spacing:1.7px;font-size:9px;font-weight:750;margin:0 14px 10px; }
.desktop-nav { display:grid;gap:7px; }
.desktop-nav a { display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;color:#66736f;font-weight:550; }
.desktop-nav a:hover { background:#f4f7f5; }
.desktop-nav a.active { background:#eaf4ed;color:#1c634c;font-weight:650; }
.nav-count { margin-left:auto;background:#d8e9dd;font-size:11px;padding:1px 7px;min-width:22px;text-align:center;border-radius:5px; }
.sidebar-bottom { margin-top:auto;padding-top:38px; }
.backup-promo { background:#f4f7f2;padding:19px 17px;border:1px solid #e8eee4;border-radius:14px; }
.promo-icon { color:#65855c;margin-bottom:13px; }
.backup-promo h3 { font-size:12px;margin:0 0 7px;font-weight:650; }
.backup-promo p { font-size:11px;line-height:1.7;margin:0 0 13px;color:#73816e; }
.text-button { display:inline-flex;gap:8px;align-items:center;border:0;background:transparent;color:var(--green);font-size:12px;font-weight:650;padding:4px 0; }
.text-button .icon { width:16px;height:16px; }
.sidebar-tool { width:100%;display:flex;align-items:center;gap:10px;padding:21px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:12px;color:#6a7773; }
.sidebar-tool span:last-child { margin-left:auto; }
.sidebar-footer { display:flex;align-items:center;gap:7px;padding:19px 4px 0;color:#76817d;font-size:10px; }
.sidebar-footer>span:last-child { margin-left:auto;color:#9aa6a1; }
.status-dot { width:6px;height:6px;background:#5d9277;border-radius:50%;display:inline-block;flex-shrink:0; }
.app-shell { margin-left:248px; }
.topbar { min-height:83px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);background:#ffffffc9; }
.breadcrumb { display:flex;align-items:center;gap:12px;font-size:12px;color:#8a9893; }
.breadcrumb strong { font-weight:550;color:#485c53; }
.breadcrumb .icon { width:16px;height:16px; }
.breadcrumb span:nth-child(3) .icon { width:12px;height:12px; }
.topbar-actions { display:flex;gap:18px;align-items:center; }
.today-label { font-size:11px;color:#7c8984; }
.storage-chip { display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:10px;font-weight:550;color:#698374;background:#fff; }
.icon-button { display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#657871;flex-shrink:0; }
.icon-button:hover { background:#f0f6f2;border-color:#c5d7cd;color:var(--green); }
.icon-button.danger:hover { background:var(--red-bg);color:var(--red);border-color:#e9c7c7; }
.mobile-brand,.mobile-nav { display:none; }
main { max-width:1400px;padding:35px 38px 20px;margin:0 auto;min-height:calc(100vh - 150px);outline:0; }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px; }
.eyebrow { display:flex;align-items:center;gap:6px;font-size:9px;font-weight:750;letter-spacing:2px;color:#7d8f85;margin:0 0 7px; }
h1 { font-size:31px;line-height:1.2;letter-spacing:-1px;font-weight:680;margin:0 0 9px; }
.page-subtitle { font-size:12px;color:var(--muted);margin:0; }
.heading-actions { display:flex;align-items:center;gap:10px; }
.button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s; }
.button:hover { background:#f1f6f2;border-color:#cbdacf; }
.button .icon { width:17px;height:17px; }
.button.primary { background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 3px 7px #123c3512; }
.button.primary:hover { background:#20564a; }
.button.danger { background:var(--red);border-color:var(--red);color:white; }
.button.soft { background:#ecf5ef;border-color:#dce9df;color:var(--green); }
.button.block { width:100%; }
.button.compact { min-height:36px;padding:7px 12px;font-size:11px; }
.month-picker { display:flex;align-items:center;gap:5px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:11px; }
.month-picker .icon-button { width:32px;height:32px;border:0;border-radius:7px; }
.month-picker .icon-button .icon { width:15px;height:15px; }
.month-display { display:flex;align-items:center;gap:8px;padding:3px 7px;min-width:159px;justify-content:center;border:0;background:none;font-size:12px;font-weight:650; }
.month-display .icon { width:16px;height:16px;color:#788f82; }
.overview-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;margin-bottom:28px; }
.metric { background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:21px 22px;box-shadow:var(--shadow);position:relative; }
.metric-top { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px; }
.metric-label { font-size:12px;font-weight:550;color:#6c8076; }
.metric-icon { width:31px;height:31px;border:1px solid #e6eee8;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#688c75;background:#f7faf7; }
.metric-icon .icon { width:17px;height:17px; }
.metric-value { font-size:29px;font-weight:650;line-height:1.3;letter-spacing:-1px;font-variant-numeric:tabular-nums; }
.metric-foot { display:flex;align-items:center;gap:5px;font-size:10px;color:#7f8e86;margin:9px 0 0; }
.metric-foot .icon { width:13px;height:13px; }
.metric-hero { display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--forest);border-color:var(--forest);color:white;overflow:hidden; }
.metric-hero::after { content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border:1px solid #ffffff0c;border-radius:50%;pointer-events:none; }
.metric-hero .metric-label { color:#bdd0c4;font-size:11px; }
.metric-hero .metric-value { font-size:34px;color:#f2f8e9;margin:11px 0 13px; }
.metric-hero .metric-foot { color:#9abcac;font-size:10px; }
.metric-hero .metric-foot .icon { color:#c1e99e; }
.collection-ring { width:91px;height:91px;flex-shrink:0;position:relative; }
.collection-ring svg { width:100%;height:100%;transform:rotate(-90deg); }
.collection-ring .ring-track { fill:none;stroke:#31564c;stroke-width:5; }
.collection-ring .ring-fill { fill:none;stroke:#cee9a2;stroke-width:5;stroke-linecap:round; }
.ring-label { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column; }
.ring-label strong { font-size:20px;font-weight:650;color:#edfad7; }
.ring-label span { font-size:8px;letter-spacing:.7px;color:#a0b9a7; }
.amber .metric-icon { background:var(--amber-bg);color:#b18039;border-color:#f2e5d1; }
.amber .metric-foot { color:#a4773b; }
.students-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px; }
.students-metrics .metric { padding:18px 21px; }
.students-metrics .metric-top { margin:0 0 10px; }
.students-metrics .metric-value { font-size:29px; }
.panel { border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);overflow:hidden; }
.panel-header { display:flex;justify-content:space-between;align-items:center;gap:18px;padding:23px 23px 18px; }
.panel-heading { display:flex;align-items:center;gap:9px; }
.panel-heading .icon { width:17px;height:17px;color:#829389; }
.panel h2 { font-size:15px;font-weight:650;letter-spacing:-.2px;margin:0; }
.count-pill { background:#f0f4f1;color:#748478;border:1px solid #e5ece6;border-radius:6px;font-size:10px;padding:1px 6px;margin-left:1px; }
.panel-desc { font-size:11px;color:#8a9791;margin:6px 0 0; }
.table-controls { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.search-field { height:37px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:7px;padding:0 10px;background:#fcfdfc; }
.search-field .icon { width:15px;height:15px;color:#9aa9a1; }
.search-field input { border:0;background:transparent;outline:0;width:145px;font-size:11px;color:var(--ink);height:100%; }
.search-field:focus-within { border-color:#83af96;box-shadow:0 0 0 2px #ecf5ed; }
.search-field input::placeholder { color:#96a49d; }
.segmented { display:flex;gap:2px;padding:3px;border:1px solid var(--line);background:#f7f9f7;border-radius:9px; }
.segmented button { border:0;background:transparent;border-radius:6px;font-size:10px;font-weight:600;padding:6px 10px;color:#849189;min-height:28px; }
.segmented button.selected { background:#fff;color:#355c46;box-shadow:0 1px 4px #203c2320; }
.table-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; }
table { width:100%;border-collapse:separate;border-spacing:0;font-size:12px;text-align:left; }
th { text-align:left;background:#f8faf8;color:#89958c;font-size:9px;text-transform:uppercase;font-weight:650;letter-spacing:1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 23px;white-space:nowrap; }
td { padding:15px 23px;border-bottom:1px solid #edf1ee;height:71px;vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fcfefb; }
.student-cell { display:flex;gap:12px;align-items:center; }
.avatar { display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;font-size:11px;letter-spacing:.3px;font-weight:650;flex-shrink:0; }
.avatar-0 { background:#eaf1e9;color:#67855e; }.avatar-1 { background:#eeeafa;color:#8a71a1; }.avatar-2 { background:#f7efe2;color:#b18a47; }.avatar-3 { background:#e7f0f4;color:#628698; }.avatar-4 { background:#f7e9e5;color:#ae8070; }.avatar-5 { background:#eaedf7;color:#7a85ad; }
.student-name { font-size:12px;font-weight:600;color:#324b40;max-width:240px;overflow-wrap:anywhere; }
.student-sub { font-size:9px;color:#9ba49e;margin-top:2px; }
.amount { font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#506958;white-space:nowrap; }
.amount small { font-weight:400;color:#a1a9a3;font-size:10px;margin-left:4px; }
.badge { display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:3px 8px;border-radius:6px;font-size:10px;white-space:nowrap;font-weight:550; }
.badge .icon { width:12px;height:12px; }
.badge.active { color:#528064;background:#edf5ef; }.badge.inactive { color:#8b8b89;background:#f1f2f0; }
.badge.pending { color:#a37738;background:#fff6e7; }.badge.paid { color:#458367;background:#ebf6ef; }
.row-actions { display:flex;gap:7px; }
.row-actions .icon-button { width:33px;height:33px;border-color:transparent;background:transparent; }
.row-actions .icon-button:hover { border-color:var(--line);background:#eff6ef; }
.row-actions .icon { width:16px;height:16px; }
.pay-cell { min-width:178px; }
.pay-control { display:flex;align-items:center;gap:10px; }
.pay-toggle { position:relative;flex-shrink:0;width:40px;height:24px;border:1px solid #dce5df;background:#e8eeea;border-radius:15px;padding:0;transition:background .2s,border-color .2s; }
.pay-toggle .toggle-knob { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #45604c22;display:flex;align-items:center;justify-content:center;transition:transform .2s; }
.pay-toggle[aria-checked="true"] { background:#447d60;border-color:#447d60; }
.pay-toggle[aria-checked="true"] .toggle-knob { transform:translateX(16px); }
.toggle-knob .icon { width:11px;height:11px;color:#4e8667; }
.pay-copy { display:flex;flex-direction:column; }
.pay-status { font-size:11px;font-weight:550;color:#89948d; }
.pay-status.is-paid { color:#468367; }
.date-button { border:0;background:transparent;padding:2px 0;display:inline-flex;align-items:center;gap:3px;color:#8b9d91;font-size:10px;min-height:19px; }
.date-button:hover { color:var(--green);text-decoration:underline; }
.date-button .icon { width:10px;height:10px; }
.panel-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:14px 23px;color:#99a39b;font-size:10px; }
.panel-footer>span { display:flex;gap:6px;align-items:center; }
.panel-footer .icon { width:13px;height:13px; }
.subtle-note { display:flex;gap:8px;align-items:flex-start;color:#839184;font-size:11px;line-height:1.7;margin:19px 2px 0; }
.subtle-note .icon { width:15px;height:15px;margin-top:1px; }
.info-banner { display:flex;align-items:flex-start;gap:10px;border:1px solid #e3eadb;background:#f0f5e9;padding:13px 16px;border-radius:12px;font-size:11px;color:#778466;margin:0 0 20px; }
.info-banner strong { color:#526747; }
.info-banner .icon { width:17px;height:17px; }
.banners:empty { display:none; }
.banner { padding:10px 38px;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.banner>span { display:flex;gap:8px;align-items:center; }
.banner .icon { width:14px;height:14px; }
.banner.demo { background:#fff0d7;color:#89621f;border-bottom:1px solid #efdbb5; }
.banner.network { background:#eaf1ed;color:#507963; }
.banner button,.banner a { padding:2px;border:0;background:transparent;color:inherit;font-weight:700;text-decoration:underline; }
.banner.warning { background:#fff3e4;color:#856334; }
.empty-state { text-align:center;padding:53px 20px 60px; }
.empty-mark { width:65px;height:65px;margin:0 auto 19px;display:flex;align-items:center;justify-content:center;background:#edf4ed;border:1px solid #e2ebde;border-radius:21px;color:#72936b; }
.empty-mark .icon { width:30px;height:30px; }
.empty-state h3 { font-size:19px;font-weight:600;letter-spacing:-.5px;margin:0 0 8px; }
.empty-state p { color:#8d9a8f;font-size:12px;line-height:1.8;max-width:360px;margin:0 auto 19px; }
.empty-state .empty-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:12px; }
.empty-row td { text-align:center;color:#859483;padding:40px; }
.history-summary { display:flex;align-items:center;gap:11px;padding:18px 22px;background:#eef4ed;border:1px solid #e0ebdc;border-radius:13px;margin-bottom:25px; }
.history-summary>.icon { color:#6a8b5b;width:21px;height:21px; }
.history-summary p { margin:0;font-size:12px;color:#6d8064; }.history-summary p strong { color:#355239; }
.history-summary .badge { margin-left:auto;background:#fff9;border:1px solid #d6e2cf;color:#637854; }
.history-table { min-width:910px; }
.history-table th,.history-table td { padding:16px 15px; }
.history-table th:first-child,.history-table td:first-child { position:sticky;left:0;z-index:2;min-width:205px;border-right:1px solid #edf1ea;background:#fff;padding-left:23px; }
.history-table th:first-child { background:#f8faf8;z-index:3; }
.history-table th:nth-child(3),.history-table td:nth-child(3) { background:#f6faf3; }
.history-table th:nth-child(n+3),.history-table td:nth-child(n+3) { text-align:center;min-width:112px; }
.history-table th .current-tag { display:block;font-size:8px;letter-spacing:.3px;font-weight:400;color:#799765;margin-top:3px; }
.history-date { display:inline-flex;align-items:center;gap:4px;color:#518268;background:#edf6ee;border-radius:6px;padding:4px 7px;font-size:10px;white-space:nowrap;border:0;min-height:27px; }
.history-date:hover { box-shadow:0 0 0 1px #bfd5bf; }
.history-date .icon { width:12px;height:12px; }
.history-pending { font-size:10px;color:#b48e56;display:inline-flex;align-items:center;gap:5px;white-space:nowrap; }
.history-pending .icon { width:12px;height:12px; }
.not-applicable { color:#c3cbc3;font-size:15px; }
.history-table tfoot td { border-top:1px solid var(--line);font-size:11px;font-weight:650;color:#668264;height:54px;background:#fafcf8; }
.history-table tfoot td:first-child { background:#fafcf8; }
.legend { display:flex;gap:17px;flex-wrap:wrap;font-size:10px;color:#8e9e8c;margin-top:18px; }
.legend>span { display:flex;gap:6px;align-items:center; }.legend .icon { width:13px;height:13px; }.legend .paid { color:#518b66; }.legend .pending { color:#b48e56; }
.page-footer { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 38px 25px;max-width:1400px;margin:0 auto;color:#9aa69e;font-size:9px; }
.page-footer span:first-child { display:flex;align-items:center;gap:6px; }.page-footer .icon { width:12px;height:12px; }
.loading-state { text-align:center;padding:15vh 20px; }.loading-state .brand-mark { margin-bottom:20px; }.loading-state h1 { font-size:24px; }.loading-state p { color:var(--muted); }
dialog { border:1px solid #e1e9e1;border-radius:23px;padding:0;width:510px;max-width:calc(100% - 32px);max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #05201433;color:var(--ink);background:#fff; }
dialog.wide { width:560px; }
dialog::backdrop { background:#0c231854;backdrop-filter:blur(4px); }
.modal-header { display:flex;justify-content:space-between;gap:16px;padding:25px 25px 0;align-items:flex-start; }
.modal-header-icon { display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;background:#eef5eb;color:#598365;border-radius:12px;margin-bottom:15px; }
.modal-header h2 { font-size:22px;letter-spacing:-.6px;margin:0;font-weight:650; }
.modal-header p { font-size:12px;color:#849382;margin:7px 0 0; }
.modal-header .icon-button { border:0;background:#f4f7f2;width:33px;height:33px;border-radius:50%; }
.modal-body { padding:24px 25px 27px; }
.form-field { margin-bottom:20px; }.form-field label,.form-label { display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:#486243; }
.form-field label .icon,.form-label .icon { width:14px;height:14px;margin-right:5px;color:#91a187; }
.form-field input,.form-field select { width:100%;height:46px;border:1px solid #dce6d7;border-radius:10px;padding:10px 12px;background:#fff;color:#304e2c;font-size:16px; }
.form-field input[readonly] { background:#f5f8f2;color:#7d8f76; }
.field-hint { margin:7px 0 0;font-size:10px;line-height:1.6;color:#8e9c85; }
.fee-choices { display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }
.fee-option { position:relative; }
.fee-option input { position:absolute;opacity:0;width:1px;height:1px; }
.fee-option span { display:flex;align-items:center;justify-content:center;border:1px solid #e1e7da;border-radius:10px;padding:11px 6px;font-size:14px;font-weight:600;color:#839574; }
.fee-option input:checked+span { background:#edf5e8;border-color:#83a872;color:#3d6830;box-shadow:0 0 0 1px #83a872; }
.fee-option input:focus-visible+span { outline:3px solid #83af96;outline-offset:3px; }
.field-pair { display:grid;grid-template-columns:1fr 1fr;gap:15px; }
.form-message { background:#fff0e9;border:1px solid #f0d6c9;border-radius:9px;padding:11px 13px;font-size:12px;color:#9e624a;margin-bottom:16px; }
.form-message:empty { display:none; }
.form-actions { display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding-top:19px;margin-top:21px; }
.form-actions .button { min-height:43px; }
.rule-note { display:flex;align-items:flex-start;gap:8px;background:#f6f8f2;border:1px solid #ebefe2;border-radius:10px;padding:12px;font-size:11px;color:#879476;line-height:1.7; }
.rule-note .icon { width:15px;height:15px;flex-shrink:0;margin-top:1px; }
.rule-note strong { color:#5d754b; }
.confirm-copy { font-size:13px;line-height:1.8;color:#6d8061; }.confirm-copy p { margin:0 0 13px; }.confirm-copy strong { color:#354f2d; }
.settings-section { border:1px solid #e5ebdc;border-radius:12px;padding:16px;margin-bottom:15px; }
.settings-section h3 { font-size:13px;margin:0 0 8px;display:flex;align-items:center;gap:7px;color:#4d693b; }.settings-section h3 .icon { width:17px;height:17px; }
.settings-section p { font-size:11px;color:#879777;line-height:1.75;margin:7px 0 12px; }
.settings-actions { display:flex;gap:8px;flex-wrap:wrap; }
.settings-meta { font-size:10px;color:#9aab88;margin:10px 0 0; }
.setup-steps { padding-left:19px;font-size:12px;color:#69835b;line-height:1.8;margin:0; }.setup-steps li { padding-left:4px;margin-bottom:12px; }.setup-steps strong { color:#426631; }
.help-code { background:#f2f7ee;border:1px solid #e0ebd6;border-radius:9px;padding:12px;color:#587543;font-size:11px;overflow:auto; }
.toast-region { position:fixed;right:28px;bottom:25px;z-index:100;pointer-events:none;max-width:420px; }
.toast { display:flex;align-items:center;gap:10px;min-width:260px;padding:15px 19px;border:1px solid #376842;background:#214a30;color:#f1f9e9;border-radius:13px;box-shadow:0 5px 25px #25432326;font-size:12px;pointer-events:auto; }
.toast.error { background:#934a37;border-color:#ab6b53;color:#fff4ee; }.toast .icon { width:18px;height:18px;flex-shrink:0; }
.noscript { position:fixed;inset:0;z-index:100;background:#fff;padding:40px;font-size:20px; }
@media(min-width:1550px) { main { padding-top:46px; }.overview-grid { gap:21px; }.metric { padding:25px; }.page-heading { margin-bottom:30px; } }
@media(max-width:1190px) {
  .sidebar { width:220px;padding-left:15px;padding-right:15px; }.app-shell { margin-left:220px; }.brand { font-size:24px;gap:9px; }.brand-caption { font-size:7px;letter-spacing:1.4px; }
  .topbar, .banner { padding-left:26px;padding-right:26px; }main { padding:29px 26px 20px; }.page-footer { padding-left:26px;padding-right:26px; }
  .metric { padding:18px; }.metric-value { font-size:26px; }.metric-hero .metric-value { font-size:30px; }.collection-ring { width:76px;height:76px; }
  .panel-header { align-items:flex-start;flex-wrap:wrap;gap:15px; }.table-controls { margin-left:auto; }th,td { padding-left:18px;padding-right:18px; }.today-label { display:none; }
  .desktop-extra { display:none; }.overview-grid { grid-template-columns:1.45fr 1fr 1fr;gap:11px; }.metric-foot { font-size:9px; }
}
@media(max-width:950px) {
  .sidebar { width:192px;padding:27px 12px 18px; }.app-shell { margin-left:192px; }.workspace-card { padding:10px 8px; }.workspace-card strong { font-size:10px; }.workspace-card div>span { font-size:10px; }.workspace-icon { width:27px; }.brand-caption { display:none; }.brand { font-size:23px; }.brand-mark { width:36px;height:36px;border-radius:10px; }
  .desktop-nav a { font-size:12px;padding:12px;gap:9px; }.backup-promo { padding:15px 12px; }.backup-promo h3 { font-size:11px; }.sidebar-tool { font-size:11px; }.sidebar-tool span:last-child { display:none; }.sidebar-footer { font-size:8px; }
  .topbar { padding:0 22px;min-height:72px; }.topbar-actions { gap:10px; }.breadcrumb { gap:8px;font-size:11px; }
  main { padding:25px 22px 15px; }.page-heading { align-items:flex-start; }.heading-actions { flex-direction:column;align-items:flex-end; }h1 { font-size:29px; }.page-subtitle { max-width:260px; }
  .overview-grid { grid-template-columns:1fr 1fr; }.metric-hero { grid-column:1/-1; }.metric-hero .collection-ring { width:86px;height:86px; }.metric-hero .metric-value { font-size:34px; }.metric-hero .metric-top { margin:0; }
  .metric { padding:18px 21px; }.panel-header { padding:19px; }.table-controls { width:100%;justify-content:space-between; }.search-field { flex:1; }.search-field input { width:100%; }
  .page-footer>span:last-child { display:none; }.students-metrics { gap:10px; }.students-metrics .metric { padding:15px; }.students-metrics .metric-label { font-size:10px; }.students-metrics .metric-icon { width:25px;height:25px; }.student-name { max-width:185px; }
}
@media(max-width:720px) {
  body { font-size:14px; }.sidebar { display:none; }.app-shell { margin-left:0; }.topbar { position:relative;padding:calc(13px + env(safe-area-inset-top)) 20px 13px;min-height:73px;background:#fff; }.breadcrumb { display:none; }
  .mobile-brand { display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.7px; }.mobile-brand .brand-mark { width:34px;height:34px;border-radius:10px; }.mobile-brand .brand-mark .icon { width:20px;height:20px; }.mobile-brand strong { font-weight:700; }
  .topbar-actions { gap:10px; }.storage-chip { font-size:9px;padding:5px 8px;border-color:#e6ede4; }.topbar .icon-button { width:34px;height:34px;border-color:transparent; }
  main { padding:27px 18px 18px;min-height:calc(100dvh - 170px); }.page-heading { gap:14px;flex-wrap:wrap;margin-bottom:22px; }.eyebrow { font-size:8px;letter-spacing:1.8px;margin-bottom:7px; }h1 { font-size:30px;margin-bottom:8px; }.page-subtitle { font-size:11px;line-height:1.7;max-width:none; }
  .heading-actions { flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:8px; }.button { font-size:12px;min-height:42px;padding:10px 14px; }.heading-actions .button { min-height:41px; }.month-picker { padding:3px;gap:0; }.month-display { min-width:145px;font-size:11px;padding:4px; }.month-display .icon { width:14px;height:14px; }.month-picker .icon-button { width:29px;height:32px; }
  .overview-grid { gap:11px;margin-bottom:23px; }.metric { border-radius:15px;padding:18px; }.metric-hero { padding:22px 23px;min-height:160px; }.metric-hero .metric-value { font-size:37px;margin:12px 0 15px; }.metric-hero .metric-foot { font-size:10px; }.metric-hero .collection-ring { width:99px;height:99px; }.ring-label strong { font-size:22px; }.ring-label span { font-size:8px; }
  .metric-top { margin-bottom:10px; }.metric-label { font-size:11px; }.metric-icon { width:28px;height:28px;border-radius:8px; }.metric-icon .icon { width:15px;height:15px; }.metric-value { font-size:27px; }.metric-foot { font-size:9px;margin-top:8px; }.metric-foot .icon { width:11px;height:11px; }
  .panel { border-radius:15px; }.panel-header { padding:20px 16px 15px;gap:17px; }.panel h2 { font-size:14px; }.panel-heading .icon { width:16px;height:16px; }.panel-desc { font-size:10px;margin-top:5px; }
  .table-controls { flex-wrap:nowrap;gap:8px; }.search-field { height:35px;padding:0 8px;min-width:90px; }.search-field input { font-size:16px;width:100%;transform-origin:left center; }.search-field input::placeholder { font-size:11px; }.segmented { gap:0;padding:3px; }.segmented button { padding:5px 8px;font-size:9px; }
  th { font-size:8px;letter-spacing:.8px;padding:12px 12px; }td { padding:15px 12px;height:78px; }.student-cell { gap:8px; }.avatar { width:29px;height:32px;border-radius:9px;font-size:10px; }.student-name { font-size:11px;line-height:1.4;max-width:157px; }.student-sub { font-size:8px; }.amount { font-size:11px; }.amount small { display:none; }
  .pay-cell { min-width:113px; }.pay-control { gap:7px; }.pay-toggle { width:36px;height:23px; }.pay-toggle .toggle-knob { width:17px;height:17px; }.pay-toggle[aria-checked="true"] .toggle-knob { transform:translateX(13px); }.pay-status { font-size:10px; }.date-button { font-size:9px;min-height:23px; }.date-button .icon { width:10px;height:10px; }
  .panel-footer { padding:13px 15px;font-size:9px;gap:8px; }.panel-footer .desktop-note { display:none; }.panel-footer .icon { width:11px;height:11px; }
  .subtle-note { font-size:10px;gap:7px;margin-top:15px; }.subtle-note .icon { width:14px;height:14px; }
  .page-footer { padding:14px 20px calc(107px + env(safe-area-inset-bottom));font-size:8px; }.page-footer .icon { width:11px;height:11px; }
  .mobile-nav { display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:#ffffffee;backdrop-filter:blur(16px);border-top:1px solid #e2ebe0;z-index:25;box-shadow:0 -4px 24px #29412006; }
  .mobile-nav a { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:7px;border-radius:12px;color:#99a58e;font-size:10px;font-weight:550; }.mobile-nav a>.icon,.mobile-nav a .icon { width:21px;height:21px; }.mobile-nav a.active { background:#eef5e9;color:#437443; }
  .students-metrics { gap:8px;margin-bottom:22px; }.students-metrics .metric { padding:13px 12px; }.students-metrics .metric-top { margin-bottom:8px;gap:3px; }.students-metrics .metric-label { font-size:9px; }.students-metrics .metric-icon { width:23px;height:23px; }.students-metrics .metric-icon .icon { width:13px;height:13px; }.students-metrics .metric-value { font-size:25px; }
  .students-table th,.students-table td { padding-left:10px;padding-right:10px; }.students-table .student-name { max-width:125px; }.students-table .student-cell { gap:6px; }.students-table .avatar { display:none; }.students-table .badge { font-size:9px;padding:3px 6px; }.students-table .badge .icon { width:10px;height:10px; }.row-actions { gap:0; }.row-actions .quick-status { display:none; }.row-actions .icon-button { width:31px;height:35px; }
  .history-summary { padding:15px;gap:9px;margin-bottom:22px; }.history-summary p { font-size:10px; }.history-summary .badge { display:none; }.history-summary>.icon { width:18px;height:18px; }
  .history-table { min-width:800px; }.history-table th,.history-table td { padding:16px 12px; }.history-table th:first-child,.history-table td:first-child { min-width:140px;max-width:140px;width:140px;padding:14px 11px; }.history-table .avatar { display:none; }.history-table .student-name { max-width:115px; }.history-table th:nth-child(n+3),.history-table td:nth-child(n+3) { min-width:106px; }.history-table tfoot td { font-size:10px; }
  .history .table-controls { width:auto;flex:1; }.history .panel-header { flex-wrap:wrap; }.history .search-field { max-width:none; }.legend { gap:12px;font-size:9px; }.legend .icon { width:11px;height:11px; }
  .banner { padding:9px 18px;font-size:10px;gap:8px; }.banner>span { gap:6px;align-items:flex-start; }.banner .icon { width:13px;height:13px;flex-shrink:0; }.banner a,.banner button { white-space:nowrap;font-size:10px; }
  .toast-region { left:17px;right:17px;bottom:calc(90px + env(safe-area-inset-bottom));max-width:none; }.toast { min-width:0;padding:13px 16px;font-size:11px; }
  dialog { border-radius:20px;max-height:calc(100dvh - 42px);max-width:calc(100% - 26px); }.modal-header { padding:21px 21px 0; }.modal-header h2 { font-size:21px; }.modal-header p { font-size:11px; }.modal-body { padding:22px 21px 23px; }.form-field { margin-bottom:18px; }.settings-section { padding:14px; }.settings-actions .button { padding:9px 12px;font-size:11px; }.field-pair { gap:11px; }
  .empty-state { padding:39px 20px 42px; }.empty-state h3 { font-size:18px; }.empty-state p { font-size:11px; }.empty-mark { width:60px;height:60px;border-radius:19px; }
}
@media(max-width:370px) {
  main { padding-left:12px;padding-right:12px; }.topbar { padding-left:15px;padding-right:15px; }.storage-chip { font-size:8px;padding:5px; }.month-display { min-width:134px; }.heading-actions .button { padding:9px 10px;font-size:11px; }.metric { padding:15px; }.metric-hero { padding:20px; }.metric-hero .metric-value { font-size:33px; }.metric-hero .collection-ring { width:86px;height:86px; }.student-name { max-width:111px; }.pay-cell { min-width:110px; }th,td { padding-left:10px;padding-right:10px; }.payments-table .avatar { display:none; }.metric-value { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
@media print { .sidebar,.topbar,.mobile-nav,.heading-actions,.table-controls,.banners,.page-footer,.toast-region { display:none!important; }.app-shell { margin:0; }main { padding:0; }.table-scroll { overflow:visible; }.history-table { min-width:0; }.panel { box-shadow:none; }button { display:none; }.history-date { display:inline-flex; }.pay-toggle { display:none; } }
/* Generous invisible hit area keeps the visual switch compact without tiny tap targets. */
.pay-toggle::after { content:"";position:absolute;inset:-10px -4px; }
.brand-caption { white-space:nowrap;font-size:7px;letter-spacing:1.2px; }
@media(max-width:720px) {
  .heading-actions { flex-wrap:wrap; }
  .student-name,.amount { font-size:12px; }
  .pay-status { font-size:11px; }
  .date-button { font-size:10px; }
}
/* On a phone, keep the payment switches above the fold instead of a tall dashboard. */
@media(max-width:720px) {
  .overview-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:22px; }
  .overview-grid .metric { padding:15px 12px;min-height:115px; }
  .overview-grid .metric-hero { grid-column:auto;display:block; }
  .overview-grid .metric-hero::after,.overview-grid .collection-ring,.overview-grid .metric-icon { display:none; }
  .overview-grid .metric-label { font-size:10px;line-height:1.5;display:block; }
  .overview-grid .metric-top { margin:0;min-height:30px;align-items:flex-start; }
  .overview-grid .metric-hero .metric-label { min-height:30px; }
  .overview-grid .metric-value,.overview-grid .metric-hero .metric-value { font-size:23px;letter-spacing:-.8px;margin:5px 0 0;line-height:1.3; }
  .overview-grid .metric-foot,.overview-grid .metric-hero .metric-foot { font-size:9px;margin:9px 0 0;line-height:1.5;display:block; }
  .overview-grid .metric-foot .icon { display:none; }
}
@media(max-width:370px) {
  .overview-grid { gap:7px; }
  .overview-grid .metric { padding:13px 9px; }
  .overview-grid .metric-value,.overview-grid .metric-hero .metric-value { font-size:20px; }
  .overview-grid .metric-label { font-size:9px; }
}
@media(max-width:720px) {
  .history .table-controls { width:100%;flex:none; }
  .history .search-field { width:100%; }
}