@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

  :root {
    --bg:#060d1a; --surface:#0b1829; --surface2:#0f2035;
    --border:rgba(0,120,255,0.15); --blue:#0078ff; --blue-dim:#0050b3;
    --cyan:#00c8ff; --green:#00e07a; --orange:#ff8c00; --red:#ff3b3b;
    --text:#e8f0ff; --text-dim:#6b8ab0; --text-muted:#3a5070; --shadow:rgba(0,0,0,0.3);
  }
  [data-theme="light"] {
    --bg:#f0f4fa; --surface:#ffffff; --surface2:#f5f7fc;
    --border:rgba(0,100,220,0.12); --blue:#0060dd; --blue-dim:#004ab0;
    --cyan:#0099cc; --green:#00a85a; --orange:#d97000; --red:#d63030;
    --text:#0d1a2e; --text-dim:#4a6080; --text-muted:#8aa0bc; --shadow:rgba(0,0,0,0.08);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; height:100vh; overflow:hidden; display:grid; grid-template-rows:64px 1fr; transition:background 0.4s,color 0.4s; }

  /* HEADER */
  header { display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); position:relative; box-shadow:0 2px 8px var(--shadow); z-index:10; transition:background 0.4s; }
  header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent); }
  .logo { display:flex; align-items:center; gap:12px; }
  .logo-badge { width:36px; height:36px; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; }
  .logo-text { font-size:15px; font-weight:700; color:var(--text); }
  .logo-sub  { font-size:11px; color:var(--text-dim); margin-top:1px; }
  .header-center { position:absolute; left:50%; transform:translateX(-50%); text-align:center; }
  .header-title  { font-size:19px; font-weight:700; color:var(--text); letter-spacing:1.2px; text-transform:uppercase; }
  .header-right  { display:flex; align-items:center; gap:14px; }

  /* 设置按钮 */
  .btn-settings {
    width:36px; height:36px; border-radius:8px;
    background:var(--surface2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:17px; transition:border-color 0.2s;
  }
  .btn-settings:hover { border-color:var(--blue); }

  /* LIVE & CLOCK */
  .live-badge { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--green); font-family:'JetBrains Mono',monospace; font-weight:600; letter-spacing:1px; }
  .live-dot   { width:7px; height:7px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }
  @keyframes markerStrokePulse { 0%,100%{stroke-width:1.5;stroke-opacity:0.65} 50%{stroke-width:4;stroke-opacity:1} }
  .clock      { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:600; color:var(--text); letter-spacing:1px; }
  .clock-date { font-size:10px; color:var(--text-dim); text-align:right; margin-top:1px; }

  /* ══ 设置面板 ══ */
  .settings-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:1000; align-items:center; justify-content:center;
  }
  .settings-overlay.open { display:flex; }
  .settings-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; width:420px; max-height:85vh;
    overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5);
    display:flex; flex-direction:column;
  }
  .settings-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid var(--border);
    background:var(--surface); flex-shrink:0;
  }
  .settings-title { font-size:15px; font-weight:700; color:var(--text); }
  .btn-close { background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; line-height:1; padding:2px 6px; border-radius:4px; }
  .btn-close:hover { background:var(--surface2); color:var(--text); }
  .settings-body { padding:20px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; flex:1; }
  .settings-body::-webkit-scrollbar { width:3px; }
  .settings-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
  .settings-section-title { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }

  /* API Key */
  .api-row { display:flex; gap:8px; }
  .api-input {
    flex:1; background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; padding:9px 12px; color:var(--text);
    font-family:'JetBrains Mono',monospace; font-size:12px; outline:none;
    transition:border-color 0.2s;
  }
  .api-input:focus { border-color:var(--blue); }
  .api-input::placeholder { color:var(--text-muted); }
  .btn-connect {
    background:var(--blue); border:none; border-radius:8px;
    color:#fff; font-size:12px; font-weight:600; padding:9px 16px;
    cursor:pointer; white-space:nowrap; transition:opacity 0.2s;
  }
  .btn-connect:hover { opacity:0.85; }

  /* 主题切换 */
  .theme-row { display:flex; align-items:center; justify-content:space-between; }
  .theme-row label { font-size:13px; color:var(--text); }
  .toggle-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
  .toggle-icon { font-size:16px; }
  .toggle-track { width:40px; height:22px; background:var(--border); border-radius:11px; position:relative; transition:background 0.3s; border:1px solid var(--border); }
  .toggle-thumb { width:16px; height:16px; background:var(--blue); border-radius:50%; position:absolute; top:2px; left:2px; transition:left 0.3s; }
  [data-theme="light"] .toggle-thumb { left:20px; }
  [data-theme="light"] .toggle-track { background:rgba(0,96,221,0.15); }
  .toggle-lbl { font-size:12px; color:var(--text-dim); min-width:30px; }

  /* 司机头像 */
  .driver-avatars-grid { display:flex; flex-direction:column; gap:10px; }
  .avatar-config-row {
    display:flex; align-items:center; gap:12px;
    background:var(--surface2); border-radius:10px; padding:10px 12px;
  }
  .avatar-config-pic {
    width:44px; height:44px; border-radius:50%; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color:var(--text-dim);
    background:var(--surface); cursor:pointer; overflow:hidden;
    flex-shrink:0; position:relative; transition:border-color 0.2s;
  }
  .avatar-config-pic:hover { border-color:var(--blue); }
  .avatar-config-pic img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .avatar-config-pic .upload-hint {
    position:absolute; inset:0; background:rgba(0,0,0,0.5); border-radius:50%;
    display:none; align-items:center; justify-content:center; font-size:16px;
  }
  .avatar-config-pic:hover .upload-hint { display:flex; }
  .avatar-config-info { flex:1; }
  .avatar-config-name { font-size:13px; font-weight:600; color:var(--text); }
  .avatar-config-hint { font-size:10px; color:var(--text-muted); margin-top:2px; }
  .avatar-file-input  { display:none; }
  .btn-remove-avatar {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:14px; padding:4px; border-radius:4px; transition:color 0.2s;
  }
  .btn-remove-avatar:hover { color:var(--red); }

  /* MAIN */
  main { display:grid; grid-template-columns:200px 1fr 230px; overflow:hidden; transition:grid-template-columns 0.25s ease; }
  main.driver-collapsed { grid-template-columns:44px 1fr 230px; }
  main.jobs-collapsed { grid-template-columns:200px 1fr 44px; }
  main.driver-collapsed.jobs-collapsed { grid-template-columns:44px 1fr 44px; }

  .panel { background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; transition:background 0.4s; }
  .panel:last-child { border-right:none; border-left:1px solid var(--border); }
  .panel-header { padding:14px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:8px; }
  .panel-collapse-btn { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; line-height:1; padding:4px 6px; border-radius:6px; flex-shrink:0; transition:background 0.2s,color 0.2s; }
  .panel-collapse-btn:hover { background:var(--surface2); color:var(--text); }
  .panel.collapsed .panel-body { display:none; }
  .panel.collapsed .panel-header { padding:14px 4px; justify-content:center; }
  .panel.collapsed .panel-title, .panel.collapsed .panel-count, .panel.collapsed .filter-pill { display:none; }
  .panel-title { font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; }
  .panel-count { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue); font-weight:600; white-space:nowrap; }
  .filter-pill {
    display:flex; align-items:center; gap:5px;
    font-size:10px; font-weight:600; color:var(--blue);
    background:rgba(0,120,255,0.1); border:1px solid rgba(0,120,255,0.25);
    border-radius:20px; padding:2px 8px 2px 6px; cursor:pointer;
    white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis;
    transition:background 0.2s;
  }
  .filter-pill:hover { background:rgba(0,120,255,0.18); }
  .filter-pill-x { font-size:12px; line-height:1; opacity:0.7; flex-shrink:0; }
  .panel-body { flex:1; overflow-y:auto; padding:12px; }
  .panel-body::-webkit-scrollbar { width:3px; }
  .panel-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

  /* KPI */
  .kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); flex-shrink:0; border-bottom:1px solid var(--border); }
  .kpi-card { background:var(--surface2); padding:12px 16px; display:flex; flex-direction:column; gap:3px; transition:background 0.4s; }
  .kpi-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; }
  .kpi-value { font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:600; color:var(--text); line-height:1; }
  .kpi-value.green  { color:var(--green); }
  .kpi-value.red    { color:var(--red); }
  .kpi-sub { font-size:10px; color:var(--text-dim); }

  /* PROGRESS */
  .progress-section { padding:6px 18px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; gap:10px; }
  .progress-label { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .progress-label span { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
  .progress-section strong { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text); font-weight:600; flex-shrink:0; }
  .progress-bar { flex:1; height:3px; background:var(--surface2); border-radius:2px; overflow:hidden; }
  .progress-fill { height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:2px; transition:width 0.8s ease; }

  /* MAP */
  .center-panel { display:flex; flex-direction:column; overflow:hidden; }
  .map-container { flex:1; position:relative; overflow:hidden; }
  #map { width:100%; height:100%; }

  /* 图例 - 右侧 */
  .map-legend-panel {
    position:absolute; top:14px; right:14px; z-index:999;
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:12px 14px;
    box-shadow:0 2px 10px var(--shadow);
    min-width:130px;
  }
  .map-legend-title { font-size:10px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
  .legend-chevron { font-size:9px; transition:transform 0.2s; flex-shrink:0; }
  .map-legend-panel.collapsed .map-legend-title { margin-bottom:0; }
  .map-legend-panel.collapsed .legend-body { display:none; }
  .map-legend-panel.collapsed .legend-chevron { transform:rotate(-90deg); }
  .legend-section-lbl { font-size:9px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin:8px 0 5px; }
  .legend-item { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-dim); margin-bottom:4px; }
  .legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .legend-sq  { width:11px; height:11px; border-radius:3px; flex-shrink:0; }

  /* 地理编码状态提示 */
  .geocode-status {
    position:absolute; bottom:14px; left:14px; z-index:999;
    background:var(--surface); border:1px solid var(--border);
    border-radius:8px; padding:6px 12px; font-size:10px; color:var(--text-dim);
    box-shadow:0 2px 10px var(--shadow); display:none; align-items:center; gap:6px;
  }
  .geocode-status.active { display:flex; }
  .geocode-truck-wrap { width:30px; height:17px; position:relative; overflow:hidden; flex-shrink:0; }
  .geocode-truck-svg { position:absolute; left:50%; top:0.5px; transform:translateX(-50%); animation:geoTruckBounce 0.6s ease-in-out infinite; }
  @keyframes geoTruckBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-1.5px)} }
  /* transform-origin on these SVG wheels must use explicit viewBox coordinates,
     not the "center" keyword — see the tracking-page loader for why. */
  .geo-wheel { animation:geoWheelSpin 0.5s linear infinite; }
  .geo-wheel-l { transform-origin:22px 40px; }
  .geo-wheel-r { transform-origin:50px 40px; }
  @keyframes geoWheelSpin { to { transform:rotate(360deg); } }

  /* DRIVER CARD */
  .driver-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color 0.2s,background 0.2s; }
  .driver-card:hover { border-color:var(--blue); }
  .driver-card.active { border-color:var(--blue); background:rgba(0,120,255,0.07); }
  .driver-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .driver-avatar {
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; flex-shrink:0; border:2px solid transparent; overflow:hidden;
  }
  .driver-avatar img { width:100%; height:100%; object-fit:cover; }
  .driver-avatar.online, .driver-avatar.transit, .driver-avatar.idle { background:var(--surface2); border-color:var(--border); color:var(--text-dim); }
  .driver-info { flex:1; min-width:0; }
  .driver-addr-row { font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 10px 0; }
  .driver-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .status-pill { font-size:9px; font-weight:600; letter-spacing:1px; padding:3px 8px; border-radius:20px; text-transform:uppercase; flex-shrink:0; }
  .status-pill.online, .status-pill.transit, .status-pill.idle { background:var(--surface2); color:var(--text-dim); }
  .driver-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
  .driver-stat { background:rgba(0,0,0,0.05); border-radius:6px; padding:5px 7px; text-align:center; }
  [data-theme="light"] .driver-stat { background:rgba(0,0,0,0.04); }
  .driver-stat-val { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--text); }
  .driver-stat-val.green  { color:var(--green); }
  .driver-stat-val.orange { color:var(--orange); }
  .driver-stat-lbl { font-size:8px; color:var(--text-muted); margin-top:1px; }

  /* JOB CARD */
  .job-card { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 12px 10px 12px; margin-bottom:6px; position:relative; }
  .job-top { margin-bottom:6px; padding-right:16px; }
  .job-do { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--blue); }
  .job-status-dot { width:7px; height:7px; border-radius:50%; position:absolute; top:12px; right:12px; flex-shrink:0; }
  .dot-completed  { background:var(--green); }
  .dot-in-transit { background:var(--blue); box-shadow:0 0 6px var(--blue); }
  .dot-waiting    { background:var(--orange); }
  .dot-pending    { background:var(--text-muted); }
  .dot-failed     { background:var(--red); }
  .tag-waiting    { background:rgba(255,140,0,0.1); color:var(--orange); }
  .job-customer { font-size:12px; font-weight:500; color:var(--text); margin-bottom:2px; }
  .job-address  { font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .job-meta { display:flex; align-items:center; gap:8px; margin-top:6px; }
  .job-tag { font-size:9px; padding:2px 7px; border-radius:4px; font-weight:600; letter-spacing:0.5px; }
  .tag-completed  { background:rgba(0,168,90,0.1);  color:var(--green); }
  .tag-in-transit { background:rgba(0,120,255,0.1); color:var(--blue); }
  .tag-pending    { background:rgba(74,96,128,0.1); color:var(--text-dim); }
  .tag-failed     { background:rgba(214,48,48,0.1); color:var(--red); }
  .job-driver { font-size:10px; color:var(--text-dim); margin-left:auto; }

  .last-update { padding:8px 18px; font-size:10px; color:var(--text-muted); border-top:1px solid var(--border); display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:10px; color:var(--text-muted); font-size:12px; text-align:center; padding:20px; }
  .empty-icon { font-size:28px; opacity:0.4; }

  /* ══ 加载动画（卡车）══ */
  .chs-loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; padding:20px; }
  .chs-truck-wrap { width:90px; height:50px; position:relative; overflow:hidden; }
  .chs-truck-svg { position:absolute; left:50%; top:0; transform:translateX(-50%); animation:chsTruckBounce 0.6s ease-in-out infinite; }
  @keyframes chsTruckBounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-3px); } }
  .chs-wheel { animation:chsWheelSpin 0.5s linear infinite; }
  .chs-wheel-l { transform-origin:22px 40px; }
  .chs-wheel-r { transform-origin:50px 40px; }
  @keyframes chsWheelSpin { to { transform:rotate(360deg); } }
  .chs-road { position:absolute; bottom:2px; left:0; right:0; height:2px; background-image:repeating-linear-gradient(to right, var(--text-muted) 0 10px, transparent 10px 20px); background-size:40px 2px; animation:chsRoadMove 0.5s linear infinite; opacity:0.5; }
  @keyframes chsRoadMove { to { background-position:-40px 0; } }
  .chs-loading-text { font-size:11px; color:var(--text-muted); }
  @media (prefers-reduced-motion: reduce) { .chs-truck-svg, .chs-wheel, .chs-road { animation:none !important; } }

  /* 设置行 */
  .setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .setting-label { flex:1; }
  .setting-label span:first-child { font-size:13px; color:var(--text); display:block; }
  .setting-hint { font-size:10px; color:var(--text-muted); margin-top:2px; }
  .setting-control { flex-shrink:0; }
  .setting-select {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; padding:7px 10px; color:var(--text);
    font-size:12px; outline:none; cursor:pointer; transition:border-color 0.2s;
  }
  .setting-select:focus { border-color:var(--blue); }
  /* 工作日选择 */
  .day-chip { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dim); cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:4px 8px; transition:border-color 0.2s,color 0.2s; user-select:none; }
  .day-chip input { display:none; }
  .day-chip:has(input:checked) { border-color:var(--blue); color:var(--blue); background:rgba(0,120,255,0.08); }

  /* ══ 移动端适配 ══ */
  @media (max-width: 900px) {
    body { height:auto; min-height:100vh; overflow-y:auto; overflow-x:hidden; }
    main { grid-template-columns:1fr; overflow:visible; }
    main.driver-collapsed,
    main.jobs-collapsed,
    main.driver-collapsed.jobs-collapsed { grid-template-columns:1fr; }
    .panel { border-right:none; border-bottom:1px solid var(--border); max-height:42vh; }
    .panel:last-child { border-left:none; border-bottom:none; }
    .center-panel { order:-1; }
    .map-container { height:46vh; min-height:280px; }
    .kpi-strip { grid-template-columns:repeat(2,1fr); }
    .kpi-value { font-size:20px; }
    .header-center { display:none; }
    .clock-date { display:none; }
    .clock { font-size:14px; }
    header { padding:0 12px; gap:8px; }
    .header-right { gap:8px; }
    .live-badge { font-size:10px; }
    .map-legend-panel { min-width:96px; padding:8px 10px; top:8px; right:8px; }
    .map-legend-title, .legend-section-lbl { font-size:8px; }
    .legend-item { font-size:10px; margin-bottom:3px; }
    .settings-panel { width:92vw; max-width:420px; }
    .driver-stats { gap:3px; }
    .driver-stat-val { font-size:12px; }
    .driver-stat-lbl { font-size:7px; }
    .setting-row { flex-wrap:wrap; }
  }

  @media (max-width: 480px) {
    .kpi-card { padding:10px; }
    .kpi-value { font-size:18px; }
    .kpi-label { font-size:8px; }
    .logo-badge { width:30px; height:30px; font-size:11px; }
    .logo-text { font-size:13px; }
    .btn-settings { width:32px; height:32px; font-size:15px; }
    .map-container { height:40vh; min-height:220px; }
    .panel { max-height:38vh; }
    .settings-body { padding:16px; gap:16px; }
    .avatar-config-row { flex-wrap:wrap; }
  }