/* MC Manager: deepslate surfaces, bone text, amethyst for focus and primary
   actions. Status colors are the ores: emerald online, gold starting,
   redstone stopped. */
:root {
  --deepslate-0: #1d1e22;  /* console well */
  --deepslate-1: #25272c;  /* page */
  --deepslate-2: #2e3036;  /* panels */
  --deepslate-3: #393c43;  /* raised controls */
  --seam: #474a52;         /* borders */
  --bone: #ece6d8;         /* text */
  --ash: #a8a294;          /* secondary text */
  --ash-dim: #7a766c;      /* disabled text */
  --amethyst: #b48cf0;
  --amethyst-deep: #8b5fd0;
  --amethyst-ink: #1c1030;
  --emerald: #4cc38a;
  --gold: #e8b33a;
  --redstone: #e0533f;

  --radius-s: 4px;
  --radius-m: 8px;
  --control-h: 38px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: ui-rounded, "SF Pro Rounded", "Nunito", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--deepslate-1); }
body {
  margin: 0;
  background: var(--deepslate-1);
  color: var(--bone);
  font: 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 650; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--amethyst); }
code { font-family: var(--font-mono); font-size: .9em; }
[hidden] { display: none !important; }
.muted { color: var(--ash); }
.small { font-size: .85rem; }
.hint { color: var(--ash); font-size: .85rem; font-weight: 400; }
.error { color: var(--redstone); min-height: 1.3em; }
.error:empty { min-height: 0; }

:focus-visible { outline: 2px solid var(--amethyst); outline-offset: 2px; }

/* ---- Controls ---- */

button {
  font: inherit; font-weight: 550;
  min-height: var(--control-h);
  padding: 0 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--seam);
  border-bottom-width: 3px;              /* a block edge: buttons read as pressable */
  background: var(--deepslate-3);
  color: var(--bone);
  cursor: pointer;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: #43464e; }
button:active:not(:disabled) { border-bottom-width: 1px; margin-top: 2px; }
button:disabled {
  background: transparent; color: var(--ash-dim);
  border-style: dashed; border-bottom-width: 1px; cursor: not-allowed;
}
button.primary { background: var(--amethyst); border-color: var(--amethyst-deep); color: var(--amethyst-ink); }
button.primary:hover:not(:disabled) { background: #c3a2f4; }
button.primary:disabled { background: transparent; color: var(--ash-dim); border-color: var(--seam); }
button.danger { color: var(--redstone); border-color: rgba(224, 83, 63, .55); background: rgba(224, 83, 63, .08); }
button.danger:hover:not(:disabled) { background: rgba(224, 83, 63, .18); }
button.ghost { background: transparent; border-color: transparent; border-bottom-width: 1px; color: var(--ash); }
button.ghost:hover:not(:disabled) { background: var(--deepslate-3); color: var(--bone); }
.small-btn { min-height: 30px; padding: 0 10px; font-size: .85rem; }
a.link-button {
  display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 16px;
  border-radius: var(--radius-s); color: var(--ash); text-decoration: none; font-weight: 550;
}
a.link-button:hover { background: var(--deepslate-3); color: var(--bone); }

input, select, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--control-h);
  padding: 6px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--seam);
  background: var(--deepslate-0);
  color: var(--bone);
}
input:disabled, select:disabled, textarea:disabled {
  color: var(--ash); background: transparent; border-style: dashed; cursor: not-allowed;
}
textarea { font: 13px/1.5 var(--font-mono); resize: vertical; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ash); }

/* Toggle switch built on a checkbox. */
.switch-row { flex-direction: row; align-items: center; gap: 10px; color: var(--bone); min-height: var(--control-h); }
.switch-row input[type=checkbox]:not(.switch) { width: 18px; min-height: 18px; accent-color: var(--amethyst); }
input.switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 40px; min-height: 0; height: 22px; padding: 0; margin: 0;
  border-radius: 999px; border: 1px solid var(--seam); background: var(--deepslate-3);
  position: relative; cursor: pointer;
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ash); transition: transform .12s ease;
}
input.switch:checked { background: var(--amethyst-deep); border-color: var(--amethyst-deep); }
input.switch:checked::after { transform: translateX(18px); background: var(--bone); }
input.switch:disabled { opacity: 1; border-style: dashed; background: transparent; }
input.switch:disabled::after { background: var(--ash-dim); }
input.switch:disabled:checked { background: rgba(139, 95, 208, .3); border-color: var(--amethyst-deep); }

/* ---- Status: one vocabulary, an ore-colored square ---- */

.status { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--ash); white-space: nowrap; }
.status::before { content: ""; width: 9px; height: 9px; background: var(--ash-dim); flex: none; }
.status.online::before { background: var(--emerald); box-shadow: 0 0 0 3px rgba(76, 195, 138, .18); }
.status.online { color: var(--emerald); }
.status.starting::before { background: var(--gold); }
.status.starting { color: var(--gold); }
.status.stopped::before { background: var(--redstone); }
.status.idle::before { background: var(--ash-dim); }

/* ---- Login ---- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
  background: var(--deepslate-2); border: 1px solid var(--seam); border-radius: var(--radius-m); padding: 28px 24px;
}
.login-logo { image-rendering: pixelated; }

/* ---- App shell ---- */

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--seam); background: var(--deepslate-2);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font: 650 1.1rem var(--font-head); }
.brand img { image-rendering: pixelated; }
.topbar-actions { display: flex; gap: 8px; }

.layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  max-width: 1440px; margin: 0 auto; min-height: calc(100vh - 59px);
}

.sidebar {
  border-right: 1px solid var(--seam); padding: 20px 12px;
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
}
.sidebar-title { font-size: .95rem; color: var(--ash); padding: 0 10px 10px; font-weight: 600; }
.server-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.server-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  width: 100%; min-height: 56px; padding: 8px 10px; text-align: left; font-weight: 400;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-s);
}
.server-row:hover:not(:disabled) { background: var(--deepslate-2); }
.server-row:active:not(:disabled) { margin-top: 0; border-bottom-width: 1px; }
.server-row[aria-current="true"] { background: var(--deepslate-2); border-color: var(--seam); box-shadow: inset 3px 0 0 var(--amethyst); }
.server-row .status { grid-row: span 2; font-size: 0; gap: 0; }
.server-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-row .sub { grid-column: 2; color: var(--ash); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-row .players { grid-row: 1 / span 2; grid-column: 3; color: var(--ash); font-size: .82rem; font-variant-numeric: tabular-nums; }
.empty { color: var(--ash); padding: 8px 10px; font-size: .9rem; }

.detail { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-empty { display: grid; place-items: center; color: var(--ash); padding: 40px; }

.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
.detail-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.detail-title h2 { font-size: 1.75rem; overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: 8px; }
.detail-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--ash); }
.join { display: inline-flex; align-items: center; gap: 6px; }
.join code { color: var(--bone); background: var(--deepslate-0); padding: 2px 8px; border-radius: var(--radius-s); border: 1px solid var(--seam); }

.metrics {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2);
}
.metrics div { padding: 12px 16px; border-left: 1px solid var(--seam); }
.metrics div:first-child { border-left: none; }
.metrics dt { color: var(--ash); font-size: .85rem; }
.metrics dd { margin: 2px 0 0; font: 600 1.35rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.player-names { color: var(--ash); font-size: .9rem; margin-top: -8px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--seam); overflow-x: auto; scrollbar-width: none; }
.tabs button {
  min-height: 40px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--ash); padding: 0 14px; margin: 0;
}
.tabs button:hover { background: none !important; color: var(--bone); }
.tabs button:active { margin: 0; border-bottom-width: 2px; }
.tabs button.active { color: var(--bone); border-bottom-color: var(--amethyst); }
.tab-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- Console ---- */

.console {
  margin: 0; height: 52vh; min-height: 280px; overflow: auto;
  background: var(--deepslate-0); border: 1px solid var(--seam); border-radius: var(--radius-m);
  padding: 12px 14px; font: 12.5px/1.55 var(--font-mono); color: #d6d0c2;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.console .warn { color: var(--gold); }
.console .err { color: var(--redstone); }
.console .me { color: var(--amethyst); }
.console .muted { color: var(--ash-dim); }
.command { display: flex; gap: 8px; }
.command input { font-family: var(--font-mono); font-size: .9rem; }

/* ---- Properties ---- */

.panel-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-toolbar input { flex: 1 1 220px; width: auto; }
.notice {
  padding: 10px 14px; border-radius: var(--radius-s); color: var(--bone);
  background: rgba(232, 179, 58, .08); border: 1px solid rgba(232, 179, 58, .35);
}

.prop-groups { display: flex; flex-direction: column; gap: 22px; }
.prop-group h3 { color: var(--bone); margin-bottom: 6px; }
.prop-group h3 .count { color: var(--ash); font-weight: 400; font-size: .85rem; margin-left: 6px; }
.prop-list { border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2); }
.prop {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4px 16px;
  padding: 8px 14px; border-top: 1px solid var(--seam);
}
.prop:first-child { border-top: none; }
.prop .key { font: .88rem var(--font-mono); overflow-wrap: anywhere; }
.prop .lock { display: block; color: var(--ash); font: .8rem var(--font-ui); margin-top: 2px; }
.prop .control { display: flex; justify-content: flex-start; }
.prop .control input:not(.switch), .prop .control select { min-height: 34px; }
.prop.changed { box-shadow: inset 3px 0 0 var(--amethyst); }
.prop.changed .key { color: var(--amethyst); }
.prop.locked .key { color: var(--ash); }
.prop-add { display: flex; gap: 8px; flex-wrap: wrap; }
.prop-add input { flex: 1 1 200px; width: auto; }

.save-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; border-radius: var(--radius-m);
  background: var(--deepslate-3); border: 1px solid var(--amethyst-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.save-bar span { margin-right: auto; font-weight: 600; }

/* ---- Settings ---- */

.settings-form, .create-form { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.grid .wide { grid-column: 1 / -1; }
.grid-check { align-self: end; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.danger-zone {
  margin-top: 18px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  border: 1px solid rgba(224, 83, 63, .4); border-radius: var(--radius-m);
}
.danger-zone h3 { color: var(--redstone); }
.danger-zone .hint { grid-column: 1; }
.danger-zone button { grid-column: 2; grid-row: 1 / span 2; }

/* ---- Dialog and toast ---- */

dialog {
  background: var(--deepslate-2); color: var(--bone); border: 1px solid var(--seam);
  border-radius: var(--radius-m); padding: 24px; width: min(580px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(10, 10, 12, .65); }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--deepslate-3); border: 1px solid var(--seam); padding: 10px 16px; border-radius: var(--radius-s);
  max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.toast.error { border-color: var(--redstone); color: var(--redstone); }

/* ---- Players ---- */

.table-wrap { overflow-x: auto; border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2); }
.players-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.players-table th {
  text-align: left; font-weight: 600; color: var(--ash); padding: 10px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--seam); cursor: pointer; user-select: none;
}
.players-table th:hover { color: var(--bone); }
.players-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--amethyst); }
.players-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--amethyst); }
.players-table td { padding: 10px 14px; border-top: 1px solid var(--seam); white-space: nowrap; }
.players-table tbody tr { cursor: pointer; }
.players-table tbody tr:hover { background: var(--deepslate-3); }
.players-table tbody tr.open { box-shadow: inset 3px 0 0 var(--amethyst); background: var(--deepslate-3); }
.players-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.players-table .who { display: flex; align-items: center; gap: 8px; }
.players-table .who .status { font-size: 0; gap: 0; }
.pname { font-weight: 600; }
.tag { font-size: .75rem; padding: 1px 7px; border-radius: var(--radius-s); border: 1px solid var(--seam); color: var(--ash); }
.tag.bad { color: var(--redstone); border-color: rgba(224, 83, 63, .5); }

.player-detail { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--seam); border-radius: var(--radius-m); }
.player-detail button { align-self: flex-start; }
.detail-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.toplists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.toplist h4 { margin: 0 0 6px; font: 600 .95rem var(--font-head); }
.toplist ol { margin: 0; padding-left: 20px; }
.toplist li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; text-transform: capitalize; }

/* ---- Live ---- */

.live-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--emerald);
}
.live-badge::before {
  content: ""; width: 8px; height: 8px; background: var(--emerald); animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .35; } }
#players-note { flex: 1 1 260px; }
.live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.live-cards:empty { display: none; }
.live-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2);
  box-shadow: inset 3px 0 0 var(--emerald);
}
.live-card button { align-self: flex-start; }
.live-head { display: flex; align-items: center; gap: 8px; }
.live-head .status { font-size: 0; gap: 0; }
.live-head .muted { margin-left: auto; text-transform: capitalize; }
.meter { display: grid; grid-template-columns: 56px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: .85rem; }
.meter-label { color: var(--ash); }
.meter-value { text-align: right; font-variant-numeric: tabular-nums; }
.meter-bar { height: 8px; background: var(--deepslate-0); border-radius: 2px; overflow: hidden; }
.meter-bar span { display: block; height: 100%; transition: width .4s ease; }
.meter-bar.health span { background: var(--redstone); }
.meter-bar.food span { background: #c98a3c; }
.warn-text { color: var(--gold); }
.bad-text { color: var(--redstone); }
#map-follow { width: auto; min-width: 160px; }

/* ---- Alerts ---- */

.alerts { display: flex; flex-direction: column; gap: 10px; }
.alerts:empty { display: none; }
.alert {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  padding: 12px 14px 12px 16px; border-radius: var(--radius-m); border: 1px solid;
}
.alert > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alert p { margin: 0; }
.alert.bad { border-color: rgba(224, 83, 63, .55); background: rgba(224, 83, 63, .08); }
.alert.bad strong { color: var(--redstone); }
.alert.warn { border-color: rgba(232, 179, 58, .45); background: rgba(232, 179, 58, .07); }
.alert.warn strong { color: var(--gold); }
.alert button { flex: none; }
.alert-line { font-size: .8rem; color: var(--ash); overflow-wrap: anywhere; }

/* ---- Backups ---- */

.schedule-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.schedule-form label { flex: 0 1 220px; }
.backups-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.backups-table th { text-align: left; font-weight: 600; color: var(--ash); padding: 10px 14px; border-bottom: 1px solid var(--seam); }
.backups-table td { padding: 8px 14px; border-top: 1px solid var(--seam); white-space: nowrap; }
.backups-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.row-actions .link-button { min-height: 28px; padding: 0 8px; font-size: .85rem; }
.restore-steps { margin: 0; padding-left: 20px; color: var(--ash); display: flex; flex-direction: column; gap: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Player management ---- */

.player-manage { display: flex; flex-direction: column; gap: 6px; }
.player-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Bell and alerts panel ---- */

.bell-wrap { position: relative; }
.bell { position: relative; min-width: 42px; padding: 0 10px; color: var(--bone); }
.bell svg { display: block; }
.bell-count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--redstone); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px;
}
.bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(420px, calc(100vw - 24px));
  max-height: min(70vh, 640px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--deepslate-2); border: 1px solid var(--seam); border-radius: var(--radius-m);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.bell-head { display: flex; justify-content: space-between; align-items: center; }
.bell-head h2 { font-size: 1.05rem; }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 4px; border-top: 1px solid var(--seam); }
.alert-item:first-child { border-top: none; }
.alert-item .status { font-size: 0; gap: 0; margin-top: 5px; }
.alert-item p { margin: 2px 0 0; }
.alert-item.unread strong { color: var(--bone); }
.alert-item:not(.unread) strong { color: var(--ash); font-weight: 500; }
.empty-alerts { padding: 8px 4px; }
.alert-settings { border-top: 1px solid var(--seam); padding-top: 10px; }
.alert-settings summary { cursor: pointer; color: var(--ash); font-weight: 600; }
.alert-settings[open] summary { margin-bottom: 10px; }
.webhook-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---- Mods ---- */

.modpack-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2); }
.modpack-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.modpack-head h3 { font-size: 1.2rem; }
.modpack-head p { margin: 2px 0 0; }
.mods-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mods-table th { text-align: left; font-weight: 600; color: var(--ash); padding: 10px 14px; border-bottom: 1px solid var(--seam); cursor: pointer; white-space: nowrap; }
.mods-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--amethyst); }
.mods-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--amethyst); }
.mods-table td { padding: 8px 14px; border-top: 1px solid var(--seam); vertical-align: top; }
.mod-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.mod-name a { color: var(--bone); text-decoration: none; }
.mod-name a:hover { color: var(--amethyst); text-decoration: underline; }
.mod-id { font: .78rem var(--font-mono); font-weight: 400; }
.mod-desc { margin: 2px 0 0; max-width: 70ch; }
.mod-version { font: .85rem var(--font-mono); white-space: nowrap; }
.inline-input { width: auto; flex: 1; min-height: 32px; }

/* ---- World ---- */

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; margin: 0; }
.facts dt { color: var(--ash); font-size: .85rem; }
.facts dd { margin: 2px 0 0; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; text-transform: none; }
.facts dd code { font-weight: 400; overflow-wrap: anywhere; }
.facts.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.section-title { margin-bottom: 4px; }
.dims { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-2); }
.dims li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 2fr) 80px 100px; gap: 14px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--seam);
}
.dims li:first-child { border-top: none; }
.dim-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim-bar { height: 8px; background: var(--deepslate-0); border-radius: 2px; overflow: hidden; }
.dim-bar span { display: block; height: 100%; background: var(--amethyst-deep); }
.dim-size { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Map ---- */

.map-buttons { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.map-buttons button { min-width: 38px; }
#map-dim { width: auto; min-width: 180px; }
.map-frame {
  position: relative; height: 62vh; min-height: 320px; overflow: hidden; touch-action: none;
  border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--deepslate-0);
}
.map-frame canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.map-frame canvas:active { cursor: grabbing; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ash); padding: 24px; text-align: center; }

/* ---- Small screens: the list stacks on top ---- */

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sidebar { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--seam); padding: 12px 8px; }
  .detail { padding: 18px 16px 32px; }
  .detail-head { grid-template-columns: minmax(0, 1fr); }
  .detail-actions button { flex: 1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics div:nth-child(odd) { border-left: none; }
  .metrics div:nth-child(n+3) { border-top: 1px solid var(--seam); }
  .prop { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .toplists { grid-template-columns: 1fr; }
  .dims li { grid-template-columns: minmax(0, 1fr) 80px; }
  .dims .dim-bar { grid-column: 1 / -1; grid-row: 2; }
  .dims .dim-regions { display: none; }
  .map-buttons { margin-left: 0; }
  .danger-zone { grid-template-columns: minmax(0, 1fr); }
  .danger-zone button { grid-column: 1; grid-row: auto; justify-self: start; }
  .topbar { padding: 10px 16px; }
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}