/* Readability pass: shared colours and comfortably sized controls on every screen. */
:root {
  --bg: #eef3f1;
  --ink: #172f28;
  --text: #2e443b;
  --muted: #5e7268;
  --line: #d2e0d8;
  --green: #08785b;
  --green-light: #dff3e9;
  --warm: #fff3d9;
  --warm-line: #e9b85e;
  --danger: #b22d24;
  font-size: 16px;
}
body { color: var(--text); }
.sidebar { border-right-color: #ceddd4; }
.brand { color: #153e30; }
.brand-mark { background: #08785b; box-shadow: 0 4px 12px #08785b24; }
.brand-mark span { background: #fff; }
.brand-caption { color: #546c60; font-size: 8.5px; letter-spacing: 1px; }
.nav-label { color: #5b7566; font-size: 10px; letter-spacing: 1.3px; }
.nav-link { color: #526b5e; font-size: 14px; min-height: 51px; }
.nav-link:hover { background: #eef7f1; color: #07684e; }
.nav-link.active { background: #dff3e9; color: #065d44; font-weight: 650; box-shadow: inset 3px 0 0 #08785b; }
.nav-count { background: #e2eee7; color: #3c6952; font-size: 12px; }
.nav-dot { width: 6px; height: 6px; background: #08785b; }
.sidebar-note { background: #eaf5ee; border-color: #c6dfcf; }
.sidebar-note strong { font-size: 14px; color: #245a3f; }
.sidebar-note p { font-size: 12px; color: #526e5c; line-height: 1.8; }
.note-icon { color: #08785b; }
.small-chip { color: #45654f; border-color: #bcd5c3; font-size: 10px; white-space: normal; }
.sidebar-bottom { font-size: 10px; color: #536f5f; }
.prototype-dot { background: #08785b; }
.topbar { background: #ffffffd9; }
.breadcrumb { font-size: 13px; color: #63786d; }
.breadcrumb span { color: #304f40; }
.demo-label { color: #245f44; background: #e8f5ec; border-color: #bad9c5; font-size: 10px; letter-spacing: .8px; }
.eyebrow { font-size: 11px; color: #08785b; font-weight: 650; letter-spacing: 1.5px; }
h1 { font-size: 36px; color: #183a2c; font-weight: 600; }
.page-heading p { font-size: 14px; color: #526c5e; line-height: 1.7; }
.month-picker { padding: 10px 13px; border-color: #bfd1c5; }
.month-picker > span { font-size: 11px; color: #536f5d; }
.month-picker input { font-size: 14px; color: #224b35; width: 153px; }
.demo-context { font-size: 12px; color: #536c5c; line-height: 1.7; }
.demo-context svg { color: #267756; width: 17px; height: 17px; }
.card { border-color: #d2e0d8; box-shadow: 0 4px 18px #1b4d2b07; }
.section-title { gap: 13px; }
.section-title h2, h2 { font-size: 18px; color: #214d35; font-weight: 650; }
.section-title p { font-size: 13px; color: #5f7667; line-height: 1.7; }
.step { width: 32px; height: 32px; background: #def1e5; border-color: #bfdcc9; color: #147046; font-size: 12px; font-weight: 650; }
.supervisor-context { background: #edf6f0; border-color: #cce2d4; }
.avatar { background: #cbe9d6; color: #166b40; font-size: 13px; }
.field-caption { color: #476f55; font-size: 9px; letter-spacing: .8px; }
.supervisor-context select { font-size: 15px; font-weight: 550; color: #274e35; }
.subtle-tag { background: #e7f2e8; color: #416c45; font-size: 11px; }
.supervisor-context .subtle-tag { border-color: #bedbc6; color: #397148; }
.field label { font-size: 14px; color: #304e3a; font-weight: 600; }
.field label > span { color: #08785b; font-size: 14px; }
.field input, .field select, .field textarea {
  border-color: #b9ccbe;
  font-size: 16px;
  min-height: 50px;
  color: #203d2d;
  padding: 13px;
}
.field input::placeholder, .field textarea::placeholder { color: #6c8071; opacity: 1; }
.field select:disabled { background: #f0f4ef; color: #6d8170; border-color: #d4dfd2; }
input:focus, select:focus, textarea:focus { border-color: #08785b; box-shadow: 0 0 0 3px #08785b22; }
button:focus-visible, a:focus-visible { outline: 3px solid #168361; outline-offset: 4px; }
.field-hint { color: #5e7664; font-size: 12px; line-height: 1.7; }
.field-hint svg { width: 14px; height: 14px; color: #237d4d; }
.amount-field input { font-size: 21px; font-weight: 550; padding-right: 36px; }
.amount-field > span { top: 10px; font-size: 20px; color: #46744b; }
.field textarea { font-size: 16px; min-height: 108px; line-height: 1.75; }
.text-button { color: #08704d; font-size: 12px; font-weight: 550; }
.comment-tools > span { font-size: 12px; color: #5f7964; }
.microcopy, .draft-state, .summary-footnote, .section-footnote { font-size: 12px; color: #5f7563; line-height: 1.8; }
.spelling-suggestion { background: #eaf6eb; border-color: #a9d0af; color: #335f38; font-size: 14px; }
.field-error { font-size: 13px; font-weight: 500; }
.category-warning { background: #fff3d9; border-color: #e8b458; color: #85520b; padding: 17px; }
.category-warning svg { color: #aa6b0c; width: 19px; height: 19px; }
.category-warning strong { color: #7c4b05; font-size: 14px; font-weight: 650; }
.category-warning p { color: #73521d; font-size: 13px; line-height: 1.75; }
.dropzone { border-color: #78b591; background: #f2faf4; color: #0f7448; min-height: 185px; }
.dropzone:hover:not(:disabled), .dropzone.dragover { background: #e1f3e7; border-color: #08785b; }
.dropzone:disabled { background: #f3f6f0; border-color: #c1d0bc; color: #6d8265; }
.upload-icon { background: #dbf0e2; color: #08785b; border-color: #b8dcc6; width: 41px; height: 41px; }
.upload-icon svg { width: 21px; height: 21px; }
.dropzone strong { font-size: 15px; font-weight: 600; }
.dropzone > span:not(.upload-icon) { color: #3f7551; font-size: 13px; }
.dropzone small { color: #5c785d; font-size: 12px; }
.confirmation { font-size: 13px; color: #4b684d; line-height: 1.8; }
.confirmation strong { color: #1f6337; }
.confirmation input { width: 18px; height: 18px; margin-top: 2px; }
.photo-name { color: #436348; font-size: 11px; }
.photo-remove { width: 28px; height: 28px; color: #295e3c; }
.button { font-size: 14px; min-height: 49px; padding: 13px 17px; font-weight: 600; }
.button svg { width: 17px; height: 17px; }
.primary { background: #08785b; border-color: #08785b; color: #fff; box-shadow: 0 3px 9px #08785b18; }
.primary:hover { background: #065f48; border-color: #065f48; }
.secondary { background: #fff; border-color: #adcbb7; color: #315e3d; }
.secondary:hover { background: #eaf6ed; border-color: #73a789; }
.summary-heading h2 { font-size: 16px; color: #245135; }
.status-badge { font-size: 11px; padding: 5px 8px; }
.draft { background: #ebf0e7; color: #5b7050; }
.demo-status { background: #dff2e4; color: #216d3c; }
.summary-amount { font-size: 40px; color: #086c49; font-weight: 600; }
.summary-amount span { color: #4c8b60; }
.summary-period { font-size: 13px; color: #5f7963; }
.summary-details { border-color: #dce7d7; }
.summary-details dt { font-size: 12px; color: #5b765d; }
.summary-details dd { font-size: 14px; color: #526b4b; }
.summary-details dd.filled { color: #275430; font-weight: 500; }
.summary-checklist { border-color: #dce7d7; }
.summary-checklist > div { font-size: 12px; color: #657d5d; }
.summary-checklist > div > span { width: 16px; height: 16px; border-color: #a9c39b; flex-shrink: 0; }
.summary-checklist .complete { color: #28713e; }
.summary-checklist .complete > span { background: #d0edcf; border-color: #7fbd82; }
.summary-checklist .complete > span::after { border-color: #27723c; top: 4px; left: 4px; }
.storage-title { color: #16753b; }
.storage-title h3 { font-size: 14px; }
.storage-note p { font-size: 13px; color: #546f50; }
.folder-path { color: #39733b; background: #e4f2df; border-color: #bad8ae; font-size: 12px; }
.offline-note { font-size: 11px; color: #58764d; }
.offline-note > span { background: #72a853; }
.no-photo-notice { background: #e5f5e4; border-color: #add3a9; color: #216c31; }
.no-photo-notice strong { font-size: 15px; color: #226634; }
.no-photo-notice p { font-size: 14px; color: #486e43; }
.context-message { font-size: 15px; color: #436a3e; }
.search-field { border-color: #b9cfb3; }
.search-field input { font-size: 15px; min-height: 48px; color: #244e27; }
.search-field svg { color: #4f874e; width: 18px; height: 18px; }
.search-field input::placeholder { color: #6d8764; }
.list-summary { font-size: 14px; color: #52764b; }
.request-meta { font-size: 12px; color: #5c7e52; }
.request-item h3 { font-size: 17px; color: #2c5f2e; }
.request-item p { font-size: 14px; color: #4c7346; }
.request-cost { font-size: 25px; color: #19723a; }
.request-details dt { font-size: 12px; color: #5d7955; }
.request-details dd { font-size: 14px; color: #355f2d; }
.admin-notice { background: #e5f2df; border-color: #bed8ad; color: #3d7133; }
.admin-notice p { font-size: 13px; }
table { font-size: 14px; }
thead { font-size: 12px; background: #e9f3e4; color: #446e36; }
th { font-size: 12px; font-weight: 600; }
td { font-size: 14px; color: #3c6533; border-top-color: #deead6; }
td:first-child { color: #22672a; }
.table-sv { font-size: 12px; color: #5c7e4b; }
.table-footer { font-size: 11px; color: #5d7e4c; border-color: #d8e6cc; }
.icon-button { color: #3c783a; border-color: #b7d4a8; width: 35px; height: 35px; }
.empty-state { background: #f4faf0; border-color: #a7c997; color: #527e3f; }
.empty-state h2 { font-size: 20px; }
.empty-state p { font-size: 14px; }
.workspace-footer { color: #698062; font-size: 10px; border-color: #cfdcc6; }
.modal { border-color: #b9d2aa; box-shadow: 0 24px 100px #163b192f; }
.modal-head h2 { font-size: 27px; }
.modal-demo-note { font-size: 12px; color: #4c7240; background: #edf6e6; }
.review-grid dt { font-size: 12px; color: #577848; }
.review-grid dd { font-size: 15px; color: #335f2c; }
.review-amount { color: #08785b; font-size: 39px; }
.review-files { font-size: 13px; }
.toast { font-size: 14px; background: #0c5e42; }

@media (max-width: 960px) and (min-width: 681px) {
  .brand-caption { font-size: 6px; }
  .nav-link { font-size: 13px; }
  .small-chip { font-size: 9px; }
  .sidebar-note p { font-size: 11px; }
  .sidebar-bottom { font-size: 9px; }
}
@media (max-width: 680px) {
  .brand { font-size: 23px; }
  .brand-caption { font-size: 9px; letter-spacing: 1px; }
  .navigation { gap: 6px; }
  .nav-link { font-size: 13px; min-height: 49px; box-shadow: none; gap: 6px; }
  .nav-link.active { background: #e0f4e8 !important; border-radius: 9px 9px 0 0; border-bottom-color: #08785b; box-shadow: none; }
  .nav-link svg { width: 17px; height: 17px; }
  .nav-count { font-size: 10px; }
  .topbar { min-height: 48px; height: auto; padding: 10px 18px; }
  .breadcrumb { font-size: 11px; gap: 6px; }
  .demo-label { font-size: 8px; letter-spacing: .3px; }
  .page-heading { flex-wrap: wrap; row-gap: 12px; }
  h1 { font-size: 31px; }
  .eyebrow { font-size: 10px; }
  .page-heading p { font-size: 13px; max-width: none; }
  .month-picker { margin-top: 0; min-width: 152px; }
  .month-picker input { font-size: 14px; width: 135px; min-height: 28px; }
  .demo-context { font-size: 12px; }
  .section-title h2 { font-size: 17px; }
  .section-title p { font-size: 12px; }
  .field-caption { font-size: 8px; letter-spacing: .3px; }
  .supervisor-context { flex-wrap: wrap; }
  .supervisor-context select { font-size: 15px; }
  .supervisor-context .subtle-tag { font-size: 10px; }
  .field label { font-size: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .amount-field input { font-size: 22px; }
  .field-hint { font-size: 12px; }
  .comment-tools .text-button { font-size: 12px; }
  .microcopy, .draft-state { font-size: 12px; }
  .category-warning { padding: 13px; }
  .category-warning strong { font-size: 14px; }
  .category-warning p { font-size: 13px; }
  .dropzone strong { font-size: 15px; max-width: none; }
  .dropzone > span:not(.upload-icon) { font-size: 13px; }
  .dropzone small { font-size: 12px; }
  .confirmation { font-size: 13px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { flex-basis: 160px; }
  .button { font-size: 14px; }
  .summary-details dd { font-size: 14px; }
  .summary-details dt { font-size: 12px; }
  .storage-note p, .summary-footnote { font-size: 13px; }
  .admin-notice p { font-size: 12px; }
  .table-footer { font-size: 11px; }
  .section-footnote { font-size: 12px; }
  .request-item h3 { font-size: 15px; }
  .request-meta { font-size: 11px; }
  .request-cost { font-size: 21px; }
  .review-grid dd { font-size: 14px; }
}
@media (max-width: 360px) {
  .nav-link { font-size: 12px; }
  .demo-label { font-size: 7px; }
  .section-title { gap: 9px; }
  .section-title > .subtle-tag { white-space: normal; text-align: center; }
}