#dp-live, #dp-ow, #dp-mapgear { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:#fff; border:1px solid #e2e8f0; border-radius:10px; color:#334155; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); flex:0 0 auto; }
#dp-live svg, #dp-ow svg, #dp-mapgear svg { width:20px; height:20px; fill:currentColor; }
#dp-live.on, #dp-ow.on { background:#1e2a44; border-color:#1e2a44; color:#fff; }
html body #map-pane #d-map-top-bar :is(#dp-live, #dp-ow) { box-shadow:none !important; height:32px !important; width:32px !important; border-radius:8px !important; }
@media (max-width: 430px) { html body #map-pane #d-map-top-bar > :has(> #dp-ow) { gap:4px !important; } html body #map-pane #d-map-top-bar > :has(> #dp-ow) button:not([style*="display: none"]) { width:30px !important; min-width:30px !important; height:30px !important; } html body #map-pane #d-map-top-bar > :has(> #dp-ow) > :not(button) { gap:4px !important; } }
html[data-theme="dark"] body #map-pane #d-map-top-bar :is(#dp-live, #dp-ow):not(.on) { background:var(--tdk-s1, #2c2c2e) !important; border-color:transparent !important; color:#c7c7cc !important; }
@font-face { font-family:'TSP Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.8/files/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'TSP Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.8/files/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'TSP Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.8/files/roboto-latin-700-normal.woff2') format('woff2'); }
.tl-owpop { position:absolute; transform:translate(14px, -50%); display:flex; flex-direction:column; align-items:flex-start; padding:5px 10px; background:#1e2a44; color:#fff; border-radius:10px; box-shadow:0 4px 14px rgba(2,6,23,.28); white-space:nowrap; pointer-events:none; font-family:var(--tsp-ff, Inter), sans-serif; z-index:5; }   
.tl-owpop { padding-right:28px !important; } .tl-owpop .tl-owx { position:absolute; top:3px; right:4px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font:700 14px/20px 'Inter',sans-serif; cursor:pointer; padding:0; pointer-events:auto; } .tl-owpop .tl-owx:hover { background:#e11d48; }
.tl-owpop b { font-size:13px; font-weight:800; line-height:1.15; } .tl-owpop small { font-size:11px; font-weight:600; color:#cbd5e1; }
.tl-lvpop { position:absolute; transform:translate(-50%, calc(-100% - 16px)); display:flex; align-items:center; gap:10px; padding:9px 14px 9px 10px; background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(2,6,23,.22); white-space:nowrap; font-family:'TSP Roboto', Roboto, -apple-system, "Segoe UI", sans-serif; cursor:default; z-index:5; }
.tl-lvpop::after { content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:#fff; transform:translateX(-50%) rotate(45deg); }
.tl-lvpop .ic { width:30px; height:30px; border-radius:50%; background:#2563eb; color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.tl-lvpop .ic.old { background:#94a3b8; }
.tl-lvpop .tx { display:flex; flex-direction:column; }
.tl-lvpop b { font-size:13.5px; font-weight:800; color:#0f172a; }
.tl-lvpop small { font-size:12px; font-weight:500; color:#64748b; margin-top:1px; display:flex; align-items:center; }
.tl-lvpop small i { width:7px; height:7px; border-radius:50%; background:#16a34a; margin-right:6px; }
.tl-lvpop small i.old { background:#94a3b8; }
#tl-ov { position:fixed; inset:0; z-index:86600; display:none; background:rgba(2,6,23,.62); font-family:var(--tsp-ff, Inter), -apple-system, "Segoe UI", sans-serif; color:#0f172a; -webkit-font-smoothing:antialiased; }
#tl-ov.open { display:flex; }
#tl-ov * { box-sizing:border-box; }
#tl-ov .tl-box { position:absolute; left:0; top:0; bottom:0; width:min(1240px, 98vw); background:#e9edf2; border-radius:0 18px 18px 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:24px 0 60px rgba(15,23,42,.35); animation:tlIn .26s cubic-bezier(.2,.8,.2,1); }   
@keyframes tlIn { from { transform:translateX(-100%); } }
#tl-ov .tl-rsz { position:absolute; top:0; right:0; bottom:0; width:14px; cursor:ew-resize; z-index:3; touch-action:none; }
#tl-ov .tl-rsz::after { content:""; position:absolute; top:50%; right:5px; width:4px; height:44px; margin-top:-22px; border-radius:4px; background:#cbd5e1; }
#tl-ov .tl-rsz:hover::after, #tl-ov .tl-box.resizing .tl-rsz::after { background:#64748b; }
#tl-ov .tl-guide { position:fixed; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18); z-index:5; display:none; pointer-events:none; }
#tl-ov .tl-guide.on { display:block; }
#tl-ov .tl-guide::after { content:attr(data-w); position:absolute; top:50%; left:8px; transform:translateY(-50%); font:700 11px/1 system-ui,sans-serif; color:#fff; background:#2563eb; padding:4px 6px; border-radius:6px; white-space:nowrap; }
#tl-ov .tl-bd { margin-right:4px; }
#tl-ov, #tl-ov button, #tl-ov select, #tl-ov input { font-family:'TSP Roboto', Roboto, -apple-system, "Segoe UI", sans-serif !important; }
#tl-ov .tl-hd h2 { font-size:20px; font-weight:700; }
#tl-ov .tl-top h3 { font-size:19px; font-weight:700; }
#tl-ov .tl-mon b { font-size:15px; font-weight:700; }
#tl-ov .tl-cal button { font-size:13px; font-weight:500; }
#tl-ov .tl-p { font-size:14px; font-weight:500; }
#tl-ov .tl-p small, #tl-ov .tl-hd .sub, #tl-ov .tl-recsw span, #tl-ov .tl-trips .t small, #tl-ov .tl-chk { font-weight:400; }
#tl-ov .tl-recsw b, #tl-ov .tl-tiles b, #tl-ov .tl-sbox h3, #tl-ov .tl-memo .mh { font-weight:700; }
#tl-ov .tl-tiles b { font-size:18px; font-variant-numeric:tabular-nums; }
#tl-ov .tl-k { font-size:12px; font-weight:500; color:#64748b; }
#tl-ov .tl-trips .t b, #tl-ov .tl-btn, #tl-ov .tl-chip, #tl-ov table.tl-t th, #tl-ov table.tl-t td.sp { font-weight:500; }
#tl-ov .tl-lvpop b, .tl-lvpop b { font-weight:700; }
#tl-ov .tl-hd { display:flex; align-items:center; gap:10px; padding:14px 18px; background:#fff; border-bottom:1px solid #e2e8f0; }
#tl-ov .tl-hd h2 { margin:0; font-size:20px; font-weight:800; white-space:nowrap; }
#tl-ov .tl-hd .sub { font-size:13px; font-weight:500; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-q { width:26px; height:26px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#334155; font-weight:800; font-size:13px; cursor:pointer; flex:none; }
#tl-ov .tl-x { margin-left:auto; width:36px; height:36px; border-radius:50%; border:0; background:#f1f5f9; color:#334155; font-size:20px; line-height:1; cursor:pointer; flex:none; }
#tl-ov .tl-bd { flex:1; min-height:0; overflow:auto; padding:16px; display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start; }
#tl-ov .tl-card { background:#fff; border-radius:16px; padding:18px; }
#tl-ov .tl-k { font-size:12px; font-weight:700; color:#64748b; white-space:nowrap; }
#tl-ov .tl-cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; font-size:13px; font-weight:600; margin-top:8px; }
#tl-ov .tl-cal .w { font-size:11.5px; font-weight:700; color:#94a3b8; padding:2px 0 4px; }
#tl-ov .tl-cal button { height:34px; border:0; border-radius:9px; background:transparent; color:#cbd5e1; font-weight:600; font-size:13px; cursor:default; }
#tl-ov .tl-cal button.has { background:#f1f5f9; color:#0f172a; cursor:pointer; }
#tl-ov .tl-cal button.has:hover { background:#e2e8f0; }
#tl-ov .tl-cal button.today { box-shadow:inset 0 0 0 1.5px #94a3b8; color:#0f172a; cursor:pointer; }
#tl-ov .tl-cal button.on { background:#0f172a; color:#fff; font-weight:800; }
#tl-ov .tl-mon { display:flex; align-items:center; gap:6px; }
#tl-ov .tl-mon b { flex:1; font-size:15px; font-weight:800; white-space:nowrap; }
#tl-ov .tl-nb { width:32px; height:32px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#0f172a; font-weight:700; font-size:14px; cursor:pointer; }
#tl-ov .tl-ppl { margin-top:16px; }
#tl-ov .tl-p { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:transparent; font-weight:600; font-size:14px; color:#0f172a; cursor:pointer; text-align:left; }
#tl-ov .tl-p:hover { background:#f8fafc; }
#tl-ov .tl-p.on { background:#eff6ff; }
#tl-ov .tl-p i { width:9px; height:9px; border-radius:50%; background:#94a3b8; flex:none; }
#tl-ov .tl-p.on i { background:#2563eb; }
#tl-ov .tl-p span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-p small { font-size:13px; font-weight:500; color:#64748b; white-space:nowrap; }
#tl-ov .tl-top { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
#tl-ov .tl-top h3 { margin:0; flex:1; font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-btn { height:36px; padding:0 16px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#0f172a; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
#tl-ov .tl-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
#tl-ov .tl-btn.pri { background:#0f172a; border-color:#0f172a; color:#fff; }
#tl-ov .tl-btn.pri:hover { background:#1e293b; }
#tl-ov .tl-btn:disabled { background:#f1f5f9; color:#94a3b8; border-color:#e2e8f0; cursor:default; }
#tl-ov .tl-map { height:340px; border-radius:12px; background:#eef2e6; overflow:hidden; position:relative; }
#tl-ov .tl-map .msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#64748b; text-align:center; padding:20px; }
#tl-ov .tl-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:12px 0; }
#tl-ov .tl-tiles div { background:#f8fafc; border-radius:10px; padding:10px 12px; min-width:0; }
#tl-ov .tl-tiles b { display:block; font-size:17px; font-weight:800; margin-top:2px; white-space:nowrap; }
#tl-ov .tl-tiles b.red { color:#dc2626; }
#tl-ov .tl-chk { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:10px; margin-bottom:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-chk.ok { background:#f0fdf4; color:#15803d; }
#tl-ov .tl-chk.bad { background:#fef2f2; color:#b91c1c; }
#tl-ov .tl-chk.warn { background:#fffbeb; color:#b45309; }
#tl-ov .tl-trips > div { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #f1f5f9; }
#tl-ov .tl-trips > div:first-child { border-top:0; }
#tl-ov .tl-trips .n { width:22px; height:22px; border-radius:50%; background:#2563eb; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
#tl-ov .tl-trips .n.s { background:#0f172a; }
#tl-ov .tl-trips .t { min-width:0; flex:1; }
#tl-ov .tl-trips .t b { display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-trips .t small { font-size:12.5px; font-weight:500; color:#64748b; white-space:nowrap; }
#tl-ov .tl-trips .t small.r { color:#dc2626; font-weight:700; }
#tl-ov .tl-ax { display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:#94a3b8; margin-top:4px; white-space:nowrap; }
#tl-ov .tl-65 { text-align:right; font-size:11px; font-weight:700; color:#dc2626; }
#tl-ov .tl-recsw { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:12px; border-radius:10px; background:#f8fafc; }
#tl-ov .tl-sw { position:relative; display:inline-flex; cursor:pointer; flex:none; }
#tl-ov .tl-recsw span { flex:1; font-size:13.5px; font-weight:600; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-recsw b { color:#0f172a; font-weight:800; }
#tl-ov .tl-recsw input { position:absolute; opacity:0; pointer-events:none; }
#tl-ov .tl-recsw i { width:40px; height:22px; border-radius:11px; background:#cbd5e1; position:relative; flex:none; transition:background .15s; }
#tl-ov .tl-recsw i::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; }
#tl-ov .tl-recsw input:checked + i { background:#2563eb; }
#tl-ov .tl-recsw input:checked + i::after { left:21px; }
#tl-ov .tl-recsw input:disabled + i { opacity:.5; }
#tl-ov .tl-btn.red { background:#dc2626; border-color:#dc2626; color:#fff; }
#tl-ov .tl-btn.red:hover { background:#b91c1c; border-color:#b91c1c; }
#tl-ov .tl-cf { width:min(440px, calc(100vw - 24px)); height:auto; border-radius:18px; }
#tl-ov .tl-cf .tl-sbody { padding:6px 20px 8px !important; }
#tl-ov .tl-cfb p { margin:0 0 8px; font-size:13.5px; font-weight:500; color:#334155; line-height:1.5; }
#tl-ov .tl-cfb b { color:#0f172a; font-weight:800; }
#tl-ov .tl-facts { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
#tl-ov .tl-fc { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; background:#f1f5f9; font-size:12.5px; font-weight:400; color:#334155; white-space:nowrap; }
#tl-ov .tl-fc b { color:#0f172a; font-weight:700; }
#tl-ov .tl-fc.bad { background:#fef2f2; color:#b91c1c; }
#tl-ov .tl-fc.bad b { color:#b91c1c; }
#tl-ov .tl-empty { font-size:13px; font-weight:600; color:#64748b; text-align:center; padding:40px 10px; }
#tl-ov .tl-days { display:none; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:12px; scrollbar-width:none; }
#tl-ov .tl-days::-webkit-scrollbar { display:none; }
#tl-ov .tl-chip { height:34px; padding:0 13px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#0f172a; font-weight:600; font-size:13px; white-space:nowrap; cursor:pointer; flex:none; }
#tl-ov .tl-chip.on { background:#0f172a; border-color:#0f172a; color:#fff; font-weight:700; }
#tl-ov .tl-chip.dim { color:#94a3b8; }
#tl-ov .tl-who { display:none; width:100%; height:40px; padding:0 12px; margin-bottom:10px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; font-weight:700; font-size:14px; color:#0f172a; }
#tl-ov .tl-rec { display:none; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#15803d; background:#f0fdf4; border-radius:999px; padding:6px 12px; white-space:nowrap; }
#tl-ov .tl-rec.on { display:inline-flex; }
#tl-ov .tl-rec i { width:8px; height:8px; border-radius:50%; background:#16a34a; animation:tlBlink 1.4s infinite; }
@keyframes tlBlink { 50% { opacity:.25; } }
#tl-ov .tl-sheet { position:absolute; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:2; }
#tl-ov .tl-sheet.open { display:flex; }
#tl-ov .tl-sbox { width:min(820px, calc(100vw - 24px)); max-height:calc(100vh - 40px); background:#fff; border-radius:18px; display:flex; flex-direction:column; overflow:hidden; }
#tl-ov .tl-sbox .tl-shd { padding:16px 20px 6px; }
#tl-ov .tl-sbox h3 { margin:0; font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tl-ov .tl-sbox .sub { font-size:12.5px; font-weight:500; color:#64748b; margin-top:3px; }
#tl-ov .tl-sbody { flex:1; min-height:0; overflow:auto; padding:8px 20px 12px; }
#tl-ov .tl-sft { display:flex; gap:8px; padding:12px 20px; border-top:1px solid #f1f5f9; }
#tl-ov .tl-sft .sp { flex:1; }
#tl-ov table.tl-t { width:100%; border-collapse:collapse; font-size:13px; }
#tl-ov table.tl-t th { text-align:left; font-size:12px; font-weight:700; color:#64748b; padding:8px 8px 8px 0; position:sticky; top:0; background:#fff; white-space:nowrap; }
#tl-ov table.tl-t td { border-top:1px solid #f1f5f9; padding:8px 8px 8px 0; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
#tl-ov table.tl-t td.sp { font-weight:700; }
#tl-ov table.tl-t td.sp.r { color:#dc2626; }
#tl-ov table.tl-t td .fl { display:inline-block; padding:1px 7px; border-radius:6px; font-size:11.5px; font-weight:700; }
#tl-ov table.tl-t td .fl.fake { background:#fee2e2; color:#b91c1c; }
#tl-ov table.tl-t td .fl.net { background:#f1f5f9; color:#64748b; }
#tl-ov table.tl-t td .fl.gps, #tl-ov table.tl-t td .fl.drv { background:#dcfce7; color:#15803d; }
#tl-ov table.tl-t td .fl.stop { background:#fef3c7; color:#b45309; }
#tl-ov table.tl-t td .fl.job { background:#dbeafe; color:#1d4ed8; }
#tl-ov table.tl-t td.plc { max-width:240px; overflow:hidden; text-overflow:ellipsis; color:#334155; }
#tl-ov table.tl-t td .pl { color:#94a3b8; }
#tl-ov table.tl-t td .pl.ok { color:#334155; }
#tl-ov table.tl-t td a { color:#2563eb; font-weight:600; text-decoration:none; }
#tl-ov .tl-memo { width:min(600px, calc(100vw - 24px)); background:#fffbea; border-radius:14px; box-shadow:0 18px 40px rgba(2,6,23,.3); overflow:hidden; font-family:inherit; }
#tl-ov .tl-memo .mh { padding:14px 18px 8px; font-size:16px; font-weight:800; color:#3f3a20; border-bottom:1px solid #f3e7a8; }
#tl-ov .tl-memo .mb { padding:2px 18px 6px; font-size:13.5px; color:#3f3a20; font-weight:500; }
#tl-ov .tl-memo .mb p { margin:0; padding:6px 0; line-height:20px; border-bottom:1px solid #f3e7a8; }
#tl-ov .tl-memo .mb p:last-child { border-bottom:0; }
#tl-ov .tl-memo .mf { display:flex; padding:10px 18px 14px; }
@media (max-width:899px) {
  #tl-ov .tl-box { width:100vw !important; border-radius:0; }
  #tl-ov .tl-rsz { display:none; }
  #tl-ov .tl-hd { padding:12px 14px; }
  #tl-ov .tl-hd .sub { display:none; }
  #tl-ov .tl-bd { display:block; padding:12px; }
  #tl-ov .tl-side { display:none; }
  #tl-ov .tl-side.cal { display:block; margin-bottom:12px; }
  #tl-ov .tl-days { display:flex; }
  #tl-ov .tl-who { display:block; }
  #tl-ov .tl-card { padding:14px; }
  #tl-ov .tl-map { height:240px; }
  #tl-ov .tl-tiles { grid-template-columns:1fr 1fr; }
  #tl-ov .tl-top .tl-btn.csv { display:none; }
  #tl-ov .tl-top h3 { font-size:16px; }
  #tl-ov .tl-sbox:not(.tl-cf) { width:100vw; max-height:100%; height:100%; border-radius:0; }
  #tl-ov table.tl-t { font-size:12px; }
  #tl-ov .tl-sbody { padding:8px 12px 12px; }
}