:root { --bg:#0b1220; --card:#121a2a; --text:#e9eef7; --muted:#9fb0c7; --accent:#4da3ff; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
.topbar{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid #22304a; }
.brand{ font-weight:700; letter-spacing:.2px; }
.spacer{ flex:1; }
.btn{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid #2a3b5d; }
.btn.ghost{ background:transparent; }
.layout{ display:grid; grid-template-columns: 360px 1fr; height: calc(100vh - 50px); }
.panel{ padding:14px; border-right:1px solid #22304a; background:#0d1626; overflow:auto; }
.mapwrap{ height:100%; }
#map{ height:100%; width:100%; background:#111; }
.card{ background:var(--card); padding:18px; border-radius:16px; width:360px; border:1px solid #22304a; }
.center{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
label{ display:block; margin-top:10px; font-size:13px; color:var(--muted); }
input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a3b5d; background:#0f1a2d; color:var(--text); }
button{ margin-top:12px; width:100%; padding:10px 12px; border:0; border-radius:12px; background:var(--accent); color:#071427; font-weight:700; cursor:pointer; }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.alert{ background:#2b1b1b; border:1px solid #6b2a2a; padding:10px; border-radius:12px; margin:10px 0; }
.list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.item{ padding:10px; border:1px solid #22304a; border-radius:12px; background:#0f1a2d; }
.item .title{ font-weight:700; }
.msg{ margin-top:10px; font-size:12px; color:var(--muted); }