:root {
    color-scheme: light;
    --ink: #063f2a;
    --muted: #647a72;
    --panel: rgba(255,255,255,.84);
    --panel-strong: rgba(255,255,255,.96);
    --line: rgba(0,105,67,.14);
    --gold: #f2b319;
    --teal: #008f55;
    --teal-2: #005d3b;
    --land: #f8faf4;
    --shadow: 0 22px 70px rgba(0,70,44,.18);
}
[data-theme="dark"] {
    color-scheme: dark;
    --ink: #eef7f7;
    --muted: #a9c0b8;
    --panel: rgba(8,31,24,.74);
    --panel-strong: rgba(8,31,24,.94);
    --line: rgba(220,239,240,.14);
    --land: #071a15;
    --shadow: 0 24px 80px rgba(0,0,0,.36);
}
* { box-sizing: border-box; }
html, body, #belli-app, .map-canvas { height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--land);
    color: var(--ink);
    overflow: hidden;
}
.map-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 30% 20%, rgba(242,179,25,.14), transparent 24rem), var(--land);
}
.leaflet-container { font: inherit; background: var(--land); }
.leaflet-control-attribution { font-size: 10px; opacity: .72; }
.leaflet-marker-icon { background: transparent; border: 0; }
.belli-marker {
    min-width: 34px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 8px 14px rgba(0,70,44,.20));
    transform-origin: 50% 100%;
    animation: marker-pop .32s ease-out both;
    display: grid;
    place-items: center;
    padding: 0;
}
.belli-marker span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--teal), #00b96d);
    color: #fff;
    border: 2px solid rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 950;
}
.belli-marker.food span { background: linear-gradient(135deg, #b85b2e, #f2b319); }
.belli-marker.care span { background: linear-gradient(135deg, #118667, #32c28e); }
.belli-marker.learn span { background: linear-gradient(135deg, #345f9f, #78a4e8); }
.belli-marker.fuel span { background: linear-gradient(135deg, #29343a, #6f8792); }
.belli-marker.shop span { background: linear-gradient(135deg, #7246a0, #b98be4); }
.belli-marker.landmark span { background: linear-gradient(135deg, #7c6025, #f0c467); }
.belli-marker em {
    position: absolute;
    left: 50%;
    top: 32px;
    transform: translateX(-50%);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--ink);
    padding: 3px 7px;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(16,43,50,.13);
}
.belli-marker.selected span {
    width: 40px;
    height: 40px;
    border-radius: 22px 22px 22px 6px;
    background: linear-gradient(135deg, var(--gold), #2fb985);
    color: #063f2a;
    box-shadow: 0 0 0 7px rgba(242,179,25,.18);
}
.belli-marker.selected span {
    font-size: 18px;
}
.belli-marker:hover { transform: translateY(-3px) scale(1.04); }
.czone-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 170px;
    padding: 0 2px;
    color: rgba(23,64,75,.66);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(255,255,255,.95), 1px 0 0 rgba(255,255,255,.95), -1px 0 0 rgba(255,255,255,.95);
    pointer-events: none;
}
[data-theme="dark"] .czone-label {
    color: rgba(232,247,247,.62);
    text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 -1px 0 rgba(0,0,0,.65), 1px 0 0 rgba(0,0,0,.65), -1px 0 0 rgba(0,0,0,.65);
}
@keyframes marker-pop {
    from { transform: translateY(8px) scale(.85); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.route-line {
    stroke-dashoffset: 34;
    animation: route-flow 1.4s linear infinite;
}
@keyframes route-flow { to { stroke-dashoffset: 0; } }
.glass {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px) saturate(1.25);
}
.map-topbar {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}
.map-topbar > * { pointer-events: auto; }
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px 7px 7px;
    box-shadow: 0 14px 34px rgba(0,70,44,.12);
}
.app-brand img {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: block;
    object-fit: cover;
    background: #fbfcf7;
    box-shadow: inset 0 0 0 1px rgba(0,105,67,.10);
}
.app-brand strong { letter-spacing: .08em; color: var(--teal-2); }
[data-theme="dark"] .app-brand strong { color: #f7fbf7; }
.map-topbar nav {
    display: flex;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
}
.map-topbar nav a, .theme-toggle, .search-row button, .pill-button, .map-controls button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    padding: 10px 13px;
    font-weight: 850;
    cursor: pointer;
}
.map-topbar nav a:hover, .theme-toggle:hover, .pill-button:hover { background: rgba(242,179,25,.17); }
.theme-toggle {
    background: var(--panel-strong);
    border: 1px solid var(--line);
}
.map-shell { position: relative; z-index: 4; height: 100%; pointer-events: none; }
.map-shell > * { pointer-events: auto; }
.search-sheet {
    position: fixed;
    left: 18px;
    top: 92px;
    width: min(390px, calc(100vw - 36px));
    max-height: min(430px, calc(100vh - 150px));
    overflow: hidden;
    border-radius: 28px;
    padding: 14px;
}
.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.search-row input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-strong);
    color: var(--ink);
    padding: 15px 16px;
    font: inherit;
    outline: none;
}
.search-row input:focus { box-shadow: 0 0 0 4px rgba(246,177,61,.18); border-color: rgba(246,177,61,.8); }
.search-row button, .primary-action {
    background: linear-gradient(135deg, var(--teal), #00b96d);
    color: #fff;
    border: 0;
    border-radius: 18px;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
}
.quick-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 0 8px;
    scrollbar-width: none;
}
.pill-button {
    flex: 0 0 auto;
    background: rgba(255,255,255,.5);
    border: 1px solid var(--line);
    font-size: 13px;
}
[data-theme="dark"] .pill-button { background: rgba(255,255,255,.06); }
.results-list {
    display: grid;
    gap: 9px;
    max-height: min(32vh, 260px);
    overflow: auto;
    padding: 2px 2px 4px;
}
.memory-row {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 0 0 8px;
}
.assistant-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 10px;
}
.assistant-strip span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}
.assistant-strip button {
    flex: 0 0 auto;
    border: 1px solid rgba(246,177,61,.36);
    background: rgba(246,177,61,.13);
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 850;
    cursor: pointer;
}
.memory-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.memory-row button, .shortcut-grid button, .alternatives button {
    border: 1px solid var(--line);
    background: var(--panel-strong);
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}
.result-card {
    border: 1px solid var(--line);
    background: var(--panel-strong);
    border-radius: 20px;
    padding: 12px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.result-card:hover {
    transform: translateY(-1px);
    border-color: rgba(246,177,61,.55);
    box-shadow: 0 16px 36px rgba(16,43,50,.1);
}
.result-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(246,177,61,.28), rgba(36,87,102,.16));
    color: var(--teal);
    font-weight: 950;
}
.result-card h3, .detail-sheet h2, .directions-sheet h2, .nav-sheet h2 { margin: 0; letter-spacing: -.025em; }
.result-card p, .muted { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(10,141,98,.12);
    color: #09754f;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 900;
}
.detail-sheet, .directions-sheet, .nav-sheet {
    position: fixed;
    right: 18px;
    top: 92px;
    width: min(430px, calc(100vw - 36px));
    border-radius: 28px;
    padding: 18px;
    max-height: calc(100vh - 150px);
    overflow: auto;
    animation: sheet-in .24s ease-out both;
}
@keyframes sheet-in {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes nav-in {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.place-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.hero-icon {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--teal), #347482);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 16px 36px rgba(0,143,85,.22);
}
.hero-icon.food { background: linear-gradient(135deg, #b85b2e, #f2b319); }
.hero-icon.care { background: linear-gradient(135deg, #118667, #32c28e); }
.hero-icon.learn { background: linear-gradient(135deg, #345f9f, #78a4e8); }
.hero-icon.fuel { background: linear-gradient(135deg, #29343a, #6f8792); }
.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}
.place-intel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.place-intel span {
    border: 1px solid var(--line);
    background: rgba(246,177,61,.12);
    color: var(--ink);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 850;
}
.route-quality {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 12px;
}
.route-quality span {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(36,87,102,.08);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}
.sheet-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.sheet-actions button, .sheet-actions a {
    border: 1px solid var(--line);
    background: var(--panel-strong);
    color: var(--ink);
    border-radius: 15px;
    padding: 11px 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.sheet-actions .primary-action { color: #fff; background: linear-gradient(135deg, var(--teal), #347482); border: 0; }
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}
.info-tile {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    background: rgba(255,255,255,.42);
}
[data-theme="dark"] .info-tile { background: rgba(255,255,255,.05); }
.info-tile span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.info-tile strong { display: block; margin-top: 4px; }
.turn-list { display: grid; gap: 9px; margin-top: 14px; }
.turn {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 10px;
    background: rgba(255,255,255,.42);
    color: var(--ink);
    text-align: left;
}
.turn-icon {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: #fff;
    font-weight: 950;
}
.nav-sheet {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 36px));
    animation: nav-in .24s ease-out both;
}
.nav-banner {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto auto;
    gap: 14px;
    align-items: center;
}
.nav-arrow {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold), #ffce77);
    color: #fff;
    font-size: 28px;
    font-weight: 950;
}
.eta-card {
    min-width: 64px;
    border-radius: 20px;
    padding: 8px 10px;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    text-align: center;
}
.eta-card strong { display: block; font-size: 22px; line-height: 1; }
.eta-card span { color: var(--muted); font-size: 11px; font-weight: 900; }
.trip-progress, .route-progress {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(36,87,102,.14);
    margin-top: 12px;
}
.trip-progress span, .route-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), #ffe09b);
    transition: width .45s ease;
}
.street-strip {
    margin-top: 10px;
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(36,87,102,.1);
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}
.arrival-card {
    display: grid;
    gap: 8px;
}
.arrival-card button, .nav-banner button {
    border: 0;
    background: var(--teal);
    color: #fff;
    border-radius: 16px;
    padding: 11px 14px;
    font-weight: 900;
    cursor: pointer;
}
.alternatives, .shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}
.alternatives button {
    border-radius: 18px;
    text-align: left;
}
.alternatives strong, .alternatives span { display: block; }
.alternatives span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.map-controls {
    position: fixed;
    right: 18px;
    bottom: 124px;
    z-index: 6;
    display: grid;
    gap: 8px;
}
.map-controls button {
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.mobile-tabs {
    display: none;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(12px, env(safe-area-inset-bottom));
    border-radius: 24px;
    padding: 7px;
    z-index: 8;
    grid-template-columns: repeat(4, 1fr);
}
.mobile-tabs a {
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    padding: 10px 4px;
    border-radius: 17px;
    font-size: 12px;
    font-weight: 900;
}
.mobile-tabs a:hover { background: rgba(246,177,61,.17); }
.empty {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 20px;
    color: var(--muted);
    text-align: center;
}
.smart-empty {
    display: grid;
    gap: 8px;
}
.smart-empty strong {
    color: var(--ink);
    font-size: 16px;
}
.smart-empty span {
    line-height: 1.5;
}
.smart-empty button {
    justify-self: center;
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
}
.skeleton-list {
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}
.skeleton-list i {
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(36,87,102,.08), rgba(246,177,61,.14), rgba(36,87,102,.08));
    background-size: 220% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
    to { background-position: -220% 0; }
}
.map-status {
    position: fixed;
    left: 50%;
    top: max(18px, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 12;
    border-radius: 999px;
    padding: 10px 14px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    animation: status-in .22s ease-out both;
}
.map-status[data-tone="error"] { border-color: rgba(211,95,69,.32); background: rgba(255,245,240,.92); }
.map-status[data-tone="success"] { border-color: rgba(17,134,103,.32); background: rgba(238,255,248,.92); }
@keyframes status-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
body.is-navigating .search-sheet,
body.is-navigating .detail-sheet,
body.is-navigating .directions-sheet,
body.is-navigating .mobile-tabs {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    visibility: hidden;
    display: none !important;
}
body.is-navigating .map-topbar {
    opacity: .28;
    transition: opacity .2s ease;
}
body.is-navigating .map-topbar:hover { opacity: 1; }
body.map-fullscreen .search-sheet,
body.map-fullscreen .detail-sheet,
body.map-fullscreen .directions-sheet,
body.map-fullscreen .mobile-tabs {
    display: none;
}
@media (max-width: 900px) {
    .map-topbar { left: 12px; right: 12px; }
    .map-topbar nav { display: none; }
    .search-sheet {
        left: 12px;
        right: 12px;
        width: auto;
        top: 78px;
        max-height: 34vh;
        border-radius: 24px;
    }
    .detail-sheet, .directions-sheet {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 82px;
        width: auto;
        max-height: 44vh;
        border-radius: 24px;
    }
    .nav-sheet { bottom: 82px; }
    .nav-banner { grid-template-columns: 50px minmax(0,1fr) auto; }
    .eta-card { display: none; }
    .mobile-tabs { display: grid; }
    .map-controls { bottom: 154px; }
    .search-row { grid-template-columns: 1fr; }
    .map-status {
        left: 12px;
        right: 12px;
        transform: none;
        text-align: center;
        animation: none;
    }
    .search-row button { min-height: 44px; }
}
@media (max-width: 520px) {
    .info-grid { grid-template-columns: 1fr; }
    .alternatives, .shortcut-grid { grid-template-columns: 1fr; }
    .result-card { grid-template-columns: 38px minmax(0,1fr); }
    .result-card .badge { grid-column: 2; width: fit-content; }
}