:root{
  --bg:#0d1014;
  --panel:#14191f;
  --panel2:#1a2028;
  --line:#2a323c;
  --text:#f4f7fb;
  --muted:#9aa6b3;
  --accent:#31d0aa;
  --accent2:#23a989;
  --danger:#f06a74;
  --route:#61dafb;
  --sidebar:338px;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
#app{display:grid;grid-template-columns:var(--sidebar) 1fr}
.sidebar{position:relative;z-index:30;background:linear-gradient(180deg,#12171d 0%,#101419 100%);border-right:1px solid #252c34;display:flex;flex-direction:column;min-width:0;box-shadow:16px 0 35px rgba(0,0,0,.2)}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 14px}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#72f1ce);color:#082119;font-weight:900;letter-spacing:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.brand-title{font-weight:800;font-size:15px;letter-spacing:.2px}.brand-subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.search-wrap{margin:4px 16px 12px;position:relative}.search-wrap svg{position:absolute;left:12px;top:12px;width:17px;height:17px;fill:none;stroke:#84909c;stroke-width:2}.search-wrap input{width:100%;height:42px;padding:0 12px 0 38px;border-radius:10px;border:1px solid #29313a;background:#0d1116;color:var(--text);outline:none}.search-wrap input:focus{border-color:#3c8371;box-shadow:0 0 0 3px rgba(49,208,170,.08)}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 16px 10px;background:#0d1116;border:1px solid #252d36;padding:4px;border-radius:10px}.seg{height:34px;border:0;border-radius:7px;background:transparent;color:#8d99a6;font-weight:700;font-size:13px}.seg.active{background:#222a33;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#2f3944;font-size:11px;margin-left:4px}.seg.active .badge{background:var(--accent);color:#092219}
.panel{display:none;min-height:0;overflow:auto;padding:2px 12px 92px}.panel.active{display:block}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 6px 8px}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:1.25px;color:#71808e;font-weight:800}.panel h2{font-size:20px;margin:3px 0 0}.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid #303844;background:#1a2028;color:#d6dde5}.icon-btn:hover{background:#232b35}
.stop-list{display:flex;flex-direction:column;gap:4px}.stop-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px;border-radius:9px;border:1px solid transparent;background:transparent;color:inherit;text-align:left;width:100%}.stop-item:hover,.stop-item.active{background:#1a2027;border-color:#29333c}.stop-item.hidden{display:none}.mini-pin{width:28px;height:28px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:#28333d;border:1px solid #45525f;display:grid;place-items:center}.mini-pin span{transform:rotate(45deg);font-size:11px;font-weight:900;color:#cfd8e2}.stop-name{font-size:13px;font-weight:700}.stop-sub{font-size:11px;color:#6f7d8a;margin-top:2px}.locate{font-size:15px;color:#6f7d8a}.hint{font-size:12px;line-height:1.5;color:#8b98a4;margin:0 6px 12px}.route-empty{border:1px dashed #33404b;border-radius:12px;padding:22px 12px;text-align:center;color:#74818d;display:flex;flex-direction:column;gap:4px}.route-empty-icon{font-size:24px;color:#a9b5c1}.route-empty strong{color:#d8e0e8;font-size:13px}.route-empty span{font-size:11px}.route-list{display:flex;flex-direction:column;gap:5px}.route-item{display:grid;grid-template-columns:28px 1fr 26px;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid #242c34}.route-number{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--route);color:#07202a;font-size:11px;font-weight:900}.route-remove{border:0;background:transparent;color:#778593;font-size:17px}.route-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 8px}.primary,.secondary,.danger,.ghost{border-radius:9px;height:38px;padding:0 12px;font-weight:800;font-size:12px}.primary{border:0;background:var(--accent);color:#06231b}.primary:hover{background:#43ddb8}.secondary{border:1px solid #35404b;background:#1b2229;color:#d9e0e7}.danger{border:1px solid rgba(240,106,116,.3);background:rgba(240,106,116,.08);color:#f28a92}.full{width:100%}.saved-routes{margin-top:16px}.saved-route{padding:9px 10px;border-radius:9px;background:#171d23;border:1px solid #29323a;margin-top:6px}.saved-route-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800}.saved-route-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.saved-route small{display:block;color:#778592;margin-top:4px}
.sidebar-footer{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(180deg,rgba(16,20,25,0),#101419 24%,#101419 100%);display:grid;grid-template-columns:1fr 1fr;gap:7px}.ghost{height:34px;border:1px solid #29323b;background:#141a20;color:#8e9ba7}.ghost.active{border-color:#417c6d;color:#5ee2c0;background:rgba(49,208,170,.08)}
.map-shell{position:relative;overflow:hidden;background:#0d1116}.map-viewport{position:absolute;inset:0;overflow:hidden;cursor:grab;background:#11161b}.map-viewport.dragging{cursor:grabbing}.map-stage{position:absolute;left:0;top:0;width:2048px;height:1865px;transform-origin:0 0;will-change:transform}.map-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 45%,rgba(8,12,16,.15) 100%)}#mapImage{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none}.markers-layer,.route-svg{position:absolute;inset:0;width:100%;height:100%}.route-svg{pointer-events:none;overflow:visible}.route-svg polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.route-svg #routeShadow{stroke:rgba(5,10,15,.75);stroke-width:12}.route-svg #routeLine{stroke:var(--route);stroke-width:6}
.marker{position:absolute;width:32px;height:40px;margin-left:-16px;margin-top:-37px;filter:drop-shadow(0 5px 4px rgba(0,0,0,.35));z-index:4;transform-origin:50% 100%}.marker button{width:32px;height:32px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);border:2px solid rgba(255,255,255,.88);background:#26323c;color:#fff;display:grid;place-items:center;padding:0;box-shadow:0 0 0 2px rgba(8,12,16,.32)}.marker button span{transform:rotate(45deg);font-size:11px;font-weight:900}.marker:hover{z-index:10}.marker:hover button{background:#344350;scale:1.08}.marker.selected button{background:var(--route);border-color:#fff;color:#08232b}.marker.placement button{cursor:move;background:#f3b64d;color:#2a1b03}.marker-label{position:absolute;left:50%;top:37px;transform:translateX(-50%);white-space:nowrap;background:rgba(13,17,22,.9);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:4px 7px;color:#f7f9fb;font-size:10px;font-weight:700;opacity:0;pointer-events:none;transition:.12s}.marker:hover .marker-label,.marker.selected .marker-label{opacity:1}
.map-topbar{position:absolute;left:18px;right:18px;top:16px;z-index:20;display:flex;justify-content:space-between;pointer-events:none}.map-chip,.route-mode-btn{pointer-events:auto}.map-chip{height:38px;display:flex;align-items:center;gap:8px;padding:0 13px;border-radius:10px;background:rgba(15,20,25,.9);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);font-size:12px;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.18)}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(49,208,170,.14)}.route-mode-btn{height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,20,25,.9);color:#eef3f7;font-weight:800;padding:0 14px;backdrop-filter:blur(10px)}.route-mode-btn.active{background:var(--accent);color:#07231b;border-color:transparent}
.zoom-controls{position:absolute;right:18px;bottom:74px;z-index:20;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.11);border-radius:11px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.2)}.zoom-controls button{width:40px;height:39px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(15,20,25,.92);color:#f0f4f7;font-size:18px}.zoom-controls button:last-child{border-bottom:0}.zoom-controls button:hover{background:#222a32}.map-legend{position:absolute;left:18px;bottom:18px;z-index:20;display:flex;gap:14px;padding:9px 12px;border-radius:10px;background:rgba(15,20,25,.88);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);font-size:10px;color:#adb8c3}.legend-pin{display:inline-block;width:9px;height:9px;border-radius:50%;background:#34424d;border:2px solid #fff;margin-right:4px}.legend-route{display:inline-block;width:16px;height:3px;border-radius:3px;background:var(--route);margin:0 4px 2px 0}
.stop-card{position:absolute;right:18px;top:70px;z-index:25;width:270px;background:rgba(16,21,27,.96);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;backdrop-filter:blur(14px);box-shadow:0 18px 55px rgba(0,0,0,.32);transition:.15s}.stop-card.hidden{opacity:0;transform:translateY(-8px);pointer-events:none}.stop-card h3{font-size:18px;margin:4px 0 6px}.close-card{position:absolute;right:10px;top:9px;border:0;background:transparent;color:#98a4b0;font-size:20px}.card-meta{display:flex;gap:10px;color:#7d8a96;font-size:11px;margin-bottom:14px}.toast{position:absolute;left:50%;bottom:22px;z-index:30;transform:translateX(-50%);background:#211d13;border:1px solid #6e5930;color:#f3ce7f;border-radius:9px;padding:9px 13px;font-size:11px;box-shadow:0 9px 22px rgba(0,0,0,.3)}.toast.hidden{display:none}
dialog{border:0;padding:0;background:transparent;color:var(--text)}dialog::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(3px)}.dialog-card{position:relative;width:min(410px,90vw);background:#171d24;border:1px solid #313b46;border-radius:15px;padding:22px;box-shadow:0 22px 70px rgba(0,0,0,.45)}.dialog-card h2{margin:4px 0 18px}.dialog-card label{display:block;font-size:11px;color:#9aa6b2;font-weight:700;margin:11px 0}.dialog-card input{display:block;width:100%;height:40px;margin-top:6px;background:#0e1318;border:1px solid #2f3944;border-radius:8px;color:#fff;padding:0 10px}.dialog-card input[type=color]{padding:4px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#8e9aa5;font-size:22px}
@media(max-width:820px){:root{--sidebar:286px}.brand-subtitle{display:none}.map-legend{display:none}}
@media(max-width:650px){#app{grid-template-columns:1fr}.sidebar{position:absolute;left:10px;top:64px;bottom:10px;width:min(310px,calc(100vw - 20px));z-index:40;border:1px solid #29323a;border-radius:14px;transform:translateX(calc(-100% - 18px));transition:.2s}.sidebar.open{transform:none}.map-topbar{left:12px;right:12px}.map-chip{margin-left:48px}}