:root { --bg:#0b1220; --fg:#e8eefc; --mut:#98a7c4; --card:#101a33; --line:#243155; --ok:#3ddc97; --ng:#ff6b6b; --warn:#ffcc66; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background:var(--bg); color:var(--fg); }
header{ padding:14px 14px 8px; }
h1{ font-size:16px; margin:0 0 6px; font-weight:700; }
.sub{ font-size:12px; color:var(--mut); line-height:1.4; }
.grid{ display:grid; gap:10px; padding:10px 14px 16px; grid-template-columns: 1fr; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; }
.title{ font-weight:700; margin-bottom:8px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
button{
  appearance:none; border:1px solid var(--line); background:#14224a; color:var(--fg);
  padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
}
button:disabled{ opacity:.55; cursor:not-allowed; }
.pill{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--mut); }
.pill.ok{ color:var(--ok); border-color:rgba(61,220,151,.35); }
.pill.ng{ color:var(--ng); border-color:rgba(255,107,107,.35); }
.pill.warn{ color:var(--warn); border-color:rgba(255,204,102,.35); }
.kvs{ display:grid; grid-template-columns: 130px 1fr; gap:6px 10px; margin-top:8px; font-size:12px; }
.kvs div:nth-child(odd){ color:var(--mut); }
canvas{ width:100%; height:180px; background:#0a1020; border:1px solid var(--line); border-radius:10px; }
#map{ width:100%; height:260px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
select, input[type="number"]{
  border:1px solid var(--line); background:#0a1020; color:var(--fg); border-radius:10px; padding:10px 10px;
}
a{ color:#9cc4ff; text-decoration:none; }
.hidden{ display:none !important; }