/* 1.5 visual system. Map and guidance stay readable at driving distance. */
:root{
  font-family:Inter,Roboto,"Segoe UI",Arial,sans-serif;
  color:#142b40;background:#e4ebef;
  --ink:#112d48;--blue:#1769ed;--mint:#7ae0c0;--line:#e2e9ee;
  --surface:#fff;--muted:#61788a;--shadow:0 18px 58px rgba(13,38,65,.2)
}
body{color:#142b40}
button,input,select{font:inherit}
button{transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #77b5ff;outline-offset:2px}
.map-scrim{background:linear-gradient(90deg,rgba(14,37,59,.12),transparent 49%)}
.brand{letter-spacing:.015em;font-size:14px;text-shadow:0 1px 14px #fff}
.brand-icon{background:var(--blue);color:white;border-radius:10px;font-weight:700}
.brand-accent{color:var(--blue)}
.engine-status,.version{font-size:11px;letter-spacing:0;font-weight:750;padding:9px 12px;box-shadow:0 5px 22px rgba(11,35,65,.12)}
.engine-status{color:#855120;background:#fff9ed}
.engine-status.ready{color:#0c684a;background:#e5f8f0}
.version{color:#536d80}
.panel{width:430px;padding:26px 28px 23px;border:1px solid #e9eef1;border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.eyebrow{color:#267caa;font-size:10px;letter-spacing:.12em}
.intro h1{font-size:30px;font-weight:800;letter-spacing:-.047em;margin:9px 0 7px}
.intro p{color:#627b89;font-size:13px;margin-bottom:18px}
.field{border-color:#dce5ea;min-height:67px;transition:border-color .15s,box-shadow .15s}
.field:focus-within{position:relative;z-index:2;border-color:#4d99f1;box-shadow:0 0 0 3px #367bed20}
.field-label{color:#5e7787;font-size:10px}
.search-wrap input{color:#152f43;font-size:14px;font-weight:600}
.search-wrap input::placeholder{color:#8aa0ad;font-weight:450}
.field-action{background:#eff5f9;color:#205676}
.business-search-btn{color:#1769ae;font-size:11px}
.search-hint{color:#69808e}
.suggestions{border-color:#e2eaf0;box-shadow:0 16px 38px #13334b25}
.suggestion{padding:13px 14px;min-height:54px}
.suggestion:hover,.suggestion:focus-visible{background:#eff6fe}
.suggestion strong{font-size:13px;color:#19364b}
.suggestion small{color:#647c8b;font-size:11px}
.recent-section{margin:12px 0 15px;padding:12px;border:1px solid #e3ebef;border-radius:15px;background:#f7fafc}
.recent-section .feature-heading{margin-bottom:4px;color:#26455b}
.recent-section .feature-heading button{border:0;background:none;color:#4174a0;font-size:11px;padding:5px}
.recent-place{display:flex;align-items:center;gap:11px;width:100%;border:0;border-top:1px solid #e4ebef;background:transparent;text-align:left;padding:10px 3px;color:#19364b}
.recent-place>span:first-child{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:11px;background:#e4f0fd;color:#1769ed;font-size:19px}
.recent-place>span:last-child{min-width:0}
.recent-place strong,.recent-place small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-place strong{font-size:12px}.recent-place small{color:#718899;font-size:10px;margin-top:2px}
.recent-place:hover{background:#edf5fc}
.primary-btn{background:var(--blue);border-radius:13px;font-size:14px;min-height:51px;box-shadow:0 7px 18px #1769ed2f}
.primary-btn span{color:white}
.primary-btn:hover{background:#0d57ce}
.secondary-btn,.inline-form button,.via-row button{color:#275671;border-color:#d4e4ed}
.mode-switch{background:#edf3f7}.mode{color:#536d7d;font-weight:750}
.mode.active{background:var(--ink);box-shadow:0 4px 12px #112d4829}
.route-card{border-radius:15px;padding:15px;border-color:#e1e8ee;box-shadow:0 3px 12px #122c4208}
.route-card.selected{border-color:var(--blue);background:#f0f6ff;padding:14px}
.route-head b{color:#124d96}.route-meta{color:#647d8b}
.feature-box,.preference-row,.feed-status{background:#f6f9fb;border-color:#e2eaef}
.tools-section{background:#f7fafc;border-color:#dce8ee}
.tools-section>summary{color:#234b65}
.tool-grid button{border-color:#dce6ed;color:#24516e;border-radius:11px;background:white}
.tool-grid button.active{background:#e8f4fd;border-color:#8ec3ed}
.empty-message{border-color:#e8eff3}.empty-symbol{background:#e9f2ff;color:var(--blue)}
.map-actions button,.layers-fab{border:1px solid #dbe6ed;background:#fff;color:#1f4e67;box-shadow:0 5px 19px #123a5730}
.map-actions button:hover,.layers-fab:hover{background:#f0f7ff}
.map-actions button.active,.layers-fab[aria-expanded="true"]{background:#ddebff;color:#125acc}
.layers-sheet{border:1px solid #e0e9ee;box-shadow:0 20px 66px #08283f54}
.layers-head h2{color:var(--ink)}
.layers-head button{background:#eef3f7}
.map-style-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#547182;font-weight:800;margin:11px 2px 9px}
.map-style-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:19px}
.map-style-switch button{border:2px solid #e1e9ee;border-radius:15px;padding:8px 8px 10px;background:white;text-align:left;color:#243f53;min-width:0}
.map-style-switch button[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px #1769ed13;background:#f4f8ff}
.map-style-switch strong,.map-style-switch small{display:block;margin:5px 3px 0}
.map-style-switch strong{font-size:13px}.map-style-switch small{font-size:10px;color:#67808e}
.style-preview{display:block;height:46px;border-radius:10px;background-color:#dce9ee}
.style-preview.standard{background:linear-gradient(62deg,transparent 42%,#fff 43% 53%,transparent 54%),linear-gradient(-35deg,transparent 36%,#fff 37% 48%,transparent 49%),linear-gradient(140deg,#cce5d5 0 30%,#dce9f2 30% 65%,#c8e0d0 65%)}
.style-preview.aerial{background:linear-gradient(65deg,transparent 41%,#aeb0a7 42% 51%,transparent 52%),linear-gradient(-38deg,transparent 44%,#c5bdad 45% 54%,transparent 55%),repeating-linear-gradient(90deg,#506b52 0 17px,#6f8159 17px 25px,#51634c 25px 42px)}
.layers-grid button{background:#f7fafc;border-color:#e0e9ee;color:#1a435c}
.layers-grid button[aria-pressed="true"]{background:#e8f4ff;border-color:#7ab7ed;box-shadow:inset 0 0 0 1px #7ab7ed}
.navigation{background:#12465e;box-shadow:0 10px 31px #0724386b}
.nav-top{color:#c8e7e7;border-bottom-color:#ffffff24}
.live-dot{background:#6ae2ae;box-shadow:0 0 0 4px #74d9b425}
.nav-main{align-items:center}
.maneuver-icon{color:#fff}
.next-instruction{font-weight:800}
.next-distance{color:#c9ecf0}
.navigation-stats{background:#fff;color:#152f43;border:1px solid #e0e9ee;box-shadow:0 -7px 31px #09283e39}
.nav-sheet-toggle{color:#142d43}
.nav-sheet-summary>span{color:#617b89}
.nav-sheet-grip{background:#a7b9c3}
.nav-speed .speed-card{border:1px solid #e1eaf0;background:#f6f9fb;color:#153046}
.speed-card>span{color:#587486}.speed-card strong{color:#183d59}.speed-card small{color:#688291}
.gps-quality{color:#526f7e;border-color:#e1e9ec}.gps-quality.good{color:#13795a}.gps-quality.weak{color:#a3522c}
.nav-bottom{border-color:#e3eaee;color:#6a8390}.nav-bottom #nav-eta{color:#193d58}.nav-bottom #nav-arrival-time{color:#356e91}.nav-bottom #gps-status{color:#597685}
.nav-sheet-actions{border-color:#dce6ec}.nav-sheet-actions button{color:#233e52;border-color:#e7edf1}
.nav-sheet-actions button:hover{background:#f3f8fc}.nav-sheet-actions button span{color:var(--blue)}
.nav-sheet-actions .nav-sheet-stop,.nav-sheet-actions .nav-sheet-stop span{color:#a3333b}
.nav-road-extra{border-color:#e1e9ee}.nav-road-extra summary,.road-context-note,.road-next{color:#4e6c7d}
.road-next{background:#f1f6f9}
.arrival-card{background:#12465e;border-color:#72ddbb}
.arrival-check,.arrival-card button{background:#72ddbb;color:#12465e}
.prototype-note{color:#536e7b}
.avatar-pin{border-color:var(--blue);color:var(--blue);box-shadow:0 4px 18px #103f6477}
.avatar-direction{color:var(--blue)}
.status:not(:empty){background:#fff7eb;color:#784b25}
@media(max-width:760px){
  .topbar{left:14px;right:14px;top:calc(10px + env(safe-area-inset-top))}
  .brand{font-size:12px;border:1px solid #e2ecf1;background:#fffffff2;border-radius:14px;padding:5px 11px 5px 5px;box-shadow:0 4px 16px #10365020}
  .engine-status{max-width:108px;font-size:9px}
  .version{font-size:9px;padding:8px 9px}
  .panel{left:0;right:0;bottom:0;top:auto;width:100%;max-height:min(76dvh,750px);border:0;border-radius:25px 25px 0 0;padding:0 19px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 38px #102c4240}
  .planner-minimize-btn{margin:0 -19px 16px;width:calc(100% + 38px);border-radius:25px 25px 0 0;height:52px;font-size:13px;color:#345166}
  .planner-peek{top:calc(67px + env(safe-area-inset-top));left:14px;width:calc(100% - 84px);height:52px;border-radius:15px;border-color:#dbe7ed;box-shadow:0 5px 20px #10365030;color:#15364d}
  .planner-peek>span:first-child{color:var(--blue)}
  .intro h1{font-size:27px;margin:4px 0 5px}
  .intro p{font-size:12px;line-height:1.45;margin-bottom:15px}
  .field{min-height:65px}.field-label{color:#456a7b}.search-wrap input{font-size:16px}
  .business-search-btn{min-height:35px;font-size:12px}
  .search-hint{font-size:11px}
  .mode-switch{gap:3px}.mode{min-height:43px}
  .primary-btn{min-height:54px;font-size:15px}
  .layers-fab{top:calc(67px + env(safe-area-inset-top));right:14px;width:52px;height:52px;border-radius:15px}
  .layers-sheet{right:0;bottom:0;width:100%;max-height:82dvh;border-radius:25px 25px 0 0;padding:19px 17px calc(22px + env(safe-area-inset-bottom))}
  .map-actions{right:14px;bottom:calc(min(76dvh,750px) + 13px)}
  body.planner-minimized .map-actions{bottom:calc(19px + env(safe-area-inset-bottom))}
  .map-actions button{width:51px;height:51px;border-radius:15px}
  .navigation{top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;border-radius:19px;background:#12465e;max-height:min(29dvh,245px)}
  .navigation .nav-main{padding:10px 16px 16px;gap:12px}
  .maneuver-icon{font-size:43px;width:47px}
  .next-instruction{font-size:20px;line-height:1.2}
  .next-distance{font-size:14px;margin-top:5px}
  .navigation-stats{border:0;border-radius:25px 25px 0 0;background:#fff;max-height:min(72dvh,700px);padding:0 16px calc(9px + env(safe-area-inset-bottom))}
  .nav-sheet-toggle{min-height:68px;padding:15px 5px 8px}
  .nav-sheet-summary strong{font-size:25px}.nav-sheet-summary>span{font-size:12px}
  .navigation-stats .nav-speed{gap:9px;padding:3px 0 8px}
  .speed-card{background:#f5f9fc;border:1px solid #e0eaf1;min-height:58px}
  .speed-card>span{font-size:10px}.speed-card strong{font-size:29px}
  .gps-quality{font-size:11px;padding:5px 3px 1px}
  .nav-sheet-actions{margin-top:9px}.nav-sheet-actions button{font-size:15px;min-height:54px}
  body.nav-active .map-actions{right:14px;bottom:calc(var(--nav-stats-height, 157px) + 12px)}
  body.nav-active .layers-fab{top:var(--nav-tools-top,calc(175px + env(safe-area-inset-top)))}
  .nav-banner{background:#12465ef5;color:white}
  .prototype-note{bottom:calc(min(76dvh,750px) + 4px)}
}
@media(max-width:390px){
  .header-meta .version{display:none}
  .mode{font-size:10px}
  .map-style-switch button{padding:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}