:root {
  --green: #1f6f4a;
  --green-dark: #155539;
  --amber: #d98a00;
  --red: #c1351d;
  --bg: #f6f7f5;
  --card: #ffffff;
  --ink: #1a201d;
  --muted: #6b756f;
  --line: #e2e6e2;
  --shadow: 0 4px 24px rgba(0,0,0,.14);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overscroll-behavior: none;
}

#app { position: fixed; top: 0; left: 0; right: 0; height: var(--app-height); }
#map { position: absolute; inset: 0; z-index: 1; background: #dfe5df; }

/* Top bar */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.0));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-right: auto;
  background: var(--card); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.brand-mark { color: var(--green); transform: translateY(-1px); }
.brand-name { font-size: 15px; letter-spacing: .2px; }
.icon-btn {
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow); font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
}
.icon-btn:active { transform: scale(.94); }

/* Bottom sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 28px rgba(0,0,0,.16);
  padding: 8px 16px calc(16px + var(--safe-bottom));
  max-height: 78vh;
  max-height: min(78dvh, calc(var(--app-height) - 8px));
  overflow: hidden;
  transition: transform .28s ease;
}
.sheet-body {
  min-height: 0;
  padding-top: 4px;
  /* Keep the right edge of focused waypoint fields clear of Safari's scroll
     clipping boundary, matching the breathing room already reserved above. */
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* A translated snap hides this much of the sheet below the viewport. Reserve
     the same space inside the flex layout so the scrollport only measures the
     portion the user can actually see. */
  margin-bottom: var(--sheet-offset, 0px);
  transition: margin-bottom .28s ease;
}
.sheet.collapsed { transform: translateY(calc(100% - 132px)); }
/* Generous, full-width grab zone so the drag is easy to hit on a phone.
   touch-action:none lets us own the vertical gesture instead of the page. */
#sheet-handle {
  display: block; width: 100%; padding: 8px 0 10px; margin: 0 0 6px;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
#sheet-handle:active { cursor: grabbing; }
#sheet-handle::before {
  content: ""; display: block; width: 44px; height: 5px; border-radius: 999px;
  background: var(--line); margin: 0 auto;
}
.sheet.dragging,
.sheet.dragging .sheet-body { transition: none !important; }

.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.input-row { display: flex; gap: 8px; }
.input-row input, .field input[type="text"] {
  flex: 1; width: 100%; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
}
input:focus, select:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.mini-btn {
  flex: 0 0 46px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
  font-size: 18px; cursor: pointer;
}
.mini-btn:active { background: #eef2ee; }

.results {
  list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); max-height: 180px; overflow-y: auto;
}

/* Waypoint search results float OVER the rows below instead of sitting in the
   flow. In-flow, the growing list re-centered the row (align-items:center) and
   pushed every later row down, so the input/result slid out from under the
   user's finger mid-tap and the first tap missed. An overlay keeps the row
   geometry fixed while the list appears, grows, and settles. */
.wp-main .results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0;
  z-index: 5; box-shadow: 0 8px 24px rgba(20, 28, 24, .18);
}
.results li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.results li:active, .results li.active { background: #eef4f0; }
/* Non-interactive status row ("Searching…" / "No matches") — never tappable, so
   it can't be mis-tapped and doesn't highlight. */
.results li.results-msg { cursor: default; color: var(--muted); font-size: 13px; }
.results li.results-msg:active { background: transparent; }

.profile-chip {
  font-size: 13px; color: var(--green-dark); background: #eaf3ee;
  border: 1px solid #cfe3d8; padding: 8px 12px; border-radius: 999px;
  text-align: center; margin: 4px 0 12px; cursor: pointer; font-weight: 600;
}

.rvmode-toggle {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; color: var(--ink); padding: 2px 4px; margin: 0 0 10px;
  user-select: none;
}
.rvmode-toggle input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.rvmode-text { line-height: 1.25; }

.primary-btn {
  width: 100%; border: none; border-radius: 14px; padding: 15px;
  background: var(--green); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.primary-btn:active { background: var(--green-dark); }
.primary-btn:disabled { opacity: .55; cursor: default; }
.ghost-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.compare-btn {
  width: 100%;
  margin-top: 8px;
  color: var(--green-dark);
  background: #f7faf8;
}

.status {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: #eef2ee; color: var(--muted);
}
.status.error { background: #fbeae7; color: var(--red); }
.status.ok { background: #eaf3ee; color: var(--green-dark); }

.route-summary {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f1f5f2;
  font-size: 14px; display: flex; gap: 18px; font-weight: 600;
}
.route-summary .num { font-size: 20px; color: var(--green-dark); }

/* Warnings — kept compact so a long clearance list doesn't dominate the sheet. */
.warnings { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.warn {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.3; border: 1px solid;
}
.warn .ico { font-size: 15px; line-height: 1.3; }
.warn.danger { background: #fbeae7; border-color: #f2c4ba; color: #8c2415; }
.warn.caution { background: #fff5e0; border-color: #f3dca0; color: #6b4a00; }
.warn.clear { background: #eaf3ee; border-color: #cfe3d8; color: var(--green-dark); }
.warn b { display: block; margin-bottom: 1px; }
.warn .muted { display: block; }
.verify-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: #8c2415; color: #fff; vertical-align: middle;
}

/* Modals */
.modal {
  position: absolute; inset: 0; z-index: 2000; display: grid; place-items: end center;
  background: rgba(20,28,24,.45); padding: 0;
}
/* The [hidden] attribute must win over the display:grid above, or modals never close. */
.modal[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 520px; background: var(--card);
  border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + var(--safe-bottom));
  max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal-card h2 { margin: 0 0 4px; font-size: 19px; }

/* Top-right dismiss for modals whose body is long enough that the footer
   "Close" button sits below the fold. */
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head > div { min-width: 0; }
.modal-x {
  flex: none; width: 36px; height: 36px; margin: -4px -2px 0 0;
  border: 1px solid var(--line); border-radius: 50%; background: #fbfcfb;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.modal-x:hover { background: #eef2ee; color: var(--ink); }
.modal-x:active { transform: scale(.94); }
.muted { color: var(--muted); }
.modal-card .muted { font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
/* Grid/flex children default to min-width:auto, which refuses to shrink below
   their content and pushes the unit selectors off the right edge of the card
   (the clipping seen on desktop). Letting them shrink keeps everything inside. */
.grid2 > * { min-width: 0; }
.modal-card label { display: block; font-size: 13px; font-weight: 600; }
.modal-card label.full { display: block; margin-top: 14px; }
.unit-input { display: flex; gap: 6px; margin-top: 6px; }
.unit-input input { flex: 1; min-width: 0; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; }
.unit-input select, .unit-static {
  flex: 0 0 64px; font-size: 15px; padding: 11px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: #fbfcfb; text-align: center;
}
.unit-static { display: grid; place-items: center; color: var(--muted); }

/* Feet + inches input: two compact number fields, each with a trailing unit. */
.ftin-input { display: flex; gap: 6px; margin-top: 6px; }
.ftin-field { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; padding-right: 8px; }
.ftin-field input { flex: 1 1 0; min-width: 0; width: 100%; font-size: 16px;
  padding: 11px 4px 11px 12px; border: none; border-radius: 10px; background: transparent;
  -moz-appearance: textfield; }
.ftin-field input:focus { outline: none; }
.ftin-field:focus-within { border-color: var(--green-dark); box-shadow: 0 0 0 2px rgba(31,111,74,.15); }
.ftin-unit { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.modal-card small { display: block; margin-top: 6px; font-weight: 400; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions > * { flex: 1; }
.form-error { color: #a8261a; font-weight: 700; margin: 10px 0 0; }
.agreement-details { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.agreement-details summary { cursor: pointer; font-weight: 800; }
.agreement-details p { font-size: 12px; line-height: 1.45; }
.agreement-check { display: flex !important; align-items: flex-start; gap: 10px; margin-top: 14px; line-height: 1.4; }
.agreement-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.modal-card input[type="text"],
.modal-card input[type="email"],
.modal-card input[type="password"] {
  width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; margin-top: 6px;
}
.modal-card hr { border: none; border-top: 1px solid var(--line); margin: 18px 0 12px; }
.disclaimer { font-size: 12px; color: var(--muted); line-height: 1.5; }
.disclaimer code { background: #eef2ee; padding: 1px 5px; border-radius: 5px; }
.link-like { color: var(--green); text-decoration: underline; cursor: pointer; }

/* Map markers — the count badge represents nearby restrictions at wide zooms. */
.clearance-pin {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 26px; border-radius: 13px; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.clearance-pin.danger { background: var(--red); }
.clearance-pin.caution { background: var(--amber); }
.clearance-count {
  position: absolute; top: -8px; right: -9px; min-width: 17px; height: 17px;
  padding: 0 3px; box-sizing: border-box; border-radius: 9px;
  display: grid; place-items: center; background: #fff; color: #26332e;
  border: 1px solid rgba(38,51,46,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  font-size: 8px; line-height: 1; font-weight: 900;
}

/* Numbered waypoint markers (start / stops / destination). */
.wp-pin {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50% 50% 50% 2px; transform: rotate(0deg);
  color: #fff; font-size: 13px; font-weight: 800; border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.45); background: #2f6fed;
}
.wp-pin.start { background: var(--green); }
.wp-pin.end { background: var(--green-dark); }

/* Manual route-steering points — distinct purple badge so they read as
   guidance, not stops. */
.steer-pin {
  display: grid; place-items: center; width: 22px; height: 22px;
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
  background: #8338ec; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: grab;
}

/* Steering choice modal — stacked full-width option buttons. */
.choice-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.choice-options .choice-btn { width: 100%; }

/* Remove button inside a steering-point popup. */
.popup-del {
  margin-top: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--red); border: none; border-radius: 8px; cursor: pointer;
}

/* Keep the Leaflet zoom control clear of the top-right header buttons. */
.leaflet-top.leaflet-right { top: calc(var(--safe-top) + 62px); }

/* Hazard toggle on/off state. */
#btn-hazards { font-size: 17px; opacity: .5; }
#btn-hazards.on { opacity: 1; box-shadow: 0 0 0 2px var(--red) inset, var(--shadow); }

/* ---- Waypoint list ---- */
.waypoints { display: flex; flex-direction: column; gap: 8px; }
.wp-row { display: flex; align-items: center; gap: 8px; position: relative; }
.wp-row:focus-within { z-index: 5; }
.wp-row.drag-over { outline: 2px dashed var(--green); outline-offset: 2px; border-radius: 12px; }
.wp-row.dragging-row { opacity: .45; }
.wp-grip {
  flex: 0 0 26px; height: 44px; display: grid; place-items: center;
  color: var(--muted); font-size: 17px; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.wp-grip:active { cursor: grabbing; }
.wp-badge {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: #2f6fed;
}
.wp-badge.start { background: var(--green); }
.wp-badge.end { background: var(--green-dark); }
.wp-main { flex: 1; min-width: 0; position: relative; }
.wp-main input[type="text"] {
  width: 100%; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
}
.wp-stop-options {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 5px 2px 0;
}
.wp-stop-time,
.wp-filled-tank {
  display: flex; align-items: center; gap: 6px; margin: 5px 2px 0;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.wp-stop-options .wp-stop-time,
.wp-stop-options .wp-filled-tank { margin: 0; }
.wp-filled-tank { cursor: pointer; }
.wp-filled-tank input { width: 16px; height: 16px; accent-color: var(--green); }
.wp-stop-time input {
  width: 70px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fbfcfb; color: var(--ink);
  font: inherit; font-size: 13px; text-align: right;
}
.wp-stop-time input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.wp-mini {
  flex: 0 0 40px; height: 44px; border: 1px solid var(--line); border-radius: 12px;
  background: #fbfcfb; font-size: 17px; cursor: pointer; color: var(--muted);
}
.wp-mini:active { background: #eef2ee; }
.route-hint { font-size: 12px; margin: 4px 2px 6px; line-height: 1.35; }
.wp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.ghost-btn.small { padding: 10px 12px; font-size: 14px; border-radius: 12px; }
.ghost-btn.small.full-w { width: 100%; }
.wp-actions .ghost-btn { flex: 1 1 calc(50% - 8px); }

.account-card {
  display: grid; gap: 6px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #f7faf8;
}
.account-card strong { font-size: 16px; }
.plan-pill {
  justify-self: start; padding: 4px 9px; border-radius: 999px;
  background: #eaf3ee; color: var(--green-dark); font-size: 12px; font-weight: 800;
}
.danger-text { color: var(--red); }
.favorite-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.favorite-actions button {
  flex: 1 1 calc(50% - 8px); padding: 8px 10px; border-radius: 10px;
  font-size: 13px;
}

/* ---- Per-leg breakdown ---- */
.legs { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.leg {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: #f6f8f6; font-size: 13px;
}
.leg .leg-name { color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg .leg-num { color: var(--green-dark); font-weight: 700; white-space: nowrap; }

/* ---- Fuel-stop suggestions ---- */
.fuel-stops { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fuel-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 4px; }
.fuel-warn {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px;
  border-radius: 10px; background: #fff5e0; border: 1px solid #f3dca0; color: #6b4a00; font-size: 13px;
}
.fuel-warn .ico { font-size: 18px; line-height: 1; }
.fuel-warn b { display: block; }
.fuel-addall {
  align-self: stretch; padding: 9px 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--green); color: #fff; font-weight: 700; font-size: 13px;
}
.fuel-addall:active { background: var(--green-dark); }
.fuel-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border-radius: 10px; background: #f6f8f6; font-size: 13px;
}
.fuel-row-top { display: flex; align-items: center; gap: 8px; }
.fuel-row .fuel-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.fuel-sub { font-size: 12px; }
.fuel-row .fuel-add {
  flex: none; padding: 5px 12px; border: 1px solid var(--green); border-radius: 8px; cursor: pointer;
  background: #fff; color: var(--green-dark); font-weight: 700; font-size: 12px;
}
.fuel-row .fuel-add:active { background: #eef4f0; }
.fuel-row .fuel-add.added { border-color: var(--line); color: var(--muted); background: #f2f5f2; cursor: default; }
.fuel-row .fuel-add:disabled { cursor: default; }
.fuel-row .fuel-other {
  flex: none; width: 30px; padding: 5px 0; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--muted); font-size: 13px; cursor: pointer;
}
.fuel-row .fuel-other:active { background: #eef2ee; }
.fuel-choice-actions { display: flex; gap: 6px; margin-top: 4px; }
.fuel-choice {
  flex: 1; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--green-dark); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fuel-choice:active { background: #eef2ee; }
.fuel-choice:disabled { color: var(--muted); background: #f2f5f2; cursor: default; opacity: .65; }
.fuel-favorite {
  display: flex; align-items: center; gap: 8px; margin-top: 3px; padding: 5px 0;
  color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.fuel-favorite input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.fuel-cleanup {
  padding: 8px 10px; border: 1px solid #bfe3c6; border-radius: 9px;
  background: #e7f4ea; color: #1c6b2e; font-weight: 600;
}
.fuel-badge { font-size: 12px; }
/* Compact inline "verify big-rig access" note on the metric line — amber so it
   still pops, but no box: matches .warn.caution's text color without its chrome. */
.fuel-sub .fuel-verify { color: #6b4a00; font-weight: 600; }
/* Crowd big-rig accessibility rating. A tone-coded verdict pill sits on the name
   line; the three-way rating control sits under the metric line. Colours mirror
   the good/tight/avoid semantics used elsewhere (green / amber / red). */
.fuel-rating {
  flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  white-space: nowrap; border: 1px solid transparent;
}
.fuel-rating.tone-good { background: #e7f4ea; color: #1c6b2e; border-color: #bfe3c6; }
.fuel-rating.tone-tight { background: #fbf0d8; color: #6b4a00; border-color: #ecd9a6; }
.fuel-rating.tone-avoid { background: #fbe4e4; color: #8a1f1f; border-color: #eeb9b9; }
.fuel-rating.provisional { opacity: 0.72; }
.fuel-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fuel-rate-q { font-size: 12px; }
.fuel-rate-btn {
  flex: none; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4;
}
.fuel-rate-btn:active { background: #eef2ee; }
.fuel-rate-btn.active.r-good { border-color: #1c6b2e; color: #1c6b2e; background: #e7f4ea; }
.fuel-rate-btn.active.r-tight { border-color: #6b4a00; color: #6b4a00; background: #fbf0d8; }
.fuel-rate-btn.active.r-avoid { border-color: #8a1f1f; color: #8a1f1f; background: #fbe4e4; }
.fuel-rate-btn.active.d-yes { border-color: #1c6b2e; color: #1c6b2e; background: #e7f4ea; }
.fuel-rate-btn.active.d-no { border-color: #8a1f1f; color: #8a1f1f; background: #fbe4e4; }
/* Diesel-availability badge, inline on the muted metric line. Tone-coded like
   the big-rig verdict; the .osm variant is a faint OSM-only baseline. */
.fuel-diesel { font-weight: 600; }
.fuel-diesel.tone-good { color: #1c6b2e; }
.fuel-diesel.tone-tight { color: #6b4a00; }
.fuel-diesel.tone-avoid { color: #8a1f1f; }
.fuel-diesel.provisional { font-weight: 500; opacity: 0.8; }
.fuel-diesel.osm { color: var(--muted); font-weight: 500; }
/* Fuel-gap alarm banner — a route change stretched a leg between accepted stops
   past the safe range. Prominent red; blocks directions until re-suggested. */
/* The hidden attribute must win over the display rule below (else the empty
   banner paints as a stray pink bar with no route). */
.fuel-alarm[hidden] { display: none !important; }
.fuel-alarm {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: #fbe4e4; border: 1px solid #eeb9b9; font-size: 13px;
}
.fuel-alarm-msg { display: flex; gap: 8px; align-items: flex-start; }
.fuel-alarm-msg .ico { font-size: 16px; line-height: 1.2; }
.fuel-alarm-msg b { color: #8a1f1f; display: block; }
.fuel-alarm-msg .muted { display: block; margin-top: 2px; }
.fuel-alarm-legs { display: flex; flex-direction: column; gap: 7px; }
.fuel-alarm-leg {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px; border-radius: 8px; background: rgba(255,255,255,.72);
}
.fuel-alarm-leg b { color: #6f1d0b; font-size: 12px; line-height: 1.35; }
.fuel-leg-show {
  flex: none; min-height: 36px; padding: 6px 9px; border: 1px solid #c2410c;
  border-radius: 8px; background: #fff; color: #9a3412; font-weight: 700;
}
.fuel-leg-show:active { background: #fff1eb; }
@media (max-width: 430px) {
  .fuel-alarm-leg { align-items: stretch; flex-direction: column; }
}
/* Already-accepted fuel stop rows sit slightly muted vs new suggestions. */
.fuel-row.accepted { background: #eef2ee; }
/* Satellite / Street View vetting links on stop rows and marker popups.
   Sized like the other row actions so they're an easy tap target. */
.geo-links { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.geo-links .geo-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; padding: 5px 0; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 13px; text-decoration: none; line-height: 1;
}
.geo-links .geo-link:active { background: #eef2ee; }
/* In string-built popups the links render as labeled text pills. */
.leaflet-popup .geo-links { margin-top: 6px; gap: 8px; }
.leaflet-popup .geo-links .geo-link { width: auto; padding: 4px 8px; font-size: 12px; color: var(--green-dark); font-weight: 600; }
/* Inline loading spinner (fuel search + routing/clearance status). */
.cr-spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 7px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(31,111,74,.25); border-top-color: var(--green);
  animation: cr-spin .7s linear infinite;
}
.status.loading { display: flex; align-items: center; }
.status.loading .cr-spinner { border-color: rgba(107,117,111,.3); border-top-color: var(--muted); }
@keyframes cr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cr-spinner { animation-duration: 2.2s; } }
.fuel-note { padding: 4px 2px; font-size: 12px; }
/* Fuel opt-in sub-options (truck toggle + tank %) shown under the checkbox. */
.fuel-opts { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; }
.fuel-opts .rvmode-toggle { margin: 0 0 6px; }
.fuel-refresh {
  width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--green);
  border-radius: 10px; background: #fff; color: var(--green-dark); font-weight: 700;
  font-size: 13px; cursor: pointer;
}
.fuel-refresh:active { background: #eef4f0; }
.fuel-tank { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.fuel-tank .unit-input { max-width: 140px; }
.fuel-pin { position: relative; font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* Number badge doubled for legibility on the map. */
.fuel-pin-n {
  position: absolute; top: -6px; right: -9px; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 12px; background: var(--green); color: #fff; font-size: 14px; font-weight: 700;
  line-height: 24px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---- Trips list ---- */
.trips-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trip-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
}
.trip-item .trip-info { flex: 1; min-width: 0; }
.trip-item .trip-name { font-weight: 700; font-size: 15px; }
.trip-item .trip-meta { font-size: 12px; color: var(--muted); }
.trip-item button { border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 10px; }
.trip-item .trip-load { color: var(--green-dark); background: #eaf3ee; }
.trip-item .trip-del { color: var(--red); }
.trip-item .trip-del.armed { background: #fbeae7; color: #8c2415; }

@media (min-width: 720px) {
  .sheet {
    left: auto; right: 16px; bottom: 16px; width: 380px; border-radius: 18px;
    max-height: 84vh;
    max-height: min(84dvh, calc(var(--app-height) - 32px));
  }
  .sheet.collapsed { transform: none; }
  .modal { place-items: center; }
  .modal-card { border-radius: 18px; }
}

/* ---- Search results: name + category tag ---------------------------------- */
.results li { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.result-detail {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 12px; line-height: 1.25;
}

.traffic-planner {
  margin-top: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: 14px; background: #f8fbf9;
}
.traffic-planner h3 { margin: 0; font-size: 15px; }
.traffic-planner-head p { margin: 3px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.traffic-planner > label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.traffic-planner input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.traffic-planner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.traffic-planner-actions button { min-width: 0; padding-left: 8px; padding-right: 8px; }
#traffic-planner-status { min-height: 16px; margin: 9px 0 0; font-size: 12px; }
#traffic-planner-status.loading { display: flex; align-items: center; }
#traffic-planner-result { margin-top: 8px; padding: 11px; border-radius: 11px; background: #eaf4ef; }
.traffic-result-title { color: var(--green); font-size: 12px; font-weight: 800; }
.traffic-result-primary { margin-top: 2px; font-size: 17px; font-weight: 800; }
.traffic-result-detail { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.traffic-result-breakdown { margin: 9px 0 4px; padding: 7px 0; border-top: 1px solid #cfe3d8; border-bottom: 1px solid #cfe3d8; }
.traffic-result-breakdown div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.55; }
.traffic-result-breakdown dt { color: var(--muted); }
.traffic-result-breakdown dd { margin: 0; font-weight: 750; color: var(--ink); }
.traffic-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }
.traffic-chart-head b { font-size: 13px; }
.traffic-chart-head span { color: var(--muted); font-size: 11px; }
.traffic-chart-scroll { overflow-x: auto; margin: 3px -3px 0; }
.traffic-chart { display: block; width: 100%; min-width: 300px; height: auto; overflow: visible; }
.traffic-chart-grid line { stroke: #d7dfda; stroke-width: 1; }
.traffic-chart-grid text, .traffic-chart-bar text { fill: #65716b; font-size: 8px; }
.traffic-chart-base { fill: #2f9361; }
.traffic-chart-delay { fill: #f5b72f; }
.traffic-chart-stops { fill: #aeb7b2; }
.traffic-chart-bar { outline: none; }
.traffic-chart-bar:focus .traffic-chart-delay,
.traffic-chart-bar.selected .traffic-chart-delay { stroke: #176b5b; stroke-width: 2; }
.traffic-chart-bar[role="button"] { cursor: pointer; }
.traffic-chart-bar[role="button"]:hover .traffic-chart-delay { fill: #eaa51e; }
.traffic-chart-hit { fill: transparent; pointer-events: all; }
.traffic-chart-bar circle { fill: #fff; stroke: #176b5b; stroke-width: 2; }
.traffic-chart-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; color: var(--muted); font-size: 10px; }
.traffic-chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.traffic-chart-legend i { width: 9px; height: 9px; border-radius: 2px; }
.traffic-chart-legend i.base { background: #2f9361; }
.traffic-chart-legend i.delay { background: #f5b72f; }
.traffic-chart-legend i.stops { background: #aeb7b2; }
.traffic-chart-legend i.selected { background: #f5b72f; border: 2px solid #176b5b; }
.traffic-chart-legend i.recommended { background: #176b5b; }
.traffic-propagation-note { margin-top: 9px; padding: 8px 9px; border-radius: 8px; background: #dcece5; color: #176b5b; font-size: 11px; font-weight: 700; line-height: 1.4; }
.traffic-map-detail { min-width: 210px; font-size: 12px; line-height: 1.45; }
.traffic-map-detail b { display: block; margin-bottom: 3px; color: #173c34; font-size: 14px; }

.traffic-departure-modal-card {
  width: min(900px, calc(100% - 48px)); max-width: 900px;
  padding: 26px 28px 22px; border-radius: 20px; max-height: min(88vh, 760px);
}
.traffic-departure-modal-card h2 { font-size: 24px; }
#traffic-departure-modal-range { max-width: 680px; margin: 3px 0 0; line-height: 1.45; }
.traffic-departure-selection {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 14px 24px; margin-top: 18px; padding: 16px 18px;
  border-radius: 13px; background: #eaf4ef;
}
.traffic-departure-selection-copy { min-width: 0; }
.traffic-departure-selection-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.traffic-departure-selection-eyebrow small { margin: 0; color: var(--green); font-weight: 800; }
.traffic-departure-selection-eyebrow span {
  padding: 3px 7px; border-radius: 999px; background: #d2e8dc;
  color: #155541; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.traffic-departure-selection strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.25; }
.traffic-departure-selection-metrics {
  display: grid; grid-template-columns: minmax(120px, .65fr) minmax(220px, 1.35fr);
  gap: 10px 24px; margin-top: 10px;
}
.traffic-departure-selection-metrics p { margin: 0; min-width: 0; }
.traffic-departure-selection-metrics span { display: block; color: var(--muted); font-size: 11px; }
.traffic-departure-selection-metrics b { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; }
.traffic-departure-selection button {
  width: auto; min-width: 170px; align-self: center; padding-left: 22px; padding-right: 22px;
}
.traffic-departure-hotspots {
  grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #cfe3d8;
}
.traffic-departure-hotspots h4 { margin: 0 0 7px; color: #173c34; font-size: 13px; }
.traffic-departure-hotspots ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px;
  margin: 0; padding: 0; list-style: none;
}
.traffic-departure-hotspots li {
  min-width: 0; padding: 7px 9px; border-left: 4px solid #2f9361;
  border-radius: 7px; background: rgba(255,255,255,.58);
}
.traffic-departure-hotspots li.minor { border-left-color: #f5c542; }
.traffic-departure-hotspots li.moderate { border-left-color: #f28c28; }
.traffic-departure-hotspots li.severe { border-left-color: #d9362b; }
.traffic-departure-hotspots li b,
.traffic-departure-hotspots li span { display: block; }
.traffic-departure-hotspots li b { font-size: 12px; line-height: 1.35; }
.traffic-departure-hotspots li span { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.traffic-departure-hotspots-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.traffic-departure-hotspots-empty b,
.traffic-departure-hotspots-empty span { display: block; }
.traffic-departure-hotspots-empty b { margin-bottom: 2px; color: #173c34; }
.traffic-departure-chart-title { margin: 20px 0 2px; font-size: 16px; }
.traffic-departure-chart-copy { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.traffic-departure-modal-card .traffic-chart { min-width: 660px; }
.traffic-departure-modal-card .traffic-chart-legend { justify-content: center; gap: 16px; font-size: 11px; }
.traffic-departure-modal-actions { justify-content: flex-end; }
.traffic-departure-modal-actions > * { flex: 0 1 180px; }

@media (max-width: 720px) {
  .traffic-departure-modal-card {
    width: 100%; max-width: none; padding: 20px 18px calc(20px + var(--safe-bottom));
    border-radius: 18px 18px 0 0; max-height: 92vh;
  }
  .traffic-departure-selection { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .traffic-departure-selection-metrics { grid-template-columns: 1fr; gap: 7px; }
  .traffic-departure-selection button { width: 100%; }
  .traffic-departure-hotspots { grid-column: 1; }
  .traffic-departure-hotspots ul { grid-template-columns: 1fr; }
}
.traffic-map-detail small { display: block; margin-top: 4px; color: var(--muted); }
.route-point-time { margin-top: 7px; padding-top: 7px; border-top: 1px solid #d6e1dd; }
.route-point-time b { display: block; color: #173c34; }
.route-point-time time { white-space: nowrap; }
.result-kind {
  flex: none; font-size: 11px; font-weight: 700; text-transform: capitalize;
  color: var(--green-dark); background: #eaf3ee; border: 1px solid #cfe3d8;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* ---- Category POI quick-search ------------------------------------------- */
.poi-cats {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px;
}
.poi-chip {
  flex: 1 1 calc(50% - 4px); min-width: 0;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 9px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poi-chip:active { background: #eef4f0; }
.poi-chip.active {
  background: var(--green); border-color: var(--green); color: #fff;
}

.poi-results {
  list-style: none; margin: 0 0 12px; padding: 4px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); max-height: 200px; overflow-y: auto;
}
.poi-results li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.poi-results li:active { background: #eef4f0; }
.poi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.poi-meta { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.poi-results li.poi-msg {
  cursor: default; color: var(--muted); font-size: 13px; justify-content: flex-start;
}
.poi-results li.poi-msg:active { background: transparent; }

/* POI result map pins. The app uses divIcon everywhere (no default Leaflet
   marker image is configured), so POI results get a matching styled pin. */
.poi-pin {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0f7b4f; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  font-size: 15px; line-height: 1;
}

/* POI marker popup: name, meta line, and an "Add to trip" action so tapping a
   result pin can add the stop (parity with the list rows). */
.poi-popup { min-width: 150px; }
.poi-popup-name { display: block; font-size: 14px; }
.poi-popup-meta { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.poi-popup-add {
  width: 100%; border: none; border-radius: 10px; padding: 8px 12px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.poi-popup-add:active { background: var(--green-dark); }

/* ==================== Landing, billing & onboarding ==================== */
.link-btn {
  background: none; border: none; padding: 0; color: var(--green);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.muted.small, .small { font-size: 13px; }
.form-error.form-ok { color: var(--green-dark); }

#landing {
  position: fixed; inset: 0; z-index: 4000; background: var(--bg);
  overflow: hidden;
}
.landing-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--safe-top)) 20px 12px; max-width: 1020px; margin: 0 auto;
}
.landing-brand { font-weight: 800; font-size: 18px; }
.landing-brand .brand-mark { color: var(--green); }
.landing-nav-actions { display: flex; gap: 10px; }
.landing-hero {
  max-width: 720px; margin: 0 auto; padding: 48px 24px 32px; text-align: center;
}
.landing-hero h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.12; margin: 0 0 16px; }
.landing-sub { font-size: clamp(16px, 2.6vw, 19px); color: var(--muted); margin: 0 0 28px; }
.landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.primary-btn.big, .ghost-btn.big { padding: 14px 26px; font-size: 17px; border-radius: 14px; }
.landing-fineprint { color: var(--muted); font-size: 13px; margin-top: 14px; }
.landing-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; max-width: 1020px; margin: 24px auto; padding: 0 20px;
}
.feature-card {
  background: var(--card); border-radius: 16px; padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.feature-icon { font-size: 26px; }
.feature-card h3 { margin: 10px 0 6px; font-size: 16px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.landing-pricing { max-width: 1020px; margin: 40px auto 0; padding: 0 20px; text-align: center; }
.landing-pricing h2 { font-size: 28px; margin-bottom: 20px; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; align-items: stretch;
}
.price-card {
  position: relative; background: var(--card); border-radius: 16px; padding: 24px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.price-card.featured { border: 2px solid var(--green); box-shadow: 0 6px 24px rgba(31,111,74,.18); }
.price-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
}
.price-card h3 { margin: 0; font-size: 16px; }
.price-amount { font-size: 34px; font-weight: 800; margin: 0; }
.price-per { font-size: 15px; font-weight: 600; color: var(--muted); }
.price-note { color: var(--green-dark); font-weight: 700; font-size: 13px; margin: 0; }
.price-card ul { margin: 6px 0 14px; padding-left: 18px; color: var(--muted); font-size: 14px; }
.price-card ul li { margin: 4px 0; }
.price-card .full-width { width: 100%; margin-top: auto; }
.landing-footer {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 40px 20px calc(28px + var(--safe-bottom));
}

.billing-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.billing-actions { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.primary-btn.small { padding: 10px 12px; font-size: 14px; border-radius: 12px; }
.coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.coupon-row input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; font-size: 14px; text-transform: uppercase;
}

/* Settings: compact account/profile summaries, editable planner defaults, and
   token-gated admin tools that only appear in explicit admin mode. */
.settings-card { max-width: 620px; }
.settings-section {
  margin-top: 14px; padding: 14px; border: 1px solid var(--line);
  border-radius: 14px; background: #fbfcfb;
}
.settings-section h3 { margin: 0 0 8px; font-size: 15px; }
.settings-section p { margin: 0; line-height: 1.4; }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-section-head > div { min-width: 0; }
.settings-section-head .ghost-btn { flex: none; }
.settings-toggle {
  display: flex !important; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.settings-toggle:first-of-type { border-top: none; padding-top: 2px; }
.settings-toggle input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--green); }
.settings-toggle span { min-width: 0; }
.settings-toggle strong { display: block; font-size: 13px; }
.settings-toggle small { color: var(--muted); line-height: 1.35; }
.settings-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.settings-links a { color: var(--green-dark); font-size: 13px; font-weight: 700; }
.feedback-panel { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.feedback-panel summary { cursor: pointer; font-size: 13px; font-weight: 800; }
.feedback-panel label { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; }
.feedback-panel input, .feedback-panel textarea {
  width: 100%; margin-top: 5px; padding: 10px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; font: inherit; resize: vertical;
}
.feedback-panel .primary-btn { margin-top: 10px; }
.admin-tools { border-color: #b9d7c7; background: #f4faf6; }
.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-panel summary { cursor: pointer; font-size: 14px; font-weight: 800; }
.admin-grid label { min-width: 0; }
.admin-grid input, .admin-grid select, .admin-tools input[type="password"], .admin-tools input[type="email"] {
  width: 100%; min-width: 0; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px;
}
.admin-panel .primary-btn { margin-top: 12px; }
.admin-result { margin-top: 12px; }
.admin-result textarea {
  width: 100%; min-height: 110px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-result-actions { display: flex; gap: 8px; margin-top: 8px; }
.admin-result-actions > * { flex: 1; }
.admin-email-panel {
  margin-top: 12px; padding: 14px; border: 1px solid #cfe2d8;
  border-radius: 12px; background: #fff;
}
.admin-email-panel label { display: block; font-size: 13px; font-weight: 700; }
.admin-email-panel p { margin-top: 8px; }
.admin-email-panel .primary-btn { margin-top: 0; }
.admin-tools .form-error.form-ok, .settings-feedback .form-error.form-ok { color: var(--green-dark); }
.admin-dashboard-link { display: inline-flex; margin-top: 12px; text-decoration: none; color: #fff; }

#account-invite-code {
  text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  .settings-section-head { align-items: stretch; flex-direction: column; }
  .settings-section-head .ghost-btn { width: 100%; }
  .admin-grid { grid-template-columns: 1fr; }
}

.tour-card { text-align: center; }
.tour-icon { font-size: 40px; margin-bottom: 4px; }
.tour-dots { letter-spacing: 6px; margin: 12px 0 0; }

#flash-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(14px + var(--safe-top)); z-index: 5000;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px;
  box-shadow: var(--shadow); font-size: 14px; font-weight: 600; max-width: min(92vw, 480px);
}
#flash-banner.ok { background: var(--green-dark); }
#flash-banner.error { background: var(--red); }
.landing-hero-img {
  width: 100%; max-width: 880px; margin: 32px auto 0; display: block;
  border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
}