.tp-body { display: grid; grid-template-columns: 392px minmax(0, 1fr); flex: 1; min-height: 0; }
.tp-panel { display: flex; flex-direction: column; min-height: 0; padding: 0 6px 0 26px; }
.tp-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3c4043; padding: 2px 2px 12px; }
.tp-head b { font-weight: 600; color: #202124; }
.tp-head svg { width: 14px; height: 14px; color: #5f6368; }
.tp-list { overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 4px 10px 10px 2px; }
.tc { border: 1px solid #dde1e6; border-radius: 8px; padding: 13px 15px 14px; background: #fff; flex: none; }
.tc.sel { border: 2px solid #1f63e1; }
.tc-h { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.tc-h a { color: #1a5cd8; font-weight: 600; text-decoration: none; }
.tc-h span { color: #1a5cd8; font-size: 12.5px; }
.tc-m { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5f6368; margin: 8px 0 12px; }
.tc-warn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #c5221f; font-weight: 600; font-size: 12px; }
.tc-warn svg { width: 13px; height: 13px; }
.tc-stop { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: #202124; padding: 5px 0; }
.tc-stop i { flex: none; width: 13px; height: 13px; border: 2px solid #5f6368; border-radius: 50%; align-self: center; }
.tc-stop i.n { border-radius: 3px; border: 1.5px solid #b7791f; color: #8a5a00; font-style: normal; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }
.tc-stop b { font-weight: 500; white-space: nowrap; }
.tc-stop span { color: #202124; }
.tp-map { position: relative; overflow: hidden; background: #B3D6E4; }
.tp-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; }
.gm-zoom span { width: 34px; height: 34px; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.24); display: grid; place-items: center; }
.gm-zoom svg { width: 16px; height: 16px; color: #5f6368; }
.gm-brand { position: absolute; left: 12px; bottom: 8px; font-size: 15px; color: #5f6368; font-weight: 500; letter-spacing: .2px; }
.gm-attrib { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; color: #4a4a46; }
.gm-layers { position: absolute; right: 14px; bottom: 34px; width: 46px; height: 46px; background: #fff; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.26); display: grid; place-items: center; font-size: 9px; color: #3c4043; }
.gm-clear { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 999px; box-shadow: 0 1px 5px rgba(0,0,0,.22); padding: 8px 16px; font-size: 13px; color: #3c4043; display: inline-flex; align-items: center; gap: 8px; }
.gm-clear svg { width: 14px; height: 14px; color: #5f6368; }
.gm-play { position: absolute; left: 14px; right: 14px; bottom: 26px; background: #1f2124; border-radius: 8px; color: #e8eaed; padding: 10px 18px 12px; }
.gm-play .tl { position: relative; height: 22px; }
.gm-play .tl .base { position: absolute; left: 6px; right: 6px; top: 10px; height: 2.5px; background: #5f6368; border-radius: 2px; }
.gm-play .tl .fill { position: absolute; left: 6px; top: 10px; height: 2.5px; width: 4%; background: #a6c964; border-radius: 2px; }
.gm-play .dot { position: absolute; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #3a3d41; border: 1.5px solid #9aa0a6; color: #e8eaed; font-size: 9px; font-weight: 700; display: grid; place-items: center; transform: translateX(-50%); }
.gm-play .row { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 13px; }
.gm-play .row svg { width: 17px; height: 17px; }
.gm-play .spd { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #5f6368; border-radius: 5px; padding: 4px 10px; font-size: 12.5px; }
.gm-tip { position: absolute; background: #fff; border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,.25); padding: 8px 12px; font-size: 12px; color: #3c4043; }
.us-state { fill: none; stroke: #cbc6bb; stroke-width: 1; }
.us-lab { fill: #8d9089; font-size: 13px; letter-spacing: .14em; font-family: 'Roboto', sans-serif; }
.us-city { fill: #55575a; font-size: 11px; font-family: 'Roboto', sans-serif; }
.us-cityd { fill: none; stroke: #7f8286; stroke-width: 1.6; }
.rg-town { fill: #6d6f6a; font-size: 13.5px; font-family: 'Roboto', sans-serif; }
.rg-road { stroke: #fff; fill: none; }
.rg-roadc { stroke: #e2ddd2; fill: none; }
.rg-hwy { stroke: #f5e7b2; fill: none; }
.rg-hwyc { stroke: #e5d194; fill: none; }
.rg-lab { fill: #8d8f89; font-size: 10.5px; font-family: 'Roboto', sans-serif; }