:root{
  --bg:#0f1724; --card:#0b1220; --accent:#4f46e5; --muted:#9ca3af; --glass:rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Arial;margin:0;background:linear-gradient(180deg,#071025 0%, #071831 100%);color:#e6eef8}
.topbar{padding:28px 20px;text-align:center}
.topbar h1{margin:0;font-size:28px;letter-spacing:-0.5px}
.topbar p{margin:6px 0 0;color:var(--muted)}
.container{max-width:1100px;margin:28px auto;padding:0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass);padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6)}
.stop-title{margin:0 0 10px;font-size:18px}
.riders{list-style:none;padding:0;margin:0 0 12px;min-height:40px}
.riders li{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);margin-bottom:8px}
.riders li.empty{color:var(--muted);font-style:italic}
.person{font-weight:600}
.remove{background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px}
.form-row{display:flex;gap:8px}
.name-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.btn{background:var(--accent);color:white;padding:8px 12px;border-radius:8px;border:0;cursor:pointer}
.btn:disabled{opacity:0.6}
.footer{text-align:center;padding:18px;color:var(--muted)}

@media (max-width:520px){.topbar h1{font-size:20px}.form-row{flex-direction:column}.btn{width:100%}}

/* Map styles */
#map{width:100%;height:520px;border-radius:12px;overflow:hidden;margin-bottom:22px;box-shadow:0 8px 30px rgba(2,6,23,0.7);border:1px solid rgba(255,255,255,0.03)}

/* Marker look (simple purple dot) */
.marker-icon span{display:block;width:16px;height:16px;background:linear-gradient(180deg,#a78bfa,#7c3aed);border-radius:50%;box-shadow:0 4px 10px rgba(124,58,237,0.4);border:2px solid rgba(255,255,255,0.06)}

/* Popup custom */
.leaflet-popup-content-wrapper{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;border:1px solid rgba(255,255,255,0.04);color:inherit}
.leaflet-popup-tip{background:transparent}
.popup{min-width:220px}
.popup-title{font-weight:700;margin-bottom:8px}
.popup-list{max-height:160px;overflow:auto;margin-bottom:8px}
.popup-list .rider{display:flex;justify-content:space-between;align-items:center;padding:6px;border-radius:6px;background:rgba(255,255,255,0.02);margin-bottom:6px}
.popup-list .empty{color:var(--muted);font-style:italic}
.popup-form{display:flex;gap:6px}
.popup-form input{flex:1;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.popup-form .btn{padding:6px 8px;border-radius:6px}

/* numbered marker */
.marker-with-number .marker-wrap{position:relative;display:inline-block}
.marker-with-number .dot{display:block;width:14px;height:14px;background:linear-gradient(180deg,#a78bfa,#7c3aed);border-radius:50%;box-shadow:0 6px 14px rgba(124,58,237,0.35);border:2px solid rgba(255,255,255,0.06)}
.marker-with-number .num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.4)}

.btn{transition:all .12s ease}
.btn:active{transform:translateY(1px)}