:root {
  --black: #000;
  --blue: #1010ff;
  --yellow: #ffff00;
  --cyan: #00ffff;
  --white: #fff;
  --green: #00ff55;
  --dim: #b9b9b9;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--black); }
body {
  color: var(--white);
  font-family: "Courier New", "Lucida Console", Consolas, monospace;
  font-weight: 900;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
}
.settings-shell { width: min(900px, 100%); margin: 0 auto; padding: 24px; }
.settings-title {
  background: var(--blue);
  color: var(--yellow);
  text-align: center;
  padding: 14px 20px;
  font-size: clamp(24px, 4vw, 44px);
  letter-spacing: .12em;
  text-shadow: .035em 0 currentColor;
}
.settings-panel { padding: 28px 4px; }
.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border-bottom: 2px solid var(--blue);
  padding: 22px 12px;
}
.setting-name { color: var(--yellow); font-size: clamp(20px, 2.6vw, 30px); }
.setting-help { color: var(--cyan); margin-top: 8px; font-size: clamp(14px, 1.8vw, 20px); line-height: 1.35; }
.switch { position: relative; width: 74px; height: 38px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slider { position: absolute; inset: 0; background: #333; border: 3px solid var(--white); cursor: pointer; }
.slider::before { content: ""; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; background: var(--white); transition: transform .12s linear; }
.switch input:checked + .slider { background: var(--blue); border-color: var(--yellow); }
.switch input:checked + .slider::before { transform: translateX(34px); background: var(--yellow); }
.switch input:focus-visible + .slider { outline: 3px solid var(--cyan); outline-offset: 4px; }
.saved { color: var(--green); min-height: 1.4em; padding: 0 12px; font-size: 16px; }
@media (max-width: 560px) {
  .settings-shell { padding: 10px; }
  .setting-row { gap: 12px; padding-inline: 4px; }
}

.back-link{display:inline-block;margin:18px 4px 0;color:var(--cyan);text-decoration:none;font-size:16px}.back-link:hover,.back-link:focus-visible{color:var(--yellow);outline:none}


.map-panel { border-top: 3px solid var(--blue); margin-top: 24px; padding: 28px 4px 50px; }
.map-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.map-title { color: var(--yellow); font-size: clamp(22px, 3vw, 34px); }
.map-help { color: var(--cyan); margin-top: 8px; line-height: 1.35; font-size: 15px; }
.map-help code { color: var(--white); }
.map-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.map-actions button { appearance: none; border: 2px solid var(--white); background: var(--blue); color: var(--yellow); font: inherit; font-size: 14px; font-weight: 900; padding: 10px 12px; cursor: pointer; }
.map-actions button:hover, .map-actions button:focus-visible { border-color: var(--cyan); outline: none; }
.map-actions .danger { background: #500; color: #ff8080; }
.map-summary { color: var(--green); margin: 20px 0 12px; font-size: 14px; }
.map-list { display: grid; gap: 12px; }
.map-entry { border: 2px solid #555; padding: 12px; background: #080808; }
.map-entry.unknown { border-color: #ff3b3b; }
.map-entry.known { border-color: #444; }
.map-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--white); font-size: 15px; }
.map-head b { color: var(--yellow); }
.map-badge { padding: 3px 6px; border: 1px solid currentColor; color: var(--green); }
.map-entry.unknown .map-badge { color: #ff5b5b; }
.map-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--cyan); margin-top: 10px; font-size: 13px; }
.map-entry details { margin-top: 10px; }
.map-entry summary { color: var(--yellow); cursor: pointer; font-size: 13px; }
.map-entry pre { margin: 10px 0 0; padding: 12px; border: 1px solid #333; background: #000; color: #ddd; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font: 12px/1.45 Consolas, monospace; }
.map-key { margin-top: 8px; color: #777; font-size: 11px; }
.map-empty { color: var(--dim); border: 2px dashed #333; padding: 18px; text-align: center; }
@media (max-width: 700px) {
  .map-title-row { grid-template-columns: 1fr; align-items: start; }
  .map-actions { justify-content: flex-start; }
}

.control-link{display:inline-block;border:2px solid var(--white);background:var(--blue);color:var(--yellow);padding:12px 14px;text-decoration:none;white-space:nowrap}.control-link:hover,.control-link:focus-visible{border-color:var(--cyan);outline:none}.control-link-panel{padding-bottom:0}