:root {
    color-scheme: dark;
    --bg: #0c121c;
    --surface: #131d2b;
    --border: #2b3a4e;
    --text: #e5edf8;
    --muted: #a1afc3;
    --accent: #95baff;
    --action: #356be0;
    --action-hover: #295bc7;
    --action-active: #244fa9;
    --button-surface: #1c2a3e;
    --button-hover: #25364d;
    --button-border: #3c506c;
    --sans: 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.app-shell { max-width: 1280px; margin: auto; padding: 28px 32px 72px; }
.view-navigation { margin: 24px 0 8px; }
.view-navigation .back-link { display: inline-block; padding: 8px 0; color: var(--accent); }
.detail-title { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
#detail-panel:focus { outline: none; }
.live-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; font-size: .84rem; }
.top-bar, .session-controls, .page-heading, .actions, .panel-heading, .supplier-heading { display: flex; align-items: center; gap: 12px; }
.top-bar { min-height: 44px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.session-controls { margin-left: auto; }
.back-link { font-size: .82rem; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--accent); }
.user-chip { max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sans); font-size: .8rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; }
.page-heading { justify-content: space-between; margin: 32px 0 28px; }
h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.025em; }
h2 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 600; }
h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 600; }
p { margin: 8px 0; }
.eyebrow { font-family: var(--mono); font-size: .68rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 8px; }
.page-description, .help-text, .muted, .panel > p, form > p { color: var(--muted); font-size: .86rem; }
.section-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; background: var(--bg); }
.section-nav button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 13px 18px; white-space: nowrap; border-bottom: 2px solid transparent; }
.section-nav button[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); background: #182840; }
button, input, textarea, select { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
button { cursor: pointer; min-height: 38px; font-size: .84rem; font-weight: 500; transition: border-color .15s, background .15s; }
button:where(:not(:disabled)):hover { border-color: #48607f; background: var(--button-hover); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary-button { background: var(--action); border-color: var(--action); color: #ffffff; font-weight: 600; }
.primary-button:where(:not(:disabled)):hover { background: var(--action-hover); border-color: var(--action-hover); }
.primary-button:where(:not(:disabled)):active { background: var(--action-active); border-color: var(--action-active); }
.quiet-button { background: transparent; border-color: transparent; color: var(--muted); }
.quiet-button:where(:not(:disabled)):hover { background: var(--button-surface); border-color: transparent; color: var(--text); }
.danger-button { color: #fda4af; border-color: #683e4a; background: #281b29; }
.danger-button.quiet-button { border-color: transparent; background: transparent; }
.danger-button:where(:not(:disabled)):hover { color: #fecdd3; border-color: #9f4653; background: #34202b; }
.secondary-button { background: var(--button-surface); border-color: var(--button-border); color: var(--text); }
.primary-button:is(a) { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border: 1px solid var(--action); border-radius: 6px; text-decoration: none; }
.task-section { min-width: 0; margin: 20px 0; padding: 18px; border: 1px solid var(--button-border); border-radius: 8px; background: var(--bg); }
.task-section > h3 { margin: 0 0 12px; font-size: 1rem; }
.task-section > legend { padding: 0 8px; color: var(--text); font: 600 1rem var(--sans); }
.task-section > label:first-of-type { margin-top: 0; }
.task-section .form-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.danger-section { border-color: #683e4a; }
.supplier-lookup { margin-top: 12px; }
#accounts-list table { min-width: 0; table-layout: fixed; }
#accounts-list td { overflow-wrap: anywhere; }
#accounts-list .actions { gap: 6px; }
#accounts-list .actions > button { flex: 1 1 110px; min-width: 0; max-width: 100%; white-space: normal; }
#account-connect-panel { scroll-margin-top: 80px; }
.secondary-button:where(:not(:disabled)):hover { background: var(--button-hover); border-color: #48607f; }
button:focus-visible { outline-color: #93c5fd; }
.compact-button { min-height: 32px; padding: 6px 10px; font-size: .8rem; }
.add-button { width: 100%; border-style: dashed; color: var(--accent); background: transparent; padding: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel { margin: 22px 0; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; scroll-margin-top: 72px; }
.panel-heading { justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
.panel-heading h2 { margin: 0; }
.panel-heading > div { min-width: 0; max-width: 100%; }
.detail-title, .drawer-heading h2 { overflow-wrap: anywhere; }
.drawer-heading h2 { min-width: 0; }
.drawer-heading > button { flex-shrink: 0; }
.panel-heading p { color: var(--muted); font-size: .8rem; }
.record-count { font: .72rem var(--mono); color: var(--muted); background: var(--bg); padding: 3px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
label { display: grid; gap: 7px; margin: 14px 0; font-size: .8rem; color: var(--muted); }
input, textarea, select { width: 100%; min-width: 0; color: var(--text); font-size: .9rem; }
input, select { min-height: 42px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--button-border); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--accent); outline-width: 1px; outline-offset: 2px; }
input[readonly] { color: var(--accent); background: var(--surface); }
textarea { min-height: 88px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.actions { flex-wrap: wrap; gap: 8px; }
fieldset { min-width: 0; margin: 16px 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; }
legend { font-size: .8rem; padding: 0 8px; }
.editor-panel { border-color: var(--button-border); border-top: 3px solid var(--accent); }
.editor-panel > .detail-title { margin-bottom: 20px; }
.editor-panel .form-grid { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.request-entry-table { margin: 16px 0 10px; border-color: var(--button-border); }
.request-entry-table table { min-width: 780px; table-layout: fixed; }
.request-entry-table th:first-child { width: 200px; }
.request-entry-table th:nth-child(2) { width: 32%; }
.request-entry-table th:last-child { width: 144px; }
.request-entry-table th, .request-entry-table td { padding: 12px 10px; vertical-align: top; }
.request-entry-table label { margin: 0; gap: 0; }
.request-entry-table .supplier-custom { margin-top: 8px; }
.request-entry-table .supplier-custom[hidden] { display: none; }
.request-entry-table textarea { min-height: 42px; height: 42px; }
.request-entry-table button { min-height: 42px; white-space: nowrap; }
.supplier-card { border: 0; border-radius: 0; margin-top: 20px; min-width: 0; }
.supplier-heading { justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.supplier-heading h3 { margin: 0; font: 600 .95rem var(--mono); }
.purchase-flow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.request-side, .response-side { padding: 20px; min-width: 0; }
.response-side { border-left: 1px solid var(--border); background: rgba(149, 186, 255, .025); }
.flow-label { font: .68rem var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.requested-entry { border-bottom: 1px solid var(--border); padding: 16px 0; }
.requested-entry:first-of-type { padding-top: 0; }
.requested-entry:last-child { border-bottom: 0; }
.entry-title { font-weight: 500; margin: 0 0 8px; overflow-wrap: anywhere; }
.entry-metadata { font: .72rem var(--mono); color: var(--muted); margin: 10px 0; }
.shipment-tracking { overflow-wrap: anywhere; }
.reference-link { display: inline-block; max-width: 100%; font-size: .83rem; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: 3px; }
.instructions { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.order-response { border: 1px solid var(--button-border); border-radius: 10px; margin: 14px 0; min-width: 0; overflow: hidden; }
.purchase-record, .purchase-status, .purchase-receipt { padding: 16px 20px; }
.purchase-status, .purchase-receipt { border-top: 1px solid var(--border); }
.purchase-status { background: var(--bg); border-left: 2px solid var(--accent); }
.order-response h4 { margin: 0 0 12px; color: var(--muted); font: 500 .75rem var(--mono); }
.order-response p { margin: 8px 0; overflow-wrap: anywhere; }
.provider-status { font-weight: 600; color: var(--text); }
.unread-dot { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #facc15; vertical-align: middle; }
.unread-dot[hidden] { display: none; }
.purchase-status .error { color: #fda4af; border-left: 2px solid currentColor; padding-left: 10px; font-size: .86rem; }
.order-number { font: 600 1rem var(--mono); color: var(--text); overflow-wrap: anywhere; }
.order-response .status-badge { margin-bottom: 8px; }
.receipt-form { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 6px; }
.receipt-form label { font-size: .75rem; }
.receipt-form button { width: 100%; }
.status-badge { --status: #94A3B8; display: inline-flex; align-items: center; border: 1px solid var(--status); border-radius: 99px; padding: 5px 10px; font: 600 .7rem var(--sans); white-space: nowrap; color: var(--status-ink, var(--bg)); background: var(--status); }
.status-submitted { --status: #FACC15; }
.status-pending_purchase { --status: #3B82F6; }
.status-clarification, .status-delayed, .status-receipt_issue, .status-issue_open, .status-issue_delivery_pending { --status: #F59E0B; }
.status-rejected { --status: #EF4444; }
.status-cancelled, .status-voided { --status: #64748B; --status-ink: #ffffff; }
.status-partially_purchased { --status: #F97316; }
.status-purchased, .status-processing { --status: #A855F7; }
.status-partially_received, .status-shipped { --status: #06B6D4; }
.status-received, .status-issue_resolved { --status: #22C55E; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font: 600 .7rem var(--sans); text-transform: uppercase; letter-spacing: .045em; background: var(--bg); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #19263a; }
td:last-child { text-align: right; }
td button { white-space: nowrap; }
.empty-state { padding: 32px 20px; text-align: center; background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); font-size: .86rem; }
.empty-state button { margin-top: 12px; }
.pending-response { color: var(--muted); font-size: .85rem; padding: 12px 0; }
.review-note { border-left: 3px solid #fcd34d; padding: 10px 14px; background: var(--bg); white-space: pre-wrap; }
.message-thread { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.message-thread .panel-heading { margin-bottom: 8px; }
.message-list { list-style: none; padding: 0; margin: 16px 0; max-height: 420px; overflow-y: auto; }
.request-message { width: fit-content; max-width: 92%; padding: 14px 16px; margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.message-mine { margin-left: auto; border-right: 2px solid var(--accent); background: #1a2c45; }
.message-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .73rem; }
.message-meta strong { color: var(--text); font-weight: 500; }
.message-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.message-compose textarea { min-height: 76px; }
.table-link { min-height: 32px; padding: 0 4px; border: 0; border-radius: 3px; background: transparent; color: var(--accent); font-size: inherit; text-align: left; text-decoration: none; text-underline-offset: 3px; }
.table-link:hover { background: transparent; color: var(--text); text-decoration: underline; }
.pending-table { margin-top: 20px; }
.pending-table table { min-width: 800px; table-layout: fixed; }
.pending-table th:first-child { width: 90px; }
.pending-table thead th:nth-child(4) { width: 170px; }
.pending-table th:last-child { width: 190px; }
.pending-table td { overflow-wrap: anywhere; }
.pending-table td:nth-child(2) { font-weight: 500; }
.pending-table td:nth-child(3), .pending-table td:nth-child(4) { color: var(--muted); }
.pending-table .request-day-separator th { width: auto; padding: 12px 16px; background: var(--button-surface); font: 600 .86rem var(--sans); text-transform: none; letter-spacing: 0; }
.request-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-day-heading .record-count { white-space: nowrap; }
.pending-table td:last-child { text-align: left; }
.tracking-day { margin-top: 26px; }
.tracking-day > .panel-heading { margin-bottom: 10px; }
.tracking-day > .panel-heading h2 { font-size: 1rem; }
.tracking-table table { min-width: 1080px; table-layout: fixed; }
.tracking-table th:nth-child(1) { width: 11%; }
.tracking-table th:nth-child(2) { width: 12%; }
.tracking-table th:nth-child(3) { width: 21%; }
.tracking-table th:nth-child(4) { width: 11%; }
.tracking-table th:nth-child(5) { width: 10%; }
.tracking-table th:nth-child(6) { width: 14%; }
.tracking-table th:nth-child(7) { width: 13%; }
.tracking-table th:nth-child(8) { width: 8%; }
.tracking-table th, .tracking-table td { padding: 12px 14px; }
.tracking-table td { vertical-align: top; overflow-wrap: anywhere; }
.tracking-table .order-start:not(:first-child) td { border-top: 2px solid var(--border); }
.tracking-table .order-reference { font-family: var(--mono); white-space: normal; min-width: 90px; overflow-wrap: anywhere; }
.tracking-product { min-width: 0; overflow-wrap: anywhere; }
.tracking-product > a, .tracking-product > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tracking-reference { min-width: 140px; max-width: 220px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tracking-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.receipt-indicator { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 150px; }
.issue-section { margin: 24px 0; }
.issue-panel { border-top: 1px solid var(--border); padding: 14px 0; }
.issue-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; }
.issue-panel > summary::before { content: '▸'; color: var(--muted); }
.issue-panel[open] > summary::before { content: '▾'; }
.issue-form { display: grid; gap: 8px; max-width: 640px; margin: 16px 0; }
.issue-form .issue-pending { display: flex; align-items: center; gap: 10px; }
.issue-form .issue-pending input { width: auto; min-height: auto; margin: 0; }
.issue-panel .history { padding-left: 20px; }
.issue-panel .history li { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.status-issue_managed { --status: #F59E0B; }
.tracking-voided { color: var(--muted); }
.product-list { padding: 0; }
.request-detail-table { margin-top: 20px; }
.request-detail-table table { table-layout: fixed; min-width: 600px; }
.request-detail-table th:first-child { width: 3.5rem; }
.request-detail-table th:nth-child(2) { width: 14%; }
.request-detail-table th:nth-child(3) { width: 24%; }
.request-detail-table th:nth-child(4) { width: 26%; }
.request-detail-table th:last-child, .request-detail-table td:last-child { text-align: left; }
.line-purchases .order-references { margin: 8px 0; font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
.line-purchases .entry-metadata { margin: 8px 0; }
.request-detail-table .request-line-index { color: var(--muted); font-family: var(--mono); }
.request-detail-table td { text-align: left; overflow-wrap: anywhere; white-space: normal; vertical-align: top; }
.request-detail-table .instructions { margin: 0; white-space: pre-wrap; }
.request-detail-table .actions { margin-top: 8px; }
.additional-order-reference { display: flex; align-items: end; gap: 12px; margin: 12px 0; }
.additional-order-reference label { flex: 1; min-width: 0; margin: 0; }
.additional-order-reference button { flex: none; margin-bottom: 2px; }
.product-list .requested-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; }
.entry-content { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; min-width: 0; }
.product-title-link { justify-self: start; max-width: 100%; color: var(--accent); text-decoration: none; }
.product-title-link::after { content: ' ↗'; font-size: .8em; }
.product-title-link:hover { text-decoration: underline; }
.entry-index { grid-row: 1 / span 2; font: .72rem var(--mono); color: var(--muted); }
.product-list .entry-title { font-size: .9rem; font-weight: 500; margin: 0; }
.entry-content .instructions { grid-column: 2 / -1; margin: 0; font-size: .82rem; color: var(--muted); }
.entry-content .instructions:empty { display: none; }
.requested-entry > .actions button { padding: 6px 10px; font-size: .76rem; }
.product-list .entry-metadata { font-family: var(--sans); }
.product-list .status-badge { margin: 8px 0 12px; }
body:has(#purchase-panel[open]), body:has(#accounts-dialog[open]), body:has(#account-editor-dialog[open]), body:has(#components-dialog[open]), body:has(#purchase-details-dialog[open]) { overflow: hidden; }
.purchase-dialog { margin: auto; width: min(620px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); overflow-y: auto; scrollbar-gutter: stable; box-shadow: 0 20px 70px #0006; }
.purchase-dialog::backdrop { background: rgba(0, 0, 0, .65); }
#components-dialog, #purchase-details-dialog { width: min(1120px, calc(100% - 48px)); max-width: none; max-height: min(88dvh, 960px); padding: 0; overflow: hidden; scrollbar-gutter: auto; }
#components-dialog[open], #purchase-details-dialog[open] { display: flex; flex-direction: column; }
#components-dialog .drawer-heading, #purchase-details-dialog .drawer-heading { position: static; flex: none; margin: 0; padding: 20px 24px; gap: 16px; }
#components-dialog .drawer-heading h2, #purchase-details-dialog .drawer-heading h2 { min-width: 0; overflow-wrap: anywhere; }
#components-dialog .drawer-heading button, #purchase-details-dialog .drawer-heading button { flex: none; min-height: 44px; }
#components-dialog .components-body, #purchase-details-dialog .components-body { min-height: 0; padding: 16px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
#purchase-details-dialog { width: min(1000px, calc(100% - 48px)); }
#purchase-details-order { margin: 8px 0 20px; }
#purchase-details-content .order-response { margin: 0; }
#components-help { margin: 0 0 10px; color: var(--muted); font-size: .82rem; }
#components-status { margin: 0 0 16px; font-size: .86rem; }
#components-content .table-wrap { overflow: visible; }
#components-content table { width: 100%; min-width: 0; table-layout: fixed; }
#components-content th:nth-child(1) { width: 26%; }
#components-content th:nth-child(2) { width: 12%; }
#components-content th:nth-child(3) { width: 24%; }
#components-content th:nth-child(4) { width: 38%; }
#components-content th, #components-content td { padding: 16px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; text-align: left; }
#components-content td { font-size: .88rem; }
#components-content td:nth-child(1), #components-content td:nth-child(3) { font-family: var(--mono); font-size: .82rem; }
#components-content td:nth-child(2) { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    #components-dialog, #purchase-details-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
    #components-dialog .drawer-heading, #purchase-details-dialog .drawer-heading { padding: 14px 16px; }
    #components-dialog .drawer-heading h2, #purchase-details-dialog .drawer-heading h2 { font-size: 1rem; }
    #components-dialog .components-body, #purchase-details-dialog .components-body { padding: 14px 16px 16px; }
    #components-content .table-wrap { border: 0; border-radius: 0; background: transparent; }
    #components-content table, #components-content tbody { display: block; }
    #components-content thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #components-content tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
    #components-content td { display: block; min-width: 0; padding: 0; border: 0; }
    #components-content td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--sans); font-size: .7rem; font-weight: 400; color: var(--muted); }
    #components-content td:nth-child(2) { text-align: right; }
    #components-content td:nth-child(n+3) { grid-column: 1 / -1; }
    #components-content tr:last-child { margin-bottom: 0; }
}
#accounts-dialog, #account-editor-dialog { overscroll-behavior: contain; }
#account-editor-dialog { scroll-padding-block: 80px 24px; }
#account-editor-description, #account-editor-feedback { overflow-wrap: anywhere; }
.purchase-dialog > p { color: var(--muted); font-size: .82rem; }
.purchase-dialog .drawer-heading { position: sticky; top: -24px; z-index: 2; background: var(--surface); padding: 16px 24px; margin: -24px -24px 16px; border-bottom: 1px solid var(--border); }
.purchase-dialog .drawer-heading h2 { margin: 0; font-size: 1.15rem; }
.purchase-dialog .selected-product:first-child { padding-top: 8px; }
#purchase-feedback { color: #fda4af; white-space: pre-wrap; overflow-wrap: anywhere; }
#purchase-feedback:empty { display: none; }
#conversation-feedback:empty { display: none; }
.registered-orders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.orders-heading { margin: 16px 0 0; padding: 8px 0; font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.selected-product { padding: 14px 0; border-bottom: 1px solid var(--border); }
.selected-product button { padding: 4px 0; border: 0; background: transparent; color: var(--muted); }
.request-workspace { min-width: 0; }
.request-workspace.with-conversation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: 20px; align-items: start; }
.request-workspace.with-conversation > .panel { margin-top: 0; }
.conversation-sidebar { position: sticky; top: 16px; display: flex; flex-direction: column; min-width: 0; height: calc(100dvh - 220px); min-height: 420px; max-height: calc(100dvh - 32px); padding: 20px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.conversation-sidebar h2 { margin: 0; font-size: 1rem; }
.conversation-return { display: none; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#conversation-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversation-sidebar .message-thread { border: 0; padding: 0; margin-top: 12px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversation-sidebar .message-thread .panel-heading h2 { display: none; }
.conversation-sidebar .message-list { flex: 1; max-height: none; min-height: 100px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.conversation-sidebar .message-compose { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 6px; }
.conversation-sidebar .message-meta { gap: 10px; }
@media (max-width: 960px) {
    .request-workspace.with-conversation { grid-template-columns: minmax(0, 1fr); }
    .request-workspace[data-mobile-view="request"] .conversation-sidebar { display: none; }
    .request-workspace[data-mobile-view="chat"] #detail-panel { display: none; }
    .conversation-sidebar { position: static; height: calc(100dvh - 190px); min-height: 360px; }
    .conversation-return { display: inline-flex; }
}
@media (max-width: 640px) {
    .product-list .requested-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .requested-entry > .actions { padding-left: 3rem; }
    .conversation-sidebar { padding: 18px; }
}
details { border-top: 1px solid var(--border); margin: 18px 0; padding-top: 14px; }
summary { cursor: pointer; color: var(--muted); font-size: .83rem; }
.timeline { list-style: none; padding: 0 0 0 18px; border-left: 1px solid var(--border); }
.timeline li { margin: 16px 0; white-space: pre-wrap; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
#message { white-space: pre-wrap; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; padding: 12px 16px; font-size: .86rem; }
#message:empty { display: none; }
#message.error { color: #fda4af; border-left-color: #fda4af; }
[hidden] { display: none !important; }
@media (max-width: 850px) { .purchase-flow { grid-template-columns: 1fr; } .response-side { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 600px) {
    .app-shell { padding: 16px 14px 40px; }
    .top-bar { flex-wrap: wrap; gap: 10px; }
    .session-controls { gap: 6px; }
    .user-chip { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin: 24px 0; }
    .page-heading > button { width: 100%; }
    .panel { padding: 18px 14px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .request-side, .response-side { padding: 16px; }
    .supplier-heading { align-items: flex-start; gap: 8px; padding: 8px 0; }
    .form-footer > button { flex: 1; }
    .section-nav button { padding: 12px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.list-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; align-items: end; gap: 12px; margin: 16px 0; }
.list-filters label { min-width: 0; }
.state-filter { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.state-filter > summary { min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; font-size: .86rem; }
.state-choices { position: absolute; z-index: 8; top: 100%; right: 0; min-width: 250px; max-width: calc(100vw - 48px); max-height: 380px; overflow: auto; overscroll-behavior: contain; margin: 6px 0 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--button-border); border-radius: 6px; box-shadow: 0 10px 30px #0008; }
.state-choices .state-choice { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 3px; min-height: 44px; cursor: pointer; }
.state-choice > input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); flex-shrink: 0; }
.purchase-actions { margin-top: 14px; }
.purchase-actions > summary { cursor: pointer; color: var(--accent); font-size: .84rem; padding: 8px 0; }
.purchase-options { margin-top: 10px; min-width: 0; }
.purchase-options .task-section { padding: 14px; }
.list-pagination { grid-column: 1 / -1; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border); }
.list-pagination > .help-text { padding: 0 6px; font-variant-numeric: tabular-nums; }
.list-workspace { padding: 24px; }
.list-workspace > .panel-heading { margin-bottom: 8px; }
.list-workspace .list-filters { margin: 16px 0 8px; }
.list-workspace .list-filters label { margin: 0; }
.list-filters > button { min-height: 42px; }
.list-workspace .list-filters button { padding: 8px 10px; }
.app-shell:has(.list-workspace:not([hidden])) .page-heading { margin: 18px 0; }
.app-shell:has(.list-workspace:not([hidden])) h1 { font-size: 1.8rem; }
.app-shell:has(.list-workspace:not([hidden])) .section-nav { margin-bottom: 12px; }
@media (max-width: 700px) {
    .section-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: visible; }
    .section-nav button { min-width: 0; min-height: 44px; white-space: normal; }
    .task-section { padding: 14px; }
    .request-entry-table, #accounts-list .table-wrap { overflow: visible; border: 0; background: transparent; }
    .request-entry-table table, .request-entry-table tbody, #accounts-list table, #accounts-list tbody { display: block; width: 100%; min-width: 0; }
    .request-entry-table thead, #accounts-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .request-entry-table tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 14px 0; padding: 16px; border: 1px solid var(--button-border); border-radius: 8px; background: var(--bg); }
    .request-entry-table td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
    .request-entry-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--muted); font-size: .8rem; }
    .request-entry-table td:last-child button { width: 100%; }
    .request-entry-table textarea { min-height: 72px; }
    #accounts-list tbody > tr { display: block; margin: 14px 0; padding: 12px; border: 1px solid var(--button-border); border-radius: 6px; }
    #accounts-list td { display: block; padding: 6px 0; border: 0; overflow-wrap: anywhere; }
    #accounts-list td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: .78rem; }
    #accounts-list .actions > button { flex: 1 1 120px; }
    .list-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .list-filters > label:first-child { grid-column: 1 / -1; }
    .state-choices { left: 0; right: auto; min-width: min(250px, calc(100vw - 64px)); }
    .list-pagination { justify-content: space-between; }
    .list-workspace { padding: 18px 14px; }
    .session-controls { flex-wrap: wrap; }
    .compact-button, .requested-entry > .actions button, .request-entry-table button, .task-section button, .primary-button:is(a) { min-height: 44px; }
}
@media (forced-colors: active) {
    .section-nav button[aria-current="page"] { border-bottom-color: Highlight; }
    .primary-button { border-color: ButtonText; }
}