html, body { margin: 0; height: 100%; background: #212121; color: #f8fafc; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
button, input { font: inherit; color: inherit; }

.loading-progress-text { position: fixed; inset: 45vh 0 auto; text-align: center; color: rgba(248, 250, 252, .6); }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui { display: none; position: fixed; inset: auto 0 0; z-index: 1000; padding: .6rem 1.25rem; background: lightyellow; color: #000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; }

/* Full-screen map under Tesla-style dark glass overlays; red #EA4335 marks the route, your position and actions. */
.travel-map { position: fixed; inset: 0; background: #212121; }
.travel-controls { position: fixed; top: calc(env(safe-area-inset-top) + .5rem); left: .5rem; right: .5rem; z-index: 5; max-width: 520px; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.travel-controls > * { pointer-events: auto; }
.travel-card { background: rgba(20, 20, 22, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.travel-row { display: flex; align-items: center; gap: .5rem; }
.travel-wrap { flex-wrap: wrap; gap: .35rem; }
.travel-end { justify-content: flex-end; }
.travel-grow { flex: 1; min-width: 0; }
.travel-strong { font-weight: 600; }
.travel-small { font-size: .78rem; }
.travel-muted, .travel-search-input::placeholder { color: rgba(248, 250, 252, .6); }
.travel-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-search { padding: .4rem .5rem .4rem .85rem; }
.travel-search-input { flex: 1; min-width: 0; border: none; background: transparent; padding: .5rem .25rem; outline: none; }
.travel-destination { padding: .65rem .6rem .65rem .85rem; }

.travel-go { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; border: none; border-radius: 999px; padding: .45rem .9rem; background: #EA4335; color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; }
.travel-go:hover:not(:disabled) { filter: brightness(1.1); }
.travel-go:disabled { opacity: .5; cursor: not-allowed; }
.travel-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, .08); cursor: pointer; }
.travel-chip:hover { background: rgba(255, 255, 255, .18); }
.travel-chip.active { background: #EA4335; }
.travel-ghost { background: transparent; }
.travel-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #EA4335; color: #fff; }
.travel-pill { flex-shrink: 0; padding: .25rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .82rem; }

.travel-list { overflow: hidden; }
.travel-list-title { padding: .5rem .85rem; font-size: .8rem; font-weight: 600; color: rgba(248, 250, 252, .7); }
.travel-list-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .85rem; border: none; border-top: 1px solid rgba(255, 255, 255, .08); background: none; text-align: left; font-size: .9rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-list-item:first-child { border-top: none; }
.travel-list-item:hover { background: rgba(255, 255, 255, .08); }

.travel-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.travel-dialog { position: fixed; top: 50%; left: 50%; z-index: 21; transform: translate(-50%, -50%); width: min(90vw, 420px); max-height: calc(100dvh - 2rem); overflow-y: auto; box-sizing: border-box; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.travel-dialog label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: rgba(248, 250, 252, .65); }
.travel-input { padding: .5rem .7rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #f8fafc; font-size: .9rem; outline: none; }
.travel-input:focus { border-color: #EA4335; }
.travel-btn { padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: transparent; cursor: pointer; }

/* DOM overlays drawn by travel-map.js */
.travel-pulse-dot { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.travel-pulse-dot span { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
.travel-pulse-core { background: #EA4335; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.travel-pulse-ring { background: rgba(234, 67, 53, .45); animation: travel-pulse 2s ease-out infinite; }
@keyframes travel-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: .6; } 70%, 100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; } }
.travel-fav-marker { position: absolute; box-sizing: border-box; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: rgba(20, 20, 22, .95); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .55); pointer-events: none; }