:root {
  color-scheme: light;
  --ink: #10201f;
  --muted: #647370;
  --forest: #092d2a;
  --mint: #21c49a;
  --paper: #f4f7f5;
  --line: #dce5e2;
  --warn: #9b5b00;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, summary { font: inherit; }
.shell { width: min(100%, 680px); min-height: 100vh; margin: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 800; }
.topbar, .route-summary, .quick-actions, .step-actions, .metrics { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar { margin-bottom: 20px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; letter-spacing: -0.04em; }
h2 { margin-bottom: 8px; font-size: 23px; letter-spacing: -0.03em; }
.eyebrow { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.eyebrow.accent { color: #097c62; }
.avatar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--forest); color: white; font-weight: 800; }
.route-card, .stop-card, .collection { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 22px; background: white; padding: 20px; box-shadow: 0 10px 25px rgb(9 45 42 / .05); }
.stop-selector { display: grid; gap: .35rem; margin: .75rem 0; color: var(--muted); font-size: .82rem; font-weight: 700; }
.stop-selector select { width: 100%; border: 1px solid #d8e2df; border-radius: 12px; background: #fff; color: var(--ink); padding: .75rem; font: inherit; }
.muted { margin-bottom: 5px; color: var(--muted); font-size: 13px; }
.status { border-radius: 99px; background: #d9f7ed; color: #086f58; padding: 7px 10px; font-size: 11px; font-weight: 800; }
.progress { height: 8px; margin: 17px 0 14px; overflow: hidden; border-radius: 99px; background: #e6eeeb; }
.progress span { display: block; width: 43%; height: 100%; background: var(--mint); }
.metrics { color: var(--muted); font-size: 11px; text-align: center; }
.metrics b { display: block; color: var(--ink); font-size: 14px; }
.address { color: var(--muted); line-height: 1.5; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chips span { border-radius: 8px; background: var(--paper); padding: 7px 9px; font-size: 12px; font-weight: 700; }
.note { border-left: 3px solid var(--mint); padding-left: 11px; color: var(--muted); font-size: 13px; }
button { min-height: 48px; border-radius: 14px; padding: 0 18px; font-weight: 800; cursor: pointer; }
.primary { border: 0; background: var(--forest); color: white; }
.secondary { flex: 1; border: 1px solid var(--line); background: white; color: var(--ink); }
.sticky { position: sticky; bottom: 10px; width: 100%; box-shadow: 0 12px 30px rgb(9 45 42 / .25); }
.incident { width: 100%; margin-top: 10px; border: 0; background: transparent; color: #a43d2f; }
.step-title { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.step-title span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--forest); font-weight: 900; }
.step-title h2 { margin: 0; }
label { display: grid; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 49px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; padding: 0 13px; color: var(--ink); }
textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; padding: 10px 13px; color: var(--ink); font: inherit; }
.route-card details.incident { color: var(--ink); }
.route-card details.incident summary { color: #a43d2f; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo { width: 100%; margin-bottom: 14px; border: 1px dashed #8ea39d; background: #f7fbf9; color: #16745e; }
.photo.captured { border-style: solid; border-color: #66caae; background: #e3f9f2; }
.draft-summary{display:grid;gap:4px;margin:12px 0;padding:14px;border-radius:12px;background:#eef7f4}.draft-summary small{color:var(--muted)}.draft-summary strong{font-size:22px}
.total-card { margin-bottom: 16px; border-radius: 16px; background: var(--forest); padding: 18px; color: white; }
.total-card p { margin-bottom: 3px; color: #bcd0ca; font-size: 13px; }
.total-card strong { display: block; margin-bottom: 7px; font-size: 30px; }
.total-card small { color: #bcd0ca; }
fieldset { margin: 0; border: 0; padding: 0; }
legend { margin-bottom: 9px; font-weight: 800; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 45px; margin: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.choice input { width: 18px; min-height: auto; }
.warning { color: var(--warn); font-size: 12px; }
.success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 8px auto 16px; border-radius: 50%; background: #d9f7ed; color: #08755c; font-size: 30px; }
.step[data-step="4"] { text-align: center; }
.receipt { display: grid; gap: 5px; margin-top: 18px; border-radius: 14px; background: var(--paper); padding: 16px; }
.receipt strong { font-size: 24px; }
.receipt small { color: var(--warn); font-weight: 800; }
.step-actions { margin-top: 16px; }
.step-actions .primary { flex: 2; }
.demo { margin-top: 16px; color: var(--muted); font-size: 10px; text-align: center; }
.incident-panel { margin-top: 14px; border: 1px solid #efcfc9; border-radius: 20px; background: #fff; padding: 18px; box-shadow: 0 16px 35px rgb(65 26 20 / .08); }
.incident-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.incident-grid button { min-height: 44px; border: 1px solid #efd8d3; background: #fff8f6; color: #8c3327; padding: 8px; font-size: 12px; }
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px}.workflow button{min-height:42px;padding:6px;border:1px solid var(--line);background:white;font-size:11px}.workflow button.active{background:var(--forest);color:white}.list article{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.list small{display:block;color:var(--muted);margin-top:4px}.row-actions{display:flex;gap:4px;flex-wrap:wrap}.row-actions button{min-height:32px;padding:4px 8px;border:1px solid var(--line);background:white;font-size:10px}details{margin-top:16px}summary{cursor:pointer;font-weight:800;margin-bottom:14px}.item-row{display:grid;grid-template-columns:2fr .7fr 1fr 1fr 1.25fr 36px;gap:6px;align-items:end;margin-bottom:12px;padding:10px;border:1px solid var(--line);border-radius:12px}.item-row label{margin:0}.item-row input{min-height:42px;padding:6px}.item-row button{min-height:42px;padding:0;border:0;background:#fff1ef;color:#a43d2f}.tariff-value{display:grid;gap:4px;min-height:42px}.tariff-value small{color:var(--muted)}.tariff-state{font-size:10px;font-weight:900;color:var(--warn);overflow-wrap:anywhere}.hint{color:var(--muted);font-size:12px}.label-card{display:grid;gap:5px;margin:10px 0;padding:12px;border:1px dashed #7c948e;border-radius:12px;background:white}.label-card code{overflow-wrap:anywhere;color:#08755c}.success{margin-top:14px;padding:16px;border-radius:14px;background:#d9f7ed;color:#075e4b}.success a{color:inherit;font-weight:800}.danger{width:100%;margin-top:14px}.message{position:sticky;bottom:8px;padding:10px;border-radius:10px;background:#d9f7ed;color:#075e4b;font-weight:700}.message:empty{display:none}.message.error{background:#fff0ed;color:#9a3327}
@media(max-width:600px){.item-row{grid-template-columns:1fr 1fr}.item-row label:first-child,.tariff-state{grid-column:1/-1}.workflow{position:sticky;top:0;z-index:2;background:var(--paper);padding:6px 0}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: no-preference) { .collection { animation: rise .22s ease-out; } @keyframes rise { from { transform: translateY(8px); opacity: 0; } } }
.leg-actuals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.leg-actuals label{display:grid;gap:6px;color:#6b7a76;font-size:11px;font-weight:800}.leg-actuals input{min-height:42px;border:1px solid #dbe5e2;border-radius:11px;padding:0 12px;font:inherit}.route-actions{display:flex;gap:9px}.route-actions button{flex:1}@media(max-width:560px){.leg-actuals{grid-template-columns:1fr}.route-actions{display:grid}}

.print-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.print-actions a{padding:14px;border:1px solid #092d2a;border-radius:10px;background:white;font-weight:800;color:#092d2a;text-decoration:none}button:disabled{cursor:wait;opacity:.65}