:root {
  --ink: #172033;
  --muted: #687386;
  --line: #e5e9ef;
  --page: #f4f6f8;
  --card: #ffffff;
  --navy: #14213d;
  --brand: #1a6b62;
  --brand-dark: #13534d;
  --green-bg: #e8f6f1;
  --green: #18705e;
  --amber-bg: #fff4da;
  --amber: #9a6200;
  --red-bg: #ffebeb;
  --red: #b33a3a;
  --blue-bg: #eaf2ff;
  --blue: #3166a7;
  --purple-bg: #f2ebff;
  --purple: #7152a6;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--navy); color: #dbe3f0; padding: 28px 18px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; color: white; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #43a496; font-size: 20px; font-weight: 800; box-shadow: 0 8px 22px #07102066; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand small { margin-top: 3px; color: #94a3bb; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 6px; overflow-y: auto; scrollbar-width: thin; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; color: #aebbd0; font-size: 14px; font-weight: 600; transition: .15s ease; }
.sidebar nav a span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #3b4860; border-radius: 8px; font-size: 12px; }
.sidebar nav a:hover { background: #ffffff0a; color: white; }
.sidebar nav a.active { background: #ffffff14; color: white; }
.sidebar nav a.active span { background: #43a496; border-color: #43a496; }
.sidebar .nav-label { margin: 14px 12px 1px; color: #66758c; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar nav a.nav-utility { color: #91a0b6; font-size: 12px; }
.sidebar-note { margin-top: auto; display: flex; align-items: center; gap: 10px; border-top: 1px solid #2b3850; padding: 20px 10px 4px; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { color: #f2f5fa; font-size: 13px; }
.sidebar-note small { color: #8795aa; font-size: 11px; margin-top: 3px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #50c997; box-shadow: 0 0 0 5px #50c9971f; }
.main-content { min-width: 0; padding: 28px 34px 20px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.topbar h1 { margin: 3px 0 0; font-size: 28px; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: #798599; font-size: 11px; line-height: 1.4; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.journey-tabs { display: flex; gap: 7px; margin: -10px 0 22px; padding-bottom: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; white-space: nowrap; }
.journey-tabs a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--card); font-size: 12px; font-weight: 750; }
.journey-tabs a:hover { border-color: #bfd3cf; color: var(--brand-dark); }
.journey-tabs a.active { border-color: #a9d3cc; color: var(--brand-dark); background: var(--green-bg); }
.billing-month-context { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -8px 0 22px; padding: 13px 15px; border: 1px solid #bcded7; border-radius: 13px; background: linear-gradient(120deg, #e9f8f4, #f9fcfb); }
.billing-month-context-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.billing-month-context-icon { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 10px; color: white; background: var(--brand); font-size: 11px; font-weight: 900; }
.billing-month-context-copy small, .billing-month-context-copy strong, .billing-month-context-copy p { display: block; margin: 0; }
.billing-month-context-copy small { color: var(--muted); font-size: 9px; font-weight: 800; }
.billing-month-context-copy strong { margin-top: 2px; font-size: 17px; }
.billing-month-context-copy p { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.billing-month-context-form { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.billing-month-context-form input { min-height: 40px; border: 1px solid #b9cbc7; border-radius: 9px; padding: 7px 10px; color: var(--ink); background: white; }
.billing-month-context-form input:focus { border-color: #55a397; box-shadow: 0 0 0 3px #1a6b6214; outline: none; }
.operator { display: flex; gap: 10px; align-items: center; }
.operator > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #dce9e7; color: var(--brand); font-weight: 800; }
.operator strong, .operator small { display: block; }
.operator strong { font-size: 13px; }.operator small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.logout-form { margin-left: 8px; }
.logout-form .button { padding: 8px 11px; }
.read-only .main-content form[method="post"]:not(.logout-form) { display: none; }
.read-only-notice { margin: -8px 0 22px; border-color: #cbd8ea; background: #eef4fc; color: #365b88; }
.login-page { min-height: 100vh; background: linear-gradient(145deg, #eff7f5, #f7f8fb 55%, #e7f0ef); }
.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 24px 70px #13233d1a; }
.login-card h1 { margin: 5px 0 10px; font-size: 28px; }
.login-brand { padding: 0 0 30px; color: var(--ink); }
.login-brand .brand-mark { color: white; }
.login-card .stack-form { display: grid; gap: 15px; margin-top: 24px; }
.login-card .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.login-card .stack-form input:not([type="hidden"]) { width: 100%; }
.flash { margin: -8px 0 22px; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 650; }
.flash.success { background: var(--green-bg); color: var(--green); border: 1px solid #b9e2d7; }
.flash.error { background: var(--red-bg); color: var(--red); border: 1px solid #f2c2c2; }
.hero-panel { background: linear-gradient(125deg, #173c45, #1a6b62); color: white; padding: 28px 30px; border-radius: 18px; display: flex; justify-content: space-between; align-items: flex-end; box-shadow: 0 14px 40px #153b3a24; }
.hero-panel .eyebrow { color: #b8ddd7; }
.hero-panel p { margin: 8px 0 0; color: #cfe4e1; font-size: 13px; }
.hero-value { margin-top: 7px; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.hero-actions { display: flex; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: 9px; padding: 0 16px; cursor: pointer; font-weight: 750; font-size: 13px; transition: .15s ease; }
.button.primary { background: var(--brand); color: white; box-shadow: 0 6px 16px #14584e29; }.button.primary:hover { background: var(--brand-dark); }
.hero-panel .button.primary { background: white; color: var(--brand-dark); }
.button.secondary { background: white; color: var(--ink); border-color: var(--line); }.hero-panel .button.secondary { background: transparent; color: white; border-color: #ffffff55; }
.button.small { min-height: 32px; padding: 0 12px; font-size: 12px; }
.button.full { width: 100%; }
.button.danger-outline { background: white; color: var(--red); border-color: #edbaba; }
.button[disabled] { cursor: not-allowed; opacity: .55; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.task-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 3px 10px #1e2b3b05; }
.task-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-card h2, .task-card h3, .task-card p { margin: 0; }
.task-card h2 { font-size: 19px; }
.task-card h3 { font-size: 16px; }
.task-card p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-card > .button, .task-card > form, .task-card > .task-card-actions { margin-top: auto; }
.task-card form { display: grid; gap: 9px; }
.task-card .field { margin: 0; }
.task-icon, .task-step { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 10px; color: var(--brand); background: var(--green-bg); font-size: 12px; font-weight: 900; }
.task-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.task-card-actions .button { flex: 1 1 auto; }
.month-workbench-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 25px 27px; border: 1px solid #bcded7; border-radius: 17px; background: linear-gradient(120deg, #e9f8f4, #f9fcfb); }
.month-workbench-hero h2, .month-workbench-hero p { margin: 0; }
.month-workbench-hero h2 { margin-top: 5px; font-size: 25px; letter-spacing: -.02em; }
.month-workbench-hero p:last-child { max-width: 760px; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.workflow-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.workflow-rail li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: white; }
.workflow-rail li > span { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; background: #eef1f5; color: #566274; font-size: 10px; font-weight: 900; }
.workflow-rail li strong, .workflow-rail li small { display: block; }
.workflow-rail li strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-rail li small { overflow: hidden; margin-top: 3px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-rail li.current { border-color: #9fcfc6; background: var(--green-bg); }
.workflow-rail li.current > span { color: white; background: var(--brand); }
.workflow-rail li.complete > span { color: var(--green); background: #cfeee5; }
.monthly-student-list { display: grid; gap: 11px; }
.monthly-student-row { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfcfd; }
.monthly-student-row.blocked { border-color: #edc5c5; background: #fffafa; }
.monthly-student-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 15px; }
.monthly-student-head > div { display: flex; align-items: center; gap: 10px; }
.monthly-student-head > div:last-child { justify-content: flex-end; }
.monthly-student-head h3, .monthly-student-head p { margin: 0; }
.monthly-student-head h3 { font-size: 13px; }
.monthly-student-head p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.monthly-student-head > div:last-child > strong { min-width: 90px; text-align: right; font-size: 14px; }
.monthly-student-row .issue-list { margin: 0 15px 12px 55px; color: var(--red); font-size: 11px; }
.monthly-charge-items { border-top: 1px solid var(--line); background: white; }
.monthly-charge-items > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 15px 10px 55px; border-bottom: 1px solid #eef1f4; }
.monthly-charge-items > div:last-child { border-bottom: 0; }
.monthly-charge-items strong, .monthly-charge-items small { display: block; }
.monthly-charge-items strong { font-size: 11px; }
.monthly-charge-items small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.monthly-charge-items b { white-space: nowrap; font-size: 12px; }
.monthly-charge-items b.credit { color: var(--red); }
.monthly-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.metric-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-grid.compact.import-results { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric { min-width: 0; display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 16px; box-shadow: 0 3px 10px #1e2b3b05; }
.metric-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 900; }
.metric-icon.green { background: var(--green-bg); color: var(--green); }.metric-icon.amber { background: var(--amber-bg); color: var(--amber); }.metric-icon.red { background: var(--red-bg); color: var(--red); }.metric-icon.blue { background: var(--blue-bg); color: var(--blue); }.metric-icon.purple { background: var(--purple-bg); color: var(--purple); }.metric-icon.slate { background: #eef1f5; color: #566274; }
.metric small, .metric strong, .metric p { display: block; margin: 0; }.metric small { color: var(--muted); font-size: 11px; }.metric strong { margin-top: 3px; font-size: 24px; line-height: 1; }.metric p { margin-top: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.section-card { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 22px; margin: 18px 0; box-shadow: 0 4px 16px #17203308; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }.section-heading h2 { margin: 4px 0 0; font-size: 18px; }.section-heading > a, .table-link { color: var(--brand); font-size: 13px; font-weight: 750; }.helper { color: var(--muted); font-size: 12px; }
.section-heading > a.button.primary { color: white; }
.section-actions { display: flex; align-items: center; gap: 8px; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: #7a8597; text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } td { padding: 14px 12px; border-bottom: 1px solid #edf0f3; vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #f9fbfb; } td small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }.amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.status { display: inline-flex; align-items: center; min-height: 25px; border-radius: 99px; padding: 0 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }.status.success { background: var(--green-bg); color: var(--green); }.status.warning { background: var(--amber-bg); color: var(--amber); }.status.danger { background: var(--red-bg); color: var(--red); }.status.info { background: var(--blue-bg); color: var(--blue); }.status.attention { background: var(--purple-bg); color: var(--purple); }.status.neutral { background: #eef1f5; color: #566274; }
.table-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.text-danger-button { padding: 0; border: 0; color: var(--red); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }.empty strong { display: block; color: var(--ink); font-size: 16px; }.empty p { margin: 8px 0 18px; font-size: 13px; }.empty.compact { padding: 22px 10px; }
.directory-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 6px 14px; align-items: center; margin: 0 0 15px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.directory-search label { grid-column: 1 / -1; color: #4e5b6d; font-size: 10px; font-weight: 800; }
.directory-search input { width: 100%; min-height: 40px; border: 1px solid #ccd4dd; border-radius: 9px; padding: 8px 11px; color: var(--ink); background: white; outline: none; }
.directory-search input:focus { border-color: #55a397; box-shadow: 0 0 0 3px #1a6b6214; }
.directory-search small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.payer-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px; }.payer-head { display: flex; gap: 12px; align-items: center; }.payer-head > span, .payer-line > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #dce9e7; color: var(--brand); font-weight: 900; }.payer-head h2, .payer-head p { margin: 0; }.payer-head h2 { font-size: 16px; }.payer-head p { color: var(--muted); margin-top: 4px; font-size: 12px; }.account-list { margin-top: 16px; border-top: 1px solid var(--line); }.account-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 14px 2px 0; font-size: 12px; }.account-list strong { text-align: right; }.account-list small { grid-column: 1 / -1; color: var(--muted); }
.payer-workflow-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.payer-privacy-note { flex: 0 0 min(370px, 42%); padding-left: 20px; border-left: 1px solid #c9ddd9; }
.payer-privacy-note strong, .payer-privacy-note small { display: block; }
.payer-privacy-note strong { color: var(--brand-dark); font-size: 12px; }
.payer-privacy-note small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payer-layout { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); margin-top: 18px; align-items: start; }
.payer-layout > aside { position: sticky; top: 18px; }
.payer-directory-heading { margin: 0 0 12px; padding: 0 2px; }
.payer-card-grid { display: grid; gap: 12px; }
.payer-card { box-shadow: 0 4px 16px #17203308; }
.payer-head > div { min-width: 0; }
.payer-detail-link { flex: 0 0 auto; margin-left: auto; }
.payer-summary-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr); gap: 18px; }
.payer-summary-columns .payer-section { min-width: 0; }
.payer-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.payer-section-label { margin: 0 0 10px; color: #798599; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.payer-student-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.payer-student-list > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 9px; background: #f5f8f8; }
.payer-student-list > div > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; color: var(--brand); background: var(--green-bg); font-size: 10px; font-weight: 900; }
.payer-student-list p, .payer-student-list strong, .payer-student-list small { display: block; min-width: 0; margin: 0; }
.payer-student-list strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.payer-student-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.payer-link-form { display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(90px, .65fr) auto; gap: 7px; align-items: end; margin-top: 11px; }
.payer-link-form .field + .field { margin-top: 0; }
.payer-link-form .button { min-height: 41px; }
.payer-empty-line, .payer-all-linked { margin: 0; color: var(--muted); font-size: 10px; }
.payer-all-linked { margin-top: 10px; color: var(--green); }
.payer-section.account-list { margin-top: 17px; }
.payer-section.account-list > .payer-section-label { padding: 0; }
.payer-section.account-list > div { padding-top: 10px; }
.payer-section.account-list > .payer-account-row { grid-template-columns: minmax(110px, 1fr) auto auto; align-items: center; }
.payer-account-row > strong { text-align: left; }
.payer-account-row > small { display: flex; grid-column: 1 / 3; align-items: center; gap: 7px; }
.payer-account-row > small .status { min-height: 21px; padding: 0 7px; font-size: 9px; }
.payer-account-row > .table-link { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.payer-create-card { margin-top: 0; }
.payer-create-card form { margin-top: 16px; }
.payer-student-picker { margin: 15px 0; padding: 0; border: 0; }
.payer-student-picker legend { margin-bottom: 7px; color: #4e5b6d; font-size: 11px; font-weight: 750; }
.payer-student-picker > div { max-height: 240px; overflow-y: auto; border: 1px solid #ccd4dd; border-radius: 10px; background: white; }
.payer-student-picker label { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid #edf0f3; cursor: pointer; }
.payer-student-picker label:last-child { border-bottom: 0; }
.payer-student-picker label:hover { background: #f5f9f8; }
.payer-student-picker input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); }
.payer-student-picker span, .payer-student-picker strong, .payer-student-picker small { display: block; min-width: 0; }
.payer-student-picker strong { color: var(--ink); font-size: 11px; }
.payer-student-picker small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.payer-account-notice { margin-bottom: 0; }
.payer-profile { margin-bottom: 18px; }
.payer-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.payer-detail-students { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payer-detail-accounts { display: grid; gap: 8px; }
.payer-detail-accounts > div { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.payer-detail-accounts strong, .payer-detail-accounts small { display: block; }
.payer-detail-accounts strong { font-size: 12px; }
.payer-detail-accounts small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.payer-detail-accounts b { font-size: 12px; white-space: nowrap; }
.payer-relation-footnote { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.payer-primary-choice { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 11px 12px; border: 1px solid #cfe2df; border-radius: 9px; background: #f5faf9; color: var(--ink); cursor: pointer; }
.action-card .payer-primary-choice { display: flex; color: var(--ink); }
.payer-primary-choice > input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); }
.payer-primary-choice span, .payer-primary-choice strong, .payer-primary-choice small { display: block; min-width: 0; }
.payer-primary-choice strong { font-size: 11px; }
.payer-primary-choice small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.5; font-weight: 500; }
.payer-relationship-list { display: grid; gap: 9px; }
.payer-relationship-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.payer-relationship-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.payer-relationship-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; color: var(--brand); background: var(--green-bg); font-size: 11px; font-weight: 900; }
.payer-relationship-identity { min-width: 0; }
.payer-relationship-identity strong, .payer-relationship-identity small { display: block; }
.payer-relationship-identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.payer-relationship-identity strong a { color: var(--ink); }
.payer-relationship-identity small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.payer-relationship-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.payer-relationship-statuses .status { min-height: 22px; padding: 0 7px; font-size: 9px; }
.payer-relationship-period { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0 42px; color: var(--muted); font-size: 9px; }
.payer-relationship-period strong { margin-left: 3px; color: #536174; font-size: 10px; }
.payer-link-actions { margin: 11px 0 0 42px; border-top: 1px solid var(--line); padding-top: 9px; }
.payer-link-actions > summary { width: fit-content; color: var(--brand); font-size: 10px; font-weight: 800; cursor: pointer; }
.payer-link-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.payer-link-action-form { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.payer-link-action-form .field + .field { margin-top: 8px; }
.payer-link-action-form .field label { font-size: 9px; }
.payer-link-action-form .field input:not([type=hidden]), .payer-link-action-form .field select { min-height: 35px; padding: 7px 9px; font-size: 10px; }
.payer-link-action-form p { min-height: 30px; margin: 8px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.payer-link-action-form .button { min-height: 31px; }
.payer-link-end-form { border-color: #ecdcdc; }
.payer-history-card { background: #fafbfc; }
.payer-history-list { display: grid; gap: 6px; }
.payer-history-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.payer-history-list article > div:nth-child(2) { min-width: 0; }
.payer-history-list article > div:nth-child(2) strong, .payer-history-list article > div:nth-child(2) small { display: block; }
.payer-history-list article > div:nth-child(2) strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.payer-history-list article > div:nth-child(2) strong a { color: var(--ink); }
.payer-history-list article > div:nth-child(2) small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.payer-history-meta { text-align: right; }
.payer-history-meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 18px; }.upload-card, .guide-card { margin-top: 0; }.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; border: 1.5px dashed #b7c2ce; background: #f8fafb; border-radius: 14px; padding: 24px; text-align: center; cursor: pointer; }.drop-zone:hover { border-color: var(--brand); background: #f4f9f8; }.upload-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--green-bg); color: var(--green); font-size: 26px; font-weight: 800; }.drop-zone strong { margin-top: 14px; }.drop-zone p { margin: 5px 0 14px; color: var(--muted); font-size: 12px; }.drop-zone input { width: 1px; height: 1px; opacity: 0; position: absolute; }.drop-zone em { color: var(--brand); font-size: 12px; font-style: normal; font-weight: 700; }.upload-card form > .button { margin-top: 14px; }.sample-callout { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border-radius: 10px; background: #f2f6f5; }.sample-callout strong, .sample-callout p { margin: 0; }.sample-callout p { color: var(--muted); font-size: 11px; margin-top: 3px; }.sample-callout a { color: var(--brand); font-size: 12px; font-weight: 800; white-space: nowrap; }.steps { list-style: none; padding: 0; margin: 20px 0 0; }.steps li { display: flex; gap: 12px; padding: 0 0 22px; position: relative; }.steps li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: #dce2e8; }.steps li > span { z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #e8f1ef; color: var(--brand); font-size: 11px; font-weight: 900; }.steps strong, .steps p { margin: 0; }.steps strong { font-size: 13px; }.steps p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.result-banner { background: linear-gradient(120deg, #e9f6f3, #f7fbfa); border: 1px solid #c9e8df; border-radius: 15px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; }.result-banner > div { display: flex; align-items: center; gap: 14px; }.result-banner > div > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: white; font-weight: 900; }.result-banner h2, .result-banner p { margin: 0; }.result-banner h2 { margin-top: 3px; font-size: 17px; }.result-banner p:last-child { color: var(--muted); margin-top: 4px; font-size: 11px; }
.bank-receivables-hero { gap: 24px; }
.bank-receivables-actions { display: grid !important; justify-items: end; gap: 7px !important; flex: 0 0 auto; }
.bank-receivables-actions small { max-width: 270px; color: var(--muted); text-align: right; font-size: 9px; line-height: 1.4; }
.bank-receivable-metrics .metric p { white-space: normal; line-height: 1.35; }
.collection-attention { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0; padding: 15px 17px; border: 1px solid #e1ce9d; border-radius: 12px; color: #795716; background: #fff9e9; }
.collection-attention strong, .collection-attention p { display: block; margin: 0; }
.collection-attention strong { font-size: 12px; }
.collection-attention p { margin-top: 4px; font-size: 10px; line-height: 1.55; }
.receivable-filter-card .filter-bar { margin-top: 4px; }
.receivable-filter-form .form-actions { margin-top: 14px; padding-top: 14px; }
.monthly-receivable-list { display: grid; gap: 12px; }
.monthly-receivable-row { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfd; }
.monthly-receivable-row > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.monthly-receivable-row > header > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.monthly-receivable-row > header h3, .monthly-receivable-row > header p { margin: 0; }
.monthly-receivable-row > header h3 { font-size: 13px; }
.monthly-receivable-row > header p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.receivable-amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.receivable-amount-grid > span { min-width: 0; padding: 12px 15px; border-right: 1px solid var(--line); }
.receivable-amount-grid > span:last-child { border-right: 0; }
.receivable-amount-grid small, .receivable-amount-grid strong { display: block; }
.receivable-amount-grid small { color: var(--muted); font-size: 9px; }
.receivable-amount-grid strong { margin-top: 4px; font-size: 13px; }
.receivable-payer-area { padding: 13px 16px; }
.receivable-section-label { margin: 0 0 8px; color: #798599; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.receivable-payer-list { display: grid; gap: 7px; }
.receivable-payer-list > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 10px; border-radius: 9px; background: #f0f5f4; }
.receivable-payer-list > div > span { min-width: 0; }
.receivable-payer-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.receivable-account-masks { flex: 0 1 auto; text-align: right; }
.receivable-account-masks small { white-space: nowrap; }
.pending-receipt-hint { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid #d8c999; color: #6f531a; background: #fff8e4; }
.pending-receipt-hint strong, .pending-receipt-hint p { display: block; margin: 0; }
.pending-receipt-hint strong { font-size: 11px; }
.pending-receipt-hint p { margin-top: 3px; font-size: 9px; }
.pending-receipt-hint .section-actions { flex-wrap: wrap; justify-content: flex-end; }
.receivable-pagination { justify-content: flex-end; margin: 18px 0; }
.bank-update-helper { margin: -8px 0 0 41px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payer-directory-return { display: flex; justify-content: flex-end; margin: 12px 0 -4px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }.filter-bar a { padding: 8px 13px; border-radius: 8px; background: white; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }.filter-bar a.active { background: var(--navy); color: white; border-color: var(--navy); }
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }.detail-header > a { color: var(--muted); font-size: 12px; font-weight: 700; }.detail-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(420px, 1.25fr); gap: 18px; align-items: start; }.detail-grid .section-card { margin-top: 0; }.transaction-value { font-size: 34px; font-weight: 850; margin: 8px 0 22px; }.transaction-summary dl { margin: 0; }.transaction-summary dl > div { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 12px; }.transaction-summary dt { color: var(--muted); }.transaction-summary dd { margin: 0; text-align: right; font-weight: 700; }.action-card h2 { font-size: 18px; margin: 5px 0 7px; }.action-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }.action-card label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }.action-card select, .action-card input[type=number] { width: 100%; margin-top: 7px; border: 1px solid #ccd4dd; border-radius: 9px; padding: 10px 11px; background: white; color: var(--ink); }.action-card form > .button { margin-top: 14px; }.payer-line { display: flex; align-items: center; gap: 12px; }.payer-line h2, .payer-line p { margin: 0; }.payer-line h2 { font-size: 16px; }.payer-line p { color: var(--muted); font-size: 11px; margin-top: 3px; }.invoice-options { display: grid; gap: 8px; margin: 15px 0; }.invoice-options > label { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }.invoice-options strong, .invoice-options small { display: block; }.invoice-options strong { color: var(--ink); font-size: 13px; }.invoice-options small { margin-top: 4px; line-height: 1.45; }.invoice-options input[type=number] { margin: 0; }.allocation-list { border-top: 1px solid var(--line); margin-top: 14px; }.allocation-list > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.allocation-list small { display: block; color: var(--muted); margin-top: 3px; }.allocation-list strong { font-size: 13px; }
.account-management-grid { grid-template-columns: minmax(320px, .8fr) minmax(430px, 1.2fr); }
.account-safe-identity { display: flex; align-items: center; gap: 13px; margin: 8px 0 22px; }
.account-safe-identity > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: var(--brand); background: var(--green-bg); font-weight: 900; }
.account-safe-identity h2, .account-safe-identity strong { display: block; margin: 0; }
.account-safe-identity h2 { font-size: 17px; }
.account-safe-identity strong { margin-top: 4px; color: var(--muted); font-size: 13px; }
.account-management-actions { display: grid; gap: 14px; }
.danger-confirmation { display: flex !important; align-items: flex-start; gap: 9px; margin-top: 15px; padding: 11px 12px; border: 1px solid #ecd0d0; border-radius: 9px; color: #784646 !important; background: #fff8f8; line-height: 1.45; cursor: pointer; }
.danger-confirmation input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--red); }
.match-explanation { margin-top: 16px; padding: 14px 15px; border: 1px solid #cfe2df; border-radius: 11px; background: #f3faf9; }
.match-explanation strong, .match-explanation p, .match-explanation small { display: block; margin: 0; }
.match-explanation strong { margin-top: 5px; color: var(--brand-dark); font-size: 13px; }
.match-explanation p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.match-explanation small { margin-top: 8px; color: #48596c; font-size: 10px; font-weight: 750; }
.account-manage-link { display: inline-flex; margin-top: 13px; }
.action-card > .button.full { margin-top: 14px; }
footer { text-align: center; color: #939dac; font-size: 10px; padding: 20px 0 2px; }
.sample-links { display: flex; gap: 12px; }
.notice { margin: 14px 0; padding: 13px 15px; border-radius: 10px; color: var(--muted); background: #f6f8fa; border: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.notice.warning { color: var(--amber); background: var(--amber-bg); border-color: #edd79c; }
.notice.danger { color: var(--red); background: var(--red-bg); border-color: #f2c2c2; }
.preview-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.issue-list { margin: 8px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.65; }
.file-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; color: var(--muted); font-size: 11px; }

.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; }
.workflow-banner, .period-banner { background: linear-gradient(120deg, #e9f6f3, #f7fbfa); border: 1px solid #c9e8df; border-radius: 15px; padding: 20px 22px; }
.workflow-banner > div { display: flex; align-items: center; gap: 14px; }
.workflow-icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: white; font-weight: 900; }
.workflow-banner h2, .workflow-banner p { margin: 0; }
.workflow-banner h2 { margin-top: 3px; font-size: 17px; }
.workflow-banner p:last-child { margin-top: 4px; color: var(--muted); font-size: 12px; }
.setup-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr); margin-top: 18px; }
.setup-layout > .section-card, .setup-layout aside > .section-card { margin-top: 0; }
.course-stack { display: grid; gap: 12px; }
.course-row { border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: #fbfcfd; }
.course-row-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.course-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.course-identity > span, .course-badge { display: grid; place-items: center; flex: 0 0 auto; width: 39px; height: 39px; border-radius: 11px; background: var(--green-bg); color: var(--green); font-weight: 900; }
.course-identity h3, .course-identity p { margin: 0; }
.course-identity h3 { font-size: 14px; }
.course-identity p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.course-banner-note { flex: 0 0 min(390px, 40%); padding-left: 20px; border-left: 1px solid #c9ddd9; line-height: 1.55; }
.course-edit-row { display: flex; align-items: end; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.current-price-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; gap: 10px; flex: 1; }
.course-delete-form { flex: 0 0 auto; }
.course-delete-form .button { margin-top: 0 !important; }
.archived-row { background: #f5f6f8; }
.archived-row .course-identity > span { color: #687386; background: #e8ebef; }
.archived-row > form { margin-top: 14px; }
.current-price { text-align: right; }
.current-price small, .current-price strong, .current-price p { display: block; margin: 0; }
.current-price small { color: var(--muted); font-size: 10px; }
.current-price strong { margin-top: 3px; font-size: 17px; }
.current-price p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.price-version-form { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 10px; align-items: end; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.price-lock-note { margin: 9px 0 0; color: var(--green); font-size: 10px; line-height: 1.5; }
.field { min-width: 0; }
.field + .field { margin-top: 13px; }
.form-grid .field + .field, .price-version-form .field + .field { margin-top: 0; }
.field label, .field > span { display: block; margin-bottom: 6px; color: #4e5b6d; font-size: 11px; font-weight: 750; }
.field > small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.field input:not([type=hidden]), .field select, .field textarea, .usage-cell-form input[type=number] { width: 100%; min-height: 41px; border: 1px solid #ccd4dd; border-radius: 9px; padding: 9px 11px; background: white; color: var(--ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus, .usage-cell-form input:focus { border-color: #55a397; box-shadow: 0 0 0 3px #1a6b6214; }
.field input::placeholder, .usage-cell-form input::placeholder { color: #a2aab6; }
.money-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 41px; border: 1px solid #ccd4dd; border-radius: 9px; background: white; overflow: hidden; }
.money-input:focus-within { border-color: #55a397; box-shadow: 0 0 0 3px #1a6b6214; }
.money-input > span { padding-left: 11px; color: var(--muted); font-size: 11px; font-weight: 800; }
.money-input input { min-height: 39px !important; border: 0 !important; box-shadow: none !important; }
.setup-card h2, .service-fees-card h2, .next-month-card h2 { margin: 5px 0 7px; font-size: 18px; }
.setup-card > p:not(.eyebrow), .next-month-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.setup-card form { margin-top: 16px; }
.course-start-price { margin-top: 13px; }
.service-rate-list { margin-top: 15px; border-top: 1px solid var(--line); }
.service-rate-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rate-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--brand); background: var(--green-bg); font-size: 11px; font-weight: 900; }
.service-rate-list p, .service-rate-list strong, .service-rate-list small { display: block; margin: 0; }
.service-rate-list strong { font-size: 12px; }
.service-rate-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.service-rate-list b { font-size: 13px; }
.student-banner { margin-bottom: 18px; }
.student-banner .button.primary { color: white; }
.course-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.course-chip-list span { display: inline-flex; align-items: center; min-height: 24px; border-radius: 99px; padding: 0 8px; color: var(--brand); background: var(--green-bg); font-size: 10px; font-weight: 750; }
.step-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 99px; color: var(--brand); background: var(--green-bg); font-size: 10px; font-weight: 800; }
.student-form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); }
.student-form-layout > .section-card { margin-top: 0; }
.form-card fieldset { margin: 0; padding: 0; border: 0; }
.form-card fieldset + fieldset { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-card legend { width: 100%; margin-bottom: 14px; color: var(--ink); font-size: 13px; font-weight: 800; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.lock-confirmation { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 12px; border: 1px solid #c9e8df; border-radius: 10px; background: #f3faf8; }
.lock-confirmation > span { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: var(--brand); color: white; font-size: 11px; font-weight: 900; }
.lock-confirmation p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.lock-confirmation strong { color: var(--ink); margin-right: 5px; }
.lock-confirmation.compact { padding: 9px 10px; }
.student-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.student-avatar { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 14px; background: var(--brand); color: white; font-size: 18px; font-weight: 900; }
.student-profile h2, .student-profile p { margin: 0; }
.student-profile h2 { margin-top: 3px; font-size: 18px; }
.student-profile p:last-child { margin-top: 3px; color: var(--muted); font-size: 11px; }
.student-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.student-detail-main { display: grid; gap: 18px; }
.student-management-card details { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.student-delete-action { margin-top: 14px; padding: 12px; border: 1px solid #ecd0d0; border-radius: 10px; background: #fff8f8; }
.student-delete-action p { margin: 0; color: #784646; font-size: 10px; line-height: 1.5; }
.student-delete-action .button { margin-top: 10px; }
.student-management-card details > summary { color: var(--brand); cursor: pointer; font-size: 11px; font-weight: 800; }
.student-management-card details form { margin-top: 13px; }
.student-management-card form > small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.student-management-card .notice { margin-top: 14px; }
.enrollment-list { display: grid; gap: 9px; }
.enrollment-list article { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.enrollment-list article > div:first-child { display: flex; align-items: center; gap: 10px; }
.enrollment-list h3, .enrollment-list p { margin: 0; }
.enrollment-list h3 { font-size: 13px; }
.enrollment-list p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.locked-value { text-align: right; }
.locked-value small, .locked-value strong { display: block; }
.locked-value small { color: var(--muted); font-size: 9px; }
.locked-value strong { margin: 3px 0 5px; font-size: 15px; }
.enrollment-end-form { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); text-align: left; }
.enrollment-end-form label { grid-column: 1 / -1; color: var(--muted); font-size: 9px; font-weight: 750; }
.enrollment-end-form input, .enrollment-end-form select { min-height: 32px; border: 1px solid #ccd4dd; border-radius: 8px; padding: 5px 7px; color: var(--ink); background: white; font-size: 10px; }
.enrollment-ended-at { margin-top: 7px; }
.next-month-card { margin-top: 0 !important; }
.period-banner { display: grid; grid-template-columns: auto auto auto minmax(240px, 1fr) auto; align-items: center; gap: 18px; }
.period-banner h2, .period-banner p { margin: 0; }
.period-banner h2 { margin-top: 3px; font-size: 21px; }
.period-banner p:last-child { margin-top: 3px; color: var(--muted); font-size: 10px; }
.period-arrow { color: var(--brand); font-size: 22px; font-weight: 900; }
.period-workbench-link { justify-self: end; white-space: nowrap; }
.period-finalize { display: grid; justify-items: end; gap: 5px; }
.period-finalize small { color: var(--muted); font-size: 9px; }
.usage-rates { margin-top: 18px; }
.usage-table { min-width: 880px; }
.usage-table th:not(:first-child), .usage-table td:not(:first-child) { min-width: 205px; }
.usage-count-input { display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; min-height: 35px; border: 1px solid #ccd4dd; border-radius: 9px; background: white; overflow: hidden; }
.usage-count-input:focus-within { border-color: #55a397; box-shadow: 0 0 0 3px #1a6b6214; }
.usage-count-input input { width: 100%; min-height: 33px; border: 0; padding: 6px 8px; outline: none; color: var(--ink); background: transparent; }
.usage-count-input input:disabled { color: #48566a; opacity: 1; }
.usage-count-input span { padding-right: 9px; color: var(--muted); font-size: 9px; font-weight: 800; }
.usage-count-input.saved { border-color: #c9e8df; background: #f3faf8; }
.usage-count-input.saved span { color: var(--green); }
.usage-save-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.usage-save-bar p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.usage-zero-confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--ink); font-size: 10px; font-weight: 750; line-height: 1.45; }
.usage-zero-confirm input { flex: 0 0 auto; width: auto; min-height: auto; margin-top: 1px; }
.charge-cancel-form { display: flex; align-items: center; gap: 7px; min-width: 245px; }
.charge-cancel-form select { min-height: 34px; border: 1px solid #ccd4dd; border-radius: 8px; padding: 6px 8px; color: var(--ink); background: white; font-size: 10px; }
.billing-start-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.billing-start-layout > .section-card { margin-top: 0; }
.billing-month-summary { min-width: 0; padding: 13px 14px; border: 1px solid #bcded7; border-radius: 11px; background: var(--green-bg); }
.billing-month-summary span, .billing-month-summary strong, .billing-month-summary small { display: block; }
.billing-month-summary span { color: var(--brand); font-size: 10px; font-weight: 800; }
.billing-month-summary strong { margin-top: 4px; font-size: 20px; }
.billing-month-summary small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.billing-equation { display: grid; grid-template-columns: repeat(7, auto); justify-content: center; align-items: center; gap: 12px; margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.billing-equation div { text-align: center; }
.billing-equation span, .billing-equation strong { display: block; }
.billing-equation span { color: var(--brand); font-size: 9px; font-weight: 850; }
.billing-equation strong { margin-top: 3px; font-size: 11px; }
.billing-equation b { color: #9aa4b2; }
.billing-preview-banner { margin-bottom: 18px; }
.billing-line-list { display: grid; gap: 11px; }
.billing-line { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfcfd; }
.billing-line.blocked { border-color: #edc5c5; background: #fffafa; }
.billing-line-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 15px; }
.billing-line-head > div { display: flex; align-items: center; gap: 10px; }
.billing-line-head > div:last-child { justify-content: flex-end; }
.student-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--brand); background: var(--green-bg); font-size: 11px; font-weight: 900; }
.billing-line h3, .billing-line p { margin: 0; }
.billing-line h3 { font-size: 13px; }
.billing-line p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.billing-line-head > div:last-child > strong { min-width: 90px; text-align: right; font-size: 14px; }
.billing-line .issue-list { margin: 0 15px 12px 46px; color: var(--red); }
.billing-items { border-top: 1px solid var(--line); background: white; }
.billing-items > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 15px 10px 55px; border-bottom: 1px solid #eef1f4; }
.billing-items > div:last-child { border-bottom: 0; }
.billing-items strong, .billing-items small { display: block; }
.billing-items strong { font-size: 11px; }
.billing-items small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.billing-items b { font-size: 12px; white-space: nowrap; }
.billing-items b.credit { color: var(--red); }
.billing-line-actions { justify-content: flex-end; padding: 11px 15px; border-top: 1px solid var(--line); background: #fbfcfd; }
.dashboard-course-summary { margin-top: 16px; }
.dashboard-course-summary + .helper { display: block; margin-top: 10px; }
.invoice-summary-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.invoice-summary-card h2, .invoice-summary-card p { margin: 0; }
.invoice-summary-card h2 { margin-top: 4px; font-size: 20px; }
.invoice-summary-card p:last-child { margin-top: 5px; color: var(--muted); font-size: 11px; }
.invoice-summary-values { display: flex; gap: 22px; }
.invoice-summary-values span { min-width: 82px; text-align: right; }
.invoice-summary-values small, .invoice-summary-values strong { display: block; }
.invoice-summary-values small { color: var(--muted); font-size: 9px; }
.invoice-summary-values strong { margin-top: 4px; font-size: 15px; }
.invoice-item-list { display: grid; gap: 12px; }
.invoice-item-card { border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; overflow: hidden; }
.invoice-item-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; }
.invoice-item-main h3, .invoice-item-main p { margin: 0; }
.invoice-item-main h3 { margin-top: 6px; font-size: 13px; }
.invoice-item-main p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.invoice-item-main > strong { white-space: nowrap; font-size: 14px; }
.adjustment-history { border-top: 1px solid var(--line); background: #fffaf0; }
.adjustment-history > article { padding: 10px 16px; border-bottom: 1px solid #f1e7cf; }
.adjustment-history > article:last-child { border-bottom: 0; }
.adjustment-history-main { display: flex; align-items: center; gap: 10px; font-size: 10px; }
.adjustment-history-main > span:first-child { flex: 1; }
.adjustment-history-main small { display: block; margin-top: 3px; color: var(--muted); }
.adjustment-history article > p { margin: 7px 0 0; font-size: 10px; }
.adjustment-history strong.credit { color: var(--red); }
.adjustment-form { display: grid; grid-template-columns: minmax(115px, .4fr) minmax(135px, .45fr) minmax(165px, .65fr) minmax(190px, .8fr) minmax(220px, 1fr); align-items: end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: white; }
.adjustment-form .field + .field { margin-top: 0; }
.adjustment-target { align-self: stretch; display: grid; align-content: center; padding: 8px 10px; border: 1px solid #c9ddd9; border-radius: 9px; background: var(--green-bg); }
.adjustment-target small, .adjustment-target strong { display: block; }
.adjustment-target small { color: var(--muted); font-size: 9px; }
.adjustment-target strong { margin-top: 3px; color: var(--brand); font-size: 12px; }
.adjustment-form .field > small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.adjustment-confirm { grid-column: 1 / -2; align-self: center; }
.adjustment-cancel-form { display: flex; align-items: end; justify-content: flex-end; gap: 9px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed #dbcda9; }
.adjustment-cancel-form label { color: var(--muted); font-size: 9px; font-weight: 800; }
.adjustment-cancel-form select { display: block; min-height: 34px; margin-top: 4px; border: 1px solid #ccd4dd; border-radius: 8px; padding: 6px 8px; color: var(--ink); background: white; font-size: 10px; }
.inline-confirm { display: flex !important; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 750; }
.inline-confirm input { flex: 0 0 auto; width: auto; min-height: auto; }
.detail-actions { display: flex; align-items: center; gap: 9px; }
.invoice-correction-layout { grid-template-columns: minmax(260px, .6fr) minmax(0, 1.4fr); align-items: start; }
.correction-items-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 22px 0 10px; }
.correction-items-heading h3, .correction-items-heading p { margin: 0; }
.correction-items-heading p { margin-top: 4px; }
.correction-item-list { display: grid; gap: 9px; }
.correction-item-row { display: grid; grid-template-columns: minmax(115px, .55fr) minmax(190px, 1.4fr) minmax(90px, .55fr) minmax(90px, .55fr) minmax(90px, .55fr) auto; align-items: end; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.correction-item-row .field + .field { margin-top: 0; }
.correction-remove { min-height: 38px; padding: 7px; }
.invoice-print-page { min-height: 100vh; padding: 24px; background: #e9edf1; }
.invoice-print-toolbar { position: sticky; z-index: 10; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(210mm, 100%); margin: 0 auto 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 8px 24px #17203312; }
.invoice-print-toolbar strong, .invoice-print-toolbar small { display: block; }
.invoice-print-toolbar strong { font-size: 14px; }
.invoice-print-toolbar small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.invoice-print-toolbar nav { display: flex; flex: 0 0 auto; gap: 8px; overflow: visible; }
.invoice-print-list { display: grid; gap: 20px; }
.invoice-print-sheet { width: min(210mm, 100%); min-height: 270mm; margin: 0 auto; padding: 18mm 17mm; background: white; box-shadow: 0 10px 30px #17203318; }
.invoice-print-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 10mm; border-bottom: 2px solid var(--brand); }
.invoice-print-heading h1 { margin: 3px 0 0; font-size: 26px; }
.invoice-print-number { text-align: right; }
.invoice-print-number small, .invoice-print-number strong { display: block; }
.invoice-print-number small { color: var(--muted); font-size: 10px; }
.invoice-print-number strong { margin-top: 5px; font-size: 15px; }
.invoice-print-meta { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8mm; margin: 9mm 0; }
.invoice-print-meta > div { min-width: 0; }
.invoice-print-meta dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.invoice-print-meta dd { margin: 4px 0 0; font-size: 14px; font-weight: 750; }
.invoice-print-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.invoice-print-items { table-layout: fixed; }
.invoice-print-items th:nth-child(1) { width: 50%; }
.invoice-print-items th:nth-child(2) { width: 28%; }
.invoice-print-items tbody td { padding-top: 12px; padding-bottom: 12px; }
.invoice-print-items tbody tr:hover { background: transparent; }
.invoice-print-items tfoot th, .invoice-print-items tfoot td { padding: 16px 12px 0; border-top: 2px solid var(--ink); font-size: 15px; }
.invoice-print-items tfoot th { text-align: right; }
.invoice-print-empty { width: min(210mm, 100%); margin: 0 auto; padding: 50px 24px; text-align: center; background: white; }
.invoice-print-empty strong { display: block; margin-bottom: 18px; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .monthly-action-grid, .workflow-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .period-banner { grid-template-columns: auto auto auto minmax(220px, 1fr); }
  .period-finalize { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; }
  .adjustment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .correction-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .correction-description { grid-column: span 2; }
  .correction-remove { justify-self: start; }
  .payer-link-form { grid-template-columns: minmax(150px, 1fr) minmax(90px, .65fr); }
  .payer-link-form .button { grid-column: 1 / -1; }
  .payer-summary-columns { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 15px; }
  .brand { padding-bottom: 14px; }
  .sidebar .primary-nav { display: flex; gap: 8px; padding-bottom: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sidebar .primary-nav::-webkit-scrollbar { display: none; }
  .sidebar .primary-nav a { flex: 0 0 auto; justify-content: center; min-width: 104px; padding: 8px 10px; font-size: 12px; scroll-snap-align: start; }
  .sidebar .primary-nav a span { flex: 0 0 auto; font-size: 11px; }
  .sidebar nav .nav-label { display: none; }
  .sidebar-note { display: none; }
  .main-content { padding: 20px 16px; }
  .two-column, .card-grid, .setup-layout, .student-form-layout, .billing-start-layout { grid-template-columns: 1fr; }
  .payer-layout { grid-template-columns: 1fr; }
  .payer-layout > aside { position: static; }
  .payer-workflow-banner { align-items: flex-start; flex-direction: column; }
  .payer-privacy-note { flex: auto; width: 100%; padding: 14px 0 0; border-top: 1px solid #c9ddd9; border-left: 0; }
  .directory-search { grid-template-columns: 1fr; }
  .payer-detail-accounts > div { grid-template-columns: minmax(0, 1fr) auto; }
  .payer-detail-accounts .status, .payer-detail-accounts .table-link { justify-self: start; }
  .hero-panel { align-items: flex-start; gap: 22px; flex-direction: column; }
  .month-workbench-hero { align-items: stretch; flex-direction: column; }
  .billing-month-context { align-items: stretch; flex-direction: column; }
  .billing-month-context-form { width: 100%; }
  .billing-month-context-form input { flex: 1 1 auto; min-width: 0; }
  .metric-grid, .metric-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .metric-grid.compact.import-results { grid-template-columns: repeat(2, 1fr); }
  .receivable-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receivable-amount-grid > span:nth-child(2) { border-right: 0; }
  .receivable-amount-grid > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .operator div { display: none; }
  .period-banner { grid-template-columns: 1fr auto 1fr; }
  .period-workbench-link { grid-column: 1 / -1; justify-self: start; }
  .price-version-form { grid-template-columns: 1fr 1fr; }
  .price-version-form .button { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .topbar h1 { font-size: 23px; }
  .task-grid { grid-template-columns: 1fr; }
  .monthly-action-grid, .workflow-rail { grid-template-columns: 1fr; }
  .month-workbench-hero { padding: 19px; }
  .month-workbench-hero h2 { font-size: 21px; }
  .billing-month-context-form { align-items: stretch; flex-direction: column; }
  .billing-month-context-form .button { width: 100%; }
  .workflow-rail li strong, .workflow-rail li small { white-space: normal; }
  .monthly-student-head { align-items: flex-start; }
  .monthly-student-head > div:last-child { align-items: flex-end; flex-direction: column; }
  .monthly-charge-items > div { padding-left: 15px; }
  .hero-value { font-size: 31px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .metric-grid, .metric-grid.compact { grid-template-columns: 1fr 1fr; }
  .metric-grid.compact.import-results { grid-template-columns: 1fr 1fr; }
  .metric { padding: 13px; }
  .metric-icon { display: none; }
  .invoice-options > label { grid-template-columns: 1fr; }
  .result-banner { align-items: stretch; flex-direction: column; gap: 15px; }
  .result-banner .button { width: 100%; }
  .bank-receivables-actions { justify-items: stretch; width: 100%; }
  .bank-receivables-actions small { max-width: none; text-align: left; }
  .collection-attention, .pending-receipt-hint { align-items: stretch; flex-direction: column; }
  .collection-attention .button, .pending-receipt-hint .button { width: 100%; }
  .monthly-receivable-row > header { align-items: flex-start; }
  .monthly-receivable-row > header > div:last-child { align-items: flex-end; flex-direction: column; }
  .receivable-payer-list > div { align-items: flex-start; flex-direction: column; }
  .receivable-account-masks { text-align: left; }
  .bank-update-helper { margin-left: 0; }
  .payer-directory-return .button { width: 100%; }
  .course-banner-note { flex-basis: auto; padding: 12px 0 0; border-top: 1px solid #c9ddd9; border-left: 0; }
  .workflow-banner { padding: 16px; }
  .workflow-banner > div { align-items: flex-start; }
  .course-row-main, .enrollment-list article { align-items: flex-start; }
  .current-price, .locked-value { min-width: 105px; }
  .price-version-form, .current-price-form, .form-grid.two { grid-template-columns: 1fr; }
  .course-edit-row { align-items: stretch; flex-direction: column; }
  .course-edit-row .button { width: 100%; }
  .price-version-form .button { grid-column: auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .charge-cancel-form { min-width: 210px; }
  .section-heading { align-items: flex-start; }
  .payer-head { align-items: flex-start; flex-wrap: wrap; }
  .payer-detail-link { width: calc(100% - 54px); margin-left: 54px; }
  .payer-detail-students { grid-template-columns: 1fr; }
  .payer-relationship-main { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .payer-relationship-statuses { grid-column: 2; justify-content: flex-start; }
  .payer-relationship-period, .payer-link-actions { margin-left: 0; }
  .payer-link-action-grid { grid-template-columns: 1fr; }
  .payer-link-action-form p { min-height: 0; }
  .payer-history-list article { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .payer-history-meta { grid-column: 2; text-align: left; }
  .section-actions { flex-wrap: wrap; justify-content: flex-end; }
  .period-banner { gap: 10px; padding: 16px; }
  .period-banner h2 { font-size: 17px; }
  .period-finalize { align-items: stretch; flex-direction: column; }
  .period-finalize .button { width: 100%; }
  .usage-save-bar { align-items: stretch; flex-direction: column; }
  .usage-save-bar .button { width: 100%; }
  .billing-equation { grid-template-columns: 1fr; }
  .billing-equation b { transform: rotate(90deg); }
  .billing-line-head { align-items: flex-start; }
  .billing-line-head > div:last-child { flex-direction: column; align-items: flex-end; }
  .billing-items > div { padding-left: 15px; }
  .invoice-summary-card { align-items: flex-start; flex-direction: column; }
  .invoice-summary-values { width: 100%; justify-content: space-between; gap: 10px; }
  .invoice-summary-values span { min-width: 0; text-align: left; }
  .adjustment-form { grid-template-columns: 1fr; }
  .invoice-correction-layout, .correction-item-row { grid-template-columns: 1fr; }
  .correction-description { grid-column: auto; }
  .correction-items-heading { align-items: stretch; flex-direction: column; }
  .correction-items-heading .button { width: 100%; }
  .adjustment-confirm { grid-column: auto; }
  .adjustment-cancel-form { align-items: stretch; flex-direction: column; }
  .adjustment-form .button { width: 100%; }
  .invoice-print-page { padding: 12px; }
  .invoice-print-toolbar { align-items: stretch; flex-direction: column; }
  .invoice-print-toolbar nav { width: 100%; flex-wrap: wrap; }
  .invoice-print-toolbar .button { flex: 1; }
  .invoice-print-sheet { min-height: 0; padding: 24px 20px; }
  .invoice-print-meta { grid-template-columns: 1fr; gap: 14px; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  :root, body { background: white; }
  .invoice-print-page { padding: 0; }
  .invoice-print-toolbar { display: none !important; }
  .invoice-print-list { display: block; }
  .invoice-print-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .invoice-print-sheet + .invoice-print-sheet { break-before: page; page-break-before: always; }
  .invoice-print-items tr { break-inside: avoid; page-break-inside: avoid; }
  .invoice-print-empty { display: none; }
  .app-shell { display: block; min-height: auto; }
  .sidebar, .topbar, .detail-header, .notice, .adjustment-form, .adjustment-history, footer { display: none !important; }
  .main-content { padding: 0; }
  .invoice-summary-card, .section-card, .invoice-item-card { box-shadow: none; break-inside: avoid; }
  .invoice-summary-card { margin-bottom: 10mm; }
  .section-card { margin: 0; padding: 0; border: 0; }
  .section-heading { margin-bottom: 5mm; }
}