/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-900: #edf2ea;
  --bg-800: #f5f8f2;
  --bg-700: #ffffff;
  --bg-600: #d5ddd2;
  --border: #d7dfd4;
  --text-primary: #18241d;
  --text-secondary: #425347;
  --text-muted: #768779;
  --accent: #4f9363;
  --accent-hover: #3f7d52;
  --accent-ink: #f6fbf6;
  --success: #76aa4a;
  --success-hover: #5f9435;
  --success-ink: #f6fbf6;
  --warning: #f59e0b;
  --danger: #ef4444;
  --sidebar-w: 356px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 18px 42px rgba(28, 39, 31, .10);
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.85), transparent 36%),
    linear-gradient(180deg, #f8faf6 0%, var(--bg-900) 100%);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.44), transparent 26%);
  opacity: .8;
}

/* ===== LAYOUT ===== */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ===== SIDEBAR ===== */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: color-mix(in srgb, var(--bg-800) 88%, white 12%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.4));
}

.sidebar-modebar {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-800) 78%, white 22%);
}

.modebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.modebar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.modebar-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.workspace-mode-ctrl .seg-btn {
  padding: 7px 10px;
  font-size: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

.header-tool {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.header-tool:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.version-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-600) transparent;
}
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--bg-600); border-radius: 4px; }

body.product-mode-simple [data-pro-panel] {
  display: none !important;
}

.mobile-tabbar {
  display: none;
}

.mobile-tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}

.mobile-settings-fab {
  display: none;
}

/* ===== PANELS ===== */
.panel {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 10px 28px rgba(32, 42, 35, .06);
}
.panel.no-border { background: transparent; border: none; padding: 0; }
.panel-hint { margin-top: -2px; margin-bottom: 10px; text-align: left; }

.planner-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
}

.planner-empty-state[hidden] {
  display: none !important;
}

.planner-empty-copy {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-secondary) 92%, white 8%);
  letter-spacing: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, white 88%);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.intro-panel {
  display: grid;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,244,.86));
}

.intro-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intro-title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.04em;
  color: var(--text-primary);
}

.intro-desc {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.choice-grid {
  display: grid;
  gap: 8px;
}

.choice-card {
  width: 100%;
  appearance: none;
  text-align: left;
  font: inherit;
  background: rgba(255,255,255,.74);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.choice-card:hover { border-color: color-mix(in srgb, var(--border) 65%, white 35%); }
.choice-card.selected {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border) 56%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.02));
}
.choice-card.selected .choice-title { color: var(--text-primary); }
.choice-card.selected .choice-desc { color: color-mix(in srgb, var(--text-primary) 88%, var(--accent) 12%); }
.choice-card.selected .choice-badge {
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.05));
  color: var(--accent);
}
.choice-card.selected .choice-icon {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.06));
}

.choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.choice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.choice-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.choice-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-primary);
  background: rgba(255,255,255,.08);
}

.choice-desc {
  color: color-mix(in srgb, var(--text-secondary) 88%, white 12%);
  font-size: 12px;
  line-height: 1.45;
}

.story-stack {
  display: grid;
  gap: 10px;
}

.story-field {
  display: grid;
  gap: 6px;
}

.story-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-secondary) 90%, white 10%);
  font-weight: 600;
}

.story-input {
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg-800) 76%, white 24%);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.story-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.story-input::placeholder { color: var(--text-muted); }
.story-textarea {
  min-height: 72px;
  resize: vertical;
  font: inherit;
}

.theme-block { margin-top: 12px; }
.theme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.hint-inline {
  font-size: 11px;
  color: color-mix(in srgb, var(--text-secondary) 84%, white 16%);
}
.style-hint {
  margin-top: 8px;
  margin-bottom: 0;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.theme-card {
  width: 100%;
  appearance: none;
  padding: 0;
  font: inherit;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.72);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.theme-card:hover { border-color: color-mix(in srgb, var(--border) 65%, white 35%); }
.theme-card.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border) 58%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.025));
}
.theme-swatch {
  height: 42px;
  border-bottom: 1px solid rgba(24,36,29,.08);
}
.theme-meta {
  padding: 8px;
  display: grid;
  gap: 3px;
}
.theme-name {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 700;
}
.theme-desc {
  font-size: 10px;
  color: color-mix(in srgb, var(--text-secondary) 80%, white 20%);
  line-height: 1.35;
}

/* ===== WAYPOINTS ===== */
#waypoints-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

#waypoints-container::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--success));
  border-radius: 2px;
  z-index: 0;
}

.waypoint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.wp-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid currentColor;
}
.wp-dot.start { background: var(--accent); color: #fff; border-color: var(--accent); }
.wp-dot.start { color: var(--accent-ink); }
.wp-dot.end   { background: var(--success); color: var(--success-ink); border-color: var(--success); }
.wp-dot.mid   { background: var(--bg-600); color: var(--text-secondary); border-color: var(--text-muted); font-size: 8px; }

.wp-input-wrap {
  flex: 1;
  position: relative;
}

.wp-input {
  width: 100%;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--bg-800) 76%, white 24%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.wp-input:focus { border-color: var(--accent); }
.wp-input::placeholder { color: var(--text-muted); }

/* 全局下拉（fixed 定位，不被 overflow:auto 裁剪） */
#city-dropdown {
  position: fixed;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 42px rgba(32,42,35,.14);
  z-index: 99999;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-600) transparent;
}
#city-dropdown.open { display: block; }

.city-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s;
}
.city-item:hover { background: var(--bg-700); }
.city-item.active { background: color-mix(in srgb, var(--accent) 10%, white 90%); }
.city-item .city-name { font-weight: 500; }
.city-item .city-province { font-size: 11px; color: var(--text-muted); }

.wp-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, white 14%);
  background: rgba(255,255,255,.88);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.wp-action:hover {
  transform: translateY(-1px);
}
.wp-action.swap {
  font-size: 14px;
  color: var(--text-secondary);
}
.wp-action.add {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
}
.wp-action.remove {
  font-size: 18px;
}
.wp-action.swap:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border) 62%);
  background: color-mix(in srgb, var(--bg-700) 78%, white 22%);
  color: var(--text-primary);
}
.wp-action.add:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
  background: color-mix(in srgb, var(--accent) 12%, white 88%);
  color: var(--accent);
}
.wp-action.remove:hover {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--border) 64%);
  background: rgba(239,68,68,.08);
  color: var(--danger);
}

/* Route actions */
/* ===== PRESET ROUTES ===== */
#preset-routes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.route-mode-ctrl {
  margin-bottom: 8px;
}
.preset-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.preset-btn {
  flex: 1;
  font-size: 11px;
  line-height: 1.35;
  padding: 5px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-700) 86%, white 14%);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.preset-btn:hover {
  background: var(--bg-600);
  border-color: var(--accent);
  color: var(--text-primary);
}

.route-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.segment-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.segment-editor {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius: 12px;
  background: rgba(255,255,255,.76);
}

.segment-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.segment-editor-label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.segment-editor-name {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.segment-editor-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.segment-transport-ctrl .seg-btn {
  padding: 8px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}
.segment-transport-ctrl .seg-btn.active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border) 52%);
}

.segment-transport-hint {
  margin-top: 0;
  text-align: left;
  font-size: 12px;
  color: var(--accent);
  padding: 0;
  letter-spacing: .1px;
  animation: hint-pulse 2s ease-in-out infinite;
}

.segment-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: 10px;
  align-items: stretch;
}

.segment-note-field {
  align-self: stretch;
}

.segment-intensity-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  align-content: start;
}

.segment-intensity {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.segment-intensity.easy { color: color-mix(in srgb, var(--success) 82%, white 18%); }
.segment-intensity.steady { color: color-mix(in srgb, var(--warning) 82%, white 18%); }
.segment-intensity.hard { color: color-mix(in srgb, var(--danger) 82%, white 18%); }

.segment-intensity-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.segment-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.segment-tabs::-webkit-scrollbar { display: none; }

.segment-tab {
  min-width: 82px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.74);
  color: var(--text-secondary);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.segment-tab.active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.02));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.segment-tab.complete .segment-tab-km {
  color: color-mix(in srgb, var(--success) 72%, white 28%);
}
.segment-tab.pending .segment-tab-km {
  color: color-mix(in srgb, var(--warning) 72%, white 28%);
}

.segment-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.segment-tab-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.segment-tab-km {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}

.segment-tools {
  display: flex;
  gap: 6px;
}
.segment-tools .btn {
  flex: 1;
}

@keyframes mobile-settings-in {
  from {
    opacity: 0;
    transform: translate3d(26px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.segment-hint {
  margin-top: 0;
  text-align: left;
}

.planner-more {
  margin-top: 10px;
}

.planner-more .advanced-body {
  padding-top: 2px;
}

/* ===== CAR BRAND GRID ===== */
#car-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.car-card {
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  background: var(--bg-900);
}
.car-card:hover { transform: translateY(-1px); }
.car-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }

.car-logo {
  width: 44px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  overflow: hidden;
}

.car-name-zh {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* ===== SETTINGS ===== */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg-600);
}
.setting-row:last-child { border-bottom: none; }
.setting-row label:first-child { color: var(--text-secondary); font-size: 12px; }
.setting-stack {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.setting-note {
  margin: 0;
  max-width: 190px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.advanced-panel {
  padding: 0;
  overflow: hidden;
}
.advanced-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}
.advanced-panel summary::-webkit-details-marker { display: none; }
.advanced-panel summary::after {
  content: '▾';
  color: var(--text-muted);
  font-size: 12px;
  transition: transform .2s;
}
.advanced-panel[open] summary::after { transform: rotate(180deg); }
.advanced-panel summary .panel-title { margin-bottom: 0; }
.advanced-summary {
  color: color-mix(in srgb, var(--text-secondary) 82%, white 18%);
  font-size: 11px;
}
.advanced-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 14px;
}
.story-body {
  padding-top: 4px;
}
.advanced-group {
  display: grid;
  gap: 8px;
}
.advanced-title {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

select {
  background: color-mix(in srgb, var(--bg-800) 76%, white 24%);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
select:focus { border-color: var(--accent); }

/* Segmented control */
.seg-ctrl {
  display: flex;
  background: rgba(241,245,238,.94);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.segment-transport-ctrl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.seg-btn {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--text-secondary) 84%, white 16%);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
}
.seg-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.seg-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-700); }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track {
  width: 34px; height: 18px;
  background: var(--bg-600);
  border-radius: 9px;
  transition: background .2s;
  position: relative;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.16) saturate(.72);
  box-shadow: none;
  text-shadow: none;
}

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--bg-600); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: color-mix(in srgb, var(--bg-600) 86%, white 14%); }

.btn-success { background: var(--success); color: var(--success-ink); }
.btn-success:hover { background: var(--success-hover); }
.btn-primary:disabled,
.btn-success:disabled {
  background: color-mix(in srgb, var(--bg-600) 84%, var(--accent) 16%);
  color: color-mix(in srgb, var(--text-secondary) 86%, white 14%);
  border: 1px dashed color-mix(in srgb, var(--border) 68%, var(--accent) 32%);
}
.btn-secondary:disabled,
.btn-ghost:disabled {
  background: color-mix(in srgb, var(--bg-600) 92%, white 8%);
  color: color-mix(in srgb, var(--text-muted) 90%, white 10%);
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--text-muted) 10%);
}

.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); font-size: 12px; }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }

.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.w-full { width: 100%; }
.mt8 { margin-top: 8px; }

.btn-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.hint {
  font-size: 11px;
  color: color-mix(in srgb, var(--text-secondary) 80%, white 20%);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

.copy-board {
  display: grid;
  gap: 8px;
}
.copy-board.empty,
.trip-summary.empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px 14px;
}
.copy-placeholder {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.copy-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.74);
  padding: 10px 12px;
}
.copy-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.copy-item-title {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.copy-item-text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.copy-btn:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: #fff;
}

.trip-summary {
  display: grid;
  gap: 10px;
}

.trip-summary-head {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.76);
}

.trip-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trip-summary-title strong {
  font-size: 15px;
  color: var(--text-primary);
}

.trip-summary-route {
  color: var(--text-secondary);
  font-size: 12px;
}

.trip-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trip-metric {
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-900) 84%, white 16%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
}

.trip-metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.trip-metric-value {
  margin-top: 4px;
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 700;
}

.trip-summary-list {
  display: grid;
  gap: 8px;
}

.trip-day-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.022);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.trip-day-head,
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trip-day-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 700;
}

.trip-day-transport {
  color: var(--text-muted);
  font-size: 11px;
}

.trip-day-route {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
}

.trip-day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trip-day-chip,
.intensity-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, white 24%);
  background: color-mix(in srgb, var(--bg-900) 84%, white 16%);
  color: var(--text-secondary);
}

.intensity-pill.easy {
  color: color-mix(in srgb, var(--success) 82%, white 18%);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.intensity-pill.steady {
  color: color-mix(in srgb, var(--warning) 82%, white 18%);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

.intensity-pill.hard {
  color: color-mix(in srgb, var(--danger) 82%, white 18%);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.trip-day-note {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  padding-top: 2px;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-hint {
  text-align: left;
  margin-top: 10px;
}

.lead-stack {
  gap: 12px;
}

.lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lead-grid select {
  width: 100%;
  min-height: 40px;
}

.scope-hint {
  margin: 2px 0 10px;
  text-align: left;
}

/* ===== MAP AREA ===== */
#map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--bg-900);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 450;
  background: linear-gradient(180deg, rgba(4,7,15,.06), rgba(4,7,15,.18));
}

#map.map-style-satellite::after {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.04), transparent 38%),
    linear-gradient(180deg, rgba(4,10,20,.08), rgba(4,10,20,.26));
}

#map.map-style-atlas::after {
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(12,18,32,.12));
}

#map.map-style-keep::after {
  background:
    radial-gradient(circle at 50% 48%, rgba(78,255,131,.10), transparent 34%),
    linear-gradient(180deg, rgba(9,18,14,.10), rgba(9,18,14,.22));
}

/* Leaflet override */
.leaflet-container { background: #1a2234; }
.leaflet-tile { filter: brightness(.85) saturate(.8); }
#map.map-style-satellite .leaflet-tile {
  filter: saturate(.98) brightness(.95) contrast(1.1);
}
#map.map-style-atlas .leaflet-tile {
  filter: saturate(.9) brightness(1.04) contrast(1.02);
}
#map.map-style-keep .leaflet-tile {
  filter: brightness(.82) saturate(.92) contrast(1.08) hue-rotate(-10deg);
}
.leaflet-control-zoom a {
  background: var(--bg-800) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-700) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.82) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
}
.leaflet-popup-content-wrapper {
  background: var(--bg-800) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}
.leaflet-popup-tip { background: var(--bg-800) !important; }
.route-node-label,
.default-city-label {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(200, 209, 198, .9) !important;
  box-shadow: 0 10px 24px rgba(28, 39, 31, .12);
  color: var(--text-primary) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.route-node-label::before,
.default-city-label::before {
  display: none !important;
}
.default-city-label {
  background: rgba(255,255,255,.82) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(211, 219, 208, .86) !important;
  box-shadow: 0 8px 18px rgba(28, 39, 31, .08);
}

/* ===== ROUTE STATS CHIP ===== */
.map-chip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--bg-800) 90%, var(--accent) 10%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 18px;
  display: flex;
  gap: 20px;
  box-shadow: var(--shadow);
  z-index: 500;
  pointer-events: none;
}
.map-chip span { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.map-chip strong { color: var(--text-primary); }

.mobile-city-picker {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(248, 250, 246, .98);
  z-index: 2400;
  flex-direction: column;
}

.mobile-city-picker.open {
  display: flex;
}

.mobile-city-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.9);
}

.mobile-city-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.mobile-city-picker-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-city-picker-search {
  padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
  background: rgba(255,255,255,.84);
}

.mobile-city-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
}

.mobile-city-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 18px);
  -webkit-overflow-scrolling: touch;
}

.city-group {
  padding: 8px 16px 4px;
}

.city-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.city-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-chip {
  border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
  background: rgba(255,255,255,.86);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-city-results .city-item {
  width: 100%;
  border: none;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
  background: transparent;
  text-align: left;
}

.mobile-city-results .city-item .city-name {
  font-size: 15px;
}

.mobile-city-results .city-item .city-province {
  font-size: 12px;
}

.mobile-city-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ===== ANIMATION OVERLAY ===== */
#anim-overlay {
  position: absolute;
  inset: 0;
  z-index: 1600;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.anim-preview-active .leaflet-control-container,
.anim-preview-active .leaflet-control-attribution {
  opacity: 0;
  pointer-events: none;
}


#anim-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#anim-overlay[data-phase="preview"] #anim-canvas {
  max-height: calc(100% - 60px);
}

#anim-bar {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 52px;
  background: rgba(13,17,23,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.anim-btn {
  background: var(--bg-700);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  width: 34px; height: 34px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center;
}
.anim-btn:hover { background: var(--bg-600); }
.anim-btn.close-btn:hover { background: rgba(239,68,68,.2); color: var(--danger); }

.anim-progress-wrap {
  flex: 1;
  height: 4px;
  background: var(--bg-600);
  border-radius: 2px;
  overflow: hidden;
}
#anim-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .1s linear;
}

#anim-clock { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; min-width: 70px; text-align: center; }

/* ===== ENCODE PROGRESS ===== */
#encode-info,
#prep-info {
  position: absolute;
  top: max(58px, env(safe-area-inset-top) + 52px);
  right: 14px;
  width: min(248px, calc(100% - 28px));
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(14,18,24,.78);
  backdrop-filter: blur(16px) saturate(1.06);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  z-index: 2;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.encode-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.encode-track {
  height: 4px;
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  overflow: hidden;
}
#encode-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd24c, #ffb84d);
  border-radius: 999px;
}
#encode-pct {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  text-align: right;
}

#prep-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffe082, #ffc341);
  border-radius: 999px;
  transition: width .18s ease;
}

#prep-text {
  font-size: 11px;
  color: rgba(255,255,255,.72);
}

#rec-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(239,68,68,.9);
  color: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ===== TOAST ===== */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-700);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  box-shadow: var(--shadow);
  z-index: 9999;
  transition: transform .3s ease;
  pointer-events: none;
  white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.toast-success {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border) 58%);
  background: color-mix(in srgb, var(--success) 12%, white 88%);
}
#toast.toast-error {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border) 62%);
  background: color-mix(in srgb, var(--danger) 10%, white 90%);
}
#toast.toast-info {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
}

/* ===== TRAIL COLOR GRID ===== */
#trail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.trail-card {
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  background: var(--bg-900);
}
.trail-card:hover { transform: translateY(-1px); }
.trail-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }

.trail-swatch {
  width: 100%;
  height: 20px;
  border-radius: 4px;
}

.trail-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
}

/* ===== ZOOM CONTROLS ===== */
.zoom-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.zoom-btn {
  background: var(--bg-900);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1;
}
.zoom-btn:hover { background: var(--bg-700); }
.zoom-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.zoom-btn.fit-btn { font-size: 11px; flex: 1; white-space: nowrap; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-600); border-radius: 4px; }

/* ===== ACTIVE TRANSPORT ===== */
@keyframes hint-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* Cycling-active segment: hide driving-only panels */
body.active-segment-no-car [data-driving-only] { display: none; }

/* ===== MOBILE (bottom sheet layout) ===== */
@media (max-width: 768px) {
  html, body { overflow: hidden; }

  #app { flex-direction: column; }

  /* Map fills entire screen */
  #map-wrap { height: 100vh; flex: none; }

  /* Sidebar becomes a bottom sheet */
  #sidebar {
    --sheet-peek-h: 216px;
    --sheet-mid-h: 56vh;
    --sheet-full-h: calc(100vh - env(safe-area-inset-top) - 10px);
    --sheet-visible-h: var(--sheet-peek-h);
    --sheet-drag-offset: 0px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    min-width: unset;
    height: var(--sheet-full-h);
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    z-index: 1000;
    overflow: hidden;
    background: rgba(248, 250, 246, .92);
    backdrop-filter: blur(22px);
    transform: translateY(calc(var(--sheet-full-h) - var(--sheet-visible-h) + var(--sheet-drag-offset)));
    transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .24s ease;
    will-change: transform;
    box-shadow: 0 -16px 46px rgba(27, 37, 30, .16);
  }
  #sidebar[data-sheet-state="peek"] {
    --sheet-visible-h: var(--sheet-peek-h);
  }
  #sidebar[data-sheet-state="mid"] {
    --sheet-visible-h: var(--sheet-mid-h);
  }
  #sidebar[data-sheet-state="full"] {
    --sheet-visible-h: var(--sheet-full-h);
  }
  #sidebar.dragging {
    transition: none;
  }
  #sidebar .sidebar-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom) + 112px);
  }
  #sidebar[data-sheet-state="peek"] .sidebar-body {
    pointer-events: none;
  }
  #sidebar[data-sheet-state="full"] {
    background: rgba(248, 250, 246, .97);
  }
  body.anim-preview-open #sidebar {
    transform: translateY(calc(var(--sheet-full-h) - 10px)) !important;
    opacity: 0;
    pointer-events: none;
  }

  /* Drag handle indicator */
  .sidebar-header {
    cursor: pointer;
    padding-top: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .sidebar-header::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 4px;
    background: color-mix(in srgb, var(--text-muted) 44%, white 56%);
    border-radius: 2px;
  }
  .sidebar-header { position: relative; }

  /* Chevron icon in header: rotates when open */
  .sidebar-chevron {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color .2s, transform .3s;
    margin-left: 4px;
  }
  #sidebar[data-sheet-state="full"] .sidebar-chevron { transform: translateY(-1px); color: var(--text-primary); }

  /* Route stats chip: move to top of map so sidebar doesn't cover it */
  .map-chip {
    top: 12px;
    bottom: auto;
    left: 12px;
    transform: none;
    padding: 6px 12px;
    gap: 12px;
    font-size: 12px;
  }

  /* Touch-friendlier controls */
  .sidebar-modebar {
    padding: 8px 14px 10px;
  }
  .modebar-head {
    margin-bottom: 6px;
  }
  .panel-hint,
  .scope-hint,
  .hint-inline,
  .action-hint,
  .advanced-summary,
  #segment-hint,
  #segment-intensity-hint,
  #segment-transport-hint,
  .setting-note {
    display: none !important;
  }
  .intro-panel {
    display: none;
  }
  .planner-empty-state {
    padding-bottom: 8px;
  }
  .panel {
    margin-bottom: 8px;
  }
  .route-panel {
    padding: 12px 12px 10px;
  }
  .mobile-tabbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    padding: 10px;
    border-top: 1px solid rgba(215, 223, 212, .82);
    border-radius: 18px;
    background: rgba(248, 250, 246, .94);
    backdrop-filter: blur(22px);
    box-shadow: 0 10px 28px rgba(27, 37, 30, .10);
    z-index: 1101;
    transition: opacity .22s ease, transform .22s ease, background .18s ease;
  }
  .mobile-tab-btn {
    height: 42px;
    border-radius: 12px;
    background: rgba(239, 243, 236, .92);
    color: var(--text-secondary);
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  .mobile-tab-btn.active {
    background: color-mix(in srgb, var(--accent) 16%, white 84%);
    color: var(--text-primary);
  }
  .mobile-tab-btn:active {
    transform: translateY(1px);
  }
  .mobile-settings-fab {
    display: none;
  }
  body.anim-preview-open .mobile-tabbar {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  #sidebar[data-mobile-tab="route"] [data-mobile-panel="more"] {
    display: none !important;
  }
  #sidebar[data-mobile-tab="more"] [data-mobile-panel="route"] {
    display: none !important;
  }
  #sidebar[data-mobile-tab="more"] [data-mobile-panel="more"] {
    animation: mobile-settings-in .28s cubic-bezier(.22,1,.36,1);
    transform-origin: right center;
  }
  body:not(.route-ready) .theme-panel,
  body:not(.route-ready) .template-panel {
    display: none !important;
  }
  #planner-more summary {
    padding: 12px 0 0;
  }
  #planner-more .panel-title {
    margin-bottom: 0;
  }
  #planner-more {
    margin-top: 8px;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  #planner-more .advanced-body {
    padding: 10px 0 0;
  }
  .wp-input,
  .story-input,
  select {
    font-size: 16px;
  }
  .wp-input {
    padding: 11px 12px;
    border-radius: 12px;
  }
  #waypoints-container {
    gap: 6px;
  }
  .wp-action {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .seg-btn  { padding: 8px 10px; }
  .btn      { padding: 10px 14px; font-size: 14px; }
  .zoom-btn { padding: 7px 12px; font-size: 15px; }
  .city-item { padding: 12px 14px; }
  .segment-meta-grid,
  .lead-grid,
  .trip-summary-metrics {
    grid-template-columns: 1fr;
  }
  .action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #map.map-style-keep .leaflet-tile {
    filter: brightness(.96) saturate(.78) contrast(1.02) hue-rotate(-6deg);
  }
  #map.map-style-keep::after {
    background:
      radial-gradient(circle at 50% 48%, rgba(78,255,131,.08), transparent 34%),
      linear-gradient(180deg, rgba(9,18,14,.05), rgba(9,18,14,.12));
  }

  #encode-info,
  #prep-info {
    top: max(54px, env(safe-area-inset-top) + 48px);
    right: 12px;
    width: min(220px, calc(100% - 24px));
  }
}