/* ==========================================================================
   MVR THEME 17.3.0 — "Signal"
   Loaded AFTER style.css / mvr-electron.css. Overrides only; no file replaced.

   Direction
   ---------
   The panel is a control console for an anticheat. The old accent (var(--mvr-accent-33))
   is the stock Tailwind blue every dashboard ships with. This layer moves the
   product to an amber-gold primary with a crimson danger channel on obsidian:
   amber is the language of instrumentation and warning, which is what this
   product actually does, and it is not blue.

   Signature
   ---------
   Every actionable surface carries a 2px "signal edge" on its left that
   ignites on hover/active. It is the same visual grammar as a detection row
   lighting up in the log, applied to controls.
   ========================================================================== */

:root,
:root[data-theme="dark"],
html[data-theme="dark"] body {
  /* Primary — amber/gold. Actions, focus, active nav. */
  --accent:        #f0a22e;
  --accent2:       #ffc766;
  --accentDeep:    #d1801a;
  --accentInk:     #1a1206;          /* text ON amber */
  --accentSoft:    rgba(240,162,46,.12);
  --accentLine:    rgba(240,162,46,.34);

  /* Danger — crimson. Bans, destructive, alerts. */
  --danger:        #e5484d;
  --dangerDeep:    #b8353a;
  --dangerSoft:    rgba(229,72,77,.12);
  --dangerLine:    rgba(229,72,77,.36);

  /* Positive — restrained jade, used sparsely for "online"/"saved" only. */
  --ok:            #3fb27f;
  --okSoft:        rgba(63,178,127,.12);

  --glow:          0 0 0 1px rgba(240,162,46,.14), 0 0 22px rgba(240,162,46,.08);
  --ring:          0 0 0 3px rgba(240,162,46,.22);

  /* Compact control metrics — the old buttons were oversized. */
  --btn-pad-y:     7px;
  --btn-pad-x:     13px;
  --btn-radius:    8px;
  --btn-font:      12px;
}

/* Kill the blue ambient wash in the page background. */
body::before,
body::after { filter: hue-rotate(178deg) saturate(.72); }


/* --------------------------------------------------------------------------
   HIDDEN ATTRIBUTE — must actually hide
   --------------------------------------------------------------------------
   The `hidden` attribute only carries the UA rule `display:none`, which ANY
   author class with a display value beats. `.cfg-savebar{display:flex}` was
   therefore visible permanently, even though _config.js correctly sets
   `fb.hidden = !n`. Same class of bug hit the read-only notices and the roles
   publish modal. One global rule fixes every instance.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   BUTTONS — flat, compact, hairline. No gradient, no drop glow.
   -------------------------------------------------------------------------- */
.btn,
.cfg-btn,
button.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.25;
  cursor: pointer;
  background: #0e1622;
  color: var(--mvr-text-59);
  border: 1px solid var(--mvr-surface-39);
  box-shadow: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  overflow: hidden;
}

/* The signature signal edge. */
.btn::before,
.cfg-btn::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent;
  transition: background .14s ease;
}
.btn:hover,
.cfg-btn:hover { background: #16202e; border-color: #33445a; color: var(--mvr-text-56); }
.btn:hover::before,
.cfg-btn:hover::before { background: var(--accent); }

.btn:focus-visible,
.cfg-btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accentLine); }

.btn:active,
.cfg-btn:active { transform: translateY(1px); }

.btn[disabled],
.cfg-btn[disabled],
.btn:disabled,
.cfg-btn:disabled { opacity: .42; cursor: not-allowed; }
.btn[disabled]:hover::before,
.cfg-btn[disabled]:hover::before { background: transparent; }

/* Primary — solid amber. Used once per view, for the committing action. */
.btn.primary,
.cfg-btn.primary,
.btn.blue {
  background: var(--accent);
  color: var(--accentInk);
  border-color: var(--accentDeep);
  font-weight: 750;
}
.btn.primary:hover,
.cfg-btn.primary:hover,
.btn.blue:hover { background: var(--accent2); color: var(--accentInk); border-color: var(--accent); }
.btn.primary::before,
.cfg-btn.primary::before { display: none; }

/* Danger */
.btn.danger, .cfg-btn.danger {
  background: var(--dangerSoft); color: var(--mvr-accent-24); border-color: var(--dangerLine);
}
.btn.danger:hover, .cfg-btn.danger:hover { background: var(--danger); color: var(--mvr-text-1); border-color: var(--danger); }
.btn.danger:hover::before { background: var(--mvr-text-1); }

/* Ghost / secondary */
.btn.ghost, .btn.secondary {
  background: transparent; border-color: #223041; color: var(--mvr-text-60);
}
.btn.ghost:hover, .btn.secondary:hover { background: var(--mvr-surface-62); color: var(--mvr-text-59); }

.btn.small, .cfg-btn.small { padding: 5px 10px; font-size: 11px; border-radius: 7px; }

/* --------------------------------------------------------------------------
   DISCORD SIGN-IN — the old one was a plain blurple pill. This is a dark
   console-grade control with the mark inline and an amber focus ring.
   -------------------------------------------------------------------------- */
.btn-discord,
a[href="/auth/discord"].btn,
a[href="/auth/discord"].hero-primary,
a[href="/auth/discord"].home-signin {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #131c29, #0c141e);
  border: 1px solid #2a3a4d;
  color: #eaf1f8;
  font-weight: 700; font-size: 13px;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.btn-discord::before,
a[href="/auth/discord"].btn::before { display: none; }

.btn-discord:hover,
a[href="/auth/discord"].btn:hover,
a[href="/auth/discord"].hero-primary:hover,
a[href="/auth/discord"].home-signin:hover {
  border-color: var(--accentLine);
  background: linear-gradient(180deg, #1a2432, #101926);
  transform: translateY(-1px);
}
.btn-discord:focus-visible,
a[href="/auth/discord"].btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Mark, injected via CSS so no HTML edit is required on legacy pages. */
a[href="/auth/discord"].btn::after,
a[href="/auth/discord"].hero-primary::after,
a[href="/auth/discord"].home-signin::after {
  content: '';
  order: -1;
  width: 17px; height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  -webkit-mask: var(--discord-mark) center/contain no-repeat;
          mask: var(--discord-mark) center/contain no-repeat;
}
:root {
  --discord-mark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path d='M524.5 69.8a1.5 1.5 0 0 0-.8-.7A485 485 0 0 0 404.1 32a1.8 1.8 0 0 0-1.9.9 337.5 337.5 0 0 0-14.9 30.6 447.8 447.8 0 0 0-134.4 0 309.5 309.5 0 0 0-15.1-30.6 1.9 1.9 0 0 0-1.9-.9 483.7 483.7 0 0 0-119.6 37.1 1.7 1.7 0 0 0-.8.7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 480.2a1.9 1.9 0 0 0 2.1-.7 348 348 0 0 0 30-48.8 1.9 1.9 0 0 0-1-2.6 321.2 321.2 0 0 1-45.9-21.9 1.9 1.9 0 0 1-.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9.2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1-.2 3.1 301.4 301.4 0 0 1-45.9 21.8 1.9 1.9 0 0 0-1 2.6 391 391 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1.7 486 486 0 0 0 147.1-74.4 1.9 1.9 0 0 0 .8-1.4c12.2-126.9-20.6-236.9-87.1-334.6zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.6-23.4 59.2-52.8 59.2zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.3-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.6-23.1 59.2-52.8 59.2z'/></svg>");
}

/* --------------------------------------------------------------------------
   NAV / ACTIVE STATE
   -------------------------------------------------------------------------- */
.nav a.active { background: linear-gradient(90deg, var(--accentSoft), transparent); }
.nav a.active::before { background: var(--accent); box-shadow: 0 0 10px rgba(240,162,46,.5); }
.nav a.active .nav-icon { color: var(--accent2); }
.nav a:hover { background: var(--mvr-surface-62); }
.eyebrow { color: var(--accent2); }

/* Toggles */
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { background: var(--accentInk); }

/* Inputs */
.input:focus, .select:focus, .textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accentLine);
  box-shadow: var(--ring);
  outline: none;
}
.searchbox:focus-within { border-color: var(--accentLine); box-shadow: var(--ring); }

/* Brand */
.brand-logo { box-shadow: 0 0 0 1px var(--accentLine), 0 6px 18px rgba(240,162,46,.14); }

/* --------------------------------------------------------------------------
   SERVERS PANEL — the list was unsorted with inconsistent colour. This gives
   it a fixed grammar: online is jade, offline is grey, foreign servers are
   labelled, and the name column is monospaced-aligned so long names truncate
   predictably instead of pushing the row.
   -------------------------------------------------------------------------- */
.srv-grid, .servers-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.srv-card, .server-card {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--mvr-surface-28);
  border: 1px solid var(--mvr-surface-112);
  border-radius: 10px;
  transition: border-color .14s ease, background .14s ease;
}
.srv-card:hover, .server-card:hover { border-color: #2c3d51; background: #0e1724; }

.srv-card[data-online="true"]::before,
.server-card.online::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px;
  border-radius:0 2px 2px 0; background: var(--ok);
}
.srv-card[data-online="false"]::before,
.server-card.offline::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px;
  border-radius:0 2px 2px 0; background: #35485c;
}

.srv-name, .server-card .name {
  min-width: 0;
  font-weight: 700; font-size: 13px; color: #e6eef7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srv-sub, .server-card .sub {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; color: var(--mvr-line-28); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.srv-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.srv-badge.online  { background: var(--okSoft);     color: var(--mvr-accent-25); }
.srv-badge.offline { background: var(--mvr-surface-113);          color: #66798d; }
.srv-badge.foreign { background: var(--accentSoft); color: var(--accent2); }
.srv-badge.protected { background: var(--dangerSoft); color: var(--mvr-accent-24); }

/* --------------------------------------------------------------------------
   DETECTION ROWS — tighter, aligned, with a state channel on the left.
   -------------------------------------------------------------------------- */
.det-row, .cfg-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.det-row:hover, .cfg-row:hover { background: #0d1621; border-color: var(--mvr-surface-114); }
.det-row .label, .cfg-row .label { font-size: 12px; font-weight: 620; color: var(--mvr-text-29); min-width: 0; }

.det-badge {
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; margin-left: 7px; vertical-align: middle;
}
.det-badge.active { background: var(--okSoft);      color: var(--mvr-accent-25); }
.det-badge.beta   { background: var(--accentSoft);  color: var(--accent2); }
.det-badge.api    { background: var(--mvr-surface-113);            color: var(--mvr-text-61); }
.det-badge.adv    { background: rgba(139,92,246,.12); color: #b39bf5; }

/* Punishment select gets colour-coded so a config is scannable at a glance. */
select[data-action="log"]  { color: var(--mvr-text-61); }
select[data-action="warn"] { color: var(--accent2); }
select[data-action="kick"] { color: #ffab5e; }
select[data-action="ban"]  { color: #ff8f92; }

/* --------------------------------------------------------------------------
   ANNOUNCEMENT COMPOSER PREVIEW
   -------------------------------------------------------------------------- */
.ann-preview {
  border-radius: 10px; padding: 16px 18px; border: 1px solid var(--mvr-surface-115);
  font-weight: 600; line-height: 1.5;
  transition: background .2s ease, color .2s ease;
}
.ann-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ann-swatch {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.ann-swatch[aria-pressed="true"] { border-color: var(--accent2); }

/* --------------------------------------------------------------------------
   ROLES / PUBLISHED CONFIGS
   -------------------------------------------------------------------------- */
.role-card {
  display: grid; gap: 10px; padding: 14px;
  background: var(--mvr-surface-28); border: 1px solid var(--mvr-surface-112); border-radius: 11px;
  transition: border-color .14s ease;
}
.role-card:hover { border-color: var(--accentLine); }
.role-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--mvr-line-28); font-family: var(--mono, monospace); }
.role-vote { display: inline-flex; gap: 4px; align-items: center; }
.role-vote button {
  background: var(--mvr-surface-62); border: 1px solid var(--mvr-surface-39); color: var(--mvr-text-60);
  border-radius: 7px; padding: 4px 9px; font-size: 11px; cursor: pointer;
}
.role-vote button[aria-pressed="true"].up   { border-color: var(--ok);     color: var(--mvr-accent-25); }
.role-vote button[aria-pressed="true"].down { border-color: var(--danger); color: var(--mvr-accent-24); }

.role-status { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.role-status.pending  { background: var(--accentSoft); color: var(--accent2); }
.role-status.approved { background: var(--okSoft);     color: var(--mvr-accent-25); }
.role-status.rejected { background: var(--dangerSoft); color: var(--mvr-accent-24); }

/* --------------------------------------------------------------------------
   REMOVED CONTROLS
   Kept as CSS so no page needs editing to drop them, and so re-enabling is a
   one-line change rather than a re-import.
   -------------------------------------------------------------------------- */
[data-action="stop-all-screens"],
#stopAllScreens,
.btn-stop-all-screens,
[data-legacy-control] { display: none !important; }

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 720px) {
  .srv-grid, .servers-grid { grid-template-columns: 1fr; }
  .btn, .cfg-btn { padding: 8px 12px; }
}
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* --------------------------------------------------------------------------
   ADMIN PERMISSIONS MODAL — one scroll region, not three
   --------------------------------------------------------------------------
   The modal had `.mvr-modal .body{overflow:auto}` wrapping
   `.perm-list{max-height:55vh;overflow:auto}`, so two vertical scrollbars sat
   side by side, and `.adm-perm-editor{min-width:520px}` forced a THIRD,
   horizontal bar on narrower windows. The body scrolls now; nothing inside it
   does.
   -------------------------------------------------------------------------- */
.adm-perm-editor { min-width: 0 !important; width: min(560px, 92vw); }

.adm-perm-editor .perm-list,
.mvr-modal .perm-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0;
  border: 1px solid var(--mvr-surface-114);
  border-radius: 9px;
  padding: 2px 12px;
}

.mvr-modal .body {
  overflow-y: auto;
  overflow-x: hidden !important;
  max-height: 72vh;
  overscroll-behavior: contain;
}

/* Nested children read as a branch of their parent rather than a flat list. */
.adm-perm-editor .perm-child {
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--mvr-surface-115);
  margin-left: 7px;
}

/* Native selects render white-on-blue in the OS popup. Dark them down and let
   the optgroup labels carry the grouping. */
.adm-perm-filter select,
select.select, .select {
  background-color: var(--mvr-surface-28);
  color: var(--mvr-text-29);
}
.adm-perm-filter select option,
select option { background: var(--mvr-surface-28); color: var(--mvr-text-29); padding: 4px; }
.adm-perm-filter select optgroup,
select optgroup {
  background: var(--mvr-surface-96);
  color: var(--accent2);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .06em;
}


/* ==========================================================================
   17.4.2 — SIDEBAR REBUILD + OVERFLOW FIX
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE SIDEBAR DISAPPEARING ON /models — ROOT CAUSE
   --------------------------------------------------------------------------
   .sidebar is position:sticky with top:0. Sticky pins an element VERTICALLY;
   it does nothing horizontally. The models page sets max-width:none and its
   grid overflowed the viewport, so the page gained a horizontal scrollbar —
   and scrolling right slid the sidebar off screen, leaving the filter buttons
   stranded at the left edge. It was never hidden; it was scrolled away.

   Fixing the overflow fixes the sidebar. Nothing is force-positioned.
   -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
.app { max-width: 100vw; overflow-x: hidden; }
.content { min-width: 0; overflow-x: hidden; }
.page { min-width: 0; max-width: 100%; }
.ml-page { min-width: 0; max-width: 100% !important; overflow-x: hidden; }
.ml-grid, .cfg-grid, .mp-grid { min-width: 0; max-width: 100%; }
/* Long unbroken strings (hashes, identifiers, webhook URLs) were a second
   source of overflow. */
.ml-hash, .adm-table code, .role-meta, code, pre { overflow-wrap: anywhere; word-break: break-word; }

/* --------------------------------------------------------------------------
   SIDEBAR — flat, quiet, legible. No gradients, no colour-coded groups.
   One accent, used only to mark the page you are on.
   -------------------------------------------------------------------------- */
.sidebar {
  background: #060a11 !important;
  border-right: 1px solid var(--mvr-surface-63) !important;
  box-shadow: none !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: #1a2430; border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Group headings: quiet labels, not decoration. */
.nav-section, .sidebar .nav-section.collapsible {
  color: var(--mvr-line-29) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  padding: 14px 16px 6px !important;
  background: transparent !important;
  border: 0 !important;
}
.nav-chevron { opacity: .45; font-size: 10px; }

/* Items: uniform height, one hover state, one active state. */
.nav a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px !important;
  margin: 1px 8px;
  border-radius: 7px;
  color: #90a4b8 !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  background: transparent !important;
  transition: background .12s ease, color .12s ease;
}
.nav a:hover { background: #0e1620 !important; color: #dfe9f3 !important; }

.nav a.active {
  background: #121b26 !important;
  color: var(--mvr-text-1) !important;
  font-weight: 650 !important;
}
.nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent) !important;
  box-shadow: none !important;
}
.nav a { position: relative; }

/* Icons: same weight as the label, never a second colour. */
.nav-icon {
  width: 16px; flex: 0 0 16px;
  display: grid; place-items: center;
  font-size: 12px;
  color: inherit !important;
  opacity: .75;
}
.nav a.active .nav-icon { opacity: 1; color: var(--accent2) !important; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Server picker + brand */
.brand, .sidebar .brand { padding: 16px 16px 12px !important; border-bottom: 1px solid var(--mvr-surface-63); }
.searchbox { margin: 12px 12px 4px !important; background: var(--mvr-surface-116) !important; border-color: var(--mvr-surface-117) !important; border-radius: 8px; }

/* Bottom block */
.sidebar-bottom { border-top: 1px solid var(--mvr-surface-63) !important; background: #05090f !important; padding: 10px !important; }
.side-status { font-size: 9px !important; letter-spacing: .1em; color: var(--mvr-line-29) !important; padding: 4px 6px 8px !important; }
.profile-chip {
  background: var(--mvr-surface-116) !important;
  border: 1px solid var(--mvr-surface-117) !important;
  border-radius: 9px !important;
  padding: 8px !important;
  width: 100%;
}
.profile-chip:hover { border-color: #2a3846 !important; }
.profile-avatar {
  background-color: #12202f !important;
  border: 1px solid var(--mvr-surface-39) !important;
  color: #8fb3d0 !important;
  background-size: cover !important;
  background-position: center !important;
}
.profile-meta b { font-size: 12px; color: #e2ecf6; }
.profile-meta small { font-size: 9.5px; color: #55697d; font-family: var(--mono, monospace); }

/* --------------------------------------------------------------------------
   MODEL TILES — the art is low-resolution game rips. Upscaling it to fill a
   300px tile is what made it look smeared. Tiles are smaller now and the image
   is never enlarged past its natural size.
   -------------------------------------------------------------------------- */
.ml-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
@media (min-width: 1500px) { .ml-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; } }
@media (max-width: 820px)  { .ml-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; } }

.ml-visual { height: 116px !important; background: var(--mvr-surface-94) !important; }
.ml-visual img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  padding: 8px !important;
  margin: auto;
}
.ml-card:hover .ml-visual img { transform: none !important; }
.ml-card { border-radius: 9px !important; }
.ml-name { font-size: 11px !important; }
.ml-hash { font-size: 9px !important; }


/* --------------------------------------------------------------------------
   17.6.0 — the floating hamburger was visible on desktop
   --------------------------------------------------------------------------
   `.mobile-bar` is the mobile menu toggle. Its base rule had no media query, so
   it rendered on every viewport — the three dots stacked at the top-left of a
   desktop window, overlapping the sidebar that was already there.
   It belongs only where the sidebar is actually collapsed.
   -------------------------------------------------------------------------- */
.mobile-bar, .mobile-menu { display: none !important; }
@media (max-width: 1024px) {
  .mobile-bar, .mobile-menu {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 80;
    width: 38px; height: 38px; padding: 0;
    background: var(--mvr-surface-28); border: 1px solid var(--mvr-surface-39); border-radius: 9px;
    color: #cfdcea; font-size: 15px;
  }
}


/* --------------------------------------------------------------------------
   17.6.0 — the mobile menu button was rendering on desktop
   --------------------------------------------------------------------------
   .mobile-bar is meant for narrow viewports only, but nothing scoped it, so
   the hamburger sat over the sidebar on desktop. It now appears only when the
   sidebar is actually collapsed.
   -------------------------------------------------------------------------- */
.mobile-bar, .mobile-menu { display: none !important; }
@media (max-width: 1000px) {
  .mobile-bar, .mobile-menu { display: inline-flex !important; }
}