:root {
  --bg:#f5f4f0; --panel:#fff; --ink:#1d1c1a; --muted:#6b6a64; --faint:#9a988f; --line:#e4e2db;
  --accent:#0f6e56; --accent-ink:#fff; --accent-soft:#e1f5ee; --danger:#a32d2d; --danger-soft:#fcebeb;
  --warn:#854f0b; --warn-soft:#faeeda; --radius:10px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font:15px/1.5 system-ui, "Segoe UI", "Rubik", Arial, sans-serif; background:var(--bg); color:var(--ink); }
button, input, select, textarea { font:inherit; color:inherit; }
input, select, textarea { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
input[type=checkbox] { width:auto; }
button { cursor:pointer; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; white-space:nowrap; }
button:hover { border-color:#c9c6bc; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.danger { color:var(--danger); }
button.ghost { border-color:transparent; background:transparent; padding:6px 8px; }
button.ghost:hover { background:var(--bg); }
button.sm { padding:4px 9px; font-size:13px; }
a { color:var(--accent); }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--danger); font-size:13px; }
.row { display:flex; gap:8px; align-items:center; }
.row.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.badge { display:inline-block; font-size:12px; padding:1px 8px; border-radius:99px; background:var(--bg); color:var(--muted); white-space:nowrap; }
.badge.ok, .badge.delivered, .badge.completed { background:var(--accent-soft); color:#085041; }
.badge.failed, .badge.late { background:var(--danger-soft); color:#791f1f; }
.badge.warn, .badge.in_progress { background:var(--warn-soft); color:var(--warn); }
.badge.dispatched { background:#e6f1fb; color:#0c447c; }
.banner { padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:10px; }
.banner.warn { background:var(--warn-soft); color:var(--warn); }
.banner.info { background:#e6f1fb; color:#0c447c; }
.banner.err { background:var(--danger-soft); color:#791f1f; }
bdi.t { white-space:nowrap; }
.seq { width:24px; height:24px; border-radius:50%; color:#fff; display:inline-grid; place-items:center; font-size:12px; font-weight:600; flex:none; }
dialog { border:none; border-radius:14px; padding:0; width:min(560px, 94vw); max-height:90vh; box-shadow:0 10px 40px rgba(0,0,0,.2); }
dialog::backdrop { background:rgba(20,20,18,.45); }
dialog form, dialog .body { padding:18px; }
dialog h3 { margin:0 0 12px; font-size:18px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.fields .full { grid-column:1 / -1; }
.fields label { display:block; font-size:13px; color:var(--muted); margin-bottom:3px; }
.actions { display:flex; gap:8px; justify-content:flex-start; margin-top:16px; flex-direction:row-reverse; }
.suggest { position:relative; }
.suggest ul { position:absolute; z-index:1000; inset-inline:0; top:100%; margin:4px 0 0; padding:4px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); max-height:260px; overflow:auto; }
.suggest li { padding:7px 9px; border-radius:6px; cursor:pointer; font-size:14px; }
.suggest li:hover, .suggest li.on { background:var(--bg); }
.toast { position:fixed; bottom:20px; inset-inline-start:50%; transform:translateX(50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; z-index:3000; font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }
@media (max-width:600px) { .fields { grid-template-columns:1fr; } }