:root {
    --void: #050a12;
    --glass: rgba(10, 18, 32, 0.72);
    --glass-edge: rgba(140, 190, 230, 0.28);
    --text: #e6eef8;
    --muted: #9bb4cc;
    --cyan: #a0e6ff;
    --cyan-dim: rgba(120, 180, 210, 0.28);
    --gold: #ffc440;
    --accent: #5ec8ff;
    --ring: rgba(170, 235, 255, 0.95);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; height: 100%;
    background: var(--void);
    color: var(--text);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow: hidden;
  }
  #app {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
  }

  .toolbar {
    position: relative; z-index: 20;
    flex: 0 0 auto;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px;
    padding: 14px 20px 12px;
    background: linear-gradient(180deg, rgba(8,14,26,0.92), rgba(8,14,26,0.55));
    border-bottom: 1px solid var(--glass-edge);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .brand {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 200px; margin-right: 8px;
  }
  .brand .mark {
    font-family: Unbounded, Manrope, system-ui, sans-serif;
    font-weight: 300; font-size: 20px; letter-spacing: 0.02em;
    color: #e6f0ff;
  }
  .brand .sub {
    font-size: 12.5px; color: var(--muted); font-weight: 500;
  }
  .controls {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    flex: 1 1 auto;
  }
  .field, .btn {
    height: 34px;
    min-width: 176px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1px solid rgba(100, 160, 210, 0.35);
    background: rgba(12, 22, 38, 0.85);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .field {
    display: flex; align-items: center; gap: 8px;
    padding: 0 11px;
    position: relative;
  }
  #searchField {
    min-width: 228px;
    flex: 0 0 228px;
  }
  #searchField.has-q label { display: none; }
  #searchField input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 10px; height: 10px;
    margin-left: 4px;
    background: rgba(170,200,220,0.55);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='black' d='M1 1l8 8M9 1L1 9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='black' d='M1 1l8 8M9 1L1 9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
    cursor: pointer;
  }
  .suggest {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 40;
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(10, 18, 32, 0.94);
    border: 1px solid rgba(140, 190, 230, 0.32);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
  }
  .suggest.show { display: block; }
  .suggest button {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: 100%;
    border: 0; background: transparent;
    padding: 7px 8px;
    border-radius: 7px;
    color: #e6eef8;
    font: 500 12.5px/1.2 Manrope, system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
  }
  .suggest button:hover, .suggest button.active {
    background: rgba(40, 70, 100, 0.55);
  }
  .suggest .cap {
    padding: 5px 8px 7px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: rgba(150, 180, 200, 0.48);
  }
  .suggest .q { letter-spacing: 0.02em; }
  .suggest .tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(150, 185, 215, 0.7);
    flex: 0 0 auto;
  }
  .field:focus-within {
    border-color: rgba(120, 210, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(80, 180, 255, 0.15);
  }
  .field label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(150, 185, 215, 0.85); white-space: nowrap;
    flex: 0 0 auto;
  }
  .field input, .field select {
    background: transparent; border: 0; outline: none;
    color: var(--text); font: 500 12.5px/1 Manrope, system-ui, sans-serif;
    min-width: 0;
    flex: 1 1 auto;
    width: 0;
  }
  .field select { cursor: pointer; }
  .field select option { background: #0c1626; color: var(--text); }
  .btn {
    padding: 0 12px;
    color: var(--text);
    font: 500 12.5px/1 Manrope, system-ui, sans-serif;
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .btn:hover {
    background: rgba(30, 50, 75, 0.95);
    border-color: rgba(120, 200, 255, 0.55);
  }
  .btn.active {
    border-color: rgba(120, 210, 255, 0.75);
    color: var(--cyan);
  }


  .stage {
    position: relative; flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 0; background: var(--void);
    overflow: hidden;
    cursor: default;
    overscroll-behavior: none;
  }

  .map-wrap {
    position: relative;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
  }
  .map-inner {
    position: absolute; inset: 0;
  }
  .map-wrap img#map {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    user-select: none; pointer-events: none;
    display: block;
  }

  #rails {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  #rails .rail {
    fill: none;
    stroke: rgba(140, 230, 255, 0.88);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 1;
  }
  #rails.filial-mode .rail {
    stroke: rgba(100, 165, 195, 0.28);
    stroke-width: 1.3;
    opacity: 0.85;
    filter: none;
  }
  #rails.filial-mode .rail.hi {
    stroke: rgba(165, 240, 255, 0.96);
    stroke-width: 2.15;
    opacity: 1;
  }

  .markers {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  .dot, .plant {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
  }
  .dot {
    width: 7px; height: 7px;
    background: transparent;
    box-shadow: none;
    transition: none;
  }
  .dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(160, 230, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(20, 50, 80, 0.55), 0 0 6px rgba(80, 200, 255, 0.35);
    transition: transform .15s, box-shadow .15s, background .15s, opacity .2s;
  }
  .dot.dim::before {
    opacity: 0.14;
    box-shadow: none;
    background: rgba(120, 160, 180, 0.45);
  }
  .dot.match::before {
    background: #dff8ff;
    box-shadow: 0 0 0 1px rgba(20,50,80,.6), 0 0 10px rgba(100,220,255,.75);
    transform: scale(1.35);
  }
  .dot.selected {
    z-index: 5;
  }
  .dot.selected::before {
    background: #cdf5ff;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 6px rgba(70, 195, 255, 0.25), 0 0 14px rgba(80, 210, 255, 0.55);
    transform: scale(1.45);
  }
  .dot.road-focus:not(.dim)::before {
    background: #e8c56a;
    box-shadow: 0 0 0 1px rgba(70, 45, 8, 0.45), 0 0 8px rgba(232, 196, 80, 0.55);
  }
  .dot.road-focus.selected::before {
    background: #f3d78a;
    box-shadow: 0 0 0 2px rgba(243, 226, 176, 0.85), 0 0 10px rgba(232, 196, 80, 0.6);
    transform: scale(1.45);
  }

  #leaders {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  #leaders .leader-dash {
    fill: none;
    stroke: rgba(232, 197, 106, 0.72);
    stroke-width: 0.9;
    stroke-dasharray: 2.4 2.1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  #leaders .leader-rule {
    fill: none;
    stroke: rgba(232, 197, 106, 0.88);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .dot .sld-lbl {
    position: absolute;
    left: 10px; top: -6px;
    white-space: nowrap;
    font-size: 9.5px; font-weight: 400;
    color: rgba(198, 226, 240, 0.72);
    text-shadow:
      0 0 3px rgba(6,12,24,0.9),
      0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    letter-spacing: 0.05em;
    padding: 2px 0 3px;
    cursor: pointer;
  }
  .dot.road-focus .sld-lbl,
  .dot.show-lbl .sld-lbl {
    color: rgba(245, 228, 180, 0.94);
  }
  .dot.show-lbl .sld-lbl {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 1px 0 rgba(232, 197, 106, 0.88);
  }
  .dot.show-lbl .sld-lbl:hover {
    color: #fff3c8;
  }
  .dot.dim .sld-lbl {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .dot.show-lbl { z-index: 6; }

  .plant {
    width: 14px; height: 14px;
    z-index: 3;
  }
  .plant .dia {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #ffe08a, var(--gold) 45%, #d49220);
    transform: rotate(45deg);
    border: 1px solid rgba(120, 70, 10, 0.85);
    box-shadow: 0 0 12px rgba(255, 196, 64, 0.45);
  }
  .plant .lbl {
    position: absolute;
    left: 16px; top: -6px;
    white-space: nowrap;
    font-size: 12px; font-weight: 500;
    color: #f5ecd2;
    text-shadow: 0 0 4px rgba(6,12,24,0.95), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
  }
  .plant.lbl-left .lbl { left: auto; right: 16px; }
  .plant.lbl-below .lbl { top: 14px; left: 50%; transform: translateX(-50%); }
  .plant.dim { opacity: 0.22; }
  .plant.dim .lbl { opacity: 0.35; }
  .plant.hi .dia {
    box-shadow: 0 0 0 2px rgba(255, 220, 140, 0.85), 0 0 16px rgba(255, 196, 64, 0.7);
  }

  #tooltip {
    position: absolute; z-index: 30;
    min-width: 180px; max-width: 320px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(14, 24, 42, 0.92);
    border: 1px solid rgba(150, 205, 245, 0.45);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(80,140,200,0.08) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .12s;
  }
  #tooltip.show { opacity: 1; visibility: visible; }
  #tooltip .t-title {
    font-size: 14px; font-weight: 600; color: #eef6ff; margin: 0 0 4px;
  }
  #tooltip .t-city {
    font-size: 12.5px; color: #afcde4; margin: 0 0 6px;
  }
  #tooltip .t-series {
    font-size: 12px; color: #82d7f5; margin: 0 0 6px;
  }
  #tooltip .t-addr {
    font-size: 11.5px; color: rgba(170, 195, 215, 0.85); line-height: 1.35; margin: 0;
  }
  #tooltip .t-repair {
    font-size: 12px; color: #c6d4e2; margin: 0 0 6px;
  }
  #tooltip .t-missing {
    font-size: 11.5px; color: rgba(160, 180, 195, 0.7); margin: 0 0 6px;
  }