@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #172d28;
  --muted: #74817c;
  --line: #e8eeea;
  --paper: #ffffff;
  --canvas: #f3f6f4;
  --green: #16785d;
  --green-dark: #0f5c47;
  --mint: #e8f4ee;
  --blue: #4278e6;
  --amber: #d88a2d;
  --rose: #d66561;
  font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, select, input { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(22, 120, 93, .2); outline-offset: 2px; }
.app-shell { min-height: 100vh; padding: 0 28px 26px; }

.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e4ebe6; }
.brand { min-width: 260px; display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, #239477, #0e5a47); box-shadow: 0 6px 12px rgba(15, 92, 71, .16); }
.brand-mark svg { width: 28px; height: 28px; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font: 800 17px/1 'Manrope', sans-serif; letter-spacing: -.045em; }
.brand-copy em { color: var(--green); font-style: normal; }
.brand-copy small { color: #8d9993; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.topbar-center { display: flex; align-items: center; gap: 8px; color: #5f7069; font-size: 11px; font-weight: 600; }
.pulse-dot, .map-state-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #34a47f; box-shadow: 0 0 0 4px rgba(52, 164, 127, .11); }
.demo-pill { padding: 5px 7px; border: 1px solid #e2ebe4; border-radius: 5px; color: #66776e; background: #f8fbf8; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.topbar-actions { min-width: 260px; display: flex; justify-content: flex-end; gap: 9px; }
.icon-button, .reset-button, .export-button { min-height: 36px; border: 1px solid #e2e9e4; border-radius: 8px; background: #fff; color: #53665d; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.icon-button { padding: 0 11px; }
.icon-button span { margin-left: 5px; color: var(--green); font-size: 14px; }
.reset-button { padding: 0 12px; border-color: #d9eae1; color: var(--green-dark); background: #eef7f1; }
.reset-button span { margin-right: 5px; font-size: 15px; }
.icon-button:hover, .reset-button:hover, .export-button:hover { border-color: #b8d3c4; transform: translateY(-1px); }

.workspace { max-width: 1720px; min-height: calc(100vh - 104px); margin: 0 auto; padding-top: 20px; display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 20px; }
.control-panel, .map-panel { min-width: 0; border: 1px solid #e6ece8; border-radius: 16px; background: var(--paper); box-shadow: 0 10px 30px rgba(30, 59, 45, .045); }
.control-panel { align-self: start; overflow: hidden; }
.panel-section { padding: 20px 21px; border-bottom: 1px solid #edf1ee; }
.route-section { padding-top: 22px; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.section-title-row.compact { align-items: center; }
.eyebrow { margin: 0 0 5px; color: #89968f; font-size: 8px; line-height: 1.2; font-weight: 800; letter-spacing: .15em; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.035em; }
h1 { font-size: 22px; line-height: 1.2; }
h2 { font-size: 15px; line-height: 1.25; }
.section-copy { margin: 7px 0 15px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.step-number { color: #b3c6bb; font: 700 11px 'Manrope', sans-serif; }
.route-inputs { position: relative; display: grid; gap: 9px; }
.field { min-width: 0; display: grid; gap: 6px; }
.field-label { display: flex; justify-content: space-between; align-items: center; color: #89958e; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.field-label strong { color: #425c4f; font-size: 9px; letter-spacing: 0; }
.field-control { position: relative; display: flex; align-items: center; }
.field-control select { padding-left: 34px; }
.origin-pin, .destination-pin { position: absolute; z-index: 1; left: 12px; width: 9px; height: 9px; border: 2px solid #35a17d; border-radius: 50%; background: #fff; }
.destination-pin { border-color: #dc8a32; border-radius: 2px; transform: rotate(45deg); }
select { width: 100%; min-width: 0; height: 39px; padding: 0 31px 0 11px; appearance: none; border: 1px solid #e2e9e4; border-radius: 8px; color: #293c32; background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.swap-button { position: absolute; z-index: 2; top: 39px; right: 8px; width: 25px; height: 25px; min-height: 25px; border: 1px solid #e2e9e4; border-radius: 7px; color: #718278; background: #f6f9f6; font-size: 14px; line-height: 1; cursor: pointer; }
.quick-routes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.route-chip { padding: 6px 8px; border: 1px solid #e9efea; border-radius: 7px; color: #65746c; background: #fafcfb; font-size: 8px; font-weight: 600; cursor: pointer; }
.route-chip span { padding: 0 2px; color: #71a18a; }
.route-chip:hover { border-color: #bfd9ca; color: var(--green-dark); }
.primary-button { width: 100%; min-height: 41px; margin-top: 12px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; color: #fff; background: var(--green); box-shadow: 0 6px 13px rgba(22, 120, 93, .15); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.primary-button span { font-size: 17px; font-weight: 400; }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.journey-card { margin-top: 14px; padding: 12px 12px 10px; border: 1px solid #e5eee8; border-radius: 10px; background: linear-gradient(140deg, #f8fbf8, #f2f8f3); }
.journey-heading { display: flex; align-items: center; gap: 7px; color: #476454; font-size: 9px; font-weight: 700; }
.route-ready-dot { width: 6px; height: 6px; border-radius: 50%; background: #39a47d; }
.journey-metrics { display: grid; grid-template-columns: 1.15fr 1fr .7fr; gap: 8px; padding: 11px 0 7px; }
.journey-metrics div { min-width: 0; display: grid; gap: 4px; }
.journey-metrics div + div { padding-left: 10px; border-left: 1px solid #dce9df; }
.journey-metrics strong { overflow: hidden; color: #183b2d; font: 800 20px/1.1 'Manrope', sans-serif; letter-spacing: -.06em; text-overflow: ellipsis; white-space: nowrap; }
.journey-metrics span { color: #92a096; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.route-path { min-height: 14px; padding-top: 8px; border-top: 1px solid #e3ece4; color: #698075; font-size: 9px; line-height: 1.5; }
.alternatives-wrap { margin-top: 14px; }
.subsection-heading { display: flex; justify-content: space-between; align-items: center; color: #496154; font-size: 9px; }
.subsection-heading > span { color: #8e9b93; font-size: 8px; font-weight: 700; }
.route-options { display: grid; gap: 6px; margin-top: 8px; }
.route-option { width: 100%; min-height: 40px; padding: 6px 9px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border: 1px solid #e8eeea; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.route-option:hover, .route-option.active { border-color: #a7d0bb; background: #f5faf6; }
.route-option-main { display: grid; gap: 3px; }
.route-option-name { color: #3a5145; font-size: 9px; font-weight: 700; }
.route-option-stops { overflow: hidden; color: #8b9890; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.route-option-meta { display: grid; justify-items: end; gap: 3px; color: #244837; font-size: 10px; font-weight: 800; }
.route-option-meta small { color: #87948c; font-size: 8px; font-weight: 600; }
.no-options { padding: 8px 0; color: #9ba69f; font-size: 9px; }

.section-icon, .forecast-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #b46a28; background: #fff3e5; font-size: 14px; }
.forecast-icon { color: #657be3; background: #eef0ff; }
.incident-section .section-copy { margin-bottom: 12px; }
.select-control { position: relative; display: block; }
.select-control > span { position: absolute; top: 9px; right: 10px; color: #87948c; pointer-events: none; }
.select-control select { height: 35px; padding-left: 10px; font-size: 9px; }
.event-row { display: grid; grid-template-columns: minmax(0, 1fr) 83px; gap: 8px; margin-top: 9px; }
.event-row select { height: 34px; }
#factor-wrap[hidden] { display: none; }
.secondary-button { width: 100%; min-height: 35px; margin-top: 10px; border: 1px solid #d8e8de; border-radius: 7px; color: #21674e; background: #eef7f1; font-size: 9px; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.secondary-button:hover { border-color: #a9d2bb; background: #e4f2e9; }
.status-message { min-height: 13px; margin-top: 6px; color: #819087; font-size: 8px; line-height: 1.4; }
.status-message.error { color: #b34b47; }
.status-message.success { color: #32835f; }
.active-events { margin-top: 8px; }
.event-list { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 7px; }
.empty-events { color: #a0aaa3; font-size: 8px; }
.event-tag { padding: 5px 7px; border: 1px solid #f1dfd8; border-radius: 6px; color: #a55c45; background: #fff8f5; font-size: 8px; font-weight: 600; }
.event-tag.congestion { border-color: #f1e6cb; color: #9b7128; background: #fffbef; }
.forecast-section { padding-top: 17px; padding-bottom: 15px; }
.forecast-section .section-copy { margin-bottom: 11px; }
.forecast-controls { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: end; }
.hour-field { gap: 10px; }
.hour-field input { width: 100%; margin: 3px 0 8px; accent-color: var(--green); }
.forecast-button { width: 100%; min-height: 34px; margin-top: 6px; border: 1px solid #e0e4f5; border-radius: 7px; color: #4d5bb4; background: #f2f3ff; font-size: 9px; font-weight: 700; cursor: pointer; }
.forecast-button:hover { border-color: #c5ccef; background: #e9ebff; }
.forecast-button span { margin-right: 5px; }
.forecast-note { margin-top: 7px; color: #909b93; font-size: 8px; line-height: 1.4; }
.traffic-section { display: flex; justify-content: space-between; align-items: center; padding-top: 13px; padding-bottom: 13px; }
.traffic-copy { display: flex; align-items: center; gap: 9px; }
.traffic-copy > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #577a68; background: #edf5ef; font-size: 17px; }
.traffic-copy div { display: grid; gap: 3px; }
.traffic-copy strong { color: #455a4d; font-size: 9px; }
.traffic-copy small { color: #9aa49d; font-size: 8px; }
.refresh-button { width: 29px; height: 29px; min-height: 29px; border: 1px solid #e4ebe5; border-radius: 7px; color: #5f7e6d; background: #fff; font-size: 17px; cursor: pointer; }
.panel-footer { padding: 11px 21px; display: flex; gap: 6px; color: #a2aba5; font-size: 8px; }

.map-panel { min-height: 690px; padding: 20px; display: flex; flex-direction: column; }
.map-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 2px 2px 15px; }
.map-heading h2 { font-size: 17px; }
.map-heading-right { display: flex; align-items: center; gap: 8px; color: #6d7b72; font-size: 9px; font-weight: 700; }
.map-state-dot { width: 6px; height: 6px; box-shadow: none; }
.export-button { min-height: 31px; margin-left: 8px; padding: 0 9px; font-size: 9px; }
.export-button span { margin-left: 3px; color: var(--green); }
.map-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.map-stats[hidden], .map-legend[hidden] { display: none; }
.stat-card { min-height: 59px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #ebefec; border-radius: 9px; background: #fcfdfc; }
.stat-icon { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 700; }
.stat-icon.blue { color: #4d77c5; background: #eff4ff; }
.stat-icon.green { color: #44916d; background: #edf7ef; }
.stat-icon.amber { color: #be8136; background: #fff5e9; }
.stat-icon.rose { color: #c16561; background: #fff0ef; }
.stat-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.stat-card small { color: #9aa49d; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.stat-card strong { color: #385145; font: 800 15px/1 'Manrope', sans-serif; }
.map-stage { position: relative; flex: 1; min-height: 490px; overflow: hidden; border: 1px solid #e3eae5; border-radius: 11px; background: #e3ebe5; }
#map { position: absolute; inset: 0; z-index: 1; background: #e3ebe5; }
.map-overlay-top { position: absolute; z-index: 500; top: 13px; left: 13px; right: 13px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.map-location { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(227, 234, 229, .9); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 3px 10px rgba(35,61,47,.08); }
.location-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: #edf7f0; font-size: 15px; }
.map-location div { display: grid; gap: 3px; }
.map-location small { color: #96a199; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.map-location strong { color: #365043; font-size: 9px; }
.synthetic-map-badge { margin-top: 3px; padding: 7px 9px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(227, 234, 229, .9); border-radius: 999px; color: #748379; background: rgba(255,255,255,.94); font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.synthetic-map-badge i { width: 6px; height: 6px; border-radius: 50%; background: #43a279; }
.map-legend { position: absolute; z-index: 500; left: 13px; bottom: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding: 9px 11px; border: 1px solid rgba(227,234,229,.95); border-radius: 8px; color: #738078; background: rgba(255,255,255,.96); box-shadow: 0 3px 10px rgba(35,61,47,.08); font-size: 8px; pointer-events: none; }
.map-legend strong { color: #87938b; font-size: 7px; letter-spacing: .11em; }
.map-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-line { width: 16px; height: 0; display: inline-block; border-top: 3px solid; border-radius: 3px; }
.legend-line.fast { border-color: #39a27b; }
.legend-line.slow { border-color: #e19a43; }
.legend-line.closed { border-color: #919a94; border-top-style: dashed; }
.legend-line.selected { border-color: #3979ed; }
.map-footnote { position: absolute; z-index: 500; right: 8px; bottom: 5px; padding: 3px 5px; border-radius: 4px; color: #78847c; background: rgba(255,255,255,.8); font-size: 7px; pointer-events: none; }
.map-disclaimer { min-height: 40px; padding: 12px 2px 1px; display: flex; align-items: center; gap: 8px; color: #8c9890; font-size: 8px; line-height: 1.45; }
.info-icon { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cbd7ce; border-radius: 50%; color: #789083; font: 700 9px Georgia, serif; }
.map-disclaimer button { flex: 0 0 auto; margin-left: auto; padding: 5px 0 5px 8px; border: 0; color: var(--green); background: transparent; font-size: 8px; font-weight: 700; cursor: pointer; }
.leaflet-container { font-family: 'DM Sans', sans-serif; }
.leaflet-popup-content { color: #355044; font-size: 10px; line-height: 1.5; }
.leaflet-tooltip.place-label { padding: 4px 6px; border: 1px solid rgba(220,229,222,.9); border-radius: 5px; color: #486457; background: rgba(255,255,255,.94); box-shadow: 0 2px 5px rgba(0,0,0,.06); font-size: 8px; font-weight: 700; }
.leaflet-tooltip-top.place-label:before { border-top-color: white; }

@media (min-width: 1450px) {
  .workspace { grid-template-columns: minmax(350px, 405px) minmax(0, 1fr); gap: 23px; padding-top: 23px; }
  .panel-section { padding-right: 23px; padding-left: 23px; }
  .map-panel { padding: 23px; }
  .map-stage { min-height: 590px; }
}
@media (max-width: 1050px) {
  .app-shell { padding-right: 16px; padding-left: 16px; }
  .workspace { grid-template-columns: minmax(290px, 345px) minmax(0, 1fr); gap: 13px; }
  .panel-section { padding-right: 15px; padding-left: 15px; }
  .map-panel { padding: 15px; }
  .topbar-center { display: none; }
  .map-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { padding: 0 10px 14px; }
  .topbar { height: 67px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 7px; }
  .topbar-actions { min-width: 0; gap: 6px; }
  .icon-button { width: 34px; min-width: 34px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .icon-button span { margin: 0; color: var(--green); font-size: 16px; }
  .reset-button { min-height: 33px; padding: 0 8px; font-size: 9px; }
  .workspace { min-height: 0; padding-top: 10px; grid-template-columns: 1fr; gap: 10px; }
  .control-panel { order: 2; }
  .map-panel { order: 1; min-height: 610px; padding: 13px; }
  .map-heading { padding-bottom: 11px; }
  .map-heading h2 { font-size: 14px; }
  .map-heading-right { gap: 5px; font-size: 8px; }
  .export-button { min-height: 29px; margin-left: 2px; padding: 0 7px; }
  .stat-card { min-height: 51px; padding: 7px; gap: 7px; }
  .stat-icon { width: 24px; height: 24px; }
  .map-stage { min-height: 400px; }
  .map-legend { left: 8px; bottom: 10px; gap: 7px; padding: 7px 8px; }
  .map-legend strong { display: none; }
  .map-location { padding: 6px 8px; }
  .synthetic-map-badge { font-size: 6px; }
  .map-disclaimer { align-items: flex-start; }
  .map-disclaimer button { padding-top: 0; }
}
@media (max-width: 390px) {
  .app-shell { padding-right: 7px; padding-left: 7px; }
  .brand-copy small { letter-spacing: .09em; }
  .reset-button { padding: 0 6px; }
  .map-heading-right > #map-status { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-location small { font-size: 6px; }
  .map-legend { gap: 6px; font-size: 7px; }
  .legend-line { width: 12px; }
}

/* Worldwide route planner, account, and installable-app controls. */
.topbar-actions { min-width: 0; }
.auth-button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; color: #fff; background: var(--green-dark); font-size: 11px; font-weight: 700; cursor: pointer; }
.auth-button:hover { background: #0a4c3a; }
.install-button[hidden] { display: none; }
.install-button { min-width: 82px; padding: 0 10px; color: var(--green-dark); white-space: nowrap; }
.global-route-section { padding-top: 22px; background: linear-gradient(180deg, #f6fbf8 0%, #fff 160px); }
.global-route-inputs { display: grid; gap: 10px; }
.care-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 11px 0 12px; }
.care-examples > span { flex-basis: 100%; color: #778a7e; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.care-example { padding: 7px 9px; border: 1px solid #cfe4d6; border-radius: 999px; background: #f1f9f3; color: var(--green-dark); font-size: 9px; font-weight: 700; cursor: pointer; }
.care-example:hover, .care-example:focus-visible { border-color: #6caa8b; background: #e7f5eb; }
.care-safety-note { margin: 3px 0 0; color: #795946; font-size: 9px; line-height: 1.45; }
.global-route-inputs input, .provider-setup input, .email-auth-form input { width: 100%; min-height: 42px; padding: 0 12px 0 35px; border: 1px solid #e1e9e4; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; }
.global-route-inputs input::placeholder, .provider-setup input::placeholder, .email-auth-form input::placeholder { color: #a3aea7; }
.global-route-inputs input:focus, .provider-setup input:focus, .email-auth-form input:focus { border-color: #85bca2; box-shadow: 0 0 0 3px rgba(22, 120, 93, .09); }
.global-route-tools { display: flex; justify-content: space-between; margin: 9px 0 14px; }
.text-button { padding: 0; border: 0; color: #47745f; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.text-button:hover { color: var(--green-dark); text-decoration: underline; }
.profile-field { margin-bottom: 12px; }
.global-route-section .primary-button { margin-top: 0; }
.global-route-status { min-height: 28px; padding-top: 9px; color: #74817c; font-size: 10px; line-height: 1.45; }
.global-route-status.error, .provider-key-status.error { color: #b64f4c; }
.global-route-status.success, .provider-key-status.success { color: #16785d; }
.global-route-result { margin-top: 7px; padding: 13px; border: 1px solid #dcebe1; border-radius: 10px; background: #f5faf6; }
.global-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.save-route-button { padding: 7px 10px; border: 1px solid #d6e6dc; border-radius: 7px; color: #176c54; background: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
.save-route-button:hover { background: #eaf5ee; }
.global-result-metrics { display: flex; gap: 27px; margin-top: 13px; }
.global-result-metrics div { display: grid; gap: 2px; }
.global-result-metrics strong { color: #1d3d31; font: 700 17px 'Manrope', sans-serif; }
.global-result-metrics span { color: #89958e; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.global-route-note { margin-top: 10px; color: #718178; font-size: 9px; line-height: 1.4; }
.provider-setup { margin-top: 7px; padding-top: 9px; border-top: 1px solid #e9efeb; }
.provider-setup summary { color: #416b57; font-size: 10px; font-weight: 700; cursor: pointer; }
.provider-setup > p { margin: 8px 0 10px; color: #738078; font-size: 9px; line-height: 1.5; }
.provider-setup input { min-height: 37px; padding-left: 10px; font-size: 11px; }
.provider-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.provider-actions .secondary-button { width: auto; min-height: 32px; padding: 0 12px; }
.provider-actions a { color: #4c7862; font-size: 10px; font-weight: 700; text-decoration: none; }
.provider-actions a:hover { text-decoration: underline; }
.provider-key-status { margin-top: 8px !important; font-size: 9px !important; }
.saved-routes { margin-top: 15px; }
.saved-route-list { display: grid; gap: 6px; margin-top: 8px; }
.saved-route-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid #edf1ee; border-radius: 8px; background: #fff; color: #52645a; text-align: left; font-size: 10px; cursor: pointer; }
.saved-route-item:hover { border-color: #bcd8c8; background: #f7fbf8; }
.saved-route-item span:last-child { color: #85948c; white-space: nowrap; }
.route-section h2 { margin-top: 1px; }
.auth-dialog, .install-dialog { width: min(420px, calc(100vw - 30px)); padding: 26px; border: 1px solid #e6ece8; border-radius: 18px; color: var(--ink); box-shadow: 0 22px 75px rgba(19, 45, 33, .22); }
.auth-dialog::backdrop { background: rgba(18, 37, 29, .42); backdrop-filter: blur(3px); }
.install-dialog::backdrop { background: rgba(18, 37, 29, .42); backdrop-filter: blur(3px); }
.auth-dialog form:first-child { position: absolute; top: 13px; right: 13px; }
.dialog-close { width: 30px; height: 30px; border: 1px solid #e4ebe6; border-radius: 50%; background: #fff; color: #627269; font-size: 21px; line-height: 1; cursor: pointer; }
.auth-dialog-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.auth-dialog-brand .brand-mark { width: 37px; height: 37px; display: grid; place-items: center; font: 800 18px 'Manrope', sans-serif; }
.auth-dialog h2 { font-size: 21px; }
.install-dialog h2 { font-size: 21px; }
.install-steps { margin: 17px 0; padding-left: 22px; color: #405148; font-size: 12px; line-height: 1.7; }
.install-note { margin-top: 16px; color: #77847c; font-size: 10px; line-height: 1.5; }
.auth-intro { margin: 7px 0 19px; color: #77847c; font-size: 11px; }
.google-button { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #dfe6e2; border-radius: 8px; background: #fff; color: #405148; font-size: 11px; font-weight: 700; cursor: pointer; }
.google-button span { color: #4285f4; font: 700 17px Arial, sans-serif; }
.google-button:hover { background: #f8faf9; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #9aa49e; font-size: 9px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #edf1ee; }
.email-auth-form { display: grid; gap: 12px; }
.email-auth-form input { padding-left: 11px; }
.email-auth-form .primary-button { margin-top: 2px; }
.auth-mode-toggle, .auth-signout { margin-top: 13px; padding: 0; border: 0; color: #47745f; background: none; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-status, .auth-setup-note { margin-top: 12px; color: #77847c; font-size: 10px; line-height: 1.5; }
.auth-status.error { color: #b64f4c; }
.auth-setup-note { padding: 10px; border-radius: 8px; background: #f3f7f4; }
.auth-setup-note code { color: #165f49; }
@media (max-width: 680px) {
  .topbar-actions { flex-wrap: nowrap; }
  .topbar-actions .icon-button { display: none; }
  .topbar-actions .install-button { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 32px; padding: 0 6px; color: var(--green-dark); background: #fff; font-size: 9px; }
  .topbar-actions .auth-button, .topbar-actions .reset-button { min-height: 32px; padding: 0 8px; font-size: 9px; }
  .global-route-section { padding: 17px 16px; }
  .global-result-metrics { gap: 20px; }
}
@media (max-width: 760px) {
  .topbar-actions .install-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 60px; min-height: 32px; padding: 0 7px; overflow: visible; color: var(--green-dark); font-size: 9px; }
}