@font-face { font-family:Vazirmatn; src:url('fonts/Vazirmatn.woff2') format('woff2'); font-display:swap; font-weight:100 900; }
:root { --ink:#202b32; --muted:#738087; --accent:#087f72; --soft:#edf6f3; --line:#e4e9e8; --shadow:0 6px 24px #172d3214; --header:72px; --rail:76px; }
* { box-sizing:border-box; letter-spacing:0; }
html,body { height:100%; margin:0; overflow:hidden; }
body { color:var(--ink); background:#eef2f1; font-family:'Segoe UI',Vazirmatn,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button,a,input { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #26a99a; outline-offset:3px; }
button:disabled { opacity:.5; cursor:wait; }
[hidden] { display:none !important; }
#map { position:absolute; inset:var(--header) 0 0 var(--rail); direction:ltr; }
.app-header { position:fixed; inset:0 0 auto; height:var(--header); background:white; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:28px; padding:0 24px; z-index:30; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--ink); font-size:24px; font-weight:750; line-height:1.3; }
.brand img { width:36px; height:36px; }
.brand-subtitle { display:block; font:10px/1.6 'Segoe UI',sans-serif; color:var(--muted); }
.header-context { display:flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:28px; color:var(--muted); font-size:12px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.header-actions { margin-inline-start:auto; display:flex; gap:6px; }
.icon-button,.small-icon,.rail-button,.layer-toggle-control,.location-center-control { --icon:url('vendor/lucide/search.svg'); position:relative; }
.icon-button { width:40px; height:40px; flex:0 0 40px; border:0; background:transparent; border-radius:6px; color:var(--muted); }
.icon-button::before,.small-icon::before,.rail-button::before,.layer-toggle-control::before,.location-center-control::before { content:''; position:absolute; width:20px; height:20px; left:50%; top:50%; transform:translate(-50%,-50%); background:currentColor; mask:var(--icon) center/contain no-repeat; -webkit-mask:var(--icon) center/contain no-repeat; }
.icon-button:hover { background:var(--soft); color:var(--accent); }
.icon-close { --icon:url('vendor/lucide/x.svg'); }
.icon-copy { --icon:url('vendor/lucide/copy.svg'); }
.icon-share { --icon:url('vendor/lucide/share-2.svg'); }
.icon-delete { --icon:url('vendor/lucide/trash-2.svg'); }
.icon-bookmark { --icon:url('vendor/lucide/bookmark.svg'); }
.icon-house { --icon:url('vendor/lucide/house.svg'); }
.icon-arrow { --icon:url('vendor/lucide/arrow-up-right.svg'); }
.small-icon { display:inline-block; width:24px; height:24px; color:var(--muted); }
.app-rail { position:fixed; top:var(--header); bottom:0; left:0; width:var(--rail); padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:12px; z-index:25; background:white; border-right:1px solid var(--line); }
.rail-button { display:block; width:58px; height:62px; border:0; border-radius:6px; background:transparent; color:var(--muted); }
.rail-button::before { top:22px; width:22px; height:22px; }
.rail-button span { display:block; padding-top:29px; font-size:10px; line-height:20px; }
.rail-button:hover,.rail-button.is-active { background:var(--soft); color:var(--accent); }
.driver-companion-control { --icon:url('vendor/lucide/navigation.svg'); }
.rail-divider { width:24px; height:1px; background:var(--line); margin-top:4px; }
.rail-caption { margin-top:auto; color:#c7d1cd; font:bold 21px 'Segoe UI',sans-serif; }
.route-search-control,.saved-places-panel { display:none; position:fixed; top:calc(var(--header) + 16px); left:calc(var(--rail) + 16px); width:352px; max-height:calc(var(--available-height,100dvh) - var(--header) - 38px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:var(--shadow); z-index:26; scrollbar-width:thin; }
.route-search-control.is-open,.saved-places-panel:not([hidden]) { display:block; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.panel-heading h1 { font-size:23px; font-weight:750; margin:4px 0 0; }
.panel-heading h2,.panel-heading strong { font-size:16px; margin:0; }
.panel-heading .icon-button { margin-inline-end:-8px; }
.section-eyebrow { font-size:11px; color:var(--muted); }
.route-search-row { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; background:#f4f6f6; border:1px solid #e0e6e4; border-radius:6px; min-height:50px; }
.route-search-row:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #087f7110; }
.route-search-row input { width:100%; min-width:0; background:transparent; border:0; outline:none; height:48px; font-size:13px; padding:0 3px; }
.route-search-row input:focus-visible { outline:none; }
.route-search-row .icon-button { width:36px; height:40px; }
.route-search-row input::placeholder { color:#84918f; }
.voice-search-button { --icon:url('vendor/lucide/mic.svg'); font-size:0; }
.voice-search-button.is-listening { color:#cf4950; background:#fff0f1; }
.voice-search-button.is-hidden { visibility:hidden; pointer-events:none; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:26px 0 10px; }
.section-heading h2 { margin:0; font-size:12px; font-weight:650; }
.section-heading > span { font-size:11px; color:var(--muted); }
.text-action { border:0; background:transparent; color:var(--accent); font-size:11px; padding:5px 0; }
.empty-state { padding:14px 0; font-size:12px; color:var(--muted); line-height:1.9; }
.empty-state p { margin:0; }
.city-list { border-top:1px solid var(--line); }
.city-list button { display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:14px 0; text-align:start; }
.city-list button:hover strong,.city-list button:hover i { color:var(--accent); }
.city-index { width:34px; color:#9aa7a1; font-size:12px; font-weight:400; }
.city-list strong { display:block; font-size:14px; font-weight:600; }
.city-list small { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.city-list i { margin-inline-start:auto; }
.place-list > div { display:flex; align-items:center; border-bottom:1px solid var(--line); min-width:0; }
.place-list button[data-place-open] { min-width:0; flex:1; background:transparent; border:0; text-align:start; padding:14px 0; }
.place-list strong { display:block; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.place-list small { display:block; font-size:10px; color:var(--muted); direction:ltr; text-align:left; margin-top:4px; }
.route-search-results { display:grid; margin-top:12px; }
.route-search-results:empty { margin:0; }
.route-search-results button { padding:14px 0; background:transparent; border:0; border-bottom:1px solid var(--line); text-align:start; }
.route-search-results button:hover { color:var(--accent); }
.route-search-results strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.route-search-results small { display:block; color:var(--muted); font-size:12px; line-height:1.8; margin-top:4px; overflow-wrap:anywhere; }
.search-state { font-size:13px; color:var(--muted); line-height:1.9; padding:20px 0 4px; }
.search-state button { color:var(--accent); padding:4px 0; border:0; display:block; }
.destination-active-panel { display:none; align-items:center; gap:12px; border-left:3px solid var(--accent); background:var(--soft); padding:12px; margin-bottom:16px; }
.destination-active-panel.is-visible { display:flex; }
.destination-active-panel > div { flex:1; min-width:0; }
.destination-active-panel strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.destination-active-panel small { display:block; font-size:11px; line-height:1.8; color:var(--muted); margin-top:4px; }
.map-layer-control { position:fixed; bottom:32px; right:24px; z-index:23; }
.layer-toggle-control { --icon:url('vendor/lucide/layers.svg'); display:flex; align-items:center; height:48px; width:112px; padding:0 14px 0 44px; background:white; color:var(--ink); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); font-size:13px; }
.layer-toggle-control::before { right:auto; left:14px; transform:translateY(-50%); }
.map-layer-control.is-open .layer-toggle-control { background:var(--accent); color:white; }
.map-mode-control { display:none; position:absolute; bottom:60px; right:0; width:294px; max-height:calc(100dvh - 200px); overflow:auto; padding:20px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:var(--shadow); }
.map-layer-control.is-open .map-mode-control { display:block; }
.map-mode-control .section-heading { margin:0 0 12px; }
.map-layer-row { display:flex; align-items:center; gap:12px; padding:10px 8px; border:1px solid transparent; border-radius:6px; margin:4px 0; cursor:pointer; }
.map-layer-row:hover { background:#f5f7f6; }
.map-layer-row:has(input:checked) { background:var(--soft); border-color:#c8e4da; }
.map-layer-row input { flex:0 0 16px; width:16px; height:16px; accent-color:var(--accent); margin:0; }
.map-layer-row img { width:60px; height:44px; border-radius:4px; object-fit:cover; border:1px solid #0000000c; }
.map-layer-row span { font-size:12px; font-weight:600; }
.map-layer-row small { display:block; font-size:10px; color:var(--muted); font-weight:400; margin-top:4px; }
.overlay-row { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.orbit-control,.location-center-control,.view-dimension { position:fixed; right:24px; left:auto; width:42px; height:42px; border-radius:6px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); color:var(--ink); z-index:10; }
.orbit-control { top:96px; display:grid; place-items:center; cursor:grab; touch-action:none; }
.orbit-control span { display:block; width:28px; height:28px; transform:rotate(var(--orbit-bearing,0deg)); position:relative; }
.orbit-control span::before { content:''; position:absolute; inset:4px 8px; clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%); background:#da5056; }
.orbit-control i { display:none; }
.orbit-control b { position:absolute; top:-8px; left:10px; color:#a9474e; font:8px 'Segoe UI',sans-serif; }
.orbit-control.is-following { border-color:var(--accent); }
.view-dimension { top:148px; font:600 12px 'Segoe UI',sans-serif; }
.view-dimension[aria-pressed='true'] { background:var(--accent); color:white; }
.location-center-control { --icon:url('vendor/lucide/locate-fixed.svg'); top:200px; }
.location-center-control.is-locked { color:var(--accent); background:var(--soft); border-color:#a9d3c6; }
.maplibregl-ctrl-bottom-right { left:auto; right:14px; bottom:108px; }
.maplibregl-ctrl-group { border:1px solid var(--line); box-shadow:var(--shadow) !important; border-radius:6px; overflow:hidden; }
.maplibregl-ctrl-group button { width:40px; height:40px; }
.maplibregl-ctrl-bottom-left { left:auto; right:152px; bottom:30px; }
.maplibregl-ctrl-scale { font:10px/20px 'Segoe UI',sans-serif; background:#ffffffe8; border:2px solid #495c55; border-top:0; padding:0 5px; text-align:center; }
.map-zoom-badge { position:fixed; bottom:30px; left:calc(var(--rail) + 24px); background:#ffffffed; color:#44534d; padding:7px 10px; border-radius:4px; z-index:2; font-size:11px; }
.map-attribution { position:fixed; bottom:0; right:0; z-index:3; background:#ffffffe6; padding:2px 8px; font:10px/15px 'Segoe UI',sans-serif; color:#56665d; }
.map-attribution a { color:inherit; text-decoration:none; }
.map-point-panel { display:none; position:fixed; bottom:32px; left:50%; transform:translateX(-50%); width:352px; max-width:calc(100vw - 32px); padding:20px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:var(--shadow); z-index:24; }
.map-point-panel.is-visible { display:block; }
.map-point-panel .panel-heading { margin-bottom:8px; }
.point-coordinates { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px; gap:8px; }
.point-coordinates code { direction:ltr; font:12px 'Segoe UI',sans-serif; color:var(--muted); }
.map-point-actions { display:flex; gap:6px; margin-top:14px; }
.primary-action { flex:1; background:var(--accent); border:0; color:white; border-radius:6px; font-size:12px; min-height:42px; padding:8px 12px; }
.map-point-actions .icon-button { background:#f2f6f4; }
.speed-hud { display:none; position:fixed; right:80px; top:96px; background:white; border:3px solid #df5353; border-radius:50%; width:58px; height:58px; text-align:center; padding:4px; z-index:10; }
.speed-hud.is-visible { display:block; }
.speed-hud.is-slow,.speed-hud.is-normal { border-color:var(--accent); }
.speed-hud.is-warning { border-color:#c68c24; }
.speed-hud strong { display:block; font:700 22px 'Segoe UI',sans-serif; }
.speed-hud span { font:9px 'Segoe UI',sans-serif; }
.route-status,.turn-guidance { display:none; position:fixed; left:50%; transform:translateX(-50%); top:88px; background:#163e35; color:white; border-radius:6px; padding:12px 18px; max-width:320px; z-index:18; box-shadow:var(--shadow); }
.route-status.is-visible { display:block; }
.route-status strong,.route-status span { display:block; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.route-status span { font-size:11px; opacity:.8; }
.turn-guidance { top:172px; align-items:center; gap:12px; }
.turn-guidance.is-visible { display:flex; }
.turn-guidance strong { font:24px 'Segoe UI',sans-serif; }
.turn-guidance span,.turn-guidance small { display:block; font-size:12px; }
.turn-guidance small { font-size:10px; opacity:.8; }
.connection-status,.map-notice { position:fixed; left:50%; transform:translateX(-50%); z-index:50; bottom:28px; padding:12px 20px; border-radius:6px; background:#273e36; color:white; font-size:13px; width:max-content; max-width:calc(100vw - 32px); box-shadow:var(--shadow); }
.connection-status { top:88px; bottom:auto; background:#a35d22; }
.maplibregl-popup-content { font:13px/1.8 'Segoe UI',Vazirmatn,sans-serif; border-radius:6px; padding:16px 28px; direction:ltr; }
.map-embed-preview > :not(#map):not(script),.map-embed-preview .maplibregl-control-container { display:none !important; }
.map-embed-preview #map { inset:0; }
@media (max-width:900px) { .route-status,.turn-guidance { right:90px; left:auto; transform:none; max-width:230px; } }
@media (max-width:700px) {
    :root { --header:64px; --rail:0px; }
    .app-header { padding:0 16px; gap:16px; }
    .brand { font-size:20px; gap:8px; }
    .brand img { width:30px; height:30px; }
    .brand-subtitle { font-size:9px; }
    .header-context { display:none; }
    #map { bottom:68px; }
    .app-rail { top:auto; bottom:0; left:0; width:100%; height:68px; padding:6px 16px; flex-direction:row; justify-content:space-around; border-right:0; border-top:1px solid var(--line); }
    .rail-button { height:52px; width:74px; }
    .rail-button::before { top:18px; }
    .rail-button span { padding-top:24px; }
    .rail-divider,.rail-caption { display:none; }
    .route-search-control,.saved-places-panel { top:76px; left:12px; width:calc(100vw - 24px); max-height:calc(var(--available-height,100dvh) - 156px); padding:20px; }
    .panel-heading { margin-bottom:16px; }
    .panel-heading h1 { font-size:21px; }
    .map-layer-control { right:14px; bottom:100px; }
    .map-mode-control { max-height:calc(100dvh - 240px); width:min(294px,calc(100vw - 28px)); }
    .layer-toggle-control { width:104px; height:44px; }
    .orbit-control,.view-dimension,.location-center-control { right:14px; }
    .orbit-control { top:80px; }
    .view-dimension { top:130px; }
    .location-center-control { top:180px; }
    .maplibregl-ctrl-bottom-right { right:4px; bottom:104px; }
    .maplibregl-ctrl-bottom-left { right:128px; bottom:32px; }
    .map-zoom-badge { left:14px; bottom:100px; max-width:calc(100vw - 150px); font-size:10px; }
    .map-attribution { bottom:68px; font-size:8px; }
    .map-point-panel { bottom:150px; width:calc(100vw - 28px); padding:16px; }
    .route-status { right:70px; left:14px; top:80px; max-width:none; }
    .turn-guidance { top:160px; right:70px; left:14px; max-width:none; }
    .connection-status { top:74px; font-size:12px; }
    .map-notice { bottom:84px; font-size:12px; }
    .speed-hud { top:234px; right:12px; width:46px; height:46px; }
    .speed-hud strong { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }