.receipt-panel { margin: 26px 0 40px; color: #30372c; scroll-margin-top: 90px; }
.receipt-panel *, .receipt-viewer-backdrop *, .receipt-panel *::before, .receipt-panel *::after { box-sizing: border-box; }
.receipt-panel h1 { margin: 5px 0 12px; font-size: clamp(29px, 5vw, 39px); line-height: 1.15; letter-spacing: -.025em; }
.receipt-panel h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.3; }
.receipt-panel p { line-height: 1.55; }
.receipt-panel .eyebrow { margin: 0; color: #75602c; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.receipt-heading > p:last-child { color: #6b735f; margin: 8px 0 0; font-size: 15px; }
.receipt-heading { margin-bottom: 24px; }
.receipt-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 11px 18px; border: 1px solid #cdd0c5; border-radius: 11px; background: #fff; color: #30372c; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; text-align: center; text-decoration: none; touch-action: manipulation; }
.receipt-button:hover { background: #f6f4ec; border-color: #8d9482; }
.receipt-button.receipt-primary { background: #ffb117; border-color: #ed9e04; color: #272910; }
.receipt-button.receipt-primary:hover { background: #f8a900; }
.receipt-button:disabled { opacity: .55; cursor: wait; }
.receipt-button:focus-visible, .receipt-panel input:focus-visible, .receipt-panel select:focus-visible, .receipt-panel textarea:focus-visible, .receipt-payment:focus-visible, .receipt-record:focus-visible, .receipt-photo-preview:focus-visible { outline: 3px solid #ad6e00; outline-offset: 3px; }
.receipt-list-heading, .receipt-page-heading, .receipt-results-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.receipt-list-heading { align-items: flex-start; margin-bottom: 22px; }
.receipt-list-heading .receipt-heading { margin: 0; }
.receipt-list-heading > .receipt-button { min-height: 56px; min-width: 185px; flex-shrink: 0; }
.receipt-page-heading { margin-bottom: 24px; }
.receipt-page-heading > .receipt-button { padding-inline: 12px; }
.receipt-draft-note { color: #70785f; font-size: 12px; text-align: right; }
.receipt-section { border: 1px solid #d9ddcf; border-radius: 16px; padding: 25px; margin-bottom: 18px; background: #fff; }
.receipt-hint { font-size: 14px; color: #6b735f; margin: 0 0 20px; }
.receipt-camera-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.receipt-camera-actions > .receipt-button { min-height: 66px; font-size: 17px; }
.receipt-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 22px; }
.receipt-photo-card { min-width: 0; border: 1px solid #dce2d0; border-radius: 12px; overflow: hidden; background: #f9fbf5; }
.receipt-photo-preview { display: block; width: 100%; padding: 0; border: 0; background: #edf1e6; color: #5c684c; font: inherit; cursor: zoom-in; }
.receipt-photo-preview > img { display: block; width: 100%; height: 240px; object-fit: contain; background: #e8ecdf; }
.receipt-photo-preview > span { display: block; padding: 11px; font-size: 12px; text-align: left; }
.receipt-photo-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 10px 10px; }
.receipt-photo-actions small { color: #768267; font-size: 11px; }
.receipt-photo-actions .receipt-remove { color: #9d3c22; border-color: #e5d0c8; font-size: 12px; min-height: 44px; padding: 8px 12px; }
.receipt-photo-check { margin: 17px 0 0; }
.receipt-payment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.receipt-payment { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 110px; padding: 20px; border: 2px solid #d9dfcf; border-radius: 13px; background: #fbfcf8; color: #3c4730; font: inherit; text-align: left; cursor: pointer; }
.receipt-payment strong { font-size: 19px; }
.receipt-payment > span { font-size: 13px; color: #6f7b5e; line-height: 1.4; }
.receipt-payment.selected { border-color: #e9ac25; background: #fff3d1; }
.receipt-payment.selected strong::after { content: " ✓"; color: #7e600e; }
.receipt-work-area { border: 0; min-width: 0; padding: 0; margin: 0; }
.receipt-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 0 19px; font-size: 14px; font-weight: 750; }
.receipt-field > span { line-height: 1.4; }
.receipt-panel input, .receipt-panel select, .receipt-panel textarea { display: block; width: 100%; min-width: 0; min-height: 50px; border: 1px solid #c9cdbf; border-radius: 9px; padding: 12px 13px; background: #fff; color: #30372c; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.35; }
.receipt-panel input[hidden] { display: none; }
.receipt-panel input[readonly] { background: #f1f4e9; color: #5d6850; }
.receipt-panel textarea { resize: vertical; }
.receipt-panel input::placeholder, .receipt-panel textarea::placeholder { color: #7c8274; }
.receipt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; }
.receipt-section > .receipt-field:last-child { margin-bottom: 0; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.receipt-submit-area { border: 1px solid #e4d69f; border-radius: 15px; padding: 22px; background: #fff7df; margin-top: 22px; }
.receipt-submit-area > .receipt-button { width: 100%; min-height: 58px; font-size: 18px; }
.receipt-submit-area p { color: #7e7354; text-align: center; font-size: 12px; margin: 12px 0 0; }
.receipt-processing { padding: 20px; border: 1px solid #d8e1c9; border-radius: 12px; background: #f7fbef; color: #596b40; text-align: center; font-size: 15px; font-weight: 700; }
.receipt-upload { display: flex; flex-direction: column; gap: 12px; padding: 23px; border: 1px solid #e5d09a; border-radius: 13px; background: #fff7e1; color: #735b21; }
.receipt-upload > strong { font-size: 18px; }
.receipt-upload > span { font-size: 13px; }
.receipt-upload progress { display: block; width: 100%; height: 15px; border: 0; border-radius: 20px; overflow: hidden; accent-color: #e7a214; }
.receipt-upload progress::-webkit-progress-bar { background: #ebdfbf; border-radius: 20px; }
.receipt-upload progress::-webkit-progress-value { background: #e7a214; border-radius: 20px; }
.receipt-error, .receipt-warning, .receipt-success { padding: 17px 19px; border: 1px solid #e5c5b7; border-radius: 12px; background: #fff3ee; color: #8b381d; margin: 14px 0 20px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.receipt-warning { border-color: #e8d39e; background: #fff8e7; color: #805e20; }
.receipt-warning p { margin: 0 0 12px; }
.receipt-success { border-color: #cbdcbe; background: #f0f8e9; color: #496334; font-weight: 700; }
.receipt-filters { border: 1px solid #dce2d2; background: #f8faf3; border-radius: 15px; padding: 22px; margin: 25px 0; }
.receipt-filters h2 { font-size: 20px; margin-bottom: 20px; }
.receipt-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.receipt-filter-grid .receipt-field { font-size: 12px; }
.receipt-filter-grid select, .receipt-filter-grid input { font-size: 14px; padding-inline: 10px; }
.receipt-results-heading { margin: 20px 0; font-size: 14px; }
.receipt-results-heading > strong { color: #69735b; font-size: 13px; }
.receipt-results-heading .receipt-button { padding-inline: 13px; }
.receipt-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.receipt-record { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border: 1px solid #d9dfce; border-radius: 14px; background: #fff; color: #39442f; font: inherit; text-align: left; cursor: pointer; }
.receipt-record:hover { border-color: #b88721; box-shadow: 0 3px 14px #222b1110; }
.receipt-record:disabled { opacity: .6; cursor: wait; }
.receipt-record-top, .receipt-record-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.receipt-record-top > span:last-child { font-size: 12px; color: #7b846f; white-space: nowrap; }
.receipt-payment-badge { display: inline-block; width: fit-content; padding: 6px 10px; border-radius: 20px; background: #eef3e6; color: #62754b; font-size: 11px; font-weight: 800; }
.receipt-payment-badge.reimbursement { color: #8b6320; background: #fff0cc; }
.receipt-record-name { display: block; font-size: 22px; overflow-wrap: anywhere; }
.receipt-record-employee { color: #6e7c5f; font-size: 14px; }
.receipt-record-bottom { padding-top: 13px; border-top: 1px solid #e6ebde; font-size: 12px; color: #7c886d; }
.receipt-record-bottom > strong { font-size: 18px; color: #39442f; }
.receipt-empty { grid-column: 1 / -1; padding: 32px 20px; text-align: center; border: 1px dashed #d3dac7; border-radius: 13px; background: #fafcf6; color: #6c795d; }
.receipt-empty h2 { font-size: 22px; }
.receipt-empty p { font-size: 14px; margin-bottom: 0; }
.receipt-load-more { display: flex; width: 100%; margin-top: 22px; }
.receipt-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 20px; padding-bottom: 25px; margin-bottom: 22px; border-bottom: 1px solid #e1e7d6; }
.receipt-detail-facts > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.receipt-detail-facts > div > span { font-size: 12px; color: #77846a; }
.receipt-detail-facts > div > strong { font-size: 19px; overflow-wrap: anywhere; }
.receipt-detail-facts .receipt-payment-badge { font-size: 14px; }
.receipt-detail-notes { margin: 0 0 25px; font-size: 14px; }
.receipt-detail-notes p { white-space: pre-wrap; overflow-wrap: anywhere; }
.receipt-download { display: flex; margin: 0 11px 11px; font-size: 13px; }
.receipt-viewer-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: center; padding: 18px; background: #18230deb; }
.receipt-viewer { display: flex; flex-direction: column; width: min(1100px, 100%); max-height: calc(100dvh - 36px); min-height: 200px; background: #f7faf1; border: 1px solid #9fae8c; border-radius: 14px; overflow: hidden; }
.receipt-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 17px; background: #fff; color: #39462c; border-bottom: 1px solid #dce4d1; }
.receipt-viewer-bar > strong { font-size: 15px; }
.receipt-viewer-bar > .receipt-button { min-height: 44px; font-size: 13px; }
.receipt-viewer-tools { display: flex; align-items: center; gap: 13px; padding: 10px 12px; background: #f7faf1; color: #677658; }
.receipt-viewer-tools > .receipt-button { min-height: 44px; font-size: 13px; padding: 8px 14px; }
.receipt-viewer-tools > span { font-size: 12px; }
.receipt-viewer-image { overflow: auto; text-align: center; background: #dce3d1; }
.receipt-viewer-image > img { display: block; width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.receipt-photo-download { flex-shrink: 0; margin: 12px; }
@media (max-width: 850px) {
    .receipt-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .receipt-panel { margin-top: 22px; }
    .receipt-list-heading { flex-direction: column; gap: 19px; }
    .receipt-list-heading > .receipt-button { width: 100%; }
    .receipt-page-heading { gap: 9px; }
    .receipt-page-heading > .receipt-button { font-size: 13px; }
    .receipt-draft-note { max-width: 100px; }
    .receipt-section { padding: 21px 15px; }
    .receipt-section h2 { font-size: 21px; }
    .receipt-camera-actions { gap: 9px; }
    .receipt-camera-actions > .receipt-button { padding-inline: 9px; font-size: 15px; }
    .receipt-payment-options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .receipt-payment { min-height: 92px; padding: 17px; }
    .receipt-payment strong { font-size: 18px; }
    .receipt-form-grid, .receipt-records { grid-template-columns: minmax(0, 1fr); }
    .receipt-photo-grid { gap: 10px; }
    .receipt-photo-preview > img { height: 200px; }
    .receipt-photo-preview > span { font-size: 10px; padding: 9px; }
    .receipt-photo-actions { flex-direction: column; align-items: stretch; gap: 5px; padding: 0 8px 8px; }
    .receipt-photo-actions small { text-align: center; }
    .receipt-photo-actions .receipt-remove { font-size: 11px; }
    .receipt-submit-area { padding: 18px 14px; }
    .receipt-filters { padding: 20px 14px; }
    .receipt-filter-grid { gap: 0 10px; }
    .receipt-filter-grid select, .receipt-filter-grid input { font-size: 14px; padding-inline: 8px; }
    .receipt-filters .receipt-actions > .receipt-button { flex: 1; min-width: 0; font-size: 13px; padding-inline: 10px; }
    .receipt-detail-facts { gap: 24px 14px; }
    .receipt-detail-facts > div > strong { font-size: 17px; }
    .receipt-detail-facts .receipt-payment-badge { font-size: 12px; }
    .receipt-download { font-size: 11px; padding: 9px; margin-inline: 8px; }
    .receipt-viewer-backdrop { padding: 8px; }
    .receipt-viewer { max-height: calc(100dvh - 16px); border-radius: 10px; }
    .receipt-viewer-bar { padding: 10px; }
    .receipt-viewer-bar > strong { font-size: 13px; }
    .receipt-viewer-bar > .receipt-button { padding-inline: 10px; }
}
.receipt-shared-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 22px; border: 1px solid #d6ddce; border-radius: 14px; background: #f7f9f4; margin-bottom: 20px; }
.receipt-shared-status h2 { font-size: 19px; margin: 0 0 12px; }
.receipt-shared-status .receipt-hint { margin: 9px 0 0; max-width: 580px; }
.receipt-shared-status > .receipt-warning { flex-basis: 100%; margin: 0; }
.receipt-handling-badge { display: inline-block; width: fit-content; font-size: 12px; font-weight: 750; line-height: 1.4; padding: 6px 10px; border-radius: 7px; }
.receipt-handling-badge.unhandled { color: #991b1b; background: #fee2e2; border: 1px solid #f2a6a6; }
.receipt-handling-badge.handled { color: #285334; background: #e6f2e7; border: 1px solid #bdd6c1; }
.receipt-handling-filters { margin: 18px 0; }
.receipt-status-filter[aria-pressed="true"] { background: #3f4a35; border-color: #3f4a35; color: #fff; }

.receipt-device-state{display:flex;align-items:center;justify-content:space-between;gap:17px;flex-wrap:wrap;background:#fff2cf;border:1px solid #e4c784;color:#684b17;border-radius:11px;padding:17px;margin:17px 0;font-size:16px;line-height:1.5}.receipt-job-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.receipt-job-facts dt{font-size:15px;color:#60734f;margin-bottom:6px}.receipt-job-facts dd{margin:0;font-size:17px;font-weight:650;overflow-wrap:anywhere}.receipt-button{min-height:50px}.receipt-payment.selected{background:#ffedbb;border-color:#d89b12;color:#4d360c}
@media(max-width:650px){.receipt-button{font-size:16px;min-height:50px}.receipt-field>span{font-size:15px}.receipt-device-state>.receipt-button{width:100%}.receipt-job-facts{grid-template-columns:minmax(0,1fr)}}