:root {
  color: #111111;
  background: #111111;
  font-family: system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
button, input { font: inherit; }
button { border: 0; background: transparent; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.4; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.7rem; letter-spacing: -0.03em; font-weight: 650; }
h3 { margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b70; font-weight: 650; }
label { display: grid; gap: 0.35rem; font-size: 0.95rem; }
.error { color: #e11d48; }
.muted { color: #6b6b70; font-size: 0.92rem; }
.center { text-align: center; }
.title { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.03em; }

.phone {
  width: min(390px, 100vw);
  height: min(844px, 100vh);
  height: min(844px, 100dvh);
  background: #f7f7f8;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 1.2rem 1.4rem;
}
.login .brand { color: #2f6fed; font-size: 2rem; font-weight: 750; letter-spacing: -0.04em; }
.login form, dialog form { width: min(340px, 100%); display: grid; gap: 0.75rem; }
.login form { margin: auto; }
.login h1 { font-size: 1rem; font-weight: 650; text-align: center; letter-spacing: 0; margin-bottom: 0.35rem; }
.login-foot { text-align: center; color: #2f6fed; font-size: 0.82rem; }
.login-foot p { color: #2f6fed; }
.stores { display: flex; justify-content: center; gap: 0.55rem; margin-bottom: 0.75rem; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #111111;
  color: white;
  border-radius: 8px;
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  line-height: 1.05;
}
.store svg { width: 18px; height: 18px; fill: white; }
.store small { display: block; font-size: 0.58rem; font-weight: 450; }
.store b { display: block; font-size: 0.92rem; font-weight: 650; }
.login input, .group input, dialog input {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: white;
  padding: 0.95rem 1rem;
  font-size: 1rem;
}
.login input { border: 1px solid #c5d0e6; border-radius: 6px; padding: 0.72rem 0.85rem; background: #fff; }
.login input:focus { outline: 2px solid #2f6fed; border-color: #2f6fed; }
.login button[type="submit"], button.block {
  width: 100%;
  border-radius: 14px;
  background: #2f6fed;
  color: white;
  padding: 0.95rem 1rem;
  font-size: 1rem;
  font-weight: 650;
}
.login button[type="submit"] { border-radius: 6px; padding: 0.72rem 1rem; }
button.quiet-fill { background: #111111; }
button.danger { background: #e11d48; }
button.text { width: auto; color: #2f6fed; font-weight: 650; padding: 0.7rem; }
#logout, #desk-logout { width: 100%; text-align: left; padding-left: 0.15rem; }
#desk-logout { margin-top: auto; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.trip-times { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.head h2.trip-times { display: flex; font-size: 1.05rem; white-space: nowrap; }
ul button .trip-times { font-size: 0.98rem; }
#desk-back { align-self: flex-start; padding: 0.1rem 0.15rem 0.2rem; }
.trip-times .leave { color: #16803c; }
.trip-times .arrive { color: #e11d48; }
.trip-times .arrow { color: #8a8a90; font-weight: 500; }
.head h2 { font-size: 1.7rem; }
.head h2.trip-times { font-size: 1.05rem; }

#app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel { flex: 1; min-height: 0; position: relative; }
.scroll { overflow: auto; padding: 1.25rem 1rem 1.4rem; display: grid; gap: 0.7rem; align-content: start; background: #f7f7f8; }
.map-panel { background: #e6e6e8; }
#map { position: absolute; inset: 0; }
.live-cards {
  position: absolute;
  z-index: 2;
  left: 0.75rem;
  right: 4.4rem;
  bottom: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.card {
  background: white;
  border-radius: 18px;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.2rem;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12);
}
.stats { display: flex; gap: 0.55rem; margin-top: 0.35rem; }
.stat { display: grid; justify-items: center; gap: 0.15rem; color: #6b6b70; font-size: 0.68rem; }
.stat b {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7f7f8;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  text-align: center;
  padding: 0.15rem;
}
.map-tools { position: absolute; z-index: 3; top: 0.75rem; right: 0.75rem; display: grid; gap: 0.45rem; }
.map-tools button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: white;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}
.map-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#layer-toggle .ico-road { display: none; }
#layer-toggle.satellite .ico-sat { display: none; }
#layer-toggle.satellite .ico-road { display: block; }
.car-menu {
  position: absolute;
  z-index: 4;
  top: 4.4rem;
  right: 0.75rem;
  width: 180px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
  display: grid;
}
.car-menu button, .desk-cars button { text-align: left; padding: 0.7rem 0.85rem; }
.desk-car { display: flex; align-items: center; gap: 0.55rem; }
.car-menu button.selected, .desk-cars button.selected { color: #2f6fed; font-weight: 700; }
.geo-banner {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  left: 0.75rem;
  right: 4.6rem;
  background: white;
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}
.alert-stack, .desk-side { display: none; }
#trip-detail { display: grid; gap: 0.6rem; background: white; border-radius: 18px; padding: 0.8rem; }
#trip-map-host { position: relative; height: 240px; border-radius: 16px; overflow: hidden; }
#trip-map-host #map { position: absolute; inset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 0.45rem; color: #6b6b70; font-size: 0.75rem; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.25rem; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.grid b { display: block; font-size: 0.95rem; }
.grid span { color: #6b6b70; font-size: 0.68rem; }
.trip-boxes { display: grid; gap: 0.45rem; }
.trip-box { background: #f7f7f8; border-radius: 12px; padding: 0.5rem 0.65rem; }
.trip-box h3 { margin: 0 0 0.35rem; font-size: 0.75rem; color: #6b6b70; font-weight: 650; }
#desk-view-alerts { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
#desk-view-alerts li, button.alert-hit {
  display: grid;
  background: #f7f7f8;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}
.alert-row { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 0.7rem; text-align: left; }
.alert-copy { display: grid; gap: 0.12rem; min-width: 0; }
.alert-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.alert-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.alert-ico[data-kind="speed"] { color: #ea580c; background: #ffedd5; }
.alert-ico[data-kind="alert"] { color: #e11d48; background: #ffe4e6; }
.alert-ico[data-kind="zone"] { color: #2f6fed; background: #e7efff; }
.alert-ico[data-kind="power"] { color: #b45309; background: #fef3c7; }
.alert-ico[data-kind="drive"] { color: #16803c; background: #dcfce7; }
.alert-ico[data-kind="move"] { color: #4f46e5; background: #eef2ff; }
.alert-ico[data-kind="lock"] { color: #52525b; background: #ececee; }
.alert-ico[data-kind="start"] { color: #16803c; background: #dcfce7; }
.alert-ico[data-kind="end"] { color: #e11d48; background: #ffe4e6; }
.alert-ico[data-kind="idle"] { color: #4f46e5; background: #eef2ff; }
#trip-events { display: grid; gap: 0.4rem; }
#trip-events li {
  background: #f7f7f8;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
}
#trip-events strong { display: block; font-weight: 650; }
#trip-events .muted { display: block; margin-top: 0.15rem; }
#desk-view-alerts strong { font-weight: 650; }
#desk-view-alerts span { color: #6b6b70; font-size: 0.78rem; }
.month-fold summary { cursor: pointer; font-weight: 650; padding: 0.45rem 0.1rem; }
.month-fold ul { margin: 0; padding: 0; list-style: none; }
.summary-wrap { display: grid; gap: 0.45rem; }
.map-legend {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  left: 0.75rem;
  right: 4.6rem;
  background: white;
  border-radius: 12px;
  padding: 0.45rem 0.65rem;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}
.sheet {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  background: white;
  border-radius: 20px;
  padding: 1.05rem 1.1rem 0.85rem;
  display: grid;
  gap: 0.5rem;
  z-index: 500;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12);
}
.status { display: flex; align-items: center; gap: 0.55rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.03em; }
.state-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: #f7f7f8;
  color: #8a8a90;
  box-shadow: inset 0 0 0 2px currentColor;
}
.state-badge svg { width: 20px; height: 20px; fill: currentColor; }
.state-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.summary div { background: white; border-radius: 12px; padding: 0.55rem 0.7rem; }
.summary b { display: block; }
.summary span { color: #6b6b70; font-size: 0.75rem; }
.photo-row { display: grid; gap: 0.4rem; justify-items: start; }
#car-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.photo-label input { display: none; }
.desk-tabs { grid-template-columns: repeat(4, 1fr); }
.desk-tabs button { font-size: 0.72rem; padding: 0.45rem 0.05rem; }
.status.moving .state-badge, .state-badge.moving { color: #16803c; background: #e8f6ee; }
.status.stopped .state-badge, .state-badge.stopped { color: #8a8a90; background: #f3f3f4; }
.status.immobilized .state-badge, .state-badge.immobilized { color: #e11d48; background: #fde8ec; }
.status.offline .state-badge, .state-badge.offline { color: #8a8a90; background: #f3f3f4; }
.car-line { display: flex; align-items: center; gap: 0.7rem; }
.car-line .title { font-size: 1.25rem; }
.stat b svg { width: 18px; height: 18px; fill: currentColor; }
.stat b.moving { color: #16803c; }
.stat b.stopped { color: #2f6fed; }
.stat b.immobilized { color: #e11d48; }
.stat b.offline { color: #8a8a90; }
.stat small { display: block; font-size: 0.68rem; color: #111; font-weight: 650; }
.status.moving { color: #16803c; }
.status.stopped { color: #2f6fed; }
.status.immobilized { color: #e11d48; }
.status.offline { color: #8a8a90; }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip { background: #f7f7f8; color: #6b6b70; border-radius: 99px; padding: 0.28rem 0.65rem; font-size: 0.82rem; }
.links { display: flex; gap: 1.1rem; }
button.link { color: #2f6fed; padding: 0.15rem 0; font-weight: 650; }

.group { background: white; border-radius: 16px; overflow: hidden; }
.group > * + * { border-top: 1px solid #e6e6e8; }
.group > button.text { width: 100%; }
.fields label { padding: 0.75rem 0.95rem 0.85rem; }
.fields input { background: #f7f7f8; border-radius: 12px; padding: 0.75rem 0.85rem; }
.limit, .check { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 0.95rem; }
.limit span { display: flex; align-items: center; gap: 0.35rem; color: #6b6b70; }
.limit input { width: 4.2rem; background: #f7f7f8; border-radius: 10px; padding: 0.45rem 0.55rem; text-align: right; }
.check input {
  appearance: none;
  width: 46px;
  height: 28px;
  border-radius: 99px;
  background: #e6e6e8;
  position: relative;
  padding: 0;
  flex: none;
}
.check input::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
}
.check input:checked { background: #2f6fed; }
.check input:checked::after { transform: translateX(18px); }

.segment { display: grid; grid-template-columns: repeat(3, 1fr); background: #e6e6e8; border-radius: 12px; padding: 3px; }
#trip-tabs { grid-template-columns: repeat(2, 1fr); }
.segment button { border-radius: 10px; color: #6b6b70; padding: 0.55rem 0.2rem; font-size: 0.92rem; }
.segment button.selected { background: white; color: #111111; font-weight: 650; }
.segment.desk-tabs { grid-template-columns: repeat(4, 1fr); }
.segment.desk-tabs button { font-size: 0.72rem; padding: 0.45rem 0.05rem; }

ul { list-style: none; margin: 0; padding: 0; }
ul.group { display: block; }
ul button { width: 100%; text-align: left; background: white; color: inherit; padding: 0.9rem 0.95rem; border-radius: 0; }
ul button.alert-hit { background: transparent; padding: 0.7rem 0.15rem; }
ul button .route { display: block; margin-top: 0.2rem; color: #111111; }
ul button .muted { display: block; margin-top: 0.15rem; }
#places li { background: white; padding: 0.85rem 0.95rem; }
#places .row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
#places button.ghost { color: #e11d48; font-weight: 650; padding: 0.3rem 0.1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filters button {
  border-radius: 999px;
  background: white;
  color: #6b6b70;
  padding: 0.45rem 0.75rem;
  font-size: 0.88rem;
}
.filters button.selected { background: #2f6fed; color: white; font-weight: 650; }
.desk-side .filters button { background: #f7f7f8; }
.desk-side .filters button.selected { background: #2f6fed; color: white; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.dates input { width: 100%; }
.day-head { font-weight: 650; padding: 0.35rem 0.15rem 0; }
.story { padding: 0.85rem 0.95rem; line-height: 1.35; }
.leaflet-div-icon.trip-flag-wrap { background: transparent; border: 0; }
.trip-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px white;
}
.trip-flag.start { background: #2f6fed; }
.trip-flag.end { background: #111111; }
.trip-flag svg { width: 16px; height: 16px; }

.route { display: block; margin-top: 0.2rem; }

nav { display: grid; grid-template-columns: repeat(4, 1fr); background: white; border-top: 1px solid #e6e6e8; }
nav button { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; color: #6b6b70; padding: 0.55rem 0.2rem 0.7rem; font-size: 0.72rem; font-weight: 600; }
nav svg { width: 22px; height: 22px; fill: currentColor; }
nav button.selected { color: #2f6fed; box-shadow: none; }

dialog { border: 0; border-radius: 20px; padding: 0; width: min(340px, calc(100% - 2rem)); }
dialog::backdrop { background: rgba(17, 17, 17, 0.45); }
dialog form { padding: 1.3rem; }
dialog .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
dialog .row button { border-radius: 12px; padding: 0.8rem; font-weight: 650; }
#relay-cancel { background: #f7f7f8; }
#relay-next { background: #2f6fed; color: white; }
.hold-track { height: 6px; background: #ffe4e6; border-radius: 99px; overflow: hidden; }
#hold-bar { height: 100%; width: 0; background: #e11d48; }
#hold { width: 100%; border-radius: 14px; background: #e11d48; color: white; padding: 0.95rem; font-weight: 650; }

@media (max-width: 480px) {
  body { background: #f7f7f8; }
  .phone { width: 100%; height: 100vh; height: 100dvh; }
}

@media (min-width: 900px) {
  body { display: block; background: #d7dbe0; }
  .phone { width: 100%; height: 100vh; height: 100dvh; }
  nav { display: none; }
  #logout { display: none !important; }
  .map-panel[hidden] { display: block !important; }
  .desk-side {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 320px;
    background: white;
    border-radius: 18px;
    padding: 1rem;
    overflow: auto;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.14);
  }
  .desk-side h2 { font-size: 1.3rem; }
  .desk-cars { display: grid; }
  .live-cards { left: 352px; right: auto; width: 320px; bottom: 16px; }
  .alert-stack {
    display: grid;
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 80px;
    width: min(280px, 28vw);
    gap: 0.4rem;
    margin: 0;
    padding: 0;
  }
  .alert-stack li {
    background: white;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
  }
  .panel.scroll {
    position: absolute;
    z-index: 6;
    top: 16px;
    bottom: 16px;
    left: 352px;
    width: min(440px, calc(100% - 390px));
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.16);
  }
  #desk-side > #trip-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  #desk-side > #trip-detail #trip-tabs {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: white;
  }
  #desk-side .trip-box .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.4rem; }
  .map-panel.picking-car .live-cards,
  .map-panel.picking-car .alert-stack,
  .map-panel.picking-car .geo-banner,
  .map-panel.picking-car #desk-tabs,
  .map-panel.picking-car #desk-view-trips,
  .map-panel.picking-car #desk-view-summary,
  .map-panel.picking-car #desk-view-alerts,
  .map-panel.picking-car > #trip-detail { display: none !important; }
  .map-panel.showing-trip #desk-back,
  .map-panel.showing-trip #desk-cars,
  .map-panel.showing-trip #desk-logout,
  .map-panel.showing-trip #desk-tabs,
  .map-panel.showing-trip #desk-view-trips,
  .map-panel.showing-trip #desk-view-summary,
  .map-panel.showing-trip #desk-view-alerts { display: none; }
  #legend-toggle, #map-legend { display: none !important; }
  .map-panel.showing-trip .live-cards { display: none; }
}