:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#e7e7e7; color:#262626; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; }
.topbar { height:68px; display:flex; align-items:center; gap:34px; padding:0 clamp(18px,4vw,46px); color:#fff; background:#262626; box-shadow:0 1px 5px #26262644; }
.brand { font-size:21px; font-weight:800; letter-spacing:-.04em; }
.brand small { margin-left:7px; color:#e7e7e7; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tabs { align-self:stretch; display:flex; gap:25px; }
.tabs button { border:0; border-bottom:3px solid transparent; padding:0; background:transparent; color:#c7c7c7; font-size:14px; }.tabs button.active { border-bottom-color:#ee2827; color:#fff; font-weight:750; }
.site-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }.site-chip { border:1px solid #7c7b7a; border-radius:999px; padding:7px 11px; color:#e7e7e7; font-size:12px; }.sign-out { border:0; padding:5px 0; background:transparent; color:#c7c7c7; font-size:12px; font-weight:750; }.sign-out:hover { color:#fff; }
.page { max-width:1200px; margin:auto; padding:32px clamp(18px,4vw,46px) 50px; }
.heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
h1 { margin:0; letter-spacing:-.045em; font-size:31px; }
.subhead { margin:6px 0 0; color:#7c7b7a; font-size:14px; }.primary { border:0; border-radius:8px; padding:11px 15px; background:#ee2827; color:#fff; font-size:14px; font-weight:750; box-shadow:0 2px 4px #a91e2240; }.primary:hover { background:#a91e22; }.segment { display:inline-flex; gap:3px; padding:3px; border-radius:9px; background:#d7d7d7; }.segment button { border:0; border-radius:7px; padding:8px 12px; background:transparent; color:#7c7b7a; font-size:13px; font-weight:750; }.segment button.active { background:#fff; color:#a91e22; box-shadow:0 1px 3px #2626262b; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:0 0 24px; }
.metric, .panel { border:1px solid #d4d4d4; border-radius:12px; background:#fff; box-shadow:0 3px 12px #26262610; }
.metric { padding:17px 19px; }
.metric small { color:#7c7b7a; font-size:12px; }
.metric strong { display:block; margin-top:5px; font-size:25px; letter-spacing:-.04em; }
.panel { overflow:hidden; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:17px 19px; border-bottom:1px solid #e7e7e7; }
.panel-heading strong { font-size:15px; }
.panel-heading span { color:#7c7b7a; font-size:12px; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { padding:12px 19px; color:#7c7b7a; background:#f4f4f4; font-size:11px; letter-spacing:.07em; text-transform:uppercase; }td { padding:13px 19px; border-top:1px solid #e7e7e7; font-size:13px; }
.container-cell { display:flex; align-items:center; gap:11px; min-width:170px; }
.container-cell b { font-size:14px; }
.tank-icon, .tank-icon svg { display:block; width:58px; height:41px; flex:none; }
.badge { display:inline-block; border-radius:999px; padding:4px 8px; background:#fbe4e4; color:#a91e22; font-size:11px; font-weight:800; }.badge.poly { background:#e7e7e7; color:#5d5d5d; }.badge.alert-current { background:#e7e7e7; color:#5d5d5d; }.badge.alert-missing { background:#ee2827; color:#fff; }.badge.alert-review { background:#262626; color:#fff; }
.strap { font-size:15px; font-weight:800; }
.muted { color:#7c7b7a; }.link-button { border:0; padding:0; background:transparent; color:#a91e22; font-size:13px; font-weight:800; }.empty { padding:40px 20px; color:#7c7b7a; text-align:center; }
.rundown { display:grid; place-items:center; min-height:350px; text-align:center; }
.rundown > div { max-width:460px; }
.rundown h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.rundown p { color:#69798c; line-height:1.55; }
.overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:#0b2239aa; backdrop-filter:blur(4px); }
.gate, .modal { width:min(100%,450px); border-radius:16px; background:#fff; box-shadow:0 24px 72px #06152470; }
.gate { padding:30px; }
.gate-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:#fde4e4; color:#a91e22; font-weight:900; font-size:20px; }
.gate h2, .modal h2 { margin:16px 0 5px; font-size:24px; letter-spacing:-.04em; }
.gate p, .modal p { margin:0 0 20px; color:#68788b; font-size:14px; line-height:1.45; }
.field { display:grid; gap:7px; margin-top:14px; color:#3c4c60; font-size:12px; font-weight:750; }
.field input, .field select { width:100%; border:1px solid #cfd9e3; border-radius:8px; padding:11px; color:#152033; background:#fff; outline:none; }
.field input:focus, .field select:focus { border-color:#ee2827; box-shadow:0 0 0 3px #ee28271e; }
.gate .primary { width:100%; margin-top:20px; }
.gate-note { margin-top:13px; color:#7c8a9a; font-size:11px; text-align:center; }
.modal { padding:25px; }
.modal-backdrop { position:fixed; inset:0; z-index:8; display:grid; place-items:center; padding:20px; background:#071b2e88; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:23px; }
.secondary { border:1px solid #ccd7e1; border-radius:8px; padding:10px 13px; background:#fff; color:#536276; font-size:13px; font-weight:750; }
.history { margin-top:15px; padding-top:14px; border-top:1px solid #e5ebf0; }
.history h3 { margin:0 0 9px; font-size:13px; }
.history-item { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid #edf1f4; color:#617185; font-size:12px; }
.history-item b { color:#1c2d42; }
.toast { position:fixed; right:20px; bottom:20px; z-index:15; border-radius:9px; padding:12px 15px; background:#153c35; color:#fff; box-shadow:0 8px 22px #0615244a; font-size:13px; }
.requisition-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr); gap:20px; align-items:start; }
.form-panel { padding-bottom:4px; }
.requisition-form { padding:19px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.requisition-form textarea { min-height:84px; resize:vertical; border:1px solid #cfd9e3; border-radius:8px; padding:11px; color:#152033; }
.line-items { margin:0 0 4px; }
.line-items-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; }
.order-line { display:grid; grid-template-columns:minmax(130px,1.4fr) minmax(75px,.55fr) minmax(130px,1.1fr) 26px; gap:8px; margin-top:8px; }
.order-line input { min-width:0; border:1px solid #cfd9e3; border-radius:8px; padding:10px; }
.remove-line { border:0; background:transparent; color:#8391a1; font-size:21px; line-height:1; }
.form-footer { display:flex; align-items:center; justify-content:space-between; margin-top:22px; color:#718195; font-size:12px; }
.requisition-list { padding:0 17px; }
.requisition-record { display:flex; justify-content:space-between; gap:10px; padding:15px 2px; border-top:1px solid #e8edf1; }
.requisition-record:first-child { border-top:0; }
.requisition-record strong,.requisition-record span { display:block; }
.requisition-record strong { font-size:13px; }
.requisition-record > div:first-child span { margin-top:3px; color:#718195; font-size:12px; }
.requisition-meta { text-align:right; }
.requisition-meta small { display:block; margin-top:5px; }
.priority { display:inline-block; border-radius:999px; padding:4px 7px; background:#eef2f5; color:#617185; font-size:10px; font-weight:800; text-transform:uppercase; }
.priority.high { background:#fff1dc; color:#965813; }.priority.urgent { background:#fde7e7; color:#a33131; }
@media (max-width:720px) { .topbar { gap:18px; }.brand small,.tabs button:not(.active),.site-chip { display:none; }.tabs { margin-left:auto; }.heading { align-items:start; flex-direction:column; }.metrics,.requisition-layout,.form-grid { grid-template-columns:1fr; }.panel { overflow:auto; } table { min-width:670px; }.order-line { grid-template-columns:1fr 90px 1fr 26px; }.form-footer { align-items:start; gap:12px; flex-direction:column; } }