:root {
  --orange: #ff9d00;
  --orange-dark: #e68600;
  --ink: #171717;
  --muted: #6f7379;
  --line: #e4e6e8;
  --soft: #f6f7f8;
  --white: #fff;
  --danger: #b42318;
  --success: #087a4b;
  --warning: #9a6700;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f2f3f4; font-size: 15px; }
a { color: #1769d2; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
.topbar { height: 64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#111; color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.14); }
.brand { display:flex; align-items:baseline; color:#fff; font-weight:900; letter-spacing:-.04em; font-size:24px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-mark { color:var(--orange); }
.brand-run { color:#fff; }
.brand-product { margin-left:14px; color:#aeb2b8; font-size:13px; font-weight:600; letter-spacing:0; }
.topbar-actions { display:flex; gap:16px; align-items:center; }
.account-chip { color:#d7d9dc; font-size:13px; }
.page-shell { max-width:1460px; margin:0 auto; padding:36px 34px 70px; min-height:calc(100vh - 105px); }
.footer { background:#1d1d1d; color:#a9adb2; text-align:center; font-size:12px; padding:14px; }
h1 { font-size:36px; line-height:1.1; letter-spacing:-.035em; margin:4px 0 10px; }
h2 { font-size:21px; margin:0 0 18px; letter-spacing:-.02em; }
h3 { margin:0 0 14px; font-size:17px; }
.lead { color:var(--muted); font-size:16px; margin:0; max-width:760px; line-height:1.55; }
.eyebrow { text-transform:uppercase; letter-spacing:.1em; color:#9b6400; font-size:11px; font-weight:800; }
.muted { color:var(--muted); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }
.page-heading.compact h1 { font-size:30px; }
.button { appearance:none; border:1px solid #cfd2d5; border-radius:7px; padding:10px 16px; font-weight:750; background:#fff; color:#202124; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.button:hover { text-decoration:none; filter:brightness(.98); }
.button-primary { background:var(--orange); border-color:var(--orange); color:#111; }
.button-primary:hover { background:var(--orange-dark); border-color:var(--orange-dark); }
.button-secondary { background:#fff; }
.button-large { padding:13px 22px; font-size:16px; }
.button-small { padding:7px 12px; font-size:13px; }
.link-button { background:none; border:0; padding:0; color:#2670d9; cursor:pointer; font-weight:650; }
.topbar .link-button { color:#fff; }
.icon-button { width:32px; height:32px; border:0; border-radius:50%; background:#f0f1f2; color:#777; font-size:20px; cursor:pointer; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; }
.alert { border-radius:8px; padding:13px 16px; margin:0 0 20px; border:1px solid; line-height:1.45; background:#fff; }
.alert ul { margin:7px 0 0; padding-left:19px; }
.alert-success { color:#075e3a; border-color:#b6dfcd; background:#effaf5; }
.alert-warning { color:#765100; border-color:#ecd28f; background:#fff9e8; }
.alert-error { color:#8e1b13; border-color:#f0b5b0; background:#fff2f1; }
.alert-info { border-color:#b9d3f4; background:#f2f7ff; }
.login-shell { display:grid; grid-template-columns:minmax(0, 640px) 380px; gap:70px; justify-content:center; align-items:center; min-height:calc(100vh - 105px); }
.login-card { background:#fff; padding:44px; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.09); }
.login-card h1 { font-size:42px; max-width:580px; }
.login-aside { display:flex; flex-direction:column; gap:18px; }
.step { display:flex; gap:15px; align-items:flex-start; }
.step > span { width:34px; height:34px; border-radius:50%; background:#111; color:var(--orange); display:grid; place-items:center; font-weight:900; }
.step div { display:flex; flex-direction:column; gap:4px; }
.step small { color:var(--muted); }
.stack-form { display:flex; flex-direction:column; gap:17px; margin-top:28px; }
label { display:flex; flex-direction:column; gap:7px; color:#333; font-weight:680; font-size:13px; }
input, select, textarea { width:100%; border:1px solid #ccd0d4; border-radius:6px; padding:10px 11px; background:#fff; color:#171717; outline:none; }
input:focus, select:focus, textarea:focus { border-color:#ef9c18; box-shadow:0 0 0 3px rgba(255,157,0,.14); }
label small { color:var(--muted); font-weight:450; line-height:1.35; }
.security-note { color:#62666c; font-size:12px; background:#f5f6f7; border-radius:7px; padding:11px 13px; line-height:1.45; margin-top:4px; }
.upload-card { background:#fff; border-radius:13px; padding:20px; box-shadow:0 5px 18px rgba(0,0,0,.05); }
.upload-form { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; }
.dropzone { min-height:125px; border:2px dashed #c5c8cb; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-direction:column; cursor:pointer; transition:.15s; }
.dropzone:hover, .dropzone.dragover { border-color:var(--orange); background:#fffaf0; }
.dropzone input { display:none; }
.dropzone strong { font-size:17px; }
.dropzone small { margin-top:5px; }
.drop-icon { font-size:28px; color:var(--orange-dark); line-height:1; margin-bottom:6px; }
.stats-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin:18px 0 28px; }
.stat { padding:18px; background:#fff; border-radius:10px; border:1px solid #e6e7e9; display:flex; flex-direction:column; }
.stat b { font-size:25px; }
.stat span { color:var(--muted); font-size:12px; }
.section-block { background:#fff; border-radius:13px; padding:24px; box-shadow:0 5px 18px rgba(0,0,0,.04); }
.document-list { border-top:1px solid var(--line); }
.document-row { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding:14px 2px; }
.file-badge { width:44px; height:44px; border-radius:9px; background:#202124; color:var(--orange); display:grid; place-items:center; font-size:10px; font-weight:900; }
.document-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.document-main strong { color:#222; }
.document-main small { color:var(--muted); }
.document-actions { display:flex; align-items:center; gap:9px; }
.row-error { color:var(--danger); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:700px; }
.status { border-radius:999px; padding:2px 7px; background:#eceff1; }
.status-created { color:#087a4b; background:#e9f7f0; }
.status-api_error, .status-error { color:#9a2017; background:#fdeceb; }
.status-review, .status-ready { color:#805600; background:#fff2c9; }
.empty-state { color:var(--muted); text-align:center; padding:45px; }
.diagnostics { background:#fff6d9; border:1px solid #ecd28f; padding:13px 16px; border-radius:8px; margin-bottom:15px; }
.diagnostics div { margin-top:8px; font-size:13px; }
.review-layout { display:grid; grid-template-columns:minmax(0, 1fr) 480px; gap:22px; align-items:start; }
.review-form { min-width:0; }
.form-section { background:#fff; border-radius:11px; padding:24px; margin-bottom:15px; box-shadow:0 3px 13px rgba(0,0,0,.035); }
.form-grid { display:grid; gap:16px; }
.form-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.span-2 { grid-column:span 2; }
.confidence { font-size:10px; padding:2px 5px; border-radius:4px; font-weight:800; align-self:flex-start; }
.c-high { color:#087a4b; background:#e9f7f0; }
.c-low { color:#8c5f00; background:#fff0c3; }
.section-title-row { display:flex; justify-content:space-between; align-items:center; }
.pill { border-radius:999px; background:#f0f2f3; padding:5px 9px; color:#666; font-size:12px; }
.route-card { position:relative; display:grid; grid-template-columns:38px 1fr; gap:13px; padding:18px 0; border-top:1px solid var(--line); }
.route-marker { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#fff; margin-top:2px; }
.route-marker.load { background:#3077d8; }
.route-marker.unload { background:#35a779; }
.route-content { display:flex; flex-direction:column; gap:13px; }
.sticky-actions { position:sticky; bottom:12px; z-index:10; display:flex; justify-content:flex-end; gap:10px; background:rgba(255,255,255,.96); padding:13px; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.09); }
.source-panel { position:sticky; top:84px; height:calc(100vh - 105px); background:#fff; border-radius:11px; overflow:hidden; box-shadow:0 3px 13px rgba(0,0,0,.05); display:flex; flex-direction:column; }
.source-panel-head { height:52px; padding:0 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.source-panel-head strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.source-panel iframe { width:100%; flex:1; border:0; background:#ddd; }
.source-panel details { border-top:1px solid var(--line); max-height:40%; overflow:auto; padding:11px 14px; }
.source-panel pre, .source-text pre { white-space:pre-wrap; font-size:11px; line-height:1.45; }
.source-text { overflow:auto; padding:10px 16px; flex:1; }
.payload-card { background:#fff; border-radius:12px; box-shadow:0 5px 18px rgba(0,0,0,.05); overflow:hidden; }
.json-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#232426; color:#ddd; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.json-editor { min-height:58vh; border:0; border-radius:0; padding:20px; resize:vertical; font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#111214; color:#e8e8e8; }
.json-editor:focus { box-shadow:inset 0 0 0 2px var(--orange); }
.payload-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px; }
.payload-actions .security-note { margin:0; }
.success-card { max-width:720px; background:#fff; margin:50px auto; padding:50px; text-align:center; border-radius:16px; box-shadow:0 16px 55px rgba(0,0,0,.09); }
.success-icon { width:70px; height:70px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; background:#e5f7ef; color:#087a4b; font-size:34px; font-weight:900; }
.bid-number { display:inline-block; margin:8px 0 18px; padding:9px 14px; border-radius:8px; background:#f4f5f6; }
.success-card .button-row { justify-content:center; margin-top:25px; }
.response-details { margin-top:30px; text-align:left; }
.response-details pre { background:#141516; color:#eee; padding:14px; border-radius:8px; overflow:auto; }
code { background:#eceff1; padding:2px 5px; border-radius:4px; }
@media (max-width:1100px) {
  .review-layout { grid-template-columns:1fr; }
  .source-panel { position:relative; top:auto; height:620px; }
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .login-shell { grid-template-columns:1fr; }
  .login-aside { display:none; }
}
@media (max-width:700px) {
  .topbar { padding:0 16px; }
  .brand-product, .account-chip { display:none; }
  .page-shell { padding:22px 14px 60px; }
  h1, .login-card h1 { font-size:30px; }
  .login-card { padding:25px; }
  .page-heading, .upload-form, .payload-actions { display:flex; flex-direction:column; align-items:stretch; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid.two, .form-grid.three { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .document-row { align-items:flex-start; }
  .document-actions { flex-direction:column; }
}
