:root{
  --sp-bg:#f4f6f8;--sp-panel:#fff;--sp-line:#d7dee6;--sp-text:#1a2433;--sp-muted:#5b6776;
  --sp-accent:#1f4f8a;--sp-ok:#0f7b4a;--sp-warn:#9a6b00;--sp-bad:#b42318;
  --ui-density-body:12px;--ui-density-meta:10px;--ui-density-control-h:32px;--ui-density-card-pad-y:12px;--ui-density-card-pad-x:14px;--ui-density-radius:8px;--ui-density-section-gap:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--sp-bg);color:var(--sp-text);font:var(--ui-density-body)/1.4 Inter,Arial,sans-serif}
.sp-app{max-width:1100px;margin:0 auto;padding:16px}
.sp-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.sp-header h1{margin:0;font-size:22px;font-weight:700}
.sp-meta{font-size:var(--ui-density-meta);color:var(--sp-muted);text-transform:uppercase;letter-spacing:.04em}
.sp-card{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--ui-density-radius);padding:var(--ui-density-card-pad-y) var(--ui-density-card-pad-x);margin-bottom:var(--ui-density-section-gap)}
.sp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp-field{display:flex;flex-direction:column;gap:4px;min-width:180px}
.sp-field span{font-size:var(--ui-density-meta);color:var(--sp-muted);text-transform:uppercase}
.sp-input,.sp-select,.sp-btn{height:var(--ui-density-control-h);border:1px solid var(--sp-line);border-radius:4px;padding:0 10px;font:inherit;background:#fff}
.sp-btn{cursor:pointer}
.sp-btn.primary{background:var(--sp-accent);color:#fff;border-color:var(--sp-accent)}
.sp-btn.danger{color:var(--sp-bad);border-color:#f0b8b3}
.sp-table{width:100%;border-collapse:collapse;font-size:12px}
.sp-table th{font-size:9px;text-transform:uppercase;color:var(--sp-muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--sp-line)}
.sp-table td{padding:8px;border-bottom:1px solid #eef2f6;vertical-align:top}
.sp-table tr.open{cursor:pointer}
.sp-table tr.open:hover{background:#f7f9fb}
.r{text-align:right}
.sp-status{font-weight:700;font-size:10px;text-transform:uppercase}
.sp-status.need{color:var(--sp-warn)}
.sp-status.ok{color:var(--sp-ok)}
.sp-status.ship{color:var(--sp-accent)}
.sp-status.done{color:var(--sp-muted)}
.sp-error{color:var(--sp-bad);font-size:12px}
.sp-note{color:var(--sp-muted);font-size:11px}
.sp-login{max-width:420px;margin:10vh auto}
.sp-login h1{font-size:22px;margin:0 0 6px}
.sp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.sp-kpi{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--ui-density-radius);padding:10px 12px}
.sp-kpi span{display:block;font-size:var(--ui-density-meta);color:var(--sp-muted);text-transform:uppercase}
.sp-kpi b{font-size:18px}
.sp-callout{margin-top:8px;padding:8px 10px;border:1px solid #f0d9a0;background:#fff8e8;border-radius:4px}
.sp-callout ul{margin:6px 0 0;padding-left:18px}
.sp-truck-summary{margin-top:6px;font-size:12px;line-height:1.45}
.sp-truck-contents{margin-top:8px}
.sp-truck-contents summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--sp-accent)}
.mn-tbc{color:var(--sp-warn);font-weight:700}
.sp-diagnostics{margin:8px 0 0;font-size:11px}
.sp-diagnostics dt{color:var(--sp-muted);text-transform:uppercase;font-size:9px;margin-top:6px}
.sp-diagnostics dd{margin:2px 0 0;color:var(--sp-text)}