:root {
  --accent: #20b982;
  --accent-2: #38d6a0;
  --accent-deep: #071817;
  --accent-soft: #173d33;
  --ink: #f4fbf8;
  --muted: #9fb8af;
  --line: #ffffff1a;
  --shadow: 0 22px 56px #00000070;
}

body { background: #071213; color: var(--ink); }
button:hover { background: #20b98222; }
#map { inset: 0; filter: saturate(.94) contrast(1.03); }
.workspace::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#040d0e20, transparent 18% 78%, #040d0e18); z-index: 1; }
.rail, .sidebar, .detail, .layers, .map-top > span, .map-top .small-button, .map-tools .icon-button, .traffic-widget, .traffic-floating-legend {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #0b1718f2;
  border: 1px solid #7ee4b026;
  box-shadow: var(--shadow);
}
.rail { inset: 20px auto 20px 20px; width: 68px; border-radius: 20px; padding: 12px 5px; z-index: 18; }
.brand-mark { width: 48px; height: 48px; background: linear-gradient(145deg, #2fd096, #168b62); box-shadow: 0 12px 28px #168b6250; }
.brand-mark:hover { background: linear-gradient(145deg, #43dfaa, #15966b); }
.brand-mark svg, .qalay-pin svg { stroke: #0c704f; }
.nav-button { color: #a8bbb4; width: 56px; min-height: 58px; }
.nav-button.active { color: #fff; background: #20b9822b; }
.nav-button.active svg { color: #38d6a0; }
.sidebar { left: 104px; top: 20px; bottom: 20px; width: 390px; border-radius: 24px; z-index: 17; overflow: hidden; transition: transform .22s ease, opacity .22s ease; }
.sidebar.mobile-collapsed { transform: translateX(calc(-100% - 130px)); opacity: 0; pointer-events: none; }
.sidebar-header { position: relative; padding: 17px 18px 13px; }
.sidebar-header > div:first-of-type { order: 1; }
.header-actions, .detail-top > div, .panel-title { display: flex; align-items: center; gap: 5px; }
.header-actions { order: 2; margin-left: auto; flex: 0 0 auto; }
.header-actions .icon-button { background: #ffffff0d; border: 1px solid #ffffff17; }
.sheet-handle { order: 3; margin-left: 5px; }
.wordmark { color: #fff; font-size: 31px; line-height: 36px; letter-spacing: -1.5px; }
.qalay-pin { width: 32px; height: 32px; background: linear-gradient(145deg, #2fd096, #15966b); }
.qalay-pin svg { width: 19px; height: 19px; }
.city-label, .result p, .results-heading span, .detail-heading p, .contact-row small, .route-view label, .route-view p, .info-view p { color: var(--muted); }
.icon-button { color: #dcebe5; }
.search-box, .route-view input, .category-panel > input { color: #fff; background: #191f22e8; border-color: #ffffff1a; box-shadow: none; }
.search-box input, .route-view input, .category-panel > input { color: #fff; }
.search-box input::placeholder, .route-view input::placeholder, .category-panel > input::placeholder { color: #8ca099; }
.search-box:focus-within { border-color: #38d6a070; box-shadow: 0 0 0 3px #20b98220; }
.search-box .icon-button, .primary { background: linear-gradient(145deg, #2fd096, #15966b); box-shadow: 0 10px 24px #168b6245; }
.search-box > svg, .small-button svg, .results-heading > svg, .info-view dd { color: #38d6a0; }
.quick-categories, .filter-bar, .sidebar-footer, .result, .detail-top, .detail-section, .category-panel { border-color: var(--line); }
.quick-categories button { color: #d8e7e1; }
.quick-categories svg, .quick-categories button:nth-child(n) svg { color: #35d39c; background: #17352d; box-shadow: inset 0 0 0 1px #35d39c30; }
.quick-categories button.active { color: #fff; background: #20b98222; box-shadow: inset 0 0 0 1px #38d6a05c; }
.quick-categories button.active svg { color: #071817; background: linear-gradient(145deg, #55e4b2, #20b982); box-shadow: 0 8px 18px #20b98238; }
.small-button { color: #dcebe5; background: #181f21e8; border-color: #ffffff1a; }
.result:hover, .category-option:hover { background: #20b98216; }
.result.selected, .category-option.selected { color: #fff; background: #20b98224; border-left-color: #2fd096; }
.result h3 { color: #f4fbf8; }
.result p.category, .result-meta, .result-arrow { color: #a9beb6; }
.result-icon { color: #fff; box-shadow: 0 7px 18px #0005, inset 0 0 0 1px #ffffff42; }
.suggestions {
  z-index: 26;
  color: #f4fbf8;
  background: #101b1cf7;
  border-color: #7ee4b033;
  box-shadow: 0 20px 44px #0009;
}
.suggestions .result { color: #f4fbf8; background: transparent; border-color: #ffffff14; }
.suggestions .result:hover, .suggestions .result:focus-visible { background: #20b98222; }
.suggestions .result p { color: #b6c8c1; }
.route-modes button, .route-toolbar select {
  color: #dcebe5;
  background: #171f20;
  border-color: #ffffff1f;
}
.route-modes button.active {
  color: #eafff7;
  background: #173d33;
  border-color: #38d6a0;
}
.route-modes small { color: #a8bbb4; }
.active-filter { color: #bdf7df; background: #173d33; }
.active-filter .filter-chip { color: #fff; background: #ffffff0d; border-color: #38d6a047; }
.map-top { left: 514px; z-index: 12; transition: left .22s ease; }
.map-top > span, .map-top .small-button { color: #f1faf6; }
.map-tools { z-index: 14; }
.map-tools .icon-button { color: #d5e5df; border-radius: 13px; }
.map-tools .icon-button:hover { color: #3ce09e; background: #0d251ff7; border-color: #3ce09e66; }
.traffic-widget { --traffic-color: #64748b; position: absolute; z-index: 15; right: 20px; top: 20px; min-width: 190px; min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; color: #f5fffb; border-radius: 17px; text-align: left; }
.traffic-widget:hover, .traffic-widget.active { background: #102522f7; border-color: color-mix(in srgb,var(--traffic-color) 68%,transparent); }
.traffic-widget:disabled { cursor: wait; opacity: .7; }
.traffic-widget > svg { width: 16px; margin-left: auto; color: #9db0aa; transition: transform .2s ease; }
.traffic-widget.active > svg { transform: rotate(90deg); }
.traffic-score { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-content: center; text-align: center; color: #fff; background: var(--traffic-color); border-radius: 14px; box-shadow: 0 6px 18px color-mix(in srgb,var(--traffic-color) 42%,transparent); }
.traffic-score strong { font-size: 24px; line-height: 22px; }.traffic-score small { font-size: 8px; text-transform: uppercase; }
.traffic-copy { display: grid; }.traffic-copy strong { font-size: 14px; }.traffic-copy small { color: #a8bbb5; font-size: 10px; max-width: 92px; }
.traffic-floating-legend { position: absolute; z-index: 14; top: 92px; right: 20px; width: 190px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; color: #dceae5; border-radius: 14px; font-size: 10px; }
.traffic-floating-legend span { display: flex; align-items: center; gap: 5px; }.traffic-floating-legend i { width: 16px; height: 4px; border-radius: 99px; }
.traffic-floating-legend .free { background:#22c55e }.traffic-floating-legend .slow { background:#facc15 }.traffic-floating-legend .jam { background:#ef4444 }.traffic-floating-legend .closed { background:#991b1b }
.traffic-floating-legend > small { grid-column: 1/-1; color: #91a69f; border-top: 1px solid #ffffff14; padding-top: 7px; }
.layers { z-index: 24; color: #eff9f5; background: #11101bf7; border-radius: 20px; width: 250px; }
.panel-title { justify-content: space-between; margin-bottom: 7px; }
.layers h2 { margin: 0; }
.layers label { color: #d8e6e1; border-radius: 10px; padding: 8px; }
.layers label:hover { background: #ffffff0b; }
.layers label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.traffic-option small { display: block; color: #8ea39c; font-size: 10px; line-height: 1.2; }
.swatch.traffic { width: 30px; background: linear-gradient(90deg,#22c55e 0 30%,#facc15 30% 55%,#ef4444 55% 80%,#991b1b 80%); }
.traffic-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: -2px 8px 7px 31px; font-size: 10px; color: #aebfba; }
.traffic-legend span { display: flex; align-items: center; gap: 5px; }
.traffic-legend i { width: 14px; height: 4px; border-radius: 999px; }
.traffic-legend .free { background: #22c55e; }.traffic-legend .slow { background: #facc15; }.traffic-legend .jam { background: #ef4444; }.traffic-legend .closed { background: #991b1b; }
.detail { left: 514px; top: 20px; bottom: 20px; width: 370px; max-width: calc(100% - 610px); color: #f4fbf8; background: #11101bf7; border-radius: 22px; z-index: 23; transition: height .2s ease, transform .2s ease; }
.detail-top { position: sticky; top: 0; z-index: 2; background: #11101bfa; }
.detail.mobile-collapsed { top: auto; height: 58px; bottom: 20px; overflow: hidden; }
.detail.mobile-collapsed .detail-content { display: none; }
.detail-actions .saved { background: #173d33; color: #38d6a0; }
.detail-actions .icon-button { border-color: #ffffff1c; }
.hours-row { color: #b4c8c0; }
.panel-restore { display: none; position: absolute; z-index: 20; left: 104px; top: 20px; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; color: #fff; background: linear-gradient(145deg, #2fd096, #15966b); border-radius: 15px; box-shadow: 0 14px 32px #0f8b6057; }
body.panel-collapsed .panel-restore { display: inline-flex; }
body.panel-collapsed .map-top { left: 220px; }
.toast { left: auto; right: 20px; z-index: 32; color: #fff; background: #071817f5; border: 1px solid #7ee4b03b; }

/* Navigation overlays sit above a pale map, so their text needs its own contrast. */
.navigation-top, .navigation-bottom {
  color: #f4fbf8;
  background: #0b1718f2;
  border: 1px solid #7ee4b03b;
  box-shadow: 0 14px 36px #00000052;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.navigation-top strong, .navigation-top p, .navigation-top small, #navSummary {
  color: #f4fbf8;
  text-shadow: -1px 0 #071817, 0 1px #071817, 1px 0 #071817, 0 -1px #071817, 0 2px 5px #0009;
}
.navigation-top small { color: #b7cbc3; }
.navigation-tools button {
  color: #e9f7f1;
  background: #0b1718f2;
  border: 1px solid #7ee4b033;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .sidebar { left: 94px; width: 340px; }
  .rail { left: 14px; }
  .map-top, .detail { left: 450px; }
  .detail { max-width: calc(100% - 530px); }
  .panel-restore { left: 94px; }
  body.panel-collapsed .map-top { left: 210px; }
}

@media (max-width: 700px) {
  .workspace::after { background: linear-gradient(#040d0e16, transparent 28% 72%, #040d0e30); }
  #map { inset: 0; width: 100%; height: 100dvh; }
  .rail { inset: auto 8px calc(env(safe-area-inset-bottom) + 8px) 8px; width: auto; height: 62px; flex-direction: row; justify-content: space-around; padding: 4px 8px; border-radius: 19px; z-index: 30; }
  .nav-button { width: 72px; min-height: 50px; gap: 2px; }
  .nav-button.active { background: #20b9822b; }
  .sidebar { inset: auto 8px calc(env(safe-area-inset-bottom) + 80px) 8px; width: auto; height: min(68dvh, 620px); max-height: calc(100dvh - 102px); border-radius: 26px; z-index: 22; transform: translateY(0); }
  .detail::before, .layers::before { content: ""; position: absolute; z-index: 4; top: 10px; left: 50%; width: 44px; height: 5px; border-radius: 999px; background: #ffffff28; transform: translateX(-50%); }
  .sidebar.mobile-collapsed { transform: translateY(calc(100% + 100px)); opacity: 0; }
  .sidebar-header { padding: 23px 14px 9px; }
  .sidebar-header > div:first-child { gap: 8px; }
  .wordmark { font-size: 26px; line-height: 31px; }
  .qalay-pin { width: 30px; height: 30px; }
  .city-label { display: none; }
  .header-actions { display: flex !important; position: absolute; top: 20px; right: 12px; z-index: 8; margin-left: 0; }
  .header-actions .icon-button { width: 36px; height: 36px; color: #fff; background: #ffffff12; border: 1px solid #ffffff24; }
  .sheet-handle { display: block; position: absolute; z-index: 10; top: 0; left: 50%; width: 76px; height: 24px; margin: 0; padding: 0; transform: translateX(-50%); background: transparent; border: 0; }
  .sheet-handle::before { content: ""; position: absolute; top: 9px; left: 50%; width: 46px; height: 5px; border-radius: 999px; background: #ffffff35; transform: translateX(-50%); }
  .sheet-handle svg { display: none; }
  .search-box { margin: 0 12px 9px; min-height: 46px; }
  .quick-categories { display: flex; gap: 7px; padding: 1px 12px 10px; overflow-x: auto; scrollbar-width: none; }
  .quick-categories button { flex: 0 0 68px; padding: 7px 2px; }
  .quick-categories svg { width: 17px; height: 17px; padding: 7px; }
  .filter-bar { padding: 9px 13px; }
  .map-top { left: 12px; top: calc(env(safe-area-inset-top) + 12px); }
  body.panel-collapsed .map-top { left: 12px; }
  .map-top > span { display: none; }
  .map-top .small-button { min-height: 44px; border-radius: 13px; }
  .map-tools { display: flex !important; right: 10px; top: calc(env(safe-area-inset-top) + 72px); transform: none; gap: 7px; z-index: 20; }
  body.panel-collapsed .map-tools { z-index: 25; }
  .map-tools .icon-button { width: 44px; height: 44px; background: #0b1718f2 !important; border-color: #ffffff22; }
  .map-tools #compass { display: none; }
  .traffic-widget { right: 10px; top: calc(env(safe-area-inset-top) + 12px); min-width: 154px; min-height: 52px; padding: 6px 8px; border-radius: 14px; }
  .traffic-score { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }.traffic-score strong { font-size: 21px; }.traffic-copy small { max-width: 70px; }
  .traffic-floating-legend { right: 10px; top: calc(env(safe-area-inset-top) + 72px); width: 180px; }
  .map-tools { left: 10px; right: auto; top: calc(env(safe-area-inset-top) + 72px); }
  .layers { inset: auto 8px calc(env(safe-area-inset-bottom) + 80px) 8px; width: auto; max-height: 62dvh; overflow-y: auto; transform: none; border-radius: 24px; padding: 28px 16px 16px; }
  .layers label { min-height: 42px; }
  .detail { inset: auto 8px calc(env(safe-area-inset-bottom) + 80px) 8px; width: auto; max-width: none; height: min(62dvh, 560px); max-height: calc(100dvh - 105px); border-radius: 24px; }
  .detail.mobile-collapsed { inset: auto 8px calc(env(safe-area-inset-bottom) + 80px) 8px; height: 58px; }
  .detail-top { padding: 18px 12px 8px 16px; min-height: 58px; }
  .detail-heading { padding: 16px 20px; }
  .detail-heading > .result-icon { display: none; }
  .panel-restore { left: 12px; top: auto; bottom: calc(env(safe-area-inset-bottom) + 84px); min-height: 50px; }
  .toast { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 84px); max-width: none; }
}