#app { display: contents; }
.app { display: contents; }

.page { display: flex; flex-direction: column; gap: 20px; }
.page > .page-head { margin-bottom: 0; }
.page > div:not([class]),
.split > div:not([class]) { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.card .check input, .card .radio input, .card .switch input,
.modal .check input, .modal .radio input, .modal .switch input,
.login__box .check input { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; }

.split > *, .stack > * { min-width: 0; }
.card { min-width: 0; }

.bars { display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: auto; }
.bar-row { grid-template-columns: 120px minmax(60px, 1fr) 48px; }

.menu-form { display: flex; gap: 6px; padding: 6px 8px 8px; }
.menu-form .input { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 8px; font-size: 12px; flex: 1; min-width: 0; }
.pop-wide { min-width: 280px; }
.drawer-close { margin-left: auto; }
.drawer-tabs { padding: 0 24px; border-bottom: 1px solid var(--line); }
.drawer-tabs .tabs { border-bottom: 0; }
.drawer-name { font-size: 15px; font-weight: 600; }
.toast-body { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cards .card-b { display: flex; flex-direction: column; }

.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.th-sort:hover { color: var(--ink); }
.th-sort.is-on { color: var(--accent); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.tbl tr.is-selected td { background: var(--accent-soft); }
.tbl tr.is-clickable { cursor: pointer; }

.diff-row .before { color: var(--bad); text-decoration: line-through; text-decoration-color: var(--bad); }
.diff-row .after { color: var(--ok); }
.diff-row.is-changed > div { background: transparent; }
.diff-row.is-changed .after { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.diff-row.is-changed .before { background: color-mix(in srgb, var(--bad) 10%, transparent); }

.sk-group .sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.sk-circle { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); flex: none; }
.sk-line { border-radius: 5px; height: 10px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }

.empty .btn { margin-top: 12px; }
.errstate .btn { margin-top: 12px; }

.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.bulkbar b { font-size: 12px; }

.queue-scroll { overflow: auto; }

.rule-flow { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.rule-main { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }

.chat-side h4 { font-size: 12.5px; font-weight: 650; margin-bottom: 8px; }
.chat { min-height: 460px; }
.chat-side .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.chat-side .dl dd { margin-bottom: 8px; }
.chat-list-h .toolbar-search { width: 100%; }
.chat-list-h .toolbar-search input { flex: 1; width: auto; min-width: 0; }
.toolbar-search input { min-width: 0; }

.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.set-row + .set-row { margin-top: 8px; }
.set-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.set-row-main small { font-size: 11.5px; }
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-nav { display: flex; flex-direction: column; padding: 8px; position: sticky; top: 84px; }
.set-nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 550; text-align: left; cursor: pointer; }
.set-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.set-nav-item.is-on { background: var(--surface-2); color: var(--ink); }
.set-nav-item svg { width: 15px; height: 15px; color: var(--muted); }
.set-nav-item.is-on svg { color: var(--accent); }
.set-savebar { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow-1); position: sticky; bottom: 12px; }
@media (max-width: 900px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; }
}

.policy-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.policy-row .row-between { width: 100%; }

.copy-field { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); margin-top: 8px; }
.copy-field code { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.swatch-c { display: block; height: 48px; border-radius: 8px; border: 1px solid var(--line); }
.swatch b { font-size: 12px; }
.swatch small { font-size: 10px; color: var(--muted); }
.type-row { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.type-row .mono { min-width: 84px; }
.type-28 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.type-17 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.space-token { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.space-bar { display: block; width: 22px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent); }

.diff-row .before { color: var(--bad); text-decoration: line-through; text-decoration-color: var(--bad); }

.feed-main small { display: block; color: var(--muted); font-size: 11px; }

.tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); }
.tbl-foot .row-actions { display: flex; align-items: center; gap: 8px; }
.tbl-foot .select { width: auto; height: 30px; padding: 0 28px 0 10px; }
.tbl-foot .btn { white-space: nowrap; }

.kpi-spark { min-height: 34px; }
.kpi-val { overflow-wrap: anywhere; }
.kpi-note { overflow-wrap: anywhere; }
.kpi-spark .spark { width: 100%; height: 34px; }
.spark { min-width: 0; max-width: 100%; }

@media (max-width: 720px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .diff-row { grid-template-columns: 84px minmax(0, 1fr); }
  .diff-row .after { grid-column: 2; }
}

.place-search { position: relative; }
.place-results { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; max-height: 260px; overflow-y: auto; }
.place-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.place-result:first-child { border-top: 0; }
.place-result:hover { background: var(--surface-2); }
.place-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.place-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.place-result-main b { font-size: 12.5px; }
.place-result-main small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.place-result-meta { color: var(--muted); white-space: nowrap; }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  body.mobile-nav-open { overflow: hidden; }
  .side { height: 100dvh; }
  .side-collapse { display: none; }
  .side-close { flex: 0 0 auto; margin-left: auto; color: var(--side-muted); }
  .side-close:hover { background: var(--side-hover); color: var(--side-ink); }
}
.playback { display: flex; flex-direction: column; gap: 12px; }
.playback__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.playback__who { display: flex; flex-direction: column; min-width: 0; }
.playback__who b { font-size: 15px; }
.playback__who small { font-size: 11px; }
.playback__vehicle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.playback__mode { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.playback__stage { position: relative; }
.playback__map { height: 560px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.playback__topbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; pointer-events: none; }
.playback__console { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-2); padding: 12px 14px; }
.playback__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 12px; font-weight: 600; }
.playback__chip .mono { font-weight: 500; color: var(--muted); }
.map-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 6px 10px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-1); font-size: 11px; color: var(--muted); }
.map-legend li { display: inline-flex; align-items: center; gap: 5px; }
.map-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.map-dot--available { background: #0a6b4d; }
.map-dot--ride { background: #2e6bff; }
.map-dot--paused { background: #8b5cf6; }
.map-dot--none { background: #98a2b3; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.pstat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.pstat span { display: block; font-size: 11px; color: var(--muted); }
.pstat b { font-size: 15px; }
.pstat small { display: block; font-size: 11px; color: var(--muted); }
.player { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-1); }
.player__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.player__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.player__btn:hover { background: var(--accent-soft); }
.player__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.player__btn--main { width: 46px; height: 46px; background: var(--ink); border-color: var(--ink); color: var(--surface); }
.player__btn--main:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.player__clock { font-size: 13px; font-weight: 600; min-width: 74px; }
.player__speed { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.player__speed .select { height: 30px; padding: 0 8px; width: auto; }
.player__timeline { display: flex; flex-direction: column; gap: 4px; }
.tl { position: relative; height: 22px; }
.tl__bars { display: flex; gap: 2px; height: 22px; align-items: stretch; border-radius: 6px; overflow: hidden; background: var(--line); }
.tl-seg { display: block; border-radius: 2px; min-width: 2px; }
.tl-seg--available { background: #0a6b4d; }
.tl-seg--on_ride { background: #2e6bff; }
.tl-seg--paused { background: #8b5cf6; }
.tl-seg--empty { background: var(--line); }
.tl__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.tl__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.tl__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 3px; height: 26px; border-radius: 2px; background: var(--ink); border: 0; }
.tl__range::-moz-range-thumb { width: 3px; height: 26px; border-radius: 2px; background: var(--ink); border: 0; }
.tl__labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }@media (max-width: 900px) {
  .playback__map { height: 380px; }
  .playback__topbar { position: static; margin-bottom: 8px; }
  .playback__console { position: static; margin-top: 10px; box-shadow: none; }
}
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .side,
  .topbar,
  .banner,
  .search,
  .tabs,
  .btn,
  .side-foot,
  .only-mobile,
  .toast,
  .overlay {
    display: none !important;
  }

  .app,
  .shell,
  .main {
    display: block !important;
    min-height: 0;
  }

  .content {
    padding: 0;
    max-width: none;
  }

  #view {
    max-width: none;
  }

  .card,
  .kpi {
    border: 1px solid #cccccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .card-h {
    border-bottom: 1px solid #cccccc;
  }

  .tbl th {
    position: static;
    background: #ffffff;
  }

  .tbl thead {
    display: table-header-group;
  }

  .print-only {
    display: block !important;
  }
}

.dmy-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.dmy-input[aria-invalid="true"] {
  border-color: var(--bad);
}