:root { --sky: #20a5d8; --dark: #1f212f; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
#app { display: grid; grid-template-rows: auto 1fr; height: 100%; }

header {
  display: flex; align-items: center; gap: .75rem;
  background: var(--sky); color: #fff; padding: .6rem .9rem;
  border-bottom: 4px solid var(--dark);
}
header img { height: 28px; display: block; }
header .title { font-weight: 600; letter-spacing: .2px; }

#map { width: 100%; height: 100%; }

.status {
  position: absolute; top: 70px; left: 12px; right: 12px; z-index: 2;
  display: flex; justify-content: center; pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: #fff; color: #111; border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: .8rem 1rem; border-radius: 10px; max-width: 520px; width: 100%;
  display: none;
}
.toast.error { border-color: #ef4444; }
.toast.show { display: block; text-align: center;}

.info {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.95); border: 1px solid #e5e7eb;
  padding: .5rem .7rem; border-radius: 8px; font-size: .9rem;
}
.info .muted { opacity: .75; }

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sky);
  color: white;
  padding: 0.6rem 1rem;
  border-bottom: 4px solid var(--dark);
}

.header-left .title {
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 1rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.smartway-logo {
  height: 34px;
  display: block;
}

.provided-text {
  font-weight: 500;
}

@media (max-width: 480px) {
  .header-right .provided-text {
    display: none;
  }
}

.sw-vehicle-marker svg {
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
}