:root {
  color-scheme: light;
  --ink: #202823;
  --muted: #747c73;
  --line: #e4e7df;
  --paper: #fff;
  --canvas: #f5f5f0;
  --forest: #244c3b;
  --forest-dark: #19382c;
  --leaf: #dbe8d9;
  --gold: #bd7c37;
  --gold-pale: #f4e8d6;
  --red: #a74d42;
  --blue: #547b88;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--canvas);
  color: var(--ink);
}


/* ======== RESET & BASE ELEMENTS ======== */
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { font-family: "Manrope", "DM Sans", sans-serif; }

/* ======== APP SHELL / SIDEBAR / TOPBAR / FOOTER ======== */
.app-shell { min-height: 100vh; }
.sidebar { width: 246px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; overflow-y: auto; background: #202d26; color: #f6f7f1; padding: 27px 18px 18px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 30px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; background: #d4a765; color: #21352a; font: 800 13px "Manrope", sans-serif; letter-spacing: 0; }
.brand strong { display: block; font-size: 11px; letter-spacing: 0; line-height: 1.3; }
.brand small { color: #a6b3a8; font-size: 9px; letter-spacing: 0; }
.nav-caption, .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0; color: #788276; }
.nav-caption { padding: 0 10px 11px; color: #94a198; }
.main-nav { display: grid; gap: 4px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 11px; color: #c4cdc6; font-size: 13px; border-left: 2px solid transparent; }
.nav-link:hover { background: #2a3b31; color: white; }
.nav-link.active { color: #fff; background: #304638; border-left-color: #d4a765; }
.nav-number { width: 20px; color: #93a397; font: 600 10px "DM Sans", sans-serif; }
.sidebar-note { display: flex; gap: 10px; margin: auto 8px 24px; padding: 15px 0; border-top: 1px solid #3b493f; color: #b9c3ba; font-size: 11px; line-height: 1.7; }
.sidebar-note strong { color: #fff; font-weight: 600; }
.note-dot { width: 7px; height: 7px; margin-top: 6px; background: #d5a866; border-radius: 50%; flex: 0 0 auto; }
.sidebar-settings { display: flex; justify-content: space-between; padding: 15px 10px 0; color: #c4cdc6; border-top: 1px solid #3b493f; font-size: 12px; }
.sidebar-settings span { color: #92a096; }
.main-area { min-height: 100vh; margin-left: 246px; display: flex; flex-direction: column; }
.topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.73); }
.topbar-context { color: #657067; font-size: 12px; }
.topbar-context span { padding: 0 7px; color: #b6bcb5; }
.user-switch { display: grid; gap: 3px; min-width: 180px; }
.user-switch span { color: #899087; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.user-switch select { max-width: 240px; border: 0; background: transparent; color: #2a372f; font-weight: 600; font-size: 12px; outline-color: var(--forest); }
.mobile-brand { display: none; align-items: center; gap: 8px; font-size: 10px; }
.mobile-brand .brand-mark { width: 31px; height: 31px; font-size: 11px; }
.page-content { width: min(1220px, 100%); flex: 1; margin: 0 auto; padding: 38px 42px 54px; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; margin: 0 42px; padding: 17px 0 20px; border-top: 1px solid var(--line); color: #828a80; font-size: 10px; }
.app-footer span:first-child { font-weight: 700; letter-spacing: 0; }

/* ======== PAGE HEADING ======== */
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 27px; }
.page-heading .eyebrow { margin-bottom: 9px; }
.page-heading h1 { margin: 0; font-size: clamp(23px, 2.3vw, 31px); letter-spacing: 0; line-height: 1.2; font-weight: 700; }
.page-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ======== BUTTONS & LINKS ======== */
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 17px; border: 1px solid transparent; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--forest); color: white; }
.button-primary:hover { background: var(--forest-dark); }
.button-outline { background: transparent; border-color: #cfd6cc; color: var(--forest); }
.button-outline:hover { background: #f1f5ef; border-color: var(--forest); }
.button-light { background: #f4f0e7; color: var(--forest-dark); }
.button-light:hover { background: white; }
.button-danger-outline { background: transparent; border-color: #dfb9b3; color: var(--red); cursor: pointer; }
.quiet-link, .text-link { color: var(--forest); font-size: 12px; font-weight: 700; }
.text-link span { padding-left: 4px; }

/* ======== SECTION HEAD ======== */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 33px 0 13px; }
.section-head .eyebrow { margin-bottom: 5px; }
.section-head h2 { margin: 0; font-size: 18px; }

/* ======== SALES HOME / WELCOME BAND ======== */
.welcome-band { min-height: 266px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; padding: 32px 38px; color: #f9f6ed; background: #31533f; }
.welcome-band::after { content: ""; position: absolute; width: 290px; height: 290px; right: 68px; top: -126px; border: 1px solid rgba(242,227,194,.2); transform: rotate(45deg); box-shadow: 0 0 0 26px rgba(242,227,194,.035), 0 0 0 54px rgba(242,227,194,.03); }
.welcome-band > div:first-child { position: relative; z-index: 1; }
.welcome-band .eyebrow { color: #c3cfbf; margin-bottom: 14px; }
.welcome-band h2 { margin-bottom: 9px; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.28; }
.welcome-band h2 span { color: #e6c38c; }
.welcome-band p { color: #d2ddd1; font-size: 12px; margin-bottom: 17px; }
.welcome-stamp { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 11px; border: 1px solid rgba(248,243,230,.46); color: #f4e4bf; transform: rotate(-7deg); }
.welcome-stamp span { font: 800 25px "Manrope", sans-serif; }
.welcome-stamp small { font-size: 8px; line-height: 1.25; }

/* ======== TRANSACTION LIST & ROWS ======== */
.transaction-list { border-top: 1px solid var(--line); }
.transaction-row { min-height: 75px; display: grid; grid-template-columns: minmax(132px, .8fr) minmax(180px, 1.7fr) minmax(130px, .7fr) 22px; align-items: center; gap: 16px; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.transaction-row:hover { background: rgba(255,255,255,.6); }
.row-id, .row-customer, .row-amount { font-size: 12px; font-weight: 700; }
.row-id small, .row-customer small, .row-amount small { display: block; margin-top: 5px; color: #838b81; font-size: 10px; font-weight: 400; }
.row-amount { text-align: right; }
.row-amount small { display: flex; justify-content: flex-end; }
.row-arrow { color: #7f8c7d; font-size: 18px; text-align: right; }

/* ======== STATUS PILLS ======== */
.status { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; background: #eff1ec; color: #596257; font: 600 10px "DM Sans", sans-serif; white-space: nowrap; }
.status-submitted, .status-pending-review { background: #f6ebd8; color: #936222; }
.status-reviewed { background: #e6efe5; color: #356345; }
.status-ready-for-export { background: #e4edf0; color: #416877; }
.status-exported, .status-exit-verified { background: #e4eee8; color: #397052; }
.status-needs-correction, .status-cancelled { background: #f4e5e2; color: #9b4d43; }

/* ======== DASHBOARD METRICS & ACCOUNTING NOTE ======== */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 34px; }
.metric { min-height: 135px; position: relative; overflow: hidden; padding: 17px 18px; background: var(--paper); border: 1px solid var(--line); }
.metric > span { display: block; color: #687267; font-size: 11px; }
.metric > strong { display: block; margin: 12px 0 5px; font-size: 30px; font-weight: 700; }
.metric > small { color: #8a9188; font-size: 10px; }
.metric-mark { position: absolute; width: 7px; height: 7px; top: 19px; right: 18px; background: var(--forest); border-radius: 50%; }
.mark-yellow { background: #cf9b50; }.mark-blue { background: #6b95a1; }.mark-orange { background: #c7864b; }
.accounting-note { display: flex; align-items: center; gap: 13px; margin-top: 30px; padding: 16px; background: #e9eee6; }
.note-emblem { width: 35px; height: 35px; display: grid; place-items: center; background: #d4e1d2; color: var(--forest); font-size: 18px; }
.accounting-note strong, .accounting-note small { display: block; }
.accounting-note strong { font-size: 12px; }
.accounting-note small { margin-top: 4px; color: #6c776c; font-size: 11px; }

/* ======== NEW SALE / EDIT SALE FORM ======== */
.sale-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(275px, .8fr); gap: 25px; align-items: start; }
.mobile-sale-action { display: none; }
.sale-main { border-top: 1px solid var(--line); }
.form-section { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.edit-notice { display: grid; gap: 5px; margin: 18px 0 0; padding: 13px 15px; border: 1px solid #d7e2d3; background: #f2f7ef; }
.edit-notice strong { color: var(--forest); font-size: 12px; }
.edit-notice small { color: #6b776b; font-size: 10px; line-height: 1.5; }

/* ======== FORM SECTIONS, CUSTOMER PICKER, SEARCH RESULTS ======== */
.section-label { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 17px; }
.section-index { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; background: #e6ebe3; color: var(--forest); font-size: 10px; font-weight: 700; }
.section-label h2 { margin: 1px 0 4px; font-size: 16px; }
.section-label p { margin: 0; color: #818a80; font-size: 11px; }
.customer-picker { position: relative; max-width: 520px; margin-left: 40px; }
.field-label, .customer-picker .field-label { display: block; margin-bottom: 7px; color: #596358; font-size: 11px; font-weight: 600; }
.text-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dce1d9; outline: 0; background: #fff; color: var(--ink); font-size: 12px; }
.text-input:focus { border-color: #63816b; box-shadow: 0 0 0 3px rgba(64,103,75,.1); }
.text-input::placeholder { color: #a2a9a0; }
.selected-customer { display: flex; align-items: center; gap: 10px; margin: 13px 0 0 40px; max-width: 520px; padding: 10px; border: 1px solid #dce4d8; background: #f5f8f3; }
.customer-monogram { width: 32px; height: 32px; display: grid; place-items: center; background: #dfe9dc; color: var(--forest); font: 700 13px "Manrope", sans-serif; }
.selected-customer div { flex: 1; }
.selected-customer strong, .selected-customer small { display: block; }
.selected-customer strong { font-size: 11px; }
.selected-customer small { margin-top: 3px; color: #778075; font-size: 10px; }
.icon-button { border: 0; background: transparent; color: var(--forest); font-size: 10px; font-weight: 700; cursor: pointer; }
.helper-line { margin: 11px 0 0 40px; color: #92998f; font-size: 10px; }
.search-results { position: absolute; z-index: 4; inset: 100% 0 auto; max-height: 250px; overflow: auto; border: 1px solid #dce1d9; background: white; box-shadow: 0 12px 25px rgba(25,44,32,.12); }
.search-result { width: 100%; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding: 8px 12px; border: 0; border-bottom: 1px solid #edf0eb; background: white; text-align: left; cursor: pointer; }
.search-result:hover { background: #f5f8f3; }
.search-result strong { font-size: 11px; }
.search-result small { color: #778075; font-size: 10px; }
.add-search-result { color: var(--forest); }
.items-section .section-label { align-items: center; }
.section-action { margin-left: auto; min-height: 37px; padding: 0 12px; }
.add-item-empty { width: calc(100% - 40px); min-height: 92px; display: flex; align-items: center; gap: 4px; flex-direction: column; justify-content: center; margin-left: 40px; border: 1px dashed #cad2c7; background: transparent; cursor: pointer; }
.add-item-empty:hover { background: #fff; border-color: #7f9a83; }
.add-item-empty > span { color: var(--forest); font-size: 20px; }
.add-item-empty strong { font-size: 11px; }
.add-item-empty small { color: #899187; font-size: 10px; }

/* ======== CART LINES (SALE ITEMS) ======== */
.sale-items { margin-left: 40px; }
.sale-item { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 28px; align-items: center; gap: 10px; border-bottom: 1px solid #e8ebe5; }
.sale-item-description { min-width: 0; }
.sale-item strong { display: block; font-size: 11px; }
.sale-item small { display: block; margin-top: 4px; color: #758074; font-size: 10px; }
.sale-item > strong { white-space: nowrap; }
.inline-quantity-control { display: grid; grid-template-columns: 30px 42px 30px; gap: 3px; align-items: center; }
.inline-quantity-control button { height: 32px; border: 1px solid #d6ddd3; background: #f7f9f5; color: var(--forest); font-size: 16px; cursor: pointer; }
.inline-quantity-control input { width: 42px; height: 32px; border: 1px solid #d6ddd3; text-align: center; font-size: 11px; font-weight: 700; }
.sale-item-total { min-width: 62px; text-align: right; }
.price-lock { color: #6c8668; font-size: 9px; }
.remove-item { width: 30px; height: 30px; border: 0; background: transparent; color: #8d968b; font-size: 18px; cursor: pointer; }

/* ======== PAYMENT OPTIONS ======== */
.payment-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-left: 40px; }
.payment-option { min-height: 66px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dce1d9; background: white; text-align: left; cursor: pointer; }
.payment-option:hover { border-color: #8aa08a; }
.payment-option.selected { border: 1.5px solid var(--forest); background: #f1f6ef; }
.payment-option strong { font-size: 11px; }
.payment-symbol { width: 26px; height: 26px; display: grid; place-items: center; background: #edf1e9; color: var(--forest); font-size: 14px; }
.cheque-reference { display: grid; grid-template-columns: 1fr minmax(160px, 1.3fr); align-items: center; gap: 12px; margin: 12px 0 0 40px; color: #596358; font-size: 10px; font-weight: 600; }
.cheque-reference small { display: block; margin-top: 4px; color: #92998f; font-size: 9px; font-weight: 400; }

/* ======== NOTES, PHOTOS, ATTACHMENTS ======== */
.note-options { display: grid; gap: 7px; color: #687167; font-size: 10px; font-weight: 600; }
.note-options > div { display: flex; flex-wrap: wrap; gap: 6px; }
.note-chip { min-height: 31px; padding: 0 9px; border: 1px solid #dce2d9; background: #fff; color: #596658; font-size: 9px; cursor: pointer; }
.note-chip:hover, .note-chip.selected { border-color: #66836a; background: #eaf1e7; color: var(--forest); }
.photo-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.optional-fields .mobile-camera-button { display: none; }
.photo-button { position: relative; min-height: 36px; padding: 0 10px; font-size: 9px; cursor: pointer; }
.photo-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.attached-file { display: flex; align-items: center; gap: 8px; color: #526c55; font-size: 10px; }
.attached-file img, .attachment-list img { width: 44px; height: 38px; object-fit: cover; border: 1px solid #dce2d9; }

/* ======== CAMERA MODAL ======== */
.camera-modal { width: min(100%, 560px); }
.camera-modal video { width: 100%; max-height: 55vh; display: block; background: #18231c; object-fit: contain; }
.camera-message { margin: 10px 0; color: #778175; font-size: 10px; }

/* ======== CUSTOMER DETAIL & PAYMENT HISTORY ======== */
.customer-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 25px; }
.customer-summary-item { min-height: 82px; display: grid; align-content: center; gap: 8px; padding: 13px; border: 1px solid var(--line); background: white; }
.customer-summary-item small { color: #828b80; font-size: 8px; font-weight: 700; }
.customer-summary-item strong { font-size: 14px; }
.customer-history-section { margin: 24px 0; }
.customer-history-section .section-head { margin: 0 0 12px; }
.customer-history-section .section-head h2 { font-size: 17px; }
.history-count { color: #818a80; font-size: 10px; }
.payment-history { border-top: 1px solid var(--line); }
.payment-history-row { min-height: 66px; display: grid; grid-template-columns: 33px 1fr auto 20px; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: white; }
.payment-history-row:hover { background: #f8faf6; }
.payment-history-icon { width: 30px; height: 30px; display: grid; place-items: center; background: #edf2e9; color: var(--forest); font-size: 13px; }
.payment-history-description strong, .payment-history-description small { display: block; }
.payment-history-description strong { font-size: 10px; }
.payment-history-description small { margin-top: 4px; color: #838c81; font-size: 9px; }
.payment-history-amount { font-size: 11px; }
.history-disclaimer { margin: 9px 0; color: #818a80; font-size: 9px; line-height: 1.5; }
.receipt-note { width: min(100%, 400px); margin: 10px 0 14px auto; padding: 10px; background: #f7f8f5; }
.receipt-note small { color: #7d877b; font-size: 8px; font-weight: 700; }
.receipt-note p { margin: 5px 0 0; color: #596458; font-size: 9px; white-space: pre-line; }

/* ======== SALE SUMMARY PANEL (TOTALS + COMPLETE BUTTONS) ======== */
.sale-summary { position: sticky; top: 16px; padding: 18px; border: 1px solid var(--line); background: white; }
.summary-top { display: flex; justify-content: space-between; color: #717a70; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.summary-live { display: flex; align-items: center; gap: 5px; color: #608164; font-size: 8px; }
.summary-live i { width: 5px; height: 5px; background: #608164; border-radius: 50%; }
.summary-customer { margin: 18px 0; padding-bottom: 16px; border-bottom: 1px solid #e9ece6; font-size: 12px; font-weight: 700; }
.summary-customer small { display: block; margin-top: 4px; color: #838b81; font-size: 10px; font-weight: 400; }
.totals-line, .total-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; color: #727b71; font-size: 11px; }
.totals-line strong { color: #303a32; font-size: 11px; }
.total-line { margin-top: 5px; padding: 14px 0; border-top: 1px solid #e4e8e0; color: var(--ink); font-size: 12px; font-weight: 700; }
.total-line strong { color: var(--forest); font-size: 22px; }
.details-toggle { width: 100%; display: flex; align-items: center; gap: 7px; padding: 13px 0; border: 0; border-top: 1px solid #e8ebe5; background: transparent; color: var(--forest); text-align: left; font-size: 11px; font-weight: 700; cursor: pointer; }
.details-toggle span { margin-left: auto; color: #9aa197; font-size: 9px; font-weight: 400; }
.optional-fields { display: grid; gap: 11px; padding: 8px 0 12px; }
.optional-fields label, .simple-form label, .export-form label { display: grid; gap: 6px; color: #687167; font-size: 10px; font-weight: 600; }
.text-input.compact { min-height: 37px; padding: 8px 10px; font-size: 11px; }
.optional-fields textarea { resize: vertical; }
.attachment-line { display: grid; gap: 8px; color: #697367; font-size: 10px; }
.attachment-line .text-link { justify-self: start; border: 0; background: transparent; padding: 0; cursor: pointer; }
.attached-file { color: #617564; }
.complete-button { width: 100%; min-height: 51px; justify-content: space-between; padding: 0 16px; font-size: 13px; }
.share-after-button { margin-top: 9px; }
.summary-footnote { margin: 9px 0 0; color: #979d94; font-size: 9px; line-height: 1.5; }
.inline-error { min-height: 16px; margin: 4px 0; color: var(--red); font-size: 10px; }

/* ======== MODALS & DIALOGS ======== */
.modal-scrim { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(20,31,24,.48); }
.modal-panel { width: min(100%, 510px); max-height: min(720px, 92vh); overflow: auto; padding: 24px; background: white; box-shadow: 0 20px 70px rgba(0,0,0,.2); }
.product-modal { width: min(100%, 560px); }
.modal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 17px; }
.modal-heading .eyebrow { margin-bottom: 7px; }
.modal-heading h2 { margin: 0; font-size: 20px; }
.close-button { width: 35px; height: 35px; border: 1px solid var(--line); background: white; color: #566055; font-size: 21px; cursor: pointer; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.filter-chip { min-height: 31px; padding: 0 10px; border: 1px solid #e0e4dd; background: white; color: #616b60; font-size: 10px; cursor: pointer; }
.filter-chip.active { border-color: var(--forest); background: #eaf1e7; color: var(--forest); }
.product-results { max-height: 340px; overflow: auto; border-top: 1px solid #e7eae4; }
.product-result { width: 100%; min-height: 64px; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #e7eae4; background: white; text-align: left; cursor: pointer; }
.product-result:hover { background: #f6f8f4; }
.product-glyph { width: 31px; height: 31px; display: grid; place-items: center; background: #ecf0e8; color: var(--forest); font: 700 12px "Manrope", sans-serif; }
.product-result strong, .product-result small { display: block; }
.product-result strong { font-size: 11px; }
.product-result small { margin-top: 4px; color: #818a80; font-size: 10px; }
.product-arrow { color: #829080; }
.empty-inline { padding: 22px 8px; color: #838c82; text-align: center; font-size: 11px; }
.quantity-modal { width: min(100%, 420px); }
.price-readout { display: flex; align-items: center; justify-content: space-between; margin: 19px 0; padding: 13px; background: #f0f5ed; color: #536451; font-size: 11px; }
.price-readout strong { color: var(--forest); font-size: 17px; }
.quantity-control { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; margin-bottom: 17px; }
.quantity-control button { height: 50px; border: 1px solid #d6ddd3; background: #f7f9f5; color: var(--forest); font-size: 23px; cursor: pointer; }
.quantity-control input { width: 100%; border: 1px solid #d6ddd3; text-align: center; font-size: 19px; font-weight: 700; }
.quantity-total { display: flex; justify-content: space-between; margin: 12px 0 20px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }
.quantity-total strong { font-size: 17px; }
.full-width { width: 100%; }
.simple-form { display: grid; gap: 14px; }
.simple-form .modal-heading { margin-bottom: 0; }
.simple-form .button { margin-top: 5px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.success-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; background: #e8f0e5; }
.success-check { width: 29px; height: 29px; display: grid; place-items: center; background: #d2e4cf; color: #306344; font-weight: 700; }
.success-banner div { flex: 1; }
.success-banner strong, .success-banner small { display: block; }
.success-banner strong { font-size: 12px; }
.success-banner small { margin-top: 3px; color: #69786a; font-size: 10px; }

/* ======== RECEIPT (PRINTABLE) ======== */
.receipt { width: min(100%, 720px); margin: 0 auto; padding: 32px 39px; border: 1px solid #e2e4dd; background: #fff; box-shadow: 0 12px 30px rgba(32,43,34,.05); }
.receipt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.receipt-top > div:first-child { display: grid; grid-template-columns: 40px auto; column-gap: 10px; align-items: center; }
.receipt-top .brand-mark { grid-row: span 2; }
.receipt-top h2 { margin: 0; font-size: 17px; }
.receipt-top small { color: #798177; font-size: 10px; }
.receipt-label { display: grid; gap: 4px; text-align: right; }
.receipt-label strong { font-size: 12px; }
.receipt-label span { color: #778174; font-size: 9px; }
.receipt-label b { color: #a34f43; font-size: 9px; }
.receipt-meta { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.receipt-meta span, .receipt-meta strong { display: block; }
.receipt-meta span { color: #7b8478; font-size: 9px; }
.receipt-meta strong { margin-top: 4px; color: var(--ink); font-size: 10px; }
.receipt-customer { display: grid; gap: 4px; padding: 17px 0; }
.receipt-customer small { color: #768075; font-size: 9px; font-weight: 700; }
.receipt-customer strong { font-size: 12px; }
.receipt-customer span { color: #7c857b; font-size: 10px; }
.receipt-lines { border-top: 1px solid var(--line); }
.receipt-line { min-height: 38px; display: grid; grid-template-columns: minmax(130px, 1fr) 40px 80px 90px; align-items: center; gap: 8px; border-bottom: 1px solid #edf0eb; font-size: 10px; }
.receipt-line > :not(:first-child) { text-align: right; }
.receipt-th { color: #778175; font-size: 8px; font-weight: 700; }
.receipt-totals { width: min(100%, 300px); margin: 14px 0 14px auto; }
.receipt-totals > div { display: flex; justify-content: space-between; padding: 5px 0; color: #737d72; font-size: 10px; }
.receipt-totals strong { color: var(--ink); }
.receipt-totals .receipt-grand { margin: 4px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.receipt-grand strong { color: var(--forest); font-size: 19px; }
.receipt-bottom { display: flex; gap: 14px; align-items: center; padding-top: 19px; border-top: 1px solid var(--line); }
.receipt-bottom > div:last-child { display: grid; gap: 5px; }
.receipt-bottom strong { font-size: 10px; }
.receipt-bottom p, .receipt-bottom small { margin: 0; color: #727d71; font-size: 9px; line-height: 1.5; }
.receipt-bottom b { color: #a34f43; font-size: 9px; }
.receipt-reference-mark { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #d6ddd4; background: #f4f6f1; color: var(--forest); font: 800 12px "Manrope", sans-serif; }
.receipt-delivery { width: min(100%, 400px); margin: 10px 0 14px auto; padding: 10px; background: #f7f8f5; }
.receipt-delivery small { color: #7d877b; font-size: 8px; font-weight: 700; }
.receipt-delivery p { margin: 5px 0 0; color: #596458; font-size: 9px; }
.review-progress { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.review-progress span { padding: 6px 8px; border: 1px solid #e2e6df; color: #8a9288; font-size: 8px; }
.review-progress span.complete { border-color: #d6e4d3; background: #eef4eb; color: #4e7052; }
.review-progress span.current { border-color: #628269; color: var(--forest); font-weight: 700; }
.correction-note { margin: 7px 0 0; color: #9a574d; font-size: 9px; }
.receipt-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

/* ======== TRANSACTION DETAIL (FACTS, TIMELINE, ACTIONS) ======== */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .72fr); gap: 17px; align-items: start; }
.detail-main { display: grid; gap: 13px; }
.detail-panel, .timeline-panel { padding: 20px; border: 1px solid var(--line); background: white; }
.detail-panel-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; padding-bottom: 15px; border-bottom: 1px solid #e8ebe5; }
.detail-panel-head h2 { margin: 6px 0 3px; font-size: 17px; }
.detail-panel-head p { margin: 0; color: #7c857a; font-size: 10px; }
.detail-items { padding: 7px 0; border-bottom: 1px solid var(--line); }
.detail-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 11px; }
.detail-item strong, .detail-item small { display: block; }
.detail-item small { margin-top: 4px; color: #828b80; font-size: 10px; }
.detail-total { display: flex; justify-content: space-between; padding: 5px 0; color: #7a8378; font-size: 10px; }
.detail-total strong { color: #344036; }
.detail-total.grand { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.detail-total.grand strong { color: var(--forest); font-size: 19px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; margin-top: 17px; }
.facts-grid div { display: grid; gap: 4px; }
.facts-grid small, .detail-note small, .attachment-list small, .created-by small, .gate-mini > small { color: #8a9288; font-size: 8px; font-weight: 700; letter-spacing: 0; }
.facts-grid strong { font-size: 11px; }
.detail-note, .attachment-list { margin-top: 17px; padding-top: 13px; border-top: 1px solid #edf0eb; }
.detail-note p { margin: 5px 0 0; color: #566055; font-size: 11px; }
.attachment-list { display: grid; gap: 7px; color: #4f7056; font-size: 10px; }
.action-panel { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.action-panel h2 { margin: 6px 0 3px; font-size: 14px; }
.action-panel p { margin: 0; color: #7f887e; font-size: 10px; }
.action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.action-buttons .button { min-height: 38px; padding: 0 10px; font-size: 10px; }
.timeline-panel h2 { margin: 7px 0 17px; font-size: 17px; }
.timeline { display: grid; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 10px; min-height: 58px; }
.timeline-entry:not(:last-child)::before { content: ""; position: absolute; top: 10px; bottom: -2px; left: 4px; width: 1px; background: #dfe5dc; }
.timeline-entry > i { z-index: 1; width: 9px; height: 9px; margin-top: 2px; border: 2px solid #dbe6d7; background: #719176; border-radius: 50%; }
.timeline-entry strong, .timeline-entry small { display: block; }
.timeline-entry strong { font-size: 10px; line-height: 1.35; }
.timeline-entry small { margin-top: 4px; color: #879084; font-size: 9px; line-height: 1.45; }
.created-by, .gate-mini { display: grid; gap: 7px; margin-top: 12px; padding-top: 13px; border-top: 1px solid #e9ece6; }
.created-by strong { font-size: 11px; }
.gate-mini .text-link { font-size: 10px; }

/* ======== TABLES & LISTS ======== */
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; color: #80897e; font-size: 10px; }
.search-compact { max-width: 340px; min-height: 39px; }
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); background: white; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 40px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #fafbf8; color: #778074; font-size: 8px; letter-spacing: 0; white-space: nowrap; }
td { min-height: 54px; padding: 11px 13px; border-bottom: 1px solid #edf0eb; color: #4b554b; font-size: 10px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; margin-top: 4px; color: #899186; font-size: 9px; }
.table-id { color: var(--forest); font-weight: 700; }
.table-amount { color: #29362d; font-weight: 700; }
.price-tag { display: inline-block; padding: 4px 7px; background: #eef2eb; color: #4c654b; font-size: 9px; }

/* ======== EMPTY STATES ======== */
.empty-state { display: grid; justify-items: center; padding: 50px 20px; border: 1px dashed #d5dcd1; text-align: center; }
.empty-mark { color: #9da79a; font-size: 22px; }
.empty-state h3 { margin: 10px 0 5px; font-size: 15px; }
.empty-state p { color: #818b80; font-size: 11px; }

/* ======== GATE VERIFY SCREEN ======== */
.verify-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr); gap: 20px; align-items: stretch; }
.verify-search { min-height: 390px; padding: 27px; background: #e9eee6; }
.verify-scan-mark { width: 43px; height: 43px; display: grid; place-items: center; position: relative; margin-bottom: 22px; background: var(--forest); color: white; font: 700 12px "Manrope", sans-serif; }
.verify-scan-mark span { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; display: grid; place-items: center; background: #d4a765; color: #22382b; font-size: 11px; }
.verify-search h2 { margin: 8px 0; font-size: 23px; line-height: 1.3; }
.verify-search > p { max-width: 380px; color: #6d786d; font-size: 11px; line-height: 1.6; }
.verify-form { margin-top: 24px; }
.verify-form label { display: block; margin-bottom: 7px; color: #566256; font-size: 10px; font-weight: 700; }
.verify-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.verify-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 20px; }
.verify-shortcuts span { width: 100%; margin-bottom: 3px; color: #7d887d; font-size: 8px; font-weight: 700; }
.verify-shortcuts button { min-height: 28px; padding: 0 7px; border: 1px solid #ccd6ca; background: transparent; color: #5a6e5b; font-size: 9px; cursor: pointer; }
.verify-result-wrap { min-height: 390px; display: grid; align-items: start; }
.verify-empty { display: grid; justify-items: center; align-content: center; height: 100%; min-height: 280px; border: 1px dashed #d4dbd1; color: #818b80; text-align: center; }
.verify-empty > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; background: #e8ede5; color: var(--forest); font-size: 17px; }
.verify-empty strong { color: #596458; font-size: 12px; }
.verify-empty small { margin-top: 5px; font-size: 10px; }
.verify-result { width: 100%; padding: 21px; border: 1px solid #dce4d8; background: white; }
.verify-result > strong { display: block; color: #3f7350; font-size: 12px; }
.verify-result > p { margin: 6px 0 15px; color: #788276; font-size: 10px; }
.result-invalid { border-color: #e5cac5; background: #fffafa; }
.result-invalid > strong { color: #a64d42; }
.result-warning { border-color: #ead8bd; background: #fffdf8; }
.result-warning > strong { color: #9a702c; }
.verify-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 15px 0; border-top: 1px solid #edf0eb; border-bottom: 1px solid #edf0eb; }
.verify-facts > div { display: grid; gap: 4px; }
.verify-facts small { color: #858e83; font-size: 8px; font-weight: 700; }
.verify-facts strong { font-size: 10px; }
.verify-state { grid-column: 1 / -1; }
.verify-result .button { margin-top: 15px; }

/* ---- gate desk: transaction queue, exit details, and the "More details" form ---- */
.gate-queue { display: grid; align-content: start; gap: 12px; }
.gate-queue h2 { margin: 8px 0 0; font-size: 21px; line-height: 1.3; }
.gate-queue-tools { display: grid; gap: 8px; margin-top: 16px; }
.gate-queue-tools .text-input { min-height: 38px; }
.gate-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.gate-queue-list { display: grid; gap: 6px; max-height: 430px; overflow-y: auto; padding-right: 3px; }
.gate-queue-row { display: grid; grid-template-columns: minmax(88px, .85fr) minmax(0, 1.25fr) minmax(78px, .85fr) auto; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid #dfe5db; background: white; color: inherit; text-align: left; cursor: pointer; }
.gate-queue-row:hover { border-color: #b9c8b6; }
.gate-queue-row.is-verified { background: #f4f7f2; }
.gate-queue-row.is-selected { border-color: var(--forest); box-shadow: inset 3px 0 0 var(--forest); }
.gate-queue-id { color: var(--forest); font: 700 10px "Manrope", sans-serif; }
.gate-queue-customer, .gate-queue-vehicle { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.gate-queue-id small, .gate-queue-customer small, .gate-queue-vehicle small { display: block; margin-top: 3px; color: #899186; font-size: 8px; font-weight: 500; }
.gate-queue-status { justify-self: end; }
.gate-items { margin: 14px 0 0; border-top: 1px solid #edf0eb; }
.gate-items > .eyebrow { margin: 12px 0 4px; }
.gate-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f4ef; font-size: 10px; }
.gate-item small { display: block; margin-top: 3px; color: #899186; font-size: 8px; }
.gate-item-total { border-bottom: 0; color: #48594a; font-weight: 700; }
.gate-item-total strong { font-size: 13px; }
.exit-details { margin-top: 14px; padding: 13px; background: #f5f8f4; }
.exit-details .verify-facts { padding: 12px 0 0; border-top: 0; }
.exit-details .attachment-list, .exit-details .detail-note { margin-top: 10px; }
.exit-photo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.exit-photo { position: relative; width: 74px; height: 74px; display: block; border: 1px solid #dde3d9; background: white; }
.exit-photo img { width: 100%; height: 100%; object-fit: cover; }
.exit-photo .remove-item { position: absolute; top: -8px; right: -8px; width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #dde3d9; background: white; color: #a64d42; font-size: 11px; line-height: 1; cursor: pointer; }
.exit-details-meta { display: block; margin-top: 10px; color: #8b948a; font-size: 8px; }
.gate-details-form { display: grid; gap: 10px; margin-top: 15px; padding: 14px; border: 1px solid #d5e0d2; background: #fbfcfa; }
.gate-details-form label { display: grid; gap: 5px; color: #6c766a; font-size: 9px; }
.gate-details-form .text-input { min-height: 38px; }
.gate-details-form .action-buttons { margin-top: 2px; }
.gate-mini-details { display: block; margin: 7px 0; color: #8b948a; font-size: 8px; line-height: 1.5; }
.gate-mini-button { width: 100%; min-height: 34px; padding: 0 10px; font-size: 9px; }


/* ======== IMPORT / EXPORT ======== */
.import-layout, .export-layout, .settings-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .75fr); gap: 18px; align-items: start; }
.import-main, .export-form { padding: 23px; border: 1px solid var(--line); background: white; }
.import-main h2, .export-form h2 { margin: 6px 0 19px; font-size: 19px; }
.import-steps { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 24px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.import-steps span { display: grid; justify-items: center; gap: 5px; color: #969d94; font-size: 8px; text-align: center; }
.import-steps i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d6ddd4; border-radius: 50%; font-style: normal; font-size: 9px; }
.import-steps .current { color: var(--forest); font-weight: 700; }
.import-steps .current i { border-color: var(--forest); background: var(--forest); color: white; }
.import-types { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 16px; }
.import-types label { display: flex; align-items: center; gap: 6px; color: #465346; font-size: 10px; }
.upload-zone { min-height: 120px; display: grid; justify-items: center; align-content: center; gap: 5px; margin-bottom: 16px; border: 1px dashed #cbd4c8; background: #fafbf8; cursor: pointer; }
.upload-zone .upload-icon { color: var(--forest); font-size: 21px; }
.upload-zone strong { font-size: 11px; }
.upload-zone small { color: #8b9489; font-size: 9px; }
.upload-zone input { width: min(250px, 90%); margin-top: 6px; font-size: 9px; }
.import-aside { display: grid; gap: 12px; padding: 21px; background: #e8eee5; }
.import-aside h3 { margin: 0; font-size: 14px; }
.import-aside p, .import-aside small { margin: 0; color: #6c776b; font-size: 10px; line-height: 1.6; }
.import-aside .text-link { font-size: 10px; }
.import-success { display: grid; gap: 4px; margin-top: 16px; padding: 12px; background: #eaf2e6; color: #3e704b; font-size: 11px; }
.import-success span { font-size: 10px; }
.export-form { display: grid; gap: 14px; }
.export-form h2 { margin-bottom: 2px; }
.export-count { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); color: #6e786d; font-size: 11px; }
.export-count strong { color: var(--forest); font-size: 18px; }
.export-aside { display: flex; gap: 12px; padding: 20px; background: #eee9dd; }
.export-aside strong { font-size: 11px; }
.export-aside p { margin: 6px 0 0; color: #6e7165; font-size: 10px; line-height: 1.6; }
.export-file-icon { width: 38px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; background: white; color: #557a5e; font-size: 9px; font-weight: 700; }

/* ---- export selection list (the accountant ticks what leaves the system) ---- */
.export-list-head { margin-top: 34px; }
.export-select-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.export-select-actions .button { min-height: 36px; padding: 0 11px; font-size: 10px; }
.export-select-cell { width: 62px; text-align: center; }
.export-select-cell input { width: 17px; height: 17px; accent-color: var(--forest); cursor: pointer; }
.export-locked { color: #b3b9b0; }
.export-help { margin: 0; color: #8a9288; font-size: 10px; line-height: 1.65; }
tr.is-excluded td { background: #faf7f5; }
tr.is-excluded .table-id, tr.is-excluded .table-amount { color: #9aa39a; }

/* ---- review outcome, correction remark, exported note ---- */
.review-status-readout { display: flex; align-items: center; }
.exported-panel p, .review-complete p { line-height: 1.7; }
.correction-panel .correction-remark { margin: 9px 0 10px; color: #8f4b42; font-size: 12px; line-height: 1.65; }
.correction-panel small { color: #8a9288; font-size: 10px; line-height: 1.6; }
.correction-modal { width: min(100%, 560px); display: grid; gap: 15px; }
.correction-modal .modal-heading { margin-bottom: 0; }
.correction-modal h2 { margin: 6px 0 0; font-size: 20px; }
.correction-modal label { display: grid; gap: 7px; color: #687167; font-size: 10px; font-weight: 600; }
.correction-modal textarea { min-height: 108px; padding: 11px 12px; line-height: 1.55; resize: vertical; }
.correction-copy { margin: 0; color: #6f7970; font-size: 11px; line-height: 1.7; }
.correction-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.correction-hint { margin: 0; color: #8a9288; font-size: 10px; line-height: 1.6; }
.edit-notice .correction-remark { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #d7e2d3; color: #8f4b42; font-size: 11px; line-height: 1.6; }
.edit-notice .correction-remark strong { margin: 0 0 3px; color: #8f4b42; font-size: 9px; }
.app-footer .footer-link { color: var(--forest); font-weight: 700; }

/* ======== SETTINGS ======== */
.settings-layout { grid-template-columns: 1fr 1fr; }
.settings-layout .detail-panel > p { color: #717c71; font-size: 11px; line-height: 1.65; }
.settings-layout h2 { margin: 7px 0 12px; font-size: 17px; }
.setting-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf0eb; color: #778075; font-size: 10px; }
.setting-row code, .setting-row strong { color: #435246; font-size: 10px; }
.small-disclaimer { margin: 10px 0 0 !important; font-size: 9px !important; }
.architecture-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 17px; color: #506a53; font-size: 10px; font-weight: 700; }
.architecture-line span { padding: 8px; background: #edf2e9; }
.architecture-line i { color: #8b9888; font-style: normal; }

/* ======== REPORTS ======== */
.report-panel { max-width: 700px; margin-top: 10px; }
.report-panel h2 { margin: 6px 0 18px; font-size: 17px; }
.report-bar-row { display: grid; grid-template-columns: 70px 1fr 25px; align-items: center; gap: 10px; margin: 13px 0; color: #637062; font-size: 10px; }
.report-bar-row > strong { text-align: right; }
.report-track { height: 8px; background: #edf0e9; }
.report-track i { height: 100%; display: block; background: #67866a; }
.transaction-filters, .report-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); background: #fff; }
.filter-field { min-width: 135px; display: grid; gap: 6px; color: #697367; font-size: 9px; font-weight: 700; }
.filter-search { flex: 1 1 220px; }
.filter-field .text-input { min-height: 39px; }
.clear-filters { min-height: 39px; }
.filter-count { margin: 0 2px 11px auto; color: #7e887c; font-size: 10px; white-space: nowrap; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-grid .report-panel { max-width: none; }
.report-transactions { margin-top: 14px; }
.report-transactions h2 { margin: 6px 0 15px; font-size: 17px; }
.report-customer-row { min-height: 43px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #edf0eb; color: #586558; font-size: 10px; }
.report-customer-row strong { color: var(--ink); }

/* ======== SHARE PANEL ======== */
.share-panel { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid var(--line); background: white; }
.share-panel p { margin: 5px 0 0; color: #7b8479; font-size: 9px; }
.share-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.share-buttons .button { min-height: 35px; padding: 0 10px; font-size: 9px; }
.share-whatsapp { color: #26734c; }

/* ======== ADMIN (USERS & MODULES) ======== */
.admin-settings-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 14px; align-items: start; }
.admin-section { min-width: 0; }
.admin-section .section-head { margin: 0 0 12px; }
.admin-section .section-head h2, .admin-section > h2 { margin: 5px 0 0; font-size: 17px; }
.admin-user-list, .module-list { border-top: 1px solid var(--line); }
.admin-user-row { min-height: 58px; display: grid; grid-template-columns: 30px minmax(95px, 1fr) minmax(125px, .8fr) 72px; align-items: center; gap: 8px; border-bottom: 1px solid #edf0eb; }
.user-initial { width: 28px; height: 28px; display: grid; place-items: center; background: #e8eee5; color: var(--forest); font: 700 11px "Manrope", sans-serif; }
.admin-user-name strong, .admin-user-name small { display: block; }
.admin-user-name strong { font-size: 10px; }
.admin-user-name small { margin-top: 3px; color: #899186; font-size: 8px; }
.user-role-select { min-height: 34px; padding: 0 6px; font-size: 9px; }
.user-status-button { min-height: 28px; border: 1px solid #d8e5d6; background: #edf4ea; color: #3f724d; font-size: 9px; cursor: pointer; }
.user-status-button.is-inactive { border-color: #e5d7d2; background: #f7eeeb; color: #9a564b; }
.admin-disclaimer, .admin-intro { margin: 12px 0 0; color: #7c867b; font-size: 9px; line-height: 1.55; }
.add-user-form { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, .8fr) auto; align-items: end; gap: 8px; margin-top: 14px; padding: 12px; background: #f5f7f3; }
.add-user-form label { display: grid; gap: 5px; color: #6c766a; font-size: 9px; }
.add-user-form .text-input { min-height: 36px; }
.add-user-form .button { min-height: 36px; padding: 0 10px; font-size: 9px; }
.module-row { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 14px; position: relative; border-bottom: 1px solid #edf0eb; cursor: pointer; }
.module-copy strong, .module-copy small { display: block; }
.module-copy strong { font-size: 10px; }
.module-copy small { margin-top: 3px; color: #858e83; font-size: 9px; }
.module-row input { position: absolute; right: 0; width: 42px; height: 25px; opacity: 0; cursor: pointer; }
.module-switch { width: 38px; height: 22px; flex: 0 0 auto; position: relative; background: #d8ded5; transition: background .15s ease; }
.module-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; transition: transform .15s ease; }
.module-row input:checked + .module-switch { background: #66866c; }
.module-row input:checked + .module-switch::after { transform: translateX(16px); }
.module-row input:focus-visible + .module-switch { outline: 2px solid #244c3b; outline-offset: 2px; }

/* ---- role matrix: modules + capabilities per role (Admin -> Roles & permissions) ---- */
.role-matrix { display: grid; gap: 14px; }
.role-matrix-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.role-matrix-tab { min-height: 32px; padding: 0 11px; border: 1px solid #d9dfd6; background: transparent; color: #596558; font-size: 9px; font-weight: 600; cursor: pointer; }
.role-matrix-tab:hover { border-color: #b9c8b6; }
.role-matrix-tab.active { border-color: var(--forest); background: var(--forest); color: white; }
.role-matrix-group > h3 { margin: 0 0 6px; color: #48594a; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.matrix-list { border-top: 1px solid var(--line); }
.matrix-global-off { color: #a2732c; font-size: 8px; font-weight: 700; text-transform: none; }
.role-matrix-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.role-matrix-foot small { color: #8b948a; font-size: 8px; }
.admin-section-wide { grid-column: 1 / -1; margin-top: 14px; }

/* ======== HELP WALKTHROUGH ======== */
.help-role-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.help-role-tab { min-height: 38px; padding: 0 13px; border: 1px solid #d9dfd6; background: transparent; color: #596558; font-size: 10px; font-weight: 600; cursor: pointer; }
.help-role-tab.active { border-color: var(--forest); background: #eaf1e7; color: var(--forest); }
.help-layout { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr); border: 1px solid var(--line); background: white; }
.help-step-list { display: grid; align-content: start; padding: 17px; border-right: 1px solid var(--line); background: #fafbf8; }
.help-step-list > .eyebrow { margin: 2px 0 11px; }
.help-step-link { min-height: 48px; display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: center; border: 0; border-bottom: 1px solid #e9ece6; background: transparent; color: #596458; text-align: left; font-size: 10px; cursor: pointer; }
.help-step-link > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d8dfd5; color: #778274; font-size: 8px; }
.help-step-link.active { color: var(--forest); font-weight: 700; }
.help-step-link.active > span { border-color: var(--forest); background: var(--forest); color: white; }
.help-step-link.complete > span { border-color: #d6e4d3; background: #eef4eb; color: #4e7052; }
.help-step-content { min-height: 340px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px clamp(20px, 5vw, 58px); }
.help-step-content > .eyebrow { margin-bottom: 12px; }
.help-step-content h2 { margin: 0 0 9px; font-size: 22px; }
.help-step-content > p { max-width: 510px; margin-bottom: 20px; color: #687367; font-size: 12px; line-height: 1.7; }
.help-step-content > .button { margin-bottom: auto; }
.help-step-controls { width: 100%; display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 15px; border-top: 1px solid #edf0eb; }
.help-step-controls .button { min-height: 39px; }
.help-step-controls .button:disabled { opacity: .45; cursor: default; }
.help-note { margin: 11px 0 0; color: #818a80; font-size: 9px; }

/* ======== TOAST ======== */
.toast-region { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { min-width: 230px; display: flex; align-items: center; gap: 9px; padding: 12px 15px; background: #263b2e; box-shadow: 0 7px 22px rgba(0,0,0,.17); color: white; font-size: 11px; animation: toast-in .18s ease-out; }
.toast > span { width: 18px; height: 18px; display: grid; place-items: center; background: #d4a765; color: #23382b; font-weight: 700; }
.toast-error { background: #7e3e36; }
.toast-error > span { background: #f1d9d3; color: #7e3e36; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }


/* ======== RESPONSIVE - max-width 1060px ======== */
@media (max-width: 1060px) {
  .sidebar { width: 210px; }
  .main-area { margin-left: 210px; }
  .page-content { padding-right: 26px; padding-left: 26px; }
  .topbar { padding: 0 26px; }
  .app-footer { margin-right: 26px; margin-left: 26px; }
  .sale-layout, .detail-layout { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr); gap: 16px; }
  .metric-grid { gap: 8px; }
  .metric { padding: 15px 13px; }
  .action-panel { align-items: flex-start; flex-direction: column; }
  .action-buttons { justify-content: flex-start; }
  .admin-settings-grid { grid-template-columns: 1fr; }
}

/* ======== RESPONSIVE - max-width 840px ======== */
@media (max-width: 840px) {
  .sidebar { width: 100%; height: auto; position: sticky; inset: 0 0 auto; padding: 0; background: #202d26; }
  .sidebar .brand, .sidebar .nav-caption, .sidebar-note, .sidebar-settings { display: none; }
  .main-nav { display: flex; gap: 0; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link { min-width: max-content; min-height: 44px; gap: 6px; padding: 0 10px; border-left: 0; border-bottom: 2px solid transparent; font-size: 10px; }
  .nav-link.active { border-bottom-color: #d4a765; }
  .nav-number { display: none; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 60px; padding: 0 15px; }
  .mobile-brand { display: flex; }
  .topbar-context { display: none; }
  .user-switch { min-width: 0; }
  .user-switch select { width: 142px; font-size: 10px; }
  .page-content { padding: 25px 16px 38px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 11px; }
  .app-footer { flex-direction: column; gap: 5px; margin: 0 16px; font-size: 9px; }
  .welcome-band { min-height: 260px; padding: 24px 20px; }
  .welcome-band h2 { max-width: 390px; font-size: 24px; }
  .welcome-band p { max-width: 310px; line-height: 1.5; }
  .welcome-stamp { position: absolute !important; right: 18px; bottom: 19px; transform: scale(.8) rotate(-7deg); transform-origin: bottom right; }
  .transaction-row { grid-template-columns: minmax(105px, .8fr) minmax(95px, 1fr) 20px; gap: 8px; padding: 10px 4px; }
  .row-customer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-amount { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; }
  .row-amount small { justify-content: flex-start; }
  .row-arrow { grid-column: 3; grid-row: 1 / 3; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 27px; }
  .metric { min-height: 112px; }
  .metric > strong { font-size: 26px; }
  .sale-layout, .detail-layout, .verify-layout, .import-layout, .export-layout, .settings-layout { grid-template-columns: 1fr; }
  .transaction-filters, .report-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 11px; }
  .filter-search { grid-column: 1 / -1; }
  .transaction-filters .clear-filters { align-self: end; }
  .filter-count { align-self: center; margin: 0 0 0 auto; }
  .report-grid { grid-template-columns: 1fr; }
  .help-layout { grid-template-columns: 1fr; }
  .help-step-list { grid-template-columns: 1fr 1fr; gap: 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .help-step-list > .eyebrow { grid-column: 1 / -1; }
  .help-step-content { min-height: 300px; padding: 23px 18px; }
  .help-role-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .help-role-tab { flex: 0 0 auto; }
  .share-panel { align-items: flex-start; flex-direction: column; }
  .share-buttons { justify-content: flex-start; }
  .share-buttons .button { flex: 1 1 auto; }
  .admin-user-row { grid-template-columns: 28px minmax(70px, 1fr) minmax(105px, .8fr) 65px; gap: 5px; }
  .add-user-form { grid-template-columns: 1fr; }
  .sale-layout { gap: 13px; padding-bottom: 94px; }
  .sale-summary { position: static; }
  .sale-summary .complete-button { display: none; }
  .mobile-sale-action { position: fixed; z-index: 9; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #dfe4dc; background: rgba(255,255,255,.97); box-shadow: 0 -8px 22px rgba(25,40,30,.08); }
  .mobile-sale-action > span { display: grid; gap: 3px; color: #778174; font-size: 9px; }
  .mobile-sale-action strong { color: var(--forest); font-size: 18px; }
  .mobile-sale-action .button { min-height: 48px; flex: 1; max-width: 230px; justify-content: space-between; padding: 0 13px; }
  .mobile-sale-action .mobile-share-action { flex: 0 0 auto; padding: 0 15px; }
  .summary-customer { margin: 12px 0; }
  .section-label { gap: 9px; }
  .section-label p { max-width: 240px; line-height: 1.45; }
  .customer-picker, .selected-customer, .helper-line { margin-left: 36px; }
  .items-section .section-label { flex-wrap: wrap; }
  .section-action { margin-left: auto; }
  .add-item-empty, .sale-items, .payment-options { width: calc(100% - 36px); margin-left: 36px; }
  .sale-item { grid-template-columns: minmax(78px, 1fr) auto auto 22px; gap: 5px; }
  .inline-quantity-control { grid-template-columns: 28px 34px 28px; }
  .inline-quantity-control input { width: 34px; }
  .sale-item-total { min-width: 50px; font-size: 10px !important; }
  .payment-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .payment-option { min-height: 52px; justify-content: flex-start; gap: 8px; padding: 0 10px; flex-direction: row; }
  .payment-symbol { width: 22px; height: 22px; font-size: 12px; }
  .cheque-reference { grid-template-columns: 1fr; gap: 6px; margin-left: 36px; }
  .customer-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .payment-history-row { grid-template-columns: 30px 1fr auto; gap: 7px; padding-right: 3px; padding-left: 3px; }
  .payment-history-row .row-arrow { display: none; }
  .photo-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .photo-button { min-height: 40px; }
  .optional-fields .mobile-camera-button { display: inline-flex; }
  .webcam-button { display: none; }
  .detail-panel, .timeline-panel { padding: 15px; }
  .timeline-panel { order: 2; }
  .action-panel { align-items: stretch; }
  .action-buttons { display: grid; grid-template-columns: 1fr; }
  .action-buttons .button { min-height: 42px; }
  .success-banner { align-items: flex-start; flex-wrap: wrap; }
  .success-banner .text-link { margin-left: 41px; }
  .receipt { padding: 22px 15px; }
  .receipt-top { gap: 8px; }
  .receipt-top h2 { font-size: 14px; }
  .receipt-label strong { font-size: 10px; }
  .receipt-meta { grid-template-columns: 1fr; gap: 10px; }
  .receipt-line { grid-template-columns: minmax(90px, 1fr) 28px 57px 64px; gap: 4px; font-size: 8px; }
  .receipt-line > :first-child { overflow-wrap: anywhere; }
  .receipt-grand strong { font-size: 17px; }
  .receipt-actions { flex-direction: column; }
  .receipt-actions .button { width: 100%; }
  .verify-search { min-height: auto; padding: 20px; }
  .verify-search h2 { font-size: 21px; }
  .verify-result-wrap { min-height: 210px; }
  .verify-empty { min-height: 200px; }
  .gate-queue-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .gate-queue-id { grid-row: 1; grid-column: 1; }
  .gate-queue-status { grid-row: 1; grid-column: 2; }
  .gate-queue-customer { grid-row: 2; grid-column: 1 / -1; }
  .gate-queue-vehicle { grid-row: 3; grid-column: 1 / -1; }
  .gate-queue-list { max-height: none; }
  .role-matrix-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .role-matrix-tab { flex: 0 0 auto; }
  .import-main, .export-form { padding: 17px; }
  .import-steps span { font-size: 7px; }
  .import-steps i { width: 19px; height: 19px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .search-compact { max-width: none; }
  .table-wrap { border-left: 0; border-right: 0; }
  table { min-width: 700px; }
  .form-pair { grid-template-columns: 1fr; }
  .modal-panel { padding: 19px; }
  .toast-region { right: 12px; bottom: 12px; left: 12px; }
  .toast { width: 100%; }
}

/* ======== PRINT ======== */
@media print {
  :root { background: white; }
  .sidebar, .topbar, .app-footer, .page-heading, .success-banner, .receipt-actions, .toast-region { display: none !important; }
  .main-area { margin: 0; }
  .page-content { width: 100%; padding: 0; }
  .receipt { width: 100%; margin: 0; border: 0; box-shadow: none; }
  body { background: white; }
}
/* ======== PUBLIC LANDING PAGE (landing.html) ======== */
.site-body { background: var(--canvas); }
.site-shell { width: min(1160px, 100%); margin: 0 auto; padding: 0 26px; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(245,245,240,.94); backdrop-filter: blur(8px); }
.site-header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.site-brand { display: flex; align-items: center; gap: 11px; }
.site-brand strong { display: block; font-size: 12px; }
.site-brand small { display: block; margin-top: 2px; color: #7f887e; font-size: 9px; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a { color: #4d584d; font-size: 12px; font-weight: 600; }
.site-nav a:hover { color: var(--forest); }
.site-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid var(--forest); background: var(--forest); color: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.site-button:hover { background: var(--forest-dark); }
.site-button-quiet { border-color: #cfd6cc; background: transparent; color: var(--forest); }
.site-button-quiet:hover { background: #eef3ec; }
.site-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .85fr); align-items: center; gap: 44px; padding: 72px 0 64px; }
.site-eyebrow { display: block; margin-bottom: 16px; color: #7c857a; font-size: 10px; font-weight: 700; }
.site-hero h1 { margin: 0 0 17px; font-size: clamp(30px, 4vw, 46px); line-height: 1.14; }
.site-hero h1 span { color: var(--gold); }
.site-lead { max-width: 62ch; margin: 0 0 25px; color: #5c665c; font-size: 15px; line-height: 1.72; }
.site-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.site-note { margin: 17px 0 0; color: #838c82; font-size: 11px; line-height: 1.65; }
.site-card { padding: 22px; border: 1px solid var(--line); background: white; box-shadow: 0 18px 50px rgba(32,40,35,.07); }
.site-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.site-card-head strong { font-size: 13px; }
.site-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #edf0eb; font-size: 11px; }
.site-card-row span { color: #747d74; }
.site-card-total { display: flex; justify-content: space-between; padding-top: 14px; color: var(--forest); font: 700 14px Manrope, sans-serif; }
.site-anchor-target { scroll-margin-top: 84px; }.site-section { padding: 60px 0; border-top: 1px solid var(--line); }
.site-section-head { max-width: 68ch; margin-bottom: 30px; }
.site-section-head h2 { margin: 9px 0 11px; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.22; }
.site-section-head p { margin: 0; color: #5f695f; font-size: 14px; line-height: 1.72; }
.site-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.site-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.site-tile { padding: 22px; border: 1px solid var(--line); background: white; }
.site-glyph { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; margin-bottom: 14px; background: #eaf1e7; color: var(--forest); font: 700 11px Manrope, sans-serif; }
.site-tile h3 { margin: 0 0 8px; font-size: 15px; }
.site-tile p { margin: 0; color: #667066; font-size: 12px; line-height: 1.68; }
.site-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.site-step { padding: 22px; border-top: 2px solid var(--forest); background: white; }
.site-step b { display: block; margin-bottom: 10px; color: var(--gold); font: 700 11px Manrope, sans-serif; }
.site-step h3 { margin: 0 0 7px; font-size: 14px; }
.site-step p { margin: 0; color: #667066; font-size: 12px; line-height: 1.68; }
.site-role { display: flex; gap: 14px; padding: 19px; border: 1px solid var(--line); background: white; }
.site-role .site-glyph { margin: 0; }
.site-role strong { display: block; margin-bottom: 6px; font-size: 13px; }
.site-role p { margin: 0; color: #667066; font-size: 11px; line-height: 1.65; }
.site-split section { padding: 24px; border: 1px solid var(--line); background: white; }
.site-split h3 { margin: 0 0 14px; font-size: 15px; }
.site-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.site-list li { position: relative; padding-left: 21px; color: #5f695f; font-size: 12px; line-height: 1.65; }
.site-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: #b6bfb5; }
.site-list.is-yes li::before { background: #6d9a76; }
.site-list.is-no li::before { background: #c69a92; }
.site-faq { border-top: 1px solid var(--line); }
.site-faq details { border-bottom: 1px solid var(--line); }
.site-faq summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #2b352d; font: 600 13px Manrope, sans-serif; cursor: pointer; list-style: none; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; color: #8d968c; font-size: 15px; }
.site-faq details[open] summary::after { content: "\2212"; }
.site-faq summary:hover { color: var(--forest); }
.site-faq p { max-width: 80ch; margin: 0 0 19px; color: #5f695f; font-size: 12px; line-height: 1.72; }
.site-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin: 60px 0; padding: 34px; background: #31533f; color: #f7f4ec; }
.site-cta h2 { margin: 0 0 9px; font-size: clamp(20px, 2.4vw, 28px); }
.site-cta p { margin: 0; color: #cdd8cc; font-size: 12px; line-height: 1.7; }
.site-cta .site-button { border-color: #e6c38c; background: #e6c38c; color: #21352a; }
.site-cta .site-button:hover { background: #f2dcb5; }
.site-footer { padding: 30px 0 42px; border-top: 1px solid var(--line); color: #7c857a; font-size: 11px; }
.site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
.site-footer strong { color: #3c463d; }
.site-footer a { color: var(--forest); font-weight: 700; }
.site-noscript { margin: 0; padding: 18px 0; }.site-modal-scrim { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(20,31,24,.55); }
.site-modal-scrim[hidden] { display: none; }
.site-modal { width: min(100%, 620px); max-height: min(680px, 92vh); overflow: auto; padding: 26px; background: white; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.site-modal h2 { margin: 6px 0 0; font-size: 21px; }
.site-modal > p { margin: 13px 0 20px; color: #667066; font-size: 12px; line-height: 1.7; }
.site-roles { display: grid; gap: 9px; }
.site-role-choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border: 1px solid #e0e5dc; background: white; }
.site-role-choice:hover { border-color: var(--forest); background: #f6f9f4; }
.site-role-choice:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.site-role-choice strong, .site-role-choice small { display: block; }
.site-role-choice strong { font-size: 13px; }
.site-role-choice small { margin-top: 4px; color: #788176; font-size: 11px; line-height: 1.5; }
.site-role-choice > span:last-child { flex: 0 0 auto; color: var(--forest); font-size: 12px; font-weight: 700; }
.site-modal .site-note { margin-top: 16px; }
@media (max-width: 980px) {
  .site-hero { grid-template-columns: 1fr; gap: 30px; padding: 44px 0 38px; }
  .site-grid-3, .site-grid-2, .site-steps, .site-split { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .site-section { padding: 42px 0; }
  .site-cta { padding: 26px; margin: 40px 0; }
  .site-modal { padding: 20px; }
}