:root { --blue:#0b5cad; --amber:#f2a900; --green:#1b8a3a; --grey:#8a8f98; --red:#c62828; --bg:#f5f6f8; --card:#fff; --text:#16191d; --line:#e2e5ea; --mapH:40vh; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); }
button, .button, select, input, textarea { font:inherit; }
button, .button { border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 14px; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:inherit; }
button:disabled { opacity:.5; }
button.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
button.accent { background:var(--amber); border-color:var(--amber); color:#1b1b1b; font-weight:600; }
button.block { width:100%; margin-top:8px; }
input, select, textarea { border:1px solid var(--line); border-radius:10px; padding:10px; min-height:44px; background:#fff; width:100%; }
.muted { color:#5d636c; } .small { font-size:.85em; } .center { text-align:center; } .error { color:var(--red); }
.row { display:flex; align-items:center; flex-wrap:wrap; } .gap { gap:8px; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:6px; padding:calc(env(safe-area-inset-top) + 6px) 8px 6px; background:var(--blue); color:#fff; }
.icon-btn { background:transparent; border:none; color:#fff; font-size:22px; min-width:44px; padding:6px; }
.route-name { flex:1; background:rgba(255,255,255,.15); color:#fff; border:none; font-weight:600; min-height:40px; }
.save-state { font-size:12px; opacity:.85; min-width:44px; text-align:right; }
#map { height:var(--mapH); width:100%; background:#dde3ea; }
body.map-big { --mapH:72vh; } body.map-small { --mapH:0vh; }
#panel { padding:8px 8px calc(env(safe-area-inset-bottom) + 24px); max-width:820px; margin:0 auto; }
.toolbar { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; position:sticky; top:52px; z-index:4; background:var(--bg); padding:4px 0; }
.summary { font-size:14px; padding:4px 2px 8px; color:#3b4048; min-height:1em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; margin-bottom:8px; }
.results { list-style:none; margin:6px 0; padding:0; }
.results li { padding:10px; border-bottom:1px solid var(--line); cursor:pointer; }
.results li:active, .results li:hover { background:#eef4fb; }
.results .rtype { font-size:12px; color:var(--grey); margin-left:6px; }
.end-row { display:grid; grid-template-columns:52px 150px 1fr; gap:8px; align-items:center; margin:4px 0; }
.end-tag { font-size:12px; font-weight:700; text-transform:uppercase; color:#555; }
.end-tag.start { color:var(--green); } .end-tag.finish { color:var(--red); }
.end-label { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stops { list-style:none; margin:0; padding:0; }
.stop { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:6px; }
.stop.active { outline:2px solid var(--blue); }
.stop-main { display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center; padding:8px; }
.num { width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.stop.done .num { background:var(--green); } .stop.skipped .num { background:var(--grey); } .stop.priority .num { box-shadow:0 0 0 3px var(--amber); }
.stop.done .label, .stop.skipped .label { text-decoration:line-through; color:#777; }
.label { font-size:15px; word-break:break-word; cursor:pointer; }
.meta { font-size:12px; color:#5d636c; margin-top:2px; display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:#eef1f5; border-radius:8px; padding:1px 6px; } .chip.warn { background:#fde7e7; color:var(--red); } .chip.tw { background:#fff4d6; }
.stop-actions { display:flex; gap:4px; }
.stop-actions button { min-width:44px; padding:6px 8px; }
.go { background:var(--blue); color:#fff; border-color:var(--blue); }
.stop-detail { border-top:1px solid var(--line); padding:8px; display:grid; gap:8px; }
.stop-detail .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stop-detail label { font-size:12px; color:#555; display:grid; gap:3px; }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.sheet-card { background:#fff; width:100%; max-width:560px; border-radius:16px 16px 0 0; padding:16px 16px calc(env(safe-area-inset-bottom) + 16px); max-height:85vh; overflow:auto; }
.sheet-card h3 { margin:0 0 10px; }
.sheet-card .list button { width:100%; justify-content:flex-start; margin-bottom:6px; }
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 18px); transform:translateX(-50%); background:#222; color:#fff; padding:10px 16px; border-radius:10px; z-index:30; max-width:92vw; font-size:14px; }
.attrib { font-size:11px; color:#666; margin-top:16px; text-align:center; } .attrib a { color:inherit; }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(160deg,#0b5cad,#083f78); }
.login-card { background:#fff; padding:24px; border-radius:16px; width:min(360px,92vw); display:grid; gap:10px; text-align:center; }
.login-card h1 { margin:0; font-size:22px; } .login-card p { margin:0; } .login-card label { text-align:left; font-size:14px; }
.marker-pick { cursor:crosshair; }
@media (min-width: 900px) {
  body:not(.login) { display:grid; grid-template-columns: 420px 1fr; grid-template-rows: auto 1fr; height:100vh; }
  .top { grid-column:1 / 3; }
  #map { grid-column:2; grid-row:2; height:100%; }
  #panel { grid-column:1; grid-row:2; overflow:auto; max-width:none; margin:0; }
  #layoutBtn { display:none; }
  .toolbar { top:0; }
}