:root {
    --page-bg: #05060a;
    --card: #0d0f13;
    --soft: rgba(255, 255, 255, 0.045);
    --soft-2: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
    --text: #f0f1f4;
    --text-2: #d1d4da;
    --muted: #7a7f88;
    --muted-2: #5b6068;
    --blue: #016cec;
    --blue-soft: #1a2342;
    --bubble: #1b2742;
    --chip: #181b22;
    --green: #35c759;
    --amber: #ff9f2e;
    --red: #ff5a5f;
    --orange: #ffa24a;
    --chart-blue: #016cec;
    --chart-orange: #ffa24a;
    --avatar-ring: #0d0f13;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100vh;
    font-family: 'Axiforma', system-ui, sans-serif;
    background: #000;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
  }

  body {
    height: 100vh;
    padding: 14px;
    position: relative;
  }

  /* Unified custom scrollbar across the app */
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
  }
  * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }

  /* Animated gradient background */
  .bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 80% 10%, rgba(0, 171, 247, 0.04) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 90%, rgba(1, 107, 236, 0.03) 0%, transparent 55%),
      #05060a;
  }
  .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform;
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(1, 108, 236, 0.5) 0%, rgba(0, 171, 247, 0.25) 45%, rgba(0, 171, 247, 0) 70%);
    bottom: -18%; right: -12%;
    animation: blobDrift 120s ease-in-out infinite;
  }
  @keyframes blobDrift {
    0%,100% { transform: translate(0, 0) scale(1); }
    25%     { transform: translate(-6vw, -4vh) scale(1.05); }
    50%     { transform: translate(-12vw, 2vh) scale(0.95); }
    75%     { transform: translate(-4vw, -6vh) scale(1.03); }
  }

  .app {
    width: 100%;
    height: calc(100vh - 28px);
    background: transparent;
    display: grid;
    grid-template-columns: 260px 1fr 340px;
    gap: 14px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  /* Liquid-glass panels */
  .sidebar, .main, .right {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
  }

  /* ============ SETTINGS POPOVER ============ */
  .sidebar-footer { position: relative; }
  .footer-icons {
    display: flex;
    gap: 8px;
  }
  .footer-icon-btn {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: background .15s, color .15s, border-color .15s;
  }
  .footer-icon-btn:hover {
    background: var(--soft-2);
    color: var(--text);
    border-color: rgba(255,255,255,0.14);
  }
  /* Logout — a red glass tint over the frosted button; on-theme, clearly destructive */
  .footer-icon-btn.logout {
    background: rgba(255, 90, 95, 0.12);
    color: var(--red);
    border-color: rgba(255, 90, 95, 0.28);
  }
  .footer-icon-btn.logout:hover {
    background: rgba(255, 90, 95, 0.18);
    color: var(--red);
    border-color: rgba(255, 90, 95, 0.42);
  }
  .settings-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 14px 12px 10px;
    border-radius: 18px;
    background: linear-gradient(160deg,
                rgba(32, 35, 42, 0.94) 0%,
                rgba(18, 20, 26, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 16px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: bottom center;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    pointer-events: none;
  }
  .settings-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  /* Tail pointing down to the Settings button */
  .settings-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 22px;
    width: 11px; height: 11px;
    background: rgba(20, 22, 28, 0.96);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .settings-pop-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 4px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .settings-pop-head .card-name-main { font-size: 14px; }
  .settings-pop-head .card-name-sub  { font-size: 9.5px; }

  .setting {
    --accent: 255,255,255;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background:
      radial-gradient(ellipse 60% 100% at 0% 50%,
                      rgba(var(--accent), 0.07) 0%,
                      transparent 60%),
      linear-gradient(160deg,
                rgba(255,255,255,0.05) 0%,
                rgba(255,255,255,0.012) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 4px 12px rgba(0,0,0,0.18);
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  /* Glass edge highlight running along the top of each card */
  .setting::before {
    content: '';
    position: absolute;
    top: 0; left: 24%; right: 24%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    pointer-events: none;
  }
  /* Left accent stripe in the icon's color */
  .setting::after {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: rgba(var(--accent), 0.55);
    box-shadow: 0 0 10px rgba(var(--accent), 0.5);
    opacity: 0.7;
  }
  .setting:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 6px 18px rgba(0,0,0,0.25),
      0 0 22px rgba(var(--accent), 0.18);
  }
  .setting:hover::after { opacity: 1; }

  /* Popover-scoped layout — matches dashboard sub-card style */
  /* Flat rows separated by hairlines — matches the rest of the UI, not a card stack */
  .settings-popover .setting {
    padding: 12px 4px;
    gap: 12px;
    border-radius: 0;
    flex-wrap: wrap;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    transition: none;
  }
  .settings-popover .setting:last-child { border-bottom: none; }
  /* Strip the dashboard-card extra accents we don't want here */
  .settings-popover .setting::before,
  .settings-popover .setting::after { display: none; }
  .settings-popover .setting:hover {
    transform: none;
    background: none;
    border-color: var(--line);
    box-shadow: none;
  }

  /* Neutral glass chip — no more coloured cartoon icons */
  .settings-popover .card-icon {
    width: 28px; height: 28px;
    font-size: 11.5px;
    border-radius: 8px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--text-2);
    box-shadow: none;
  }
  .settings-popover .setting-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  /* Segment wraps full-width on its own row inside the popover */
  .settings-popover .segment {
    flex-basis: 100%;
    width: 100%;
    justify-content: space-between;
  }
  .settings-popover .seg-btn {
    flex: 1;
    padding: 5px 4px;
    font-size: 11px;
  }
  /* Smaller toggle to fit next to label */
  .settings-popover .toggle {
    width: 38px; height: 22px;
  }
  .settings-popover .toggle-slider::before {
    width: 16px; height: 16px;
  }
  .settings-popover .toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
  }

  .setting .card-icon {
    width: 38px; height: 38px;
    font-size: 14px;
  }
  .setting-info {
    flex: 1;
    min-width: 0;
  }
  .setting-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .setting-desc {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.35;
  }

  /* Segment control — pressed-glass look */
  .segment {
    display: inline-flex;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,0.55),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .seg-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
  }
  .seg-btn:hover { color: var(--text-2); }
  .seg-btn.active {
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.2),
      0 2px 8px rgba(1,108,236,0.4),
      0 0 12px rgba(1,108,236,0.25);
  }

  /* iOS-style toggle */
  .toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    transition: background .25s, border-color .25s, box-shadow .25s;
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,0.5),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    left: 2px; top: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #d4d8e0 100%);
    border-radius: 50%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(0,0,0,0.08),
      0 2px 4px rgba(0,0,0,0.4),
      0 1px 2px rgba(0,0,0,0.25);
    transition: transform .25s ease;
  }
  .toggle input:checked + .toggle-slider {
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    border-color: rgba(1,108,236,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.15),
      0 0 14px rgba(1,108,236,0.45),
      0 0 24px rgba(1,108,236,0.15);
  }
  .toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
  }

  /* ============ SIDEBAR ============ */
  .sidebar {
    padding: 24px 14px 18px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    margin-bottom: 20px;
  }
  .logo-img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, color .15s ease;
  }
  .nav-item:hover { background: var(--soft); color: var(--text-2); }
  .nav-item.active {
    background: rgba(1, 108, 236, 0.16);
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(1, 108, 236, 0.22);
  }
  .nav-item.active .nav-icon { color: #2a84ff; }
  .nav-item .nav-icon {
    width: 18px;
    font-size: 16px;
    text-align: center;
    flex-shrink: 0;
  }
  .nav-gap {
    margin-top: 14px;
    position: relative;
  }
  .nav-gap::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--line);
  }

  .stat-icon i { font-size: 16px; }
  .date-chip .icon-wrap i { font-size: 11px; }
  .delta i { font-size: 10px; }
  .select-pill i { font-size: 10px; }
  .task-icon i { font-size: 14px; }
  .task-time i { font-size: 12px; }
  .task-menu i { font-size: 15px; }
  .c-ico i { font-size: 14px; }
  .file-icon i { font-size: 14px; }
  .file-dl i { font-size: 11px; }
  .nav-item .plus {
    margin-left: auto;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
  }
  .nav-item .plus:hover { background: var(--soft-2); color: var(--text); }

  .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }

  /* ============ MAIN ============ */
  .main {
    padding: 28px 34px 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
  }
  .greeting {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 4px;
  }
  .greeting-sub {
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
  }
  .date-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 11px 8px 16px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
  }
  .date-chip .icon-wrap {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
  }

  .stats {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .stat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    position: relative;
  }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--line);
  }
  .stat-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
    flex-shrink: 0;
  }
  .stat-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
    font-weight: 500;
    white-space: nowrap;
  }
  .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 10px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .delta {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .delta.up { color: var(--green); }
  .delta.down { color: var(--red); }

  .section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }

  .select-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    color: var(--text-2);
    font-weight: 500;
    cursor: pointer;
  }

  /* ============ DASHBOARD GRID ============ */
  .dash-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "map call"
      "map bottom";
    gap: 14px;
    flex: 1;
    min-height: 0;
  }
  .map-panel    { grid-area: map; }
  .call-panel   { grid-area: call; }
  .bottom-row {
    grid-area: bottom;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }
  .bottom-row > .panel-card { min-height: 0; }
  .panel-card {
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
  }
  .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .card-title {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .card-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg,
                rgba(1,108,236,0.14) 0%,
                rgba(1,108,236,0.05) 100%);
    border: 1px solid rgba(1,108,236,0.18);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
  }
  .card-name-main {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .card-name-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
  }
  .card-icon.green  {
    background: linear-gradient(135deg, rgba(53,199,89,0.14) 0%, rgba(53,199,89,0.05) 100%);
    border-color: rgba(53,199,89,0.18);
    color: var(--green);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-icon.amber  {
    background: linear-gradient(135deg, rgba(255,159,46,0.14) 0%, rgba(255,159,46,0.05) 100%);
    border-color: rgba(255,159,46,0.18);
    color: var(--amber);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-icon.purple {
    background: linear-gradient(135deg, rgba(162,89,255,0.14) 0%, rgba(162,89,255,0.05) 100%);
    border-color: rgba(162,89,255,0.18);
    color: #a259ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-icon.red {
    background: linear-gradient(135deg, rgba(255,90,95,0.14) 0%, rgba(255,90,95,0.05) 100%);
    border-color: rgba(255,90,95,0.18);
    color: var(--red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .head-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
  }
  .head-link:hover { color: var(--blue); }

  /* Map panel */
  .fleet-stats { display: inline-flex; gap: 6px; }
  .fleet-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--text-2);
  }
  /* Manage-page header pills sit next to the Add button — match its size. */
  .mg-head .fleet-pill { gap: 7px; padding: 8px 16px; font-size: 12.5px; }
  .fleet-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
  .fleet-pill.on .dot  { background: var(--green); box-shadow: 0 0 0 3px rgba(53,199,89,0.18); }
  .fleet-pill.off .dot { background: var(--muted); }
  .fleet-pill.alert { color: var(--red); border-color: rgba(255, 90, 95, 0.3); }
  .fleet-pill.alert .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.15); }
  .map-canvas {
    position: relative;
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(ellipse at 30% 40%, rgba(1,108,236,0.08) 0%, rgba(0,0,0,0) 60%), rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.04);
  }
  .map-canvas svg { width: 100%; height: 100%; display: block; }
  #fleet-map { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mapboxgl-ctrl-attrib,
  .mapboxgl-ctrl-logo { display: none !important; }
  .mapboxgl-canvas { outline: none; }

  /* Fleet marker — outer is mapbox-controlled, no transforms/transitions on it */
  .veh-marker {
    cursor: pointer;
    will-change: transform;
    font-family: 'Axiforma', sans-serif;
  }
  .veh-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 2px 11px 2px 2px;
    border-radius: 999px;
    background: rgba(13,15,19,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 10px rgba(0,0,0,0.55);
    white-space: nowrap;
  }
  .veh-marker:hover .veh-pill {
    filter: brightness(1.18);
    border-color: rgba(255,255,255,0.22);
  }
  .veh-pill .act-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
    flex-shrink: 0;
    background: url('https://api.paxsys.co.uk/config/chaseside/icons/icon_1.avif') center/cover no-repeat !important;
    color: transparent !important;
  }
  .veh-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
  }
  .veh-num {
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }
  .veh-reg {
    color: rgba(255,255,255,0.55);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  /* Liquid-glass popup — lets the map show through, frosted */
  .mapboxgl-popup.veh-popup .mapboxgl-popup-content {
    background: linear-gradient(135deg,
                rgba(40,44,52,0.45) 0%,
                rgba(24,27,33,0.50) 55%,
                rgba(40,44,52,0.42) 100%);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      0 16px 40px rgba(0,0,0,0.5);
    color: var(--text);
  }
  .mapboxgl-popup.veh-popup .mapboxgl-popup-tip {
    border-top-color: rgba(24,27,33,0.55);
    border-bottom-color: rgba(24,27,33,0.55);
  }
  .mapboxgl-popup.veh-popup .mapboxgl-popup-close-button {
    color: var(--muted);
    font-size: 18px;
    padding: 6px 10px;
  }
  .mapboxgl-popup.veh-popup .mapboxgl-popup-close-button:hover {
    background: var(--soft);
    color: var(--text);
    border-radius: 6px;
  }
  .vehicle-popup {
    min-width: 210px;
    padding: 9px 12px 9px;
    font-family: 'Axiforma', sans-serif;
    text-align: center;
  }
  .vp-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 7px;
    text-align: left;
  }
  .vp-head .act-avatar { width: 32px; height: 32px; font-size: 12px; }
  .vp-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .vp-reg {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .vp-body { display: flex; flex-direction: column; gap: 5px; }
  .vp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .vp-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    text-align: center;
  }
  .vp-row.vp-row-inline {
    flex-direction: row;
    justify-content: center;
    gap: 9px;
  }
  .vp-label {
    color: var(--muted);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0;
  }
  .vp-val {
    color: var(--text);
    font-weight: 700;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
  }
  .vp-journey {
    font-weight: 600;
    color: var(--text-2);
    font-size: 12px;
  }
  .vp-val.ontime  { color: var(--green); }
  .vp-val.delayed { color: var(--amber); }
  .vp-val.stopped { color: var(--red); }
  .vp-action {
    margin-top: 7px;
    width: 100%;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(1,108,236,0.3);
    background: rgba(1,108,236,0.14);
    color: var(--blue);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .vp-action i { font-size: 11px; }
  .vp-action:hover {
    background: rgba(1,108,236,0.22);
    border-color: rgba(1,108,236,0.5);
  }
  .vp-action:active { transform: translateY(1px); }
  .map-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(13,15,19,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .map-badge:hover {
    background: rgba(20,22,28,0.82);
    border-color: rgba(255,255,255,0.16);
  }
  .map-badge i { font-size: 10px; color: var(--blue); }

  /* Call panel */
  .call-panel .call-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
    font-variant-numeric: tabular-nums;
  }
  .call-timer .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(255,90,95,0.6);
    animation: callPulse 1.6s ease-out infinite;
  }
  @keyframes callPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,90,95,0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(255,90,95,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); }
  }
  .call-panel { padding: 14px 16px 14px; }
  .head-muted {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .call-split {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  /* Driver cards */
  .driver-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    min-width: 0;
  }
  /* Empty state — centred icon + text, no container */
  /* Grid-spanning only — visual style comes from the shared .mg-empty. */
  .drivers-empty { grid-column: 1 / -1; }
  .driver-card {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 4px;
    transition: background .15s, border-color .15s, transform .15s;
    cursor: pointer;
    min-width: 0;
  }
  .driver-card:hover {
    border-color: rgba(1,108,236,0.3);
    background: rgba(1,108,236,0.06);
    transform: translateY(-1px);
  }
  .driver-card .act-avatar {
    width: 38px; height: 38px;
    font-size: 13px;
  }
  .driver-name {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .driver-meta {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dr-reg {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .driver-call {
    margin-top: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(53,199,89,0.3);
    background: rgba(53,199,89,0.12);
    color: #35c759;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
  }
  .driver-card:hover .driver-call,
  .driver-call:hover {
    background: #35c759;
    color: #fff;
    border-color: #35c759;
    box-shadow: 0 4px 12px rgba(53,199,89,0.3);
  }

.call-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--soft);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: transform .15s, filter .15s;
  }
  .call-btn:hover { transform: translateY(-1px); filter: brightness(1.2); }
  .call-btn.end {
    background: linear-gradient(180deg, #ff6b6f 0%, #e5484d 100%);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 6px 14px rgba(229,72,77,0.35);
  }
  .call-btn.end i { transform: rotate(135deg); }

  /* Activity overview */
  .activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
  }
  .feed-item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    position: relative;
  }
  .feed-item:first-child { border-top: none; padding-top: 2px; }
  .feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
  }
  .feed-dot.start { background: var(--green); }
  .feed-dot.end   { background: var(--muted); }
  .feed-dot.warn  { background: var(--amber); }
  .feed-dot.call  { background: var(--blue); }
  .feed-body { min-width: 0; }
  .feed-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.4;
    font-weight: 500;
  }
  .feed-text strong {
    color: var(--text);
    font-weight: 600;
  }
  .feed-code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    background: rgba(1,108,236,0.1);
    border: 1px solid rgba(1,108,236,0.2);
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0;
  }
  .feed-meta {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }

  /* Changelog */
  .changelog {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cl-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line);
  }
  .cl-item:first-child { border-top: none; padding-top: 2px; }
  .cl-ver {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    background: rgba(1,108,236,0.1);
    border: 1px solid rgba(1,108,236,0.2);
    padding: 3px 7px;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0;
  }
  .cl-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.3;
  }
  .cl-meta {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
  .cl-tag {
    display: inline-block;
    margin-right: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 5px;
    vertical-align: 1px;
  }
  .cl-tag.portal { background: rgba(1,108,236,.12); border: 1px solid rgba(1,108,236,.3); color: #5ea3ff; }
  .cl-tag.app { background: rgba(53,199,89,.1); border: 1px solid rgba(53,199,89,.28); color: var(--green); }
  .cl-more {
    margin-top: 10px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(1,108,236,0.25);
    background: rgba(1,108,236,0.08);
    color: var(--blue);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .cl-more i { font-size: 10px; transition: transform .2s; }
  .cl-more:hover {
    background: rgba(1,108,236,0.15);
    border-color: rgba(1,108,236,0.4);
  }
  .cl-more:hover i { transform: translateX(2px); }

  /* ============ RIGHT PANEL ============ */
  .right {
    padding: 16px 16px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .profile-card {
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .profile-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .profile-id-text { min-width: 0; }
  .avatar-wrap {
    position: relative;
    width: 46px; height: 46px;
    flex-shrink: 0;
  }
  .avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-family: inherit;
    background: #016cec;
  }
  .avatar.blue   { background: #016cec; }
  .avatar.orange { background: #f59e42; }
  .avatar.green  { background: #35c759; }
  .avatar.purple { background: #a259ff; }
  .avatar.pink   { background: #ff6b8a; }
  .status-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--green);
    border: 2.5px solid var(--card);
  }
  .profile-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-handle {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
  }
  /* Driver-crew bubble cluster (overlapping avatars) */
  .profile-crew {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 4px;
  }
  .crew-bubble {
    width: 38px; height: 38px;
    font-size: 12px;
    border: 2px solid var(--avatar-ring);
    margin-left: -12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
    transition: margin-left .18s ease;
    cursor: default;
  }
  .crew-bubble:first-child { margin-left: 0; }
  .profile-crew:hover .crew-bubble { margin-left: -5px; }
  .profile-crew:hover .crew-bubble:first-child { margin-left: 0; }

  .activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 14px;
    border-top: 1px solid var(--line);
    margin-bottom: 6px;
    flex-shrink: 0;
  }
  .activity-title {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .activity-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 3px 9px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
  }
  .activity-count.live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,90,95,0.45);
    animation: liveDotPulse 1.8s ease-out infinite;
  }
  @keyframes liveDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,90,95,0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(255,90,95,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); }
  }

  .activity {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .act {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }
  .act-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: inherit;
  }
  .act-avatar.blue   { background: #016cec; }
  .act-avatar.orange { background: #f59e42; }
  .act-avatar.green  { background: #35c759; }
  .act-avatar.purple { background: #a259ff; }
  .act-avatar.pink   { background: #ff6b8a; }
  .act-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
  }
  .act-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
  }
  .act-time {
    font-size: 11.5px;
    color: var(--muted-2);
    font-weight: 500;
  }
  .act-text {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.4;
  }
  .act-text a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
  }

  .bubble {
    margin-top: 8px;
    background: var(--bubble);
    border-radius: 12px 12px 12px 4px;
    padding: 11px 13px;
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.45;
    position: relative;
  }
  .bubble .reaction {
    position: absolute;
    right: -6px; bottom: -8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--soft-2);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
  }

  .file-card {
    margin-top: 8px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .file-icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: #a259ff;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
  }
  .file-meta { flex: 1; min-width: 0; }
  .file-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }
  .file-size {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .file-dl {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--soft-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
    cursor: pointer;
  }

  .composer {
    margin-top: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 20px;
    flex-shrink: 0;
  }
  .composer input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    padding: 12px 0;
  }
  .composer input::placeholder { color: var(--muted-2); }
  .composer .send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(1, 108, 236, 0.35);
    transition: transform .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
  }
  .composer .send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 108, 236, 0.45);
  }
  .composer .send-btn i { transform: translateX(-1px); }

  .online-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--card);
  }

  .act-avatar-wrap {
    position: relative;
    width: 34px; height: 34px;
  }

  /* ================= PAGE ROUTING ================= */
  .page { display: none; }
  .page.active { display: flex; }

  /* Placeholder-page empty state (Announcement editor, About) */
  .page-empty-card {
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .page-empty {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
  }
  .page-empty-icon {
    width: 64px; height: 64px;
    margin-bottom: 6px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--blue);
    background: linear-gradient(135deg, rgba(1,108,236,0.22) 0%, rgba(1,108,236,0.06) 100%);
    border: 1px solid rgba(1,108,236,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(1,108,236,0.08);
  }
  .page-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .page-empty-sub {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
  }

  /* ================= ABOUT PAGE (ported from test6 variant A) ================= */
  .about-view{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
  .about-view .hero{max-width:660px;margin:0 auto;text-align:center;padding-top:34px}
  .about-view .hero-logo img{height:46px;display:block;margin:0 auto}
  .about-view .hero-sub{margin-top:14px;font-size:13px;color:var(--text-2);font-weight:500}
  .about-view .hero-chips{margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
  .about-view .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:var(--soft);font-size:11.5px;font-weight:600;color:var(--text-2)}
  .about-view .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(53,199,89,.18)}
  .about-view .divider{height:1px;background:var(--line);margin:22px auto;max-width:520px}
  .about-view .customer-strip{display:flex;align-items:center;justify-content:center;gap:14px}
  .about-view .customer-strip .c-label{font-size:11px;color:var(--muted);font-weight:600}
  .about-view .customer-strip img{height:34px;object-fit:contain}
  .about-view .glass-sub{background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
  .about-view .pb-panel-a{max-width:760px;margin:26px auto 0;padding:22px 22px 18px}
  .about-view .pb-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-align:center;margin-bottom:16px}
  .about-view .marks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .about-view .mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:128px;padding:16px 10px 13px;border-radius:14px;border:1px solid transparent;transition:background .18s,border-color .18s}
  .about-view .mark:hover{background:var(--soft);border-color:var(--line)}
  .about-view .mark .m-art{height:30px;display:flex;align-items:center;justify-content:center;filter:brightness(0) invert(1);opacity:.72;transition:opacity .18s}
  .about-view .mark:hover .m-art{opacity:1}
  .about-view .mark img{height:24px;max-width:96px;object-fit:contain}
  .about-view .m-word{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-2)}
  .about-view .m-word.serifish{font-weight:700}
  .about-view .legal{font-size:10px;color:var(--muted-2);line-height:1.75;text-align:center}
  .about-view .pb-panel-a .legal{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

  /* ================= COMMS PAGE ================= */
  .act-avatar.grp {
    background: linear-gradient(135deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    font-weight: 700;
  }
  .act-avatar.grp-large {
    width: 96px; height: 96px;
    font-size: 28px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 8px 22px rgba(0,0,0,0.45),
      0 0 0 4px rgba(255,255,255,0.04);
  }
  .act-avatar.grp.grp-large {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 8px 22px rgba(1,108,236,0.35),
      0 0 0 4px rgba(1,108,236,0.08);
  }
  .act-avatar.small { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }

  .main.main-comms {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    gap: 14px;
    overflow: visible;
  }
  .comms-list, .comms-conv {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .comms-list { width: 375px; flex-shrink: 0; padding: 16px 12px; }
  .comms-conv { flex: 1; min-width: 0; }

  /* Messages list */
  .cl-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px 12px;
    flex-shrink: 0;
  }
  .ml-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .cl-actions { display: flex; gap: 4px; }
  .cl-action {
    appearance: none;
    width: 30px; height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
  }
  .cl-action:hover { background: var(--soft); color: var(--text); }
  .cl-search { position: relative; margin: 2px 6px 12px; flex-shrink: 0; }
  .cl-search input {
    width: 100%;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 9px 14px 9px 34px;
    outline: none;
  }
  .cl-search input::placeholder { color: var(--muted-2); }
  .cl-search > i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted-2);
    font-size: 12px;
    pointer-events: none;
  }
  .conv-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 4px 4px;
  }
  .conv-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
  }
  .conv-item:hover { background: var(--soft); }
  .conv-item.active { background: var(--soft-2); }
  .conv-item .act-avatar { width: 38px; height: 38px; font-size: 12px; flex-shrink: 0; }
  .conv-body { flex: 1; min-width: 0; }
  .conv-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
  }
  .conv-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conv-time {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    flex-shrink: 0;
  }
  .conv-bottom { display: flex; align-items: center; gap: 8px; }
  .conv-preview {
    flex: 1;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .conv-badge {
    flex-shrink: 0;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,90,95,0.18);
  }
  .conv-read { color: var(--blue); font-size: 11px; flex-shrink: 0; }

  /* Active conversation */
  .cv-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .cv-head-left { display: flex; align-items: center; gap: 12px; }
  .cv-head-left .act-avatar { width: 38px; height: 38px; font-size: 12px; }
  .cv-head-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .cv-head-status {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .cv-head-status .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 5px rgba(53,199,89,0.6);
  }
  /* Offline state — without this the dot stayed green for offline drivers */
  .cv-head-status .dot.off {
    background: var(--muted);
    box-shadow: none;
  }
  .cv-head-actions { display: flex; gap: 4px; }
  .cv-head-actions .cl-action { width: 34px; height: 34px; font-size: 13px; }

  /* Track-on-map button (comms info panel) — the prototype class shipped
     with no styles at all; ghost-button recipe from the design tokens. */
  .track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .track-btn:hover {
    background: var(--soft-2);
    color: var(--text);
    border-color: rgba(255,255,255,.14);
    transform: translateY(-1px);
  }
  .track-btn i { font-size: 12px; color: var(--blue); }

  .cv-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .msg { display: flex; align-items: flex-end; gap: 8px; }
  .msg.in  { justify-content: flex-start; }
  .msg.out { justify-content: flex-end; }
  .msg-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    background: linear-gradient(160deg,
                rgba(255,255,255,0.05) 0%,
                rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .msg.in  .msg-bubble { border-bottom-left-radius: 4px; }
  .msg.out .msg-bubble {
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-right-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 4px 12px rgba(1,108,236,0.32);
  }
  .msg-time {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    flex-shrink: 0;
    padding-bottom: 3px;
    font-variant-numeric: tabular-nums;
  }
  /* Read receipts on sent messages: 1 tick sent, 2 ticks delivered, 2 blue read */
  .msg-ticks { margin-left: 5px; font-size: 12px; }
  .msg-ticks.sent,
  .msg-ticks.delivered { color: var(--muted-2); }
  .msg-ticks.read { color: #2a84ff; }

  .cv-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  .cv-composer input {
    flex: 1;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    padding: 11px 18px;
    outline: none;
    min-width: 0;
  }
  .cv-composer input::placeholder { color: var(--muted-2); }
  .cv-composer-actions { display: flex; gap: 2px; }
  .cv-act-btn {
    appearance: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
  }
  .cv-act-btn:hover { background: var(--soft); color: var(--text); }
  .cv-send {
    appearance: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 4px 12px rgba(1,108,236,0.35);
    transition: filter .15s;
    margin-left: 4px;
  }
  .cv-send:hover { filter: brightness(1.1); }

  /* Group info */
  .right-info { padding: 0; overflow: hidden; }
  .info-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .info-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .info-close {
    appearance: none;
    width: 30px; height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
  }
  .info-close:hover { background: var(--soft); color: var(--text); }
  .info-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
  }
  .info-avatar {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    margin-bottom: 14px;
  }
  .info-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .info-edit {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    transition: color .15s;
  }
  .info-edit:hover { color: var(--blue); }
  .info-meta {
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
  .info-divider {
    height: 1px;
    background: var(--line);
    margin: 18px -18px;
  }
  .info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
    text-decoration: none;
    color: inherit;
  }
  .info-row.link-row { cursor: pointer; transition: color .15s; }
  .info-row.link-row:hover { color: var(--text); }
  .info-row.link-row > i { color: var(--muted-2); font-size: 11px; }
  .info-row-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .info-row-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .info-row .toggle { width: 42px; height: 24px; }
  .info-row .toggle-slider::before { width: 18px; height: 18px; }
  .info-row .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

  .info-section { padding: 0; }
  .info-section + .info-section { margin-top: 10px; }

  /* Comms right panel — two separate glass panels (crew on top, info below) with a gap */
  .right[data-page="comms"] {
    padding: 0;
    gap: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .crew-panel, .info-split {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
  }
  .crew-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
    min-height: 67px;   /* level with the conversation header on the left */
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .cv-head { min-height: 67px; }
  .crew-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
  .crew-count {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--text-2);
  }
  .crew-count .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(53,199,89,0.15); }
  .crew-count.off { color: var(--muted); }
  .crew-count.off .dot { background: var(--muted); box-shadow: none; }
  .crew-list {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .crew-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
  }
  .crew-row:hover { background: var(--soft); }
  .crew-av { position: relative; flex-shrink: 0; }
  .crew-av .act-avatar { width: 36px; height: 36px; font-size: 12px; }
  .crew-dot {
    position: absolute; bottom: -1px; right: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--green); border: 2px solid var(--card);
  }
  .crew-meta { flex: 1; min-width: 0; }
  .crew-name {
    font-size: 13px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .crew-sub {
    display: inline-flex; gap: 6px;
    font-size: 11px; color: var(--muted); font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .crew-sub .dr-reg { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.03em; }
  .crew-call {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(53,199,89,0.3);
    background: rgba(53,199,89,0.12);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
  }
  .crew-call:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-1px); }
  .crew-call:disabled { opacity: .35; cursor: not-allowed; }
  .crew-empty { margin: auto; padding: 20px; color: var(--muted); font-size: 12.5px; text-align: center; }

  /* Recent messages in the driver-info panel */
  .info-msg-list { display: flex; flex-direction: column; gap: 8px; }
  .info-msg {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 11px;
  }
  .info-msg.out {
    background: rgba(1,108,236,0.06);
    border-color: rgba(1,108,236,0.18);
  }
  .info-msg-text {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .info-msg-meta {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .info-section-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px;
  }
  .info-section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .info-section-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .info-section-link {
    font-size: 11.5px;
    color: var(--blue);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }
  .info-section-link:hover { filter: brightness(1.1); }
  .info-section-head > i { color: var(--muted); font-size: 11px; }

  .media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .media-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    background: linear-gradient(135deg,
                rgba(255,255,255,0.08) 0%,
                rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
  }
  .media-thumb.m1 { background: linear-gradient(135deg, #2a3b5a 0%, #142036 100%); }
  .media-thumb.m2 { background: linear-gradient(135deg, #3a3550 0%, #1f1c2c 100%); }
  .media-thumb.m3 { background: linear-gradient(135deg, #2c3e50 0%, #1a2530 100%); }
  .media-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .files-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  .file-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    color: var(--text-2);
    font-size: 12px;
  }
  .file-row > i {
    color: var(--muted);
    font-size: 11px;
  }
  .file-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-size {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .info-show-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--blue);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }

  /* Broadcast avatar — red pill with megaphone icon */
  .act-avatar.broadcast {
    background: linear-gradient(135deg, #ff8087 0%, #e5484d 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .act-avatar.broadcast i { font-size: 0.78em; }
  .act-avatar.broadcast.grp-large {
    width: 96px; height: 96px;
    font-size: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 8px 22px rgba(229,72,77,0.35),
      0 0 0 4px rgba(229,72,77,0.10);
  }
  .act-avatar.broadcast.grp-large i { font-size: 36px; }

  /* Pinned conversation row */
  .conv-item.pinned {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(135deg,
                rgba(229,72,77,0.10) 0%,
                rgba(229,72,77,0.04) 100%);
    border: 1px solid rgba(229,72,77,0.18);
    backdrop-filter: blur(8px);
  }
  .conv-item.pinned.active {
    background: linear-gradient(135deg,
                rgba(229,72,77,0.16) 0%,
                rgba(229,72,77,0.06) 100%);
    border-color: rgba(229,72,77,0.32);
  }
  .conv-item.pinned:hover {
    background: linear-gradient(135deg,
                rgba(229,72,77,0.18) 0%,
                rgba(229,72,77,0.07) 100%);
  }
  .pin-icon {
    font-size: 9px;
    color: rgba(229,72,77,0.85);
    margin-left: 6px;
    transform: rotate(35deg);
    display: inline-block;
  }
  .conv-list { gap: 4px; }

  /* Members list */
  .member-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .member-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 11px;
    align-items: center;
    padding: 7px 4px;
    border-radius: 9px;
    transition: background .15s;
  }
  .member-row:hover { background: var(--soft); }
  .member-avatar {
    position: relative;
    width: 34px; height: 34px;
  }
  .member-avatar .act-avatar { width: 34px; height: 34px; font-size: 11px; }
  .member-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #0d0f13;
  }
  .member-status.online { background: var(--green); box-shadow: 0 0 5px rgba(53,199,89,0.55); }
  .member-status.away   { background: var(--amber); box-shadow: 0 0 5px rgba(255,159,46,0.55); }
  .member-status.offline { background: var(--muted-2); }
  .member-info { min-width: 0; }
  .member-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .member-role {
    margin-top: 2px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  /* Driver info — current trip lines */
  .info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 12.5px;
  }
  .info-line + .info-line { border-top: 1px solid var(--line); }
  .info-line-label {
    color: var(--muted);
    font-weight: 500;
  }
  .info-line-val {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .info-line-val.ontime  { color: var(--green); }
  .info-line-val.delayed { color: var(--amber); }
  .info-line-val.stopped { color: var(--red); }

  /* Driver right-click context menu — frosted liquid-glass over real content */
  .ctx-menu {
    position: fixed;
    z-index: 200;
    min-width: 210px;
    padding: 8px;
    background: linear-gradient(160deg,
                rgba(36, 40, 50, 0.55) 0%,
                rgba(20, 22, 30, 0.70) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 40px rgba(0, 0, 0, 0.55);
    font-family: 'Axiforma', sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96) translateY(-3px);
    transform-origin: top left;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  }
  .ctx-menu.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
  }
  .ctx-menu-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .ctx-menu-head .act-avatar { width: 28px; height: 28px; font-size: 10.5px; }
  .ctx-menu-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .ctx-quick-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  .ctx-quick {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, transform .12s;
  }
  .ctx-quick:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
  }
  .ctx-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 4px -2px;
  }
  .ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
  }
  .ctx-menu-item i {
    width: 14px;
    font-size: 11.5px;
    text-align: center;
    color: var(--muted);
  }
  .ctx-menu-item:hover { background: var(--soft); color: var(--text); }
  .ctx-menu-item:hover i { color: var(--text-2); }
  .ctx-menu-item.danger { color: var(--red); }
  .ctx-menu-item.danger i { color: var(--red); }
  .ctx-menu-item.danger:hover {
    background: rgba(255,90,95,0.12);
    color: var(--red);
  }
  .ctx-menu-item.danger:hover i { color: var(--red); }

  /* ================= TRACKING PAGE ================= */
  .main.main-track {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    gap: 14px;
    overflow: visible;
  }
  .track-list, .track-map-panel {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .track-list { width: 360px; flex-shrink: 0; padding: 16px 12px; }
  .track-map-panel {
    flex: 1;
    min-width: 0;
    padding: 14px;
  }
  .track-map-panel .map-canvas {
    flex: 1;
    border-radius: 16px;
    min-height: 0;
  }
  .track-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .vehicle-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 4px 6px;
    margin-top: 4px;
  }
  .vehicle-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .vehicle-row:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 6px 16px rgba(0, 0, 0, 0.25);
  }
  .vehicle-row.active {
    background: linear-gradient(135deg, rgba(1,108,236,0.14) 0%, rgba(1,108,236,0.04) 100%);
    border-color: rgba(1,108,236,0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 22px rgba(1, 108, 236, 0.15);
  }
  .bus-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #1a1c22 center/cover no-repeat url('https://api.paxsys.co.uk/config/chaseside/icons/icon_1.avif');
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 2px 6px rgba(0,0,0,0.3);
    filter: grayscale(1) brightness(0.78);
    transition: filter .15s, border-color .15s, box-shadow .15s;
  }
  .bus-icon > i { display: none; }
  .bus-icon.driving {
    filter: none;
    border-color: rgba(53,199,89,0.32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 12px rgba(53,199,89,0.18);
  }
  .vehicle-row.active .bus-icon {
    filter: none;
    border-color: rgba(1,108,236,0.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 2px rgba(1,108,236,0.35),
      0 4px 14px rgba(1,108,236,0.30);
  }

  /* Map filter pills */
  .map-filters {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 24px);
  }
  .map-filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(13,15,19,0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: background .15s, border-color .15s, transform .15s;
  }
  .map-filter i { font-size: 13px; transition: color .15s; }
  /* Idle — each filter carries a soft, on-theme colour */
  .map-filter[data-filter="lowbridge"] i { color: #ff8f93; }
  .map-filter[data-filter="shell"]     i { color: #ecc558; }
  .map-filter[data-filter="poi"]       i { color: #5b9bff; }
  .map-filter[data-filter="ulez"]      i { color: #4fd08a; }
  .map-filter:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
  }
  /* Active — soft category-tinted glass fill, brighter icon, no coloured glow */
  .map-filter[data-filter="lowbridge"].active {
    background: rgba(255,90,95,0.16);
    border-color: rgba(255,90,95,0.42);
  }
  .map-filter[data-filter="lowbridge"].active i { color: #ff6b6f; }
  .map-filter[data-filter="shell"].active {
    background: rgba(236,197,88,0.15);
    border-color: rgba(236,197,88,0.42);
  }
  .map-filter[data-filter="shell"].active i { color: #f2cf62; }
  .map-filter[data-filter="poi"].active {
    background: rgba(42,132,255,0.16);
    border-color: rgba(42,132,255,0.42);
  }
  .map-filter[data-filter="poi"].active i { color: #6ba6ff; }
  .map-filter[data-filter="ulez"].active {
    background: rgba(53,199,89,0.15);
    border-color: rgba(53,199,89,0.42);
  }
  .map-filter[data-filter="ulez"].active i { color: #58d693; }

  /* Mode selector (bottom centre of tracking map) */
  .map-modes {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 4px;
    background: rgba(13,15,19,0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
  .map-mode {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 7px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, color .15s;
  }
  .map-mode i { font-size: 11px; }
  .map-mode:hover:not(:disabled):not(.active) {
    color: var(--text-2);
    background: rgba(255,255,255,0.04);
  }
  .map-mode.active {
    background: rgba(1,108,236,0.20);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(1,108,236,0.50), 0 2px 8px rgba(1,108,236,0.30);
  }
  .map-mode:disabled { opacity: 0.40; cursor: not-allowed; }

  /* Editor overlay */
  .map-editor {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .map-editor[hidden] { display: none; }
  .editor-toolbar {
    display: flex;
    gap: 4px;
    align-items: center;
    background: rgba(13,15,19,0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
  .editor-tool {
    appearance: none;
    border: none;
    background: transparent;
    width: 34px; height: 34px;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
  }
  .editor-tool:hover { background: rgba(255,255,255,0.06); color: var(--text-2); }
  .editor-tool.active {
    background: rgba(1,108,236,0.22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(1,108,236,0.45);
  }
  .editor-tool.danger:hover {
    background: rgba(255,90,95,0.16);
    color: var(--red);
  }
  .editor-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    margin: 0 2px;
  }
  .editor-hint {
    font-size: 11px;
    color: var(--muted);
    background: rgba(13,15,19,0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    align-self: flex-start;
    max-width: 260px;
  }

  /* Shape naming popup */
  .shape-popup[hidden] { display: none; }
  .shape-popup {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    background: rgba(15,18,23,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    min-width: 300px;
  }
  .shape-popup-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-2);
    margin-bottom: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .shape-popup input {
    width: 100%;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s, background .15s;
  }
  .shape-popup input:focus {
    border-color: rgba(1,108,236,0.50);
    background: rgba(1,108,236,0.06);
  }
  .shape-popup-types {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }
  .shape-type-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
  }
  .shape-type-btn i { font-size: 10.5px; }
  .shape-type-btn:hover { background: var(--soft-2); color: var(--text-2); }
  .shape-type-btn.active[data-kind="geofence"] {
    border-color: rgba(1,108,236,0.50);
    background: rgba(1,108,236,0.18);
    color: #fff;
  }
  .shape-type-btn.active[data-kind="poi"] {
    border-color: rgba(255,159,46,0.50);
    background: rgba(255,159,46,0.18);
    color: #fff;
  }
  .shape-type-btn.active[data-kind="ulez"] {
    border-color: rgba(53,199,89,0.50);
    background: rgba(53,199,89,0.18);
    color: #fff;
  }
  .shape-popup-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    justify-content: flex-end;
  }
  .shape-popup-action {
    appearance: none;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .shape-popup-action:hover { background: var(--soft-2); color: var(--text); }
  .shape-popup-action[data-action="delete"]:hover {
    background: rgba(255,90,95,0.14);
    border-color: rgba(255,90,95,0.40);
    color: var(--red);
  }
  .shape-popup-action.primary {
    background: var(--blue);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
  }
  .shape-popup-action.primary:hover { filter: brightness(1.10); color: #fff; }
  .shape-popup-action[data-action="delete"][hidden] { display: none; }

  /* Zone info popup (click on a ULEZ / POI / geofence outside editor mode) */
  .mapboxgl-popup.zone-popup-wrap .mapboxgl-popup-content {
    background: rgba(15, 18, 23, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    color: var(--text);
  }
  .mapboxgl-popup.zone-popup-wrap.mapboxgl-popup-anchor-top    .mapboxgl-popup-tip { border-bottom-color: rgba(15, 18, 23, 0.92); }
  .mapboxgl-popup.zone-popup-wrap.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color:    rgba(15, 18, 23, 0.92); }
  .mapboxgl-popup.zone-popup-wrap.mapboxgl-popup-anchor-left   .mapboxgl-popup-tip { border-right-color:  rgba(15, 18, 23, 0.92); }
  .mapboxgl-popup.zone-popup-wrap.mapboxgl-popup-anchor-right  .mapboxgl-popup-tip { border-left-color:   rgba(15, 18, 23, 0.92); }
  .mapboxgl-popup.zone-popup-wrap .mapboxgl-popup-close-button {
    color: var(--muted);
    font-size: 18px;
    padding: 4px 9px;
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: background .15s, color .15s;
  }
  .mapboxgl-popup.zone-popup-wrap .mapboxgl-popup-close-button:hover {
    background: var(--soft);
    color: var(--text);
  }

  .zone-popup { font-family: inherit; min-width: 240px; }
  .zone-popup-head {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .zone-popup-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .zone-popup--ulez     .zone-popup-icon { background: rgba(53,199,89,0.20);  border: 1px solid rgba(53,199,89,0.35);  color: var(--green); }
  .zone-popup--poi      .zone-popup-icon { background: rgba(255,159,46,0.20); border: 1px solid rgba(255,159,46,0.35); color: var(--amber); }
  .zone-popup--geofence .zone-popup-icon { background: rgba(1,108,236,0.22);  border: 1px solid rgba(1,108,236,0.40);  color: var(--blue); }
  .zone-popup--shell    .zone-popup-icon { background: rgba(255,204,0,0.18);  border: 1px solid rgba(237,28,36,0.45);   color: #FFCC00; }
  .zone-popup--bridge   .zone-popup-icon { background: rgba(255,90,95,0.18);  border: 1px solid rgba(255,90,95,0.45);   color: var(--red); }
  .zone-popup-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.25;
    padding-right: 18px;
  }
  .zone-popup-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.3;
  }
  .zone-popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
  }
  .zone-popup-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 600;
  }
  .zone-popup-tag i { font-size: 9px; color: var(--muted-2); }
  .zone-popup-tag.zone-popup-tag--ok {
    background: rgba(53,199,89,0.14);
    border-color: rgba(53,199,89,0.30);
    color: var(--green);
  }
  .zone-popup-tag.zone-popup-tag--ok i { color: var(--green); }
  .zone-popup-charge {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    margin-top: 10px;
  }
  .zone-popup-charge-vehicle {
    color: var(--muted);
    flex: 1;
    line-height: 1.3;
  }
  .zone-popup-charge-amount {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Bridge disclaimer modal */
  .bridge-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .bridge-modal-backdrop[hidden] { display: none; }
  .bridge-modal {
    background: rgba(15, 18, 23, 0.94);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 26px 28px 22px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    color: var(--text);
  }
  .bridge-modal-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
  }
  .bridge-modal-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255, 90, 95, 0.18);
    border: 1px solid rgba(255, 90, 95, 0.40);
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .bridge-modal-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.3;
  }
  .bridge-modal-text {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .bridge-modal-text strong { color: var(--text-2); font-weight: 700; }
  .bridge-modal-input-row {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
  }
  .bridge-modal-input-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-2);
    margin-bottom: 10px;
  }
  .bridge-modal-input-fields {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .bridge-modal-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .bridge-modal-field input {
    width: 60px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, background .15s;
  }
  .bridge-modal-field input:focus {
    border-color: rgba(1,108,236,0.50);
    background: rgba(1,108,236,0.08);
  }
  .bridge-modal-field-suffix {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
  }
  .bridge-modal-field-hint {
    flex: 1 1 100%;
    font-size: 11px;
    color: var(--muted-2);
    margin-top: 2px;
  }
  .bridge-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .bridge-modal-action {
    appearance: none;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, filter .15s;
  }
  .bridge-modal-action:hover { background: var(--soft-2); color: var(--text); }
  .bridge-modal-action.primary {
    background: var(--red);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 4px 14px rgba(255,90,95,0.30);
  }
  .bridge-modal-action.primary:hover { filter: brightness(1.10); color: #fff; }

  /* Editor mode body — hide vehicle markers, change cursor when drawing */
  .map-canvas.editor-active .veh-marker { display: none !important; }
  .map-canvas.editor-drawing .mapboxgl-canvas { cursor: crosshair !important; }

  .vehicle-info { min-width: 0; }
  .vehicle-id {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
  }
  .vehicle-model {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .vehicle-near {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .vehicle-near i { font-size: 9.5px; color: var(--blue); }
  .veh-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
  }
  .veh-action-btn {
    appearance: none;
    width: 32px; height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
  }
  .veh-action-btn:hover { transform: translateY(-1px); }
  .veh-action-btn[data-veh-action="locate"]:hover {
    background: rgba(1, 108, 236, 0.16);
    border-color: rgba(1, 108, 236, 0.40);
    color: var(--blue);
    box-shadow: 0 0 12px rgba(1, 108, 236, 0.25);
  }
  .veh-action-btn[data-veh-action="replay"]:hover {
    background: rgba(255, 159, 46, 0.16);
    border-color: rgba(255, 159, 46, 0.40);
    color: var(--amber);
    box-shadow: 0 0 12px rgba(255, 159, 46, 0.22);
  }
  .veh-action-btn[data-veh-action="directions"]:hover {
    background: rgba(53, 199, 89, 0.16);
    border-color: rgba(53, 199, 89, 0.40);
    color: var(--green);
    box-shadow: 0 0 12px rgba(53, 199, 89, 0.22);
  }

  .bus-icon.large {
    width: 72px; height: 72px;
    border-radius: 50%;
    font-size: 26px;
  }
  .info-avatar .bus-icon.large {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 8px 22px rgba(0,0,0,0.35);
  }
  .info-avatar .bus-icon.large.driving {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 8px 22px rgba(53,199,89,0.22);
  }

  /* Vehicle + driver — side by side */
  .vd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px 12px;
    border-radius: 13px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .vd-block .bus-icon.large,
  .vd-block .act-avatar.grp-large {
    width: 60px; height: 60px;
    font-size: 20px;
    margin-bottom: 6px;
  }
  .vd-block .act-avatar.grp-large { font-size: 18px; }
  .vd-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vd-meta {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.3;
  }

  /* Current-trip variant — matches prev-trip layout but with a brand accent */
  .prev-trip.current-trip {
    background: linear-gradient(160deg,
                rgba(1, 108, 236, 0.10) 0%,
                rgba(1, 108, 236, 0.03) 100%);
    border-color: rgba(1, 108, 236, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .trip-status.ontime  { color: var(--green);  font-weight: 600; }
  .trip-status.delayed { color: var(--amber);  font-weight: 600; }
  .trip-status.stopped { color: var(--red);    font-weight: 600; }

  .prev-trips {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .prev-trip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    padding: 8px 11px;
    border-radius: 10px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid var(--line);
  }
  .prev-trip-info { min-width: 0; }
  .prev-trip-route {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prev-trip-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .logs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .log-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 4px;
  }
  .log-item + .log-item { border-top: 1px solid var(--line); }
  .log-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
  }
  .log-icon.warn {
    background: linear-gradient(135deg, rgba(255,159,46,0.20) 0%, rgba(255,159,46,0.06) 100%);
    border: 1px solid rgba(255,159,46,0.30);
    color: var(--amber);
  }
  .log-icon.info {
    background: linear-gradient(135deg, rgba(1,108,236,0.20) 0%, rgba(1,108,236,0.06) 100%);
    border: 1px solid rgba(1,108,236,0.28);
    color: var(--blue);
  }
  .log-icon.danger {
    background: linear-gradient(135deg, rgba(255,90,95,0.20) 0%, rgba(255,90,95,0.06) 100%);
    border: 1px solid rgba(255,90,95,0.30);
    color: var(--red);
  }
  .log-info { min-width: 0; }
  .log-text {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .log-detail {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .log-time {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .right-track { padding: 0; overflow: hidden; }
  .track-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 22px;
    color: var(--muted);
    gap: 12px;
  }
  .track-empty i {
    font-size: 28px;
    color: var(--muted-2);
    opacity: 0.7;
  }
  .track-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
  }
  .track-empty-sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 220px;
  }



  .alerts-events-head {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 18px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .alerts-events-head i { font-size: 11px; color: var(--muted-2); }
  .alerts-events-head--urgent { color: var(--red); }
  .alerts-events-head--urgent i { color: var(--red); }
  .alerts-events {
    display: flex;
    flex-direction: column;
    padding: 0 18px 18px;
  }
  .alert-event {
    cursor: pointer;
    transition: background .15s, padding .15s, margin .15s;
    border-radius: 8px;
    outline: none;
  }
  .alert-event:first-child { border-top: none; padding-top: 6px; }
  .alert-event:hover { background: var(--soft); }
  .alert-event:focus-visible { background: var(--soft-2); }
  .alert-event:hover .feed-text strong:first-of-type { color: var(--blue); }

  .feed-dot.warn { background: var(--amber); }
  .feed-dot.info { background: var(--blue); }

  /* Driver "Current trip" card — mirrors the tracking popup body */
  .trip-card {
    margin-top: 4px;
    padding: 13px 14px 12px;
    border-radius: 13px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .trip-card .vp-action { margin-top: 4px; }

  /* ============ MANAGE PAGES (drivers / supervisors / vehicles / logs) ============ */
  /* Transparent row container — same override pattern as main-comms/main-track */
  .main.main-manage {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    gap: 14px;
    overflow: visible;
  }
  .mg-panel {
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 14px;
  }
  .mg-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .mg-head-actions { display: flex; align-items: center; gap: 8px; }
  .mg-btn-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(1, 108, 236, 0.35);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .mg-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 108, 236, 0.45);
  }
  .mg-search { position: relative; margin: 2px 6px 12px; flex-shrink: 0; }
  .mg-search input {
    width: 100%;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 9px 14px 9px 34px;
    outline: none;
  }
  .mg-search input::placeholder { color: var(--muted-2); }
  .mg-search > i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted-2);
    font-size: 12px;
    pointer-events: none;
  }
  /* Column header strip above the rows */
  .mg-cols {
    display: grid;
    gap: 12px;
    align-items: center;
    /* 18px matches row content inset: rows pad 4 + border 1 + cell pad 13 */
    padding: 2px 18px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .mg-rows {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 4px 6px;
  }
  .mg-row {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .mg-row:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 6px 16px rgba(0, 0, 0, 0.25);
  }
  /* Grid templates per page (kept in CSS so rows stay aligned with .mg-cols).
     The actions column is a FIXED width (buttons × 30 + gaps), not `auto` — the
     header's actions cell is empty, so `auto` resolved to 0 there and pushed the
     flexible columns out of step with the rows. Widths: drivers 3btn=102, supers
     2btn=66, vehicles 4btn=138. */
  .mg-cols.cols-drivers, .mg-row.row-drivers {
    grid-template-columns: minmax(180px, 1.4fr) 92px 110px 92px 70px 1fr 102px;
  }
  .mg-cols.cols-supervisors, .mg-row.row-supervisors {
    grid-template-columns: minmax(180px, 1.4fr) 110px 92px 1fr 66px;
  }
  .mg-cols.cols-vehicles, .mg-row.row-vehicles {
    grid-template-columns: 112px 64px minmax(110px, 1fr) 110px minmax(140px, 1.2fr) 76px 70px 138px;
  }
  .mg-person {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
  }
  .mg-person-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mg-person-sub {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 1px;
  }
  .mg-cell {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mg-cell.muted { color: var(--muted); }
  .mg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    justify-self: start;
  }
  .mg-chip.blue   { background: rgba(1,108,236,0.12);  border-color: rgba(1,108,236,0.3);  color: #5ea3ff; }
  .mg-chip.green  { background: rgba(53,199,89,0.10);  border-color: rgba(53,199,89,0.28); color: var(--green); }
  .mg-chip.amber  { background: rgba(255,159,46,0.10); border-color: rgba(255,159,46,0.28); color: var(--amber); }
  .mg-chip.red    { background: rgba(255,90,95,0.10);  border-color: rgba(255,90,95,0.28); color: var(--red); }
  /* UK number plate — white plate, Charles Wright lettering */
  .mg-reg {
    font-family: 'Charles Wright', 'Arial Narrow', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0a0a;
    background: linear-gradient(180deg, #ffffff 0%, #f2f2ec 100%);
    border: 1px solid #c9c9bf;
    border-radius: 6px;
    padding: 4px 10px 3px;
    justify-self: start;
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .mg-actions { display: flex; gap: 6px; justify-self: end; }
  /* Column alignment helpers — applied to header cells AND row cells so
     both grids line up identically */
  .mg-cols .tc, .mg-row .tc { text-align: center; justify-self: center; }
  .mg-cols .tr, .mg-row .tr { text-align: right; justify-self: end; }
  .mg-cell.num { font-variant-numeric: tabular-nums; }
  .mg-person-sub { font-variant-numeric: tabular-nums; }
  .mg-act-btn {
    appearance: none;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
  }
  .mg-act-btn:hover {
    background: var(--soft-2);
    color: var(--text);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
  }
  /* Delete — red glass, not grey */
  .mg-act-btn.danger {
    background: rgba(255, 90, 95, 0.11);
    color: var(--red);
    border-color: rgba(255, 90, 95, 0.26);
  }
  .mg-act-btn.danger:hover {
    background: rgba(255, 90, 95, 0.2);
    color: var(--red);
    border-color: rgba(255, 90, 95, 0.42);
  }
  /* Right-aside stat tiles for manage pages */
  .mg-stat-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .mg-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .mg-stat-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 3px;
  }
  /* Logs page — three feed panels side by side inside main */
  .logs-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .log-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 13px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .log-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--muted);
  }
  .log-icon.blue  { background: rgba(1,108,236,0.12);  border-color: rgba(1,108,236,0.25);  color: #5ea3ff; }
  .log-icon.green { background: rgba(53,199,89,0.10);  border-color: rgba(53,199,89,0.25);  color: var(--green); }
  .log-icon.amber { background: rgba(255,159,46,0.10); border-color: rgba(255,159,46,0.25); color: var(--amber); }
  .log-icon.red   { background: rgba(255,90,95,0.10);  border-color: rgba(255,90,95,0.25);  color: var(--red); }
  .log-body { flex: 1; min-width: 0; }
  .log-text {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 500;
    line-height: 1.45;
  }
  .log-text strong { color: var(--text); font-weight: 700; }
  .log-meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .log-play {
    appearance: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(1, 108, 236, 0.3);
    transition: transform .15s ease;
  }
  .log-play:hover { transform: translateY(-1px); }

  /* ============ ROUTE BUILDER PAGE ============ */
  .main.main-routes {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    gap: 14px;
    overflow: visible;
  }
  .routes-side, .routes-map-panel {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .routes-side { width: 360px; flex-shrink: 0; padding: 16px 12px; }
  .routes-map-panel { flex: 1; min-width: 0; padding: 14px; }
  .routes-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .routes-list {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 4px 6px;
  }
  .routes-list.services { flex: 1.4; }
  .routes-list.patterns { flex: 1; }
  .route-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .route-item:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
  }
  .route-item.active {
    background: linear-gradient(135deg, rgba(1,108,236,0.14) 0%, rgba(1,108,236,0.04) 100%);
    border-color: rgba(1,108,236,0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 22px rgba(1, 108, 236, 0.15);
  }
  .route-line-badge {
    min-width: 38px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(1, 108, 236, 0.25);
  }
  .route-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .route-item-meta {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    flex-shrink: 0;
  }
  .map-placeholder {
    flex: 1;
    min-height: 0;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted-2);
  }
  .map-placeholder i { font-size: 26px; opacity: 0.5; }
  .map-placeholder-title { font-size: 13px; font-weight: 600; color: var(--muted); }
  .map-placeholder-sub { font-size: 11.5px; color: var(--muted-2); max-width: 280px; text-align: center; line-height: 1.5; }

  /* Right-aside tab strip (route editor / radius editor) */
  .aside-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .aside-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
    padding: 6px 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .aside-tab:hover { background: var(--soft); color: var(--text-2); }
  .aside-tab.active {
    background: rgba(1,108,236,0.14);
    border-color: rgba(1,108,236,0.35);
    color: #5ea3ff;
  }
  .mg-field { margin-bottom: 12px; }
  .mg-field-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-bottom: 6px;
  }
  .mg-input {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 11px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .mg-input:focus {
    border-color: rgba(1,108,236,0.45);
    background: linear-gradient(180deg, rgba(1,108,236,0.06) 0%, rgba(1,108,236,0.02) 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18), 0 0 0 3px rgba(1,108,236,0.12);
  }
  .mg-input::placeholder { color: var(--muted-2); }
  textarea.mg-input { resize: vertical; min-height: 60px; line-height: 1.4; }

  /* Radius editor — stop rows with a numeric stepper */
  .radius-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 13px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .radius-stop-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .radius-stop-sub {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
  }
  .radius-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,0.55),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .radius-step-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    width: 24px; height: 24px;
    border-radius: 7px;
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
  }
  .radius-step-btn:hover { background: var(--soft-2); color: var(--text); }
  .radius-value {
    min-width: 52px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  /* Settings-editor pages (DCU / PIS) — grouped config cards with
     hairline rows: label + description left, control right. Same row
     language as the comms aside, scaled to a page. */
  /* Stepped configurator — numbered step rail on the left, one config
     block on stage at a time. Steps are freely clickable; Next/Back and
     mouse wheel page between blocks. */
  .cfg-progressbar {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    margin: 0 6px 14px;
    flex-shrink: 0;
  }
  .cfg-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #016cec 0%, #2a84ff 100%);
    box-shadow: 0 0 8px rgba(1, 108, 236, 0.45);
    transition: width .3s ease;
  }
  .cfg-stepper {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 16px;
  }
  .cfg-steps {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    padding: 2px 4px;
  }
  .cfg-step {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .cfg-step:hover { background: var(--soft); }
  .cfg-step.active {
    background: linear-gradient(135deg, rgba(1,108,236,0.14) 0%, rgba(1,108,236,0.04) 100%);
    border-color: rgba(1,108,236,0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 22px rgba(1, 108, 236, 0.12);
  }
  .cfg-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--soft);
    border: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cfg-step.active .cfg-step-num {
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 8px rgba(1, 108, 236, 0.35);
  }
  .cfg-step-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .cfg-step-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cfg-step.active .cfg-step-label { color: var(--text); }
  .cfg-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    padding-left: 16px;
  }
  .cfg-stage-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 4px;
  }
  /* The active block fills the stage; its explainer absorbs spare height */
  .cfg-stage-body > .cfg-group { display: none; width: 100%; flex: 1; min-height: 0; }
  .cfg-stage-body > .cfg-group.active { display: flex; }
  .cfg-stage .cfg-group { padding: 18px 20px 16px; border-radius: 18px; }
  .cfg-stage .cfg-row { padding: 11px 2px; flex-shrink: 0; }
  .cfg-stage .cfg-row-label { font-size: 13px; }
  .cfg-stage .cfg-row-sub { font-size: 11px; }
  /* "What these do" — detailed per-setting explanations under the rows */
  .cfg-explain {
    margin-top: 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.025) 0%,
                rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 13px 16px;
  }
  .cfg-explain-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .cfg-explain-head i { color: var(--blue); font-size: 11px; }
  .cfg-explain-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    padding: 8px 2px;
  }
  .cfg-explain-item + .cfg-explain-item { border-top: 1px solid rgba(255, 255, 255, 0.04); }
  .cfg-explain-term {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: -0.005em;
  }
  .cfg-explain-desc {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.55;
  }

  /* Live visuals inside the explainer — bound to the inputs above */
  .cfg-visual {
    margin: 4px 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  /* Split explainer — info cards left, visualiser card right.
     The outer wrapper goes transparent; each side is its own card so
     the area reads like the dashboard's panel pairs. */
  .cfg-explain-split {
    display: flex;
    gap: 12px;
    align-items: stretch;
    background: none;
    border: none;
    padding: 0;
    overflow: visible;
  }
  .cfg-explain-split .cfg-explain-main,
  .cfg-explain-split .cfg-visual {
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  .cfg-explain-main { flex: 1; min-width: 0; }
  .cfg-explain-split .cfg-visual {
    width: 42%;
    min-width: 300px;
    max-width: 430px;
    flex-shrink: 0;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
  }
  /* Explainer entries as a card grid (odd last card spans the row) */
  .cfg-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 2px;
  }
  .cfg-info-card {
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    padding: 11px 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cfg-info-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cfg-info-card-term {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .cfg-info-card-term .dotc {
    width: 8px; height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .dotc.blue   { background: #2a84ff; }
  .dotc.green  { background: var(--green); }
  .dotc.amber  { background: var(--amber); }
  .dotc.purple { background: #b27aff; }
  .cfg-info-card-body {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.55;
  }
  .cfg-visual-head { margin-bottom: 10px; flex-shrink: 0; }
  .cfg-visual-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cfg-visual-title i { color: var(--blue); font-size: 11px; }
  .cfg-visual-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted-2);
    font-weight: 500;
    line-height: 1.45;
  }
  /* Real-map radius preview — a shared Mapbox instance parks in here */
  .cfg-map-host {
    position: relative;
    flex: 1;
    min-height: 230px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #0a0c11;
  }
  #radius-map { position: absolute; inset: 0; }
  .cfg-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 9px;
  }
  .cfg-tl-key .dot.rv-app { background: #2a84ff; }
  .cfg-tl-key .dot.rv-arr { background: var(--green); }
  .cfg-tl-key .dot.rv-dep { background: var(--amber); }

  /* Duration timeline — proportional segments per screen */
  .cfg-timeline-bar {
    display: flex;
    gap: 2px;
    height: 26px;
    border-radius: 8px;
    overflow: hidden;
  }
  .cfg-tl-seg {
    min-width: 10px;
    border-radius: 4px;
    position: relative;
    transition: flex-grow .25s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .cfg-tl-seg.c0 { background: linear-gradient(180deg, rgba(42,132,255,0.55), rgba(1,108,236,0.4)); }
  .cfg-tl-seg.c1 { background: linear-gradient(180deg, rgba(70,208,106,0.5), rgba(42,168,74,0.35)); }
  .cfg-tl-seg.c2 { background: linear-gradient(180deg, rgba(255,179,92,0.5), rgba(242,144,42,0.35)); }
  .cfg-tl-seg.c3 { background: linear-gradient(180deg, rgba(178,122,255,0.5), rgba(140,80,230,0.35)); }
  .cfg-tl-seg.c4 { background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); }
  .cfg-tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 9px;
    align-items: center;
  }
  .cfg-tl-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
  }
  .cfg-tl-key .dot {
    width: 8px; height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .cfg-tl-key .dot.c0 { background: #2a84ff; }
  .cfg-tl-key .dot.c1 { background: var(--green); }
  .cfg-tl-key .dot.c2 { background: var(--amber); }
  .cfg-tl-key .dot.c3 { background: #b27aff; }
  .cfg-tl-key .dot.c4 { background: rgba(255,255,255,0.35); }
  .cfg-tl-key b { color: var(--text-2); font-weight: 700; }
  .cfg-tl-total {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }
  .cfg-stage-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--line);
  }
  .cfg-nav-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 15px;
    background: var(--soft);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
  }
  .cfg-nav-btn:hover { background: var(--soft-2); color: var(--text); }
  .cfg-nav-btn.danger {
    background: rgba(255, 90, 95, 0.14);
    border-color: rgba(255, 90, 95, 0.35);
    color: var(--red);
  }
  .cfg-nav-btn.danger:hover {
    background: rgba(255, 90, 95, 0.22);
    border-color: rgba(255, 90, 95, 0.5);
    color: var(--red);
  }
  .cfg-nav-btn:disabled { opacity: 0.35; cursor: default; }
  .cfg-nav-btn:disabled:hover { background: var(--soft); color: var(--text-2); }
  .cfg-nav-btn.primary {
    background: linear-gradient(180deg, #2a84ff 0%, #016cec 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(1, 108, 236, 0.35);
  }
  .cfg-nav-btn.primary:hover {
    color: #fff;
    box-shadow: 0 6px 16px rgba(1, 108, 236, 0.45);
  }
  .cfg-step-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .cfg-group {
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 13px 15px 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    display: flex;
    flex-direction: column;
  }
  .cfg-group .card-head { margin-bottom: 2px; padding-bottom: 10px; }
  .cfg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
  }
  .cfg-row + .cfg-row { border-top: 1px solid var(--line); }
  .cfg-row-text { min-width: 0; }
  .cfg-row-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .cfg-row-sub {
    margin-top: 1px;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.35;
  }
  .cfg-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
  }
  .cfg-input {
    width: 68px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    padding: 6px 10px;
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, background .15s;
  }
  .cfg-input:hover { background: var(--soft-2); }
  .cfg-input:focus { border-color: rgba(1, 108, 236, 0.5); background: var(--soft-2); }
  .cfg-input.wide { width: 120px; text-align: left; }
  .cfg-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    min-width: 22px;
  }
  .cfg-row .toggle { width: 42px; height: 24px; }
  .cfg-row .toggle-slider::before { width: 18px; height: 18px; }
  .cfg-row .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
  .cfg-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .cfg-link:hover { filter: brightness(1.15); }
  .cfg-link > i { font-size: 10px; }
  .mg-note {
    margin: 2px 6px 12px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(255,159,46,0.07);
    border: 1px solid rgba(255,159,46,0.22);
    color: var(--amber);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    flex-shrink: 0;
  }
  .mg-note i { margin-right: 6px; }

  /* Right-aside value rows (info-row label + numeric value) */
  .info-row-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .info-row-value.good { color: var(--green); }
  .info-row-value.warn { color: var(--amber); }
  .info-row-value.danger { color: var(--red); }
  /* Body copy inside an info-section (explainers, retention notes) */
  .info-section-body {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.6;
  }


  /* Config detail modal — list contents behind the cfg-link buttons */
  .cfg-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .cfg-modal-overlay.open { opacity: 1; visibility: visible; }
  .cfg-modal {
    width: 480px;
    max-width: calc(100vw - 48px);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 55%,
                rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(10px) scale(0.97);
    transition: transform .2s ease;
  }
  .cfg-modal-overlay.open .cfg-modal { transform: translateY(0) scale(1); }
  .cfg-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .cfg-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .cfg-modal-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    text-decoration: none;
    color: inherit;
  }
  .cfg-modal-row[href] { cursor: pointer; transition: border-color .15s, transform .15s; }
  .cfg-modal-row[href]:hover { border-color: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
  .cfg-modal-row .log-icon { flex-shrink: 0; }
  .cfg-modal-row-text { flex: 1; min-width: 0; }
  .cfg-modal-row-main {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cfg-modal-row-sub {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cfg-modal-row .mg-act-btn {
    width: 26px; height: 26px;
    font-size: 10px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .cfg-modal-input {
    flex: 1;
    min-width: 0;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 9px;
    outline: none;
  }
  .cfg-modal-input:focus { border-color: rgba(1, 108, 236, 0.5); }
  .cfg-modal-input.sub { font-size: 10.5px; font-weight: 500; color: var(--text-2); }
  .cfg-modal-edit-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .sc-empty { padding: 4px 2px; }

/* ============ LOGIN SCREEN ============ */
/* ============ LOGIN — refined minimal ============
   Transparent screen: the app's own .bg-layer/.bg-blob aurora (rendered
   at body level, outside the gated .app) shows through, so the login
   shares the dashboard's exact backdrop. Hero column (logo → strapline →
   health chip) defines the height; the card stretches to match it. */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  background: transparent;
}
.login-screen.hidden { display: none; }

/* -- layout: asymmetric hero + card, equal heights -- */
.login-layout {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
}
.login-row {
  display: flex;
  align-items: center; /* card centres against the hero cluster */
  justify-content: space-between;
  gap: 60px;
  width: 100%;
}
.login-hero {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: login-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.25s;
}
.login-hero-logo { margin-bottom: 18px; }
.login-hero-logo img { height: 56px; width: auto; display: block; }
.login-hero-title {
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 18px;
}
.login-hero-title span { color: var(--muted); }
.login-hero-live {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  animation: login-rise 0.8s ease forwards 0.55s;
}
.login-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.login-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
}
.login-live-chip.ok { color: var(--text-2); }
.login-live-chip.ok .login-live-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(53, 199, 89, 0.15);
}
.login-live-chip.down { color: var(--red); border-color: rgba(255, 90, 95, 0.3); }
.login-live-chip.down .login-live-dot { background: var(--red); }

@keyframes login-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1020px) {
  .login-row { justify-content: center; }
  .login-hero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-hero, .login-hero-live, .login-card, .boot-inner { animation: none !important; opacity: 1; }
}

/* ============ BOOT SCREEN (post-login loading) ============ */
/* Transparent so the body aurora (.bg-layer/.bg-blob) shows through — same
   backdrop as the login screen, not a flat black panel. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 499;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.boot-screen.active { display: flex; }
.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  animation: login-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
}
.boot-logo { height: 60px; width: auto; opacity: 0.96; }
.boot-title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}
.boot-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-top: 6px;
}
.boot-bar {
  width: 280px;
  height: 5px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.boot-bar-fill {
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #016cec, #3b9bff);
  box-shadow: 0 0 10px rgba(1, 108, 236, 0.35);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.boot-status {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.app.gated { display: none; }
.login-card {
  position: relative;
  width: 400px;
  flex-shrink: 0;
  padding: 34px 34px 30px;
  border: 1px solid transparent;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.06) 0%,
              rgba(255, 255, 255, 0.02) 55%,
              rgba(255, 255, 255, 0.04) 100%);
  border-radius: 22px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
  animation: login-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Aurora border — a masked 1px ring in the bg-blob's blues. The mask
   punches out the centre so ONLY the border paints (the naive
   border-box-gradient trick bled through the translucent glass and
   tinted the whole card). */
.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
              rgba(1, 108, 236, 0.55) 0%,
              rgba(0, 171, 247, 0.28) 55%,
              rgba(1, 108, 236, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.login-head { text-align: center; padding-bottom: 2px; }
.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.login-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.login-input { position: relative; }
.login-input > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--muted-2);
  pointer-events: none;
  transition: color .15s;
}
.login-field input {
  width: 100%;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 11px 12px 11px 36px;
  outline: none;
  transition: border-color .15s, background .15s;
}
/* Muted focus — a quiet grey lift, no blue */
.login-field input:focus {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
}
/* The whole field wakes up together on focus */
.login-field:focus-within label { color: var(--text-2); }
.login-field:focus-within .login-input > i { color: var(--text-2); }
.login-error {
  display: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--red);
  background: rgba(255, 90, 95, 0.08);
  border: 1px solid rgba(255, 90, 95, 0.25);
  border-radius: 10px;
  padding: 8px 11px;
}
.login-error.show { display: block; animation: login-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes login-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
/* Quiet primary — a blue-tint ghost rather than the loud gradient */
.login-btn {
  appearance: none;
  border: 1px solid rgba(1, 108, 236, 0.35);
  border-radius: 12px;
  padding: 11px;
  margin-top: 4px;
  background: rgba(1, 108, 236, 0.12);
  color: #9ec7ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-btn:hover {
  background: rgba(1, 108, 236, 0.20);
  border-color: rgba(1, 108, 236, 0.55);
  color: #cfe4ff;
  transform: translateY(-1px);
}
.login-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

  /* ============ TEAM (merged drivers + portal logins) ============ */
  .team-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-content:start;padding:4px 2px 12px}
  .tm-card{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px 14px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .16s,border-color .16s,box-shadow .16s;cursor:pointer}
  .tm-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.3)}
  .tm-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
  .tm-avwrap{position:relative;flex-shrink:0}
  .tm-top .act-avatar{width:44px;height:44px;font-size:15px}
  .tm-pres{position:absolute;bottom:-1px;right:-1px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--card)}
  .tm-pres.on{background:var(--green)}.tm-pres.off{background:var(--muted)}.tm-pres.delayed{background:var(--amber)}.tm-pres.disabled{background:var(--red)}
  .tm-id{flex:1;min-width:0}
  .tm-name{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tm-badges{display:flex;align-items:center;gap:5px;margin-bottom:12px;flex-wrap:wrap}
  .tm-rchip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:6px;font-size:9.5px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line);background:var(--soft);color:var(--text-2)}
  .tm-rchip.supervisor{background:rgba(1,108,236,.12);border-color:rgba(1,108,236,.3);color:#5ea3ff}
  .tm-rchip.director{background:rgba(162,89,255,.12);border-color:rgba(162,89,255,.3);color:#b98cff}
  .tm-rchip.admin,.tm-rchip.superuser{background:rgba(255,159,46,.12);border-color:rgba(255,159,46,.3);color:var(--amber)}
  .tm-pchip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;font-size:9.5px;font-weight:700;background:rgba(53,199,89,.1);border:1px solid rgba(53,199,89,.28);color:var(--green)}
  .tm-pchip i{font-size:8.5px}
  .tm-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;border:1px solid var(--line);background:var(--soft);color:var(--text-2);flex-shrink:0;align-self:flex-start}
  .tm-status .d{width:6px;height:6px;border-radius:50%;background:var(--muted)}
  .tm-status.on{background:rgba(53,199,89,.1);border-color:rgba(53,199,89,.28);color:var(--green)}.tm-status.on .d{background:var(--green)}
  .tm-status.delayed{background:rgba(255,159,46,.1);border-color:rgba(255,159,46,.28);color:var(--amber)}.tm-status.delayed .d{background:var(--amber)}
  .tm-status.disabled{background:rgba(255,90,95,.1);border-color:rgba(255,90,95,.28);color:var(--red)}.tm-status.disabled .d{background:var(--red)}
  .tm-acts{display:flex;gap:7px;margin-bottom:12px}
  .tm-ab{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--text-2);cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
  .tm-ab:hover{background:var(--soft-2);color:var(--text);border-color:rgba(255,255,255,.18)}
  .tm-ab.danger{background:rgba(255,90,95,.12);border-color:rgba(255,90,95,.3);color:var(--red)}
  .tm-ab.danger:hover{background:rgba(255,90,95,.22);border-color:rgba(255,90,95,.44)}
  .tm-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
  .tm-stats>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
  .tm-stats .v{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tm-stats .k{font-size:9.5px;color:var(--muted);line-height:1.2}
  .team-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);font-size:13px}
  /* Shared empty-state (icon + text) — tracking panels, comms crew, etc. */
  .mg-empty{display:flex;align-items:center;gap:9px;width:fit-content;max-width:100%;margin:auto;padding:12px 18px;border-radius:14px;background:var(--soft);border:1px solid var(--line);color:var(--text-2);font-size:13px;font-weight:500;text-align:center}
  .mg-empty i{font-size:14px;color:var(--muted)}
  /* Larger centred empty state — the comms conversation with no messages */
  .cv-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px;text-align:center}
  .cv-empty-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--blue);background:linear-gradient(135deg,rgba(1,108,236,.14),rgba(1,108,236,.05));border:1px solid rgba(1,108,236,.18)}
  .cv-empty-title{font-size:14px;font-weight:600;color:var(--text-2)}
  .cv-empty-sub{font-size:12px;color:var(--muted)}
  @media(max-width:1600px){.team-grid{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:1200px){.team-grid{grid-template-columns:repeat(3,1fr)}}

  /* ============ VEHICLES (grouped by type) ============ */
  .vc-scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 12px 12px 2px}
  .vc-group{margin-bottom:22px}
  .vc-group:last-child{margin-bottom:0}
  .vc-group-head{display:flex;align-items:center;gap:9px;padding:0 2px 11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  .vc-group-title{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);background:var(--soft);border:1px solid var(--line);padding:5px 12px;border-radius:999px;letter-spacing:-.01em}
  .vc-group-title i{font-size:12px;color:var(--muted-2)}
  .vc-group-count{font-size:11px;font-weight:600;color:var(--text-2);background:var(--soft);border:1px solid var(--line);padding:3px 9px;border-radius:999px}
  .vc-group-on{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500}
  .vc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .vc-card{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px 14px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .16s,border-color .16s,box-shadow .16s;cursor:pointer}
  .vc-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.3)}
  .vc-top{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
  .vc-top .mg-reg{font-size:15px}
  .vc-fleet{flex-shrink:0;font-size:14px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:3px 10px}
  .vc-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;border:1px solid var(--line);background:var(--soft);color:var(--muted);flex-shrink:0;margin-left:auto}
  .vc-status .d{width:6px;height:6px;border-radius:50%;background:var(--muted)}
  .vc-status.motion{background:rgba(53,199,89,.1);border-color:rgba(53,199,89,.28);color:var(--green)}.vc-status.motion .d{background:var(--green)}
  .vc-status.idle{background:rgba(255,159,46,.1);border-color:rgba(255,159,46,.28);color:var(--amber)}.vc-status.idle .d{background:var(--amber)}
  .vc-status.offline .d{background:var(--muted)}
  .vc-loc{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:11.5px;color:var(--text-2);font-weight:500}
  .vc-loc>i{font-size:11px;color:var(--muted);flex-shrink:0}
  .vc-loc-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vc-chip{flex-shrink:0;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.02em}
  .vc-chip.off{background:rgba(255,90,95,.1);border:1px solid rgba(255,90,95,.28);color:var(--red)}
  .vc-acts{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
  .vc-ab{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--text-2);cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
  .vc-ab:hover{background:var(--soft-2);color:var(--text);border-color:rgba(255,255,255,.18)}
  .vc-ab.danger{background:rgba(255,90,95,.12);border-color:rgba(255,90,95,.3);color:var(--red)}
  .vc-ab.danger:hover{background:rgba(255,90,95,.22)}
  .vc-acts-off{margin-left:auto}
  .vc-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
  .vc-stats>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
  .vc-stats .v{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .vc-stats .k{font-size:9.5px;color:var(--muted);line-height:1.2}
  @media(max-width:1600px){.vc-grid{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:1200px){.vc-grid{grid-template-columns:repeat(3,1fr)}}

  /* ============ SHARED FORM MODAL (new design) ============ */
  .fm-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(4,6,10,.5)}
  .fm-overlay.open{display:flex}
  .fm-modal{width:466px;max-width:calc(100vw - 40px);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
    background:radial-gradient(130% 90% at 50% -20%,rgba(1,108,236,.13) 0%,transparent 55%),linear-gradient(150deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.04) 100%);
    border:1px solid rgba(255,255,255,.12);border-radius:22px;backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 70px rgba(0,0,0,.55);
    transform:translateY(12px) scale(.975);opacity:0;transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s}
  .fm-overlay.open .fm-modal{transform:none;opacity:1}
  .fm-head{display:flex;align-items:center;gap:13px;padding:18px 18px 16px;border-bottom:1px solid var(--line)}
  .fm-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;letter-spacing:.02em;flex-shrink:0;background:linear-gradient(160deg,#2a84ff,#016cec);box-shadow:0 6px 16px rgba(1,108,236,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  .fm-htext{flex:1;min-width:0}
  .fm-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
  .fm-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
  .fm-close{width:32px;height:32px;border:none;border-radius:9px;background:var(--soft);color:var(--muted);cursor:pointer;font-size:14px;flex-shrink:0;transition:background .15s,color .15s}
  .fm-close:hover{background:var(--soft-2);color:var(--text)}
  .fm-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
  .fm-sec{display:flex;flex-direction:column;gap:10px}
  .fm-seclabel{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.01em;padding-left:2px}
  .fm-field{display:flex;flex-direction:column;gap:6px}
  .fm-field>label{font-size:11.5px;font-weight:600;color:var(--muted)}
  .fm-row{display:flex;gap:10px}.fm-row .fm-field{flex:1}
  .fm-input{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.1);border-radius:11px;color:var(--text);font-family:inherit;font-size:13px;padding:11px 13px;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.18);transition:border-color .15s,box-shadow .15s,background .15s}
  .fm-input:focus{border-color:rgba(1,108,236,.5);background:linear-gradient(180deg,rgba(1,108,236,.06),rgba(1,108,236,.02));box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 0 0 3px rgba(1,108,236,.13)}
  .fm-input::placeholder{color:var(--muted-2)}
  textarea.fm-input{resize:vertical;min-height:60px;line-height:1.4}
  .fm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .fm-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--muted);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .fm-tile i{font-size:15px}
  .fm-tile:hover{color:var(--text-2);border-color:rgba(255,255,255,.16)}
  .fm-tile.active{background:rgba(1,108,236,.15);border-color:rgba(1,108,236,.42);color:#6ba6ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .fm-toggle-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;background:var(--soft);border:1px solid var(--line)}
  .fm-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:var(--soft-2);color:var(--text-2)}
  .fm-ttext{flex:1;min-width:0}
  .fm-tlabel{font-size:13px;font-weight:600}
  .fm-tsub{font-size:11px;color:var(--muted);margin-top:1px}
  .fm-cap{padding:14px;border-radius:15px;border:1px solid var(--line);background:var(--soft)}
  .fm-caphead{display:flex;align-items:center;gap:12px}
  .fm-capfields{display:flex;flex-direction:column;gap:11px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
  .fm-capfields[hidden]{display:none}
  .fm-error{font-size:12px;color:var(--red);padding:2px;display:none}
  .fm-error.show{display:block}
  .fm-foot{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
  .fm-foot .fm-spacer{flex:1}
  .fm-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:10px 17px;background:var(--soft);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .fm-btn:hover{background:var(--soft-2);color:var(--text)}
  .fm-btn.danger{background:rgba(255,90,95,.14);border-color:rgba(255,90,95,.34);color:var(--red)}
  .fm-btn.danger:hover{background:rgba(255,90,95,.22)}
  .fm-btn.primary{background:linear-gradient(180deg,#2a84ff,#016cec);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(1,108,236,.35)}
  .fm-btn.primary:hover{filter:brightness(1.06)}
  .fm-btn[hidden]{display:none}