:root { --ink:#17211e; --muted:#65716b; --line:#d9ded9; --canvas:#f6f7f4; --panel:#fff; --accent:#176b51; --accent-soft:#e3f0eb; --warn:#8c4816; --warn-soft:#fff1e4; --danger:#a3302c; --danger-soft:#fbe9e8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#app { width:min(1120px,100%); margin:0 auto; padding:28px; }
.topbar,.panel-heading,.billing-bar,.signal-strip,.receive-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.topbar { border-bottom:1px solid var(--line); padding-bottom:20px; }
h1,h2,p { margin:0; } h1 { font-size:26px; line-height:1.1; letter-spacing:-.04em; } h2 { font-size:17px; letter-spacing:-.02em; }.eyebrow { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; }
.status,.safety { padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700; }.pending { background:#edf0ee; color:var(--muted); }.active { background:var(--accent-soft); color:var(--accent); }.blocked { background:var(--danger-soft); color:var(--danger); }.safety { background:#eef0ed; color:#47534d; }
.loading { padding:44px 0; color:var(--muted); }.signal-strip { margin:20px 0; padding:14px 18px; background:#e9ece8; border-radius:10px; }.signal-strip div { display:grid; gap:2px; }.signal-strip span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }.signal-strip strong { font-size:14px; }
.workspace { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; }.bottom-row { margin-top:16px; grid-template-columns:1fr 1fr; }.panel { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }.muted { color:var(--muted); font-size:12px; }
form { display:grid; gap:12px; margin-top:18px; } label { display:grid; gap:6px; color:var(--muted); font-weight:600; font-size:12px; } input,select { width:100%; border:1px solid #bdc7bf; background:#fff; color:var(--ink); border-radius:7px; padding:9px; font:inherit; } input:focus,select:focus,button:focus { outline:3px solid #9bcbb9; outline-offset:2px; }
.line-grid { display:grid; grid-template-columns:1.35fr 1.1fr .65fr; gap:8px; color:var(--muted); font-size:11px; }.line-grid p { padding-left:2px; }
button { border:0; border-radius:7px; background:var(--accent); color:#fff; cursor:pointer; font:inherit; font-weight:700; padding:10px 13px; transition:background .15s ease,transform .15s ease; } button:hover { background:#0e5941; } button:active { transform:translateY(1px); } button.secondary { background:#edf1ed; color:var(--ink); } button.secondary:hover { background:#dfe6e1; } button:disabled { cursor:not-allowed; opacity:.52; }
.message { min-height:20px; color:var(--muted); font-size:12px; }.delivery-list { display:grid; gap:8px; margin:18px 0; }.delivery-row { display:grid; grid-template-columns:1fr auto; gap:12px; border-top:1px solid var(--line); padding:11px 0; }.delivery-row:first-child { border-top:0; padding-top:0; }.delivery-row strong,.delivery-row span { display:block; }.delivery-row span { color:var(--muted); font-size:12px; }.receive-actions { justify-content:flex-start; flex-wrap:wrap; }
.empty-state { border:1px dashed #c5cdc7; padding:15px; border-radius:8px; color:var(--muted); }.discrepancy { display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }.discrepancy > div { display:grid; gap:2px; }.discrepancy:last-child { border-bottom:0; }.tag { align-self:start; padding:3px 7px; border-radius:999px; font-weight:700; font-size:11px; }.shortage { color:var(--warn); background:var(--warn-soft); }.overage { color:var(--danger); background:var(--danger-soft); }.exact { color:var(--accent); background:var(--accent-soft); }
.preview-line { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }.preview-line:last-child { border-bottom:0; }.billing-bar { margin-top:16px; padding:18px 20px; background:#202a26; color:#fff; border-radius:12px; }.billing-bar .eyebrow,.billing-bar label { color:#bccac2; }.billing-bar h2 { margin-top:2px; }.billing-bar p { color:#d9e1dc; font-size:13px; }.billing-bar select { margin-top:4px; min-width:180px; }
@media (max-width:680px) { #app { padding:16px; }.topbar { align-items:flex-start; }.workspace,.bottom-row { grid-template-columns:1fr; }.signal-strip { align-items:flex-start; flex-direction:column; gap:11px; }.billing-bar { align-items:flex-start; flex-direction:column; }.line-grid { grid-template-columns:1fr 1fr .6fr; gap:5px; }.panel { padding:16px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }