:root { --red:#E2001A; --green:#1b8a4b; --ink:#111; --mut:#666; --line:#e3e3e3; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); }
header { background:var(--red); color:#fff; padding:14px 18px; }
header h1 { margin:0; font-size:19px; }
header p { margin:3px 0 0; font-size:13px; opacity:.9; }
#notice { background:#fff4e5; border-bottom:1px solid #f0d9b5; padding:10px 18px; font-size:14px; }
#wrap { display:flex; height:calc(100vh - 66px); }
#map { flex:1; min-height:260px; }
aside { width:340px; border-left:1px solid var(--line); padding:16px; overflow:auto; background:#fafafa; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin:20px 0 8px; }
label { display:block; font-size:13px; font-weight:600; margin:10px 0 4px; }
input { width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:16px; }
.row { display:flex; gap:8px; }
.row input { flex:1; }
button { padding:10px 14px; border:0; border-radius:6px; background:var(--red); color:#fff;
  font-size:15px; font-weight:600; cursor:pointer; }
button.ghost { background:#fff; color:var(--red); border:1px solid var(--red); }
button[disabled] { background:#ddd; color:#888; cursor:default; }
.hint { font-size:12px; color:var(--mut); margin:6px 0 0; }
.err { color:var(--red); font-size:14px; font-weight:600; }
.bar { height:9px; background:#e6e6e6; border-radius:5px; overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--red); transition:width .3s; }
.stat { font-size:13px; color:var(--mut); margin:6px 0 0; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; margin-top:14px; }
.card .code { font:600 17px ui-monospace,Consolas,monospace; }
.card .sub { color:var(--mut); font-size:13px; margin:2px 0 12px; }
.card button { width:100%; }
ul { list-style:none; padding:0; margin:0; }
li { padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;
  display:flex; justify-content:space-between; gap:8px; align-items:center; }
li code { font:600 13px ui-monospace,Consolas,monospace; }
li button { padding:4px 8px; font-size:12px; }
.empty { color:var(--mut); font-style:italic; }
.key { display:flex; gap:14px; font-size:12px; color:var(--mut); margin-top:16px; flex-wrap:wrap; }
.sw { width:11px; height:11px; border-radius:2px; display:inline-block; margin-right:5px; }
#modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex;
  align-items:center; justify-content:center; padding:16px; z-index:1000; }
/* Author styles beat the browser's built-in [hidden]{display:none} rule, so
   without this line the display:flex above keeps the modal permanently open,
   covering the whole page from the moment it loads. */
#modal[hidden] { display:none; }
#modal form { background:#fff; border-radius:10px; padding:20px; width:100%; max-width:380px; }
#modal h3 { margin:0; font:600 18px ui-monospace,Consolas,monospace; }
#modal p { color:var(--mut); font-size:13px; margin:4px 0 10px; }
#modal .row { margin-top:16px; }
#modal .row button { flex:1; }
@media (max-width:760px) {
  #wrap { flex-direction:column; height:auto; }
  #map { height:56vh; }
  aside { width:100%; border-left:0; border-top:1px solid var(--line); }
}