/* ============================================================
   СерверВики — Minecraft Server Wiki design system
   Balanced "blocky" aesthetic: pixel accents + readable body
   ============================================================ */

/* ---- Fonts ---- */
/* No external font CDN: the body falls back to the system sans stack (see --font-body).
   Keeps the strict CSP intact and removes a third-party dependency. The pixel
   heading font 'Minecraft' is self-hosted below. */
@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/minecraft-rus.woff') format('woff'),
       url('/fonts/minecraft-rus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-pixel: 'Minecraft', 'Pixelify Sans', monospace;
  --font-mono:  'Minecraft', monospace;
  --font-body:  'Source Sans 3', system-ui, sans-serif;

  /* Overworld (default) palette */
  --page-bg-a: #6b4a32;
  --page-bg-b: #5d4029;
  /* Background tint multiplied onto the dirt texture (changes per theme). */
  --bg-tint: #8a6043;
  --vignette: rgba(0,0,0,.38);

  --panel:       #c6c6c6;   /* inventory gray */
  --panel-2:     #d4d4d4;
  --panel-light: #ffffff;   /* bevel highlight */
  --panel-dark:  #565656;   /* bevel shadow */
  --panel-edge:  #1d1d1d;   /* outer black */

  --slot-bg:     #8b8b8b;   /* inset inventory slot */
  --slot-light:  #373737;
  --slot-dark:   #ffffff;

  --ink:        #2b2b2b;
  --ink-soft:   #5a5a5a;
  --ink-faint:  #7d7d7d;

  --link:       #1d4ed8;
  --link-visited:#6d28d9;

  --accent:     #5fa838;   /* grass green */
  --accent-dark:#3f7d22;
  --accent-2:   #7fb238;   /* grass top */
  --gold:       #f6c213;
  --diamond:    #38c3c0;
  --redstone:   #c0392b;
  --emerald:    #2bb36a;

  --header-grass:#6aa632;
  --header-grass-2:#5b9329;
  --header-dirt: #8a6044;
  --header-dirt-2:#79553a;
  --header-ink:  #ffffff;

  --tab-active:  #c6c6c6;
  --tab-bg:      #9a9a9a;

  --shadow-pixel: 4px 4px 0 rgba(0,0,0,.35);
}

/* ---- Theme: Nether ---- */
[data-theme="nether"] {
  --page-bg-a: #3a0f12;
  --page-bg-b: #2a0a0d;
  --bg-tint: #fa3934;
  --vignette: rgba(0,0,0,.55);
  --panel:       #5a2b2b;
  --panel-2:     #663232;
  --panel-light: #8a4a44;
  --panel-dark:  #2a1313;
  --panel-edge:  #140707;
  --slot-bg:     #401d1d;
  --slot-light:  #190a0a;
  --slot-dark:   #8a4a44;
  --ink:        #f3e3d6;
  --ink-soft:   #d8b9a6;
  --ink-faint:  #b08a78;
  --link:       #ffb454;
  --link-visited:#ff8fb0;
  --accent:     #c0392b;
  --accent-dark:#8c2017;
  --accent-2:   #e06b3a;
  --gold:       #ffc63a;
  --header-grass:#7a1f1c;
  --header-grass-2:#5e1714;
  --header-dirt: #3a1411;
  --header-dirt-2:#28100e;
  --header-ink:  #ffd9a0;
  --tab-active:  #5a2b2b;
  --tab-bg:      #3f1d1d;
}

/* ---- Theme: The End ---- */
[data-theme="end"] {
  --page-bg-a: #16121f;
  --page-bg-b: #0f0c16;
  --bg-tint: #7350ff;
  --vignette: rgba(0,0,0,.6);
  --panel:       #2c2740;
  --panel-2:     #33304a;
  --panel-light: #4d466b;
  --panel-dark:  #15121f;
  --panel-edge:  #080610;
  --slot-bg:     #1e1a2c;
  --slot-light:  #0c0a14;
  --slot-dark:   #4d466b;
  --ink:        #e9e6d2;
  --ink-soft:   #c3bfd6;
  --ink-faint:  #8f8aa8;
  --link:       #d8c45a;
  --link-visited:#c79bf0;
  --accent:     #a06cd5;
  --accent-dark:#7843b8;
  --accent-2:   #c9a14a;
  --gold:       #e6d27a;
  --header-grass:#3a2d5c;
  --header-grass-2:#2c2247;
  --header-dirt: #1c1730;
  --header-dirt-2:#141022;
  --header-ink:  #e9e6d2;
  --tab-active:  #2c2740;
  --tab-bg:      #1e1a2c;
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  /* Tiled Minecraft dirt texture, recolored per theme by multiplying the
     theme tint onto it (so the background really changes colour per dimension). */
  background-color: var(--bg-tint);
  background-image: url('/dirt.png');
  background-size: 64px 64px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100%;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, var(--vignette) 100%);
}

img { image-rendering: pixelated; }

::selection { background: var(--accent); color: #fff; }

/* ===== Form controls follow the theme palette =====
   Native inputs default to UA white; combined with the light ink of the dark
   themes that produced white text on a white field. The :where() wrapper keeps
   specificity at zero, so every explicitly styled input class still wins, and
   color-scheme stops browsers force-restyling controls in OS dark mode. */
:root { color-scheme: light; }
[data-theme="nether"], [data-theme="end"] { color-scheme: dark; }
input, textarea, select, button { font-family: inherit; }
input:where(:not([type=checkbox], [type=radio], [type=range], [type=file],
                 [type=color], [type=submit], [type=button], [type=reset])),
textarea, select {
  color: var(--ink);
  background-color: var(--slot-bg);
  caret-color: var(--ink);
}
select option { color: var(--ink); background-color: var(--panel); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
::placeholder { color: var(--ink-faint); opacity: 1; }
/* Chrome autofill paints its own white background — repaint it with the slot. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--slot-bg) inset;
}

/* ============================================================
   Pixel bevel utilities (Minecraft GUI panels)
   ============================================================ */
.mc-bevel {
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  box-shadow:
    inset 3px 3px 0 0 var(--panel-light),
    inset -3px -3px 0 0 var(--panel-dark);
}
.mc-bevel-sm {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  box-shadow:
    inset 2px 2px 0 0 var(--panel-light),
    inset -2px -2px 0 0 var(--panel-dark);
}
/* Inset (sunken) — inventory slot / input field */
.mc-inset {
  background: var(--slot-bg);
  border: 2px solid var(--panel-edge);
  box-shadow:
    inset 2px 2px 0 0 var(--slot-light),
    inset -2px -2px 0 0 var(--slot-dark);
}

/* ============================================================
   Layout
   ============================================================ */
.wiki {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 18px 60px;
}

/* ---- Top utility bar ---- */
.mc-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.mc-topbar__user { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 18px; color: var(--ink-soft); }
.mc-topbar__user b { color: var(--ink); }
.mc-topbar__nav { margin-left: auto; display: flex; gap: 6px; }
.mc-topbar__nav a {
  font-family: var(--font-pixel); font-weight: 700; font-size: 13px; cursor: pointer;
  color: var(--ink); text-decoration: none; padding: 7px 11px;
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
}
.mc-topbar__nav a:hover { background: var(--accent); color: #fff; }
.mc-topbar__nav a.is-here { background: var(--accent-dark); color: #fff; }
/* Current-user profile button (avatar + name) */
.mc-topbar__nav a.mc-meprofile { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; }
.mc-meprofile__av {
  width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); background-size: cover; background-position: center;
  color: #fff; font-family: var(--font-pixel); font-size: 12px;
  border: 2px solid var(--panel-edge); image-rendering: auto;
}
.mc-meprofile:hover .mc-meprofile__av { border-color: rgba(0,0,0,.5); }
.mc-meprofile__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Header / grass banner ---- */
.mc-header {
  border: 3px solid var(--panel-edge);
  box-shadow: var(--shadow-pixel);
  /* No overflow:hidden — it used to clip the search results dropdown. The grass
     strip is the first child so the top edge stays clean without clipping. */
  position: relative;
  margin-bottom: 14px;
}
.mc-header__grass {
  background:
    repeating-linear-gradient(90deg, var(--header-grass) 0 9px, var(--header-grass-2) 9px 18px);
  height: 14px;
  border-bottom: 3px solid rgba(0,0,0,.35);
}
.mc-header__body {
  background:
    repeating-linear-gradient(90deg, var(--header-dirt) 0 9px, var(--header-dirt-2) 9px 18px);
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px;
  flex-wrap: wrap;
}
.mc-logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mc-logo__cube {
  width: 52px; height: 52px; flex: 0 0 auto;
  background:
    linear-gradient(135deg, var(--accent-2) 0 50%, var(--accent) 50% 100%);
  border: 3px solid var(--panel-edge);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.4);
  position: relative;
}
.mc-logo__cube::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 13px 13px;
}
.mc-logo__text { min-width: 0; }
.mc-logo__title {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 28px; line-height: 1.1;
  color: var(--header-ink);
  text-shadow: 3px 3px 0 rgba(0,0,0,.55);
  letter-spacing: .5px;
}
.mc-logo__sub {
  font-family: var(--font-mono);
  font-size: 18px; white-space: nowrap;
  color: rgba(255,255,255,.82);
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  margin-top: 3px;
}

/* ---- Search ---- */
.mc-search { margin-left: auto; position: relative; width: 320px; max-width: 100%; z-index: 50; }
.mc-search__bar { display: flex; align-items: stretch; gap: 8px; }
.mc-search__inputwrap { flex: 1; min-width: 0; display: flex; align-items: center; padding: 2px 10px; }
.mc-search__input {
  width: 100%; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-family: var(--font-mono); font-size: 16px;
  color: var(--ink); padding: 7px 0;
}
.mc-search__input::placeholder { color: var(--ink-faint); }
.mc-search__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; color: #fff; background: var(--accent);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
  cursor: pointer;
}
.mc-search__btn:hover { background: var(--accent-dark); }
.mc-search__btn:active { box-shadow: inset -2px -2px 0 rgba(255,255,255,.25), inset 2px 2px 0 rgba(0,0,0,.4); }
.mc-search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: var(--panel); border: 3px solid var(--panel-edge);
  box-shadow: var(--shadow-pixel);
  max-height: 340px; overflow-y: auto;
}
.mc-search__result {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 11px; cursor: pointer; border-bottom: 2px solid rgba(0,0,0,.12);
  color: var(--ink);
}
.mc-search__result:hover { background: var(--accent); color: #fff; }
.mc-search__result:hover .mc-search__rmeta { color: rgba(255,255,255,.85); }
.mc-search__rtitle { font-weight: 700; font-size: 15px; }
.mc-search__rmeta { font-family: var(--font-mono); font-size: 16px; color: var(--ink-faint); margin-left: auto; }
.mc-search__empty { padding: 16px; font-family: var(--font-mono); font-size: 18px; color: var(--ink-soft); }

/* ---- Breadcrumbs ---- */
.mc-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 14px; margin-bottom: 12px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 18px;
}
.mc-crumbs a { color: var(--link); text-decoration: none; cursor: pointer; }
.mc-crumbs a:hover { text-decoration: underline; }
.mc-crumbs__sep { color: var(--ink-faint); }
.mc-crumbs__cur { color: var(--ink-soft); }

/* ---- Main grid ---- */
.mc-grid {
  display: grid;
  grid-template-columns: 218px minmax(0,1fr);
  gap: 14px;
  align-items: start;
}

/* ---- Sidebar ---- */
.mc-side { }
.mc-side + .mc-side { margin-top: 14px; }
.mc-content-side { min-width: 0; }
.mc-side__head {
  font-family: var(--font-pixel); font-size: 16px; font-weight: 700;
  color: #fff; background: var(--accent-dark);
  padding: 10px 12px; border-bottom: 3px solid var(--panel-edge);
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.mc-side__list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mc-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; cursor: pointer; color: var(--ink);
  font-weight: 600; font-size: 15px;
  background: var(--panel-2);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
  text-decoration: none;
}
.mc-nav:hover { background: var(--accent); color: #fff; }
.mc-nav:active, .mc-nav.is-active {
  box-shadow: inset -2px -2px 0 var(--panel-light), inset 2px 2px 0 var(--panel-dark);
}
.mc-nav.is-active { background: var(--accent); color:#fff; }
.mc-ic {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.35);
}
.mc-ic--server  { background: var(--accent); }
.mc-ic--player  { background: var(--diamond); }
.mc-ic--history { background: var(--gold); }
.mc-ic--build   { background: #b06b3a; }
.mc-ic--event   { background: var(--redstone); }
.mc-ic--rules   { background: #8a8a8a; }
.mc-ic--diamond { background: var(--diamond); transform: rotate(45deg) scale(.82); }

/* ---- Content column ---- */
.mc-content { min-width: 0; }

/* page tabs */
.mc-tabs { display: flex; gap: 4px; padding: 0 6px; }
.mc-tab {
  font-family: var(--font-mono); font-size: 19px; white-space: nowrap;
  padding: 8px 16px 10px; cursor: pointer; color: var(--ink-soft);
  background: var(--tab-bg);
  border: 3px solid var(--panel-edge); border-bottom: 0;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.25);
  position: relative; top: 3px;
}
.mc-tab.is-active {
  background: var(--tab-active); color: var(--ink); top: 0;
  box-shadow: inset 2px 2px 0 var(--panel-light);
  font-weight: 700;
}

.mc-page { padding: 20px 14px 26px; }

/* article heading */
.mc-title {
  font-family: var(--font-pixel); font-weight: 700; font-size: 34px; line-height: 1.15;
  color: var(--ink); padding-bottom: 12px;
  border-bottom: 4px solid var(--accent);
  margin-bottom: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.12);
}
.mc-title small {
  display: block; font-family: var(--font-mono); font-size: 18px;
  color: var(--ink-soft); margin-top: 9px; font-weight: 400;
}
.mc-h2 {
  font-family: var(--font-pixel); font-weight: 700; font-size: 23px; color: var(--ink);
  margin: 26px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid rgba(0,0,0,.22);
}
.mc-h2 .mc-h2__edit {
  font-family: var(--font-mono); font-size: 16px; color: var(--link);
  float: right; cursor: pointer; font-weight: 400; white-space: nowrap;
}
.mc-h2 .mc-h2__edit:hover { text-decoration: underline; }
.mc-h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; }

.mc-p { font-size: 16.5px; color: var(--ink); margin: 0 0 13px; text-wrap: pretty; }
.mc-p a, .lnk { color: var(--link); text-decoration: none; cursor: pointer; }
.mc-p a:hover, .lnk:hover { text-decoration: underline; }

.mc-lead {
  display: flex; gap: 18px; align-items: flex-start;
}
.mc-lead__body { min-width: 0; flex: 1; }

/* ---- Table of contents ---- */
.mc-toc {
  display: inline-block; min-width: 260px;
  margin: 4px 0 22px; padding: 0;
}
.mc-toc__head {
  font-family: var(--font-pixel); font-size: 15px; font-weight: 700; color: #fff;
  background: var(--accent-dark); padding: 9px 12px;
  border-bottom: 3px solid var(--panel-edge); text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.mc-toc__list { padding: 10px 14px; counter-reset: toc; }
.mc-toc__item { font-family: var(--font-mono); font-size: 18px; padding: 3px 0; }
.mc-toc__item a { color: var(--link); text-decoration: none; cursor: pointer; }
.mc-toc__item a:hover { text-decoration: underline; }
.mc-toc__item::before { counter-increment: toc; content: counter(toc) ". "; color: var(--ink-faint); }
.mc-toc__item--sub { padding-left: 18px; font-size: 16px; }
.mc-toc__item--sub::before { content: ""; }

/* ---- Infobox ---- */
.mc-infobox { width: 320px; flex: 0 0 auto; }
.mc-infobox__title {
  font-family: var(--font-pixel); font-size: 17px; font-weight: 700; color:#fff;
  background: var(--accent-dark); text-align: center;
  padding: 12px 10px; border-bottom: 3px solid var(--panel-edge);
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.mc-infobox__art {
  height: 150px; margin: 8px; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 10px, rgba(0,0,0,.02) 10px 20px),
    linear-gradient(135deg, var(--accent-2), var(--accent-dark));
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), inset -2px -2px 0 rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.mc-infobox__art span {
  font-family: var(--font-mono); font-size: 16px; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4); padding: 4px 9px; letter-spacing: .5px;
}
.mc-infobox__rows { padding: 4px 8px 10px; }
.mc-irow { display: flex; gap: 8px; padding: 7px 4px; border-bottom: 2px solid rgba(0,0,0,.10); }
.mc-irow:last-child { border-bottom: 0; }
.mc-irow__k { font-weight: 700; font-size: 14px; color: var(--ink-soft); width: 96px; flex: 0 0 auto; }
.mc-irow__v { flex: 1 1 auto; font-size: 15px; color: var(--ink); min-width: 0; }
.mc-irow__v .mono { font-family: var(--font-mono); font-size: 17px; }
.mc-section-head {
  font-family: var(--font-pixel); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-align:center; padding: 9px 4px 7px; letter-spacing: .5px;
  border-top: 2px solid rgba(0,0,0,.18); margin-top: 2px;
}

/* status chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 16px; line-height: 1;
  padding: 4px 8px; border: 2px solid var(--panel-edge);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.3);
}
.chip--online { background: var(--emerald); color: #06210f; }
.chip--off { background: #8a8a8a; color: #1c1c1c; }
.chip--mut { background: var(--panel-2); color: var(--ink-soft); }
.chip__dot { width: 8px; height: 8px; background: currentColor; }

/* Access management: grant chips + section labels */
.adm-acc-sub { font-family: var(--font-pixel); font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0; }
.grant-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 15px; padding: 4px 6px 4px 10px;
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.25);
}
.grant-chip--allow { background: rgba(43,179,106,.18); }
.grant-chip--deny { background: rgba(192,57,43,.18); }
.grant-chip__x { border: 0; background: rgba(0,0,0,.12); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 6px; }
.grant-chip__x:hover { background: var(--redstone); color: #fff; }

/* Permission groups (LuckPerms-style cards) */
.perm-group {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--panel-2); border: 2px solid var(--panel-edge); min-width: 150px;
}
.perm-group:hover { filter: brightness(1.05); }
.perm-group.is-sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.perm-group__name { font-family: var(--font-pixel); font-size: 15px; color: var(--accent); }
.perm-group__meta { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Admin: accounts master-detail (dossier) ---- */
.acc-shell { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .acc-shell { grid-template-columns: 1fr; } }
.acc-list { position: sticky; top: 10px; }
.acc-rows { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.acc-row { padding: 8px 10px; cursor: pointer; background: var(--panel-2); }
.acc-row:hover { filter: brightness(1.05); }
.acc-row.is-sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.acc-row__main { display: flex; gap: 8px; align-items: baseline; }
.acc-row__meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.acc-tag {
  font-size: 11.5px; padding: 1px 7px; background: var(--panel-edge); color: var(--ink);
  border-radius: 3px; line-height: 1.5; white-space: nowrap;
}
.acc-tag--off { background: var(--redstone); color: #fff; }
.acc-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--panel-edge); margin: 4px 0 10px; }
.acc-tab {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--ink-soft); padding: 7px 12px; border-bottom: 3px solid transparent;
}
.acc-tab:hover { color: var(--ink); }
.acc-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.acc-pane { padding: 2px 2px 8px; }
.acc-pun--past { opacity: .65; }

/* ---- Tables ---- */
.mc-tablewrap { overflow-x: auto; margin: 6px 0 12px; }
table.mc-table { border-collapse: collapse; width: 100%; background: var(--panel-2); }
table.mc-table th, table.mc-table td {
  border: 2px solid var(--panel-edge); padding: 9px 11px; text-align: left; font-size: 15px;
}
table.mc-table th {
  font-family: var(--font-pixel); font-size: 14px; font-weight: 700; color:#fff;
  background: var(--accent-dark); text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
table.mc-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.05); }
table.mc-table tbody tr:hover td { background: var(--accent); color:#fff; }
table.mc-table .mono { font-family: var(--font-mono); font-size: 18px; }
.rank { font-family: var(--font-pixel); font-size: 17px; font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 rgba(0,0,0,.4); }

/* ---- Cards grid (categories / featured) ---- */
.mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 12px; }
.mc-card {
  cursor: pointer; padding: 14px 12px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink); transition: transform .06s steps(2);
}
.mc-card:hover { transform: translate(-2px,-2px); }
.mc-card:hover .mc-card__art { box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.4), 0 0 0 3px var(--accent); }
.mc-card__art {
  width: 56px; height: 56px;
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
  position: relative;
}
.mc-card__art::after {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 14px 14px;
}
.mc-card__label { font-family: var(--font-pixel); font-size: 15px; font-weight: 700; line-height: 1.3; }
.mc-card__sub { font-family: var(--font-mono); font-size: 16px; color: var(--ink-faint); margin-top: 2px; line-height: 1.2; }

/* ---- Featured server banner ---- */
.mc-featured {
  display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 0;
  margin-bottom: 16px; overflow: hidden;
}
.mc-featured__art {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 12px, rgba(0,0,0,.02) 12px 24px),
    linear-gradient(160deg, var(--accent-2), var(--accent-dark));
  border-right: 3px solid var(--panel-edge);
  min-height: 168px; display:flex; align-items:flex-end; justify-content:center; padding: 10px;
}
.mc-featured__art span {
  font-family: var(--font-mono); font-size: 15px; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4); padding: 3px 8px;
}
.mc-featured__badge {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  font-family: var(--font-pixel); font-size: 13px; font-weight: 700; color:#3a2a06;
  background: var(--gold); padding: 7px 9px;
  border-right: 2px solid var(--panel-edge); border-bottom: 2px solid var(--panel-edge);
}
.mc-featured__body { padding: 16px 18px; }
.mc-featured__name { font-family: var(--font-pixel); font-weight: 700; font-size: 25px; color: var(--ink); margin-bottom: 8px; }
.mc-featured__meta { display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0 12px; }
.mc-featured__ip {
  font-family: var(--font-mono); font-size: 19px; color: var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.copybtn {
  font-family: var(--font-pixel); font-size: 13px; font-weight: 700; cursor:pointer; color:#fff;
  background: var(--accent); border:2px solid var(--panel-edge); padding: 6px 8px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.4);
}
.copybtn:active { transform: translate(1px,1px); }

/* tag */
.tag {
  font-family: var(--font-mono); font-size: 15px; color: var(--ink); white-space: nowrap;
  background: var(--panel-2); border:2px solid var(--panel-edge);
  padding: 2px 8px; box-shadow: inset 1px 1px 0 rgba(255,255,255,.3);
}

/* ---- Gallery ---- */
.mc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.mc-shot {
  aspect-ratio: 16/10; position: relative; cursor: pointer; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 10px, rgba(0,0,0,.03) 10px 20px),
    linear-gradient(135deg, #6f93b5, #2f3d57);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), inset -2px -2px 0 rgba(0,0,0,.35);
}
.mc-shot:hover { box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), inset -2px -2px 0 rgba(0,0,0,.35), 0 0 0 3px var(--accent); }
.mc-shot span {
  position: absolute; left: 6px; bottom: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 14px; color: #fff;
  background: rgba(0,0,0,.5); padding: 2px 6px;
}

/* ---- Callout / note ---- */
.mc-note {
  display:flex; gap: 12px; align-items:flex-start; padding: 12px 14px; margin: 14px 0;
  background: var(--panel-2);
}
.mc-note__ic { width: 22px; height: 22px; flex:0 0 auto; background: var(--gold);
  border:2px solid var(--panel-edge); box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.35);}
.mc-note p { font-size: 15px; color: var(--ink); }

/* ---- Footer ---- */
.mc-footer {
  margin-top: 16px; padding: 18px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 18px;
}
.mc-footer h4 { font-family: var(--font-pixel); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.mc-footer a { display:block; color: var(--link); text-decoration:none; font-size: 15px; padding: 3px 0; cursor:pointer; }
.mc-footer a:hover { text-decoration: underline; }
.mc-footer__bar {
  grid-column: 1 / -1; border-top: 2px solid rgba(0,0,0,.2); padding-top: 12px;
  font-family: var(--font-mono); font-size: 17px; color: var(--ink-soft);
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* heart / pixel hearts for stats */
.hearts { display:inline-flex; gap:3px; vertical-align: middle; }
.heart { width: 13px; height: 12px; background: var(--redstone); clip-path: polygon(50% 100%, 0 35%, 0 15%, 25% 0, 50% 18%, 75% 0, 100% 15%, 100% 35%); }
.heart.empty { background: #5a5a5a; }

/* tweak toggles */
body.no-pixel-titles .mc-title,
body.no-pixel-titles .mc-h2,
body.no-pixel-titles .mc-featured__name {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0;
}
body.no-pixel-titles .mc-title { font-size: 30px; }
body.no-pixel-titles .mc-h2 { font-size: 21px; }
body.no-pixel-titles .mc-featured__name { font-size: 24px; }
body.no-zebra table.mc-table tbody tr:nth-child(even) td { background: transparent; }

.mc-content-side { min-width: 0; }

/* small util */
.muted { color: var(--ink-soft); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

/* toast */
.mc-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  z-index: 90; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  font-family: var(--font-pixel); font-size: 16px; font-weight: 700; color:#fff;
  background: var(--accent-dark); padding: 12px 16px;
  border:3px solid var(--panel-edge); box-shadow: var(--shadow-pixel);
}
.mc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* responsive */
@media (max-width: 900px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-side { position: static; }
  .mc-lead { flex-direction: column; }
  .mc-infobox { width: 100%; }
  .mc-featured { grid-template-columns: 1fr; }
  .mc-featured__art { min-height: 120px; border-right: 0; border-bottom: 3px solid var(--panel-edge); }
}

/* ============================================================
   SPA additions (ArmlixWiki)
   ============================================================ */
/* Minimal, unobtrusive theme switcher in the top bar */
.mc-theme { position: relative; margin-left: 8px; }
.mc-theme__btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--panel-2, var(--panel)); color: var(--ink);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 1.5px 1.5px 0 var(--panel-light), inset -1.5px -1.5px 0 var(--panel-dark);
  padding: 5px 9px; font-family: var(--font-pixel); font-size: 13px; line-height: 1;
}
.mc-theme__btn:hover { filter: brightness(1.06); }
.mc-theme__cube {
  width: 13px; height: 13px; flex: 0 0 auto; display: inline-block;
  border: 1.5px solid rgba(0,0,0,.5);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.30);
}
.mc-theme__cur { white-space: nowrap; }
.mc-theme__caret { color: var(--ink-soft); font-size: 11px; margin-left: 1px; }
.mc-theme__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  background: var(--panel); padding: 5px; display: flex; flex-direction: column; gap: 4px;
}
.mc-theme__opt {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; text-align: left;
  border: 2px solid var(--panel-edge); background: var(--panel-2, var(--panel)); color: var(--ink);
  box-shadow: inset 1.5px 1.5px 0 var(--panel-light), inset -1.5px -1.5px 0 var(--panel-dark);
  padding: 8px 10px; font-family: var(--font-pixel); font-size: 14px;
}
.mc-theme__opt:hover { filter: brightness(1.08); }
.mc-theme__opt.is-on { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.mc-theme__check { margin-left: auto; font-weight: 700; }

/* SPA loading / empty states */
.spa-loading { padding: 40px; text-align: center; font-family: var(--font-mono); font-size: 20px; color: var(--ink-soft); }
.spa-error { margin: 14px 0; }
.mc-content-wrap { } /* placeholder hook */

/* SPA form field */
.spa-input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--ink);
  font-family: var(--font-mono); font-size: 18px; padding: 6px 4px; }
.spa-input::placeholder { color: var(--ink-faint); }
.spa-field { padding: 4px 8px; margin-bottom: 10px; }
.topnav-link { cursor: pointer; }

/* ===== Editor (ported from mockup editor.css) ===== */
/* editor.css — grid-based free-placement article editor (Minecraft GUI) */

.ed-shell {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100vh; padding: 12px; gap: 12px;
}

/* toolbar */
.ed-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px;
}
.ed-toolbar__title {
  font-family: var(--font-pixel); font-weight: 700; font-size: 17px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.ed-toolbar__title .mc-logo__cube { width: 30px; height: 30px; }
.ed-spacer { flex: 1; }
.ed-group { display: flex; align-items: center; gap: 6px; }
.ed-label { font-family: var(--font-mono); font-size: 17px; color: var(--ink-soft); }

.ed-btn {
  font-family: var(--font-pixel); font-weight: 700; font-size: 12px; cursor: pointer;
  color: var(--ink); padding: 9px 12px;
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
  white-space: nowrap;
}
.ed-btn:hover { background: var(--accent); color: #fff; }
.ed-btn:active { box-shadow: inset -2px -2px 0 var(--panel-light), inset 2px 2px 0 var(--panel-dark); }
.ed-btn--primary { background: var(--accent); color: #fff; }
.ed-btn--primary:hover { background: var(--accent-dark); }
.ed-btn.is-on { background: var(--accent-dark); color: #fff; }
.ed-btn--icon { padding: 9px 10px; }

.ed-step {
  font-family: var(--font-mono); font-size: 18px; color: var(--ink); cursor: pointer;
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark);
  padding: 6px 8px;
}
.ed-step option { background: var(--panel); color: var(--ink); }

/* main layout: palette + canvas on the top row, properties as a full-width strip
   along the bottom (much more room for text + formatting than the old side panel). */
.ed-main {
  flex: 1; min-height: 0;
  display: grid; gap: 12px;
  grid-template-columns: 208px minmax(0,1fr);
  /* No selection, no strip: the canvas gets the whole height. The second row only
     exists while the properties panel is on screen, and its height is dragged by
     the user (--props-h, persisted). */
  grid-template-rows: minmax(0,1fr);
}
.ed-main--props { grid-template-rows: minmax(0,1fr) var(--props-h, clamp(190px, 30vh, 340px)); }
.ed-panel--palette { grid-column: 1; grid-row: 1; }
.ed-canvaswrap    { grid-column: 2; grid-row: 1; }
.ed-panel--props  { grid-column: 1 / span 2; grid-row: 2; }

/* palette */
.ed-panel { display: flex; flex-direction: column; min-height: 0; }
.ed-panel__head {
  font-family: var(--font-pixel); font-weight: 700; font-size: 13px; color: #fff;
  background: var(--accent-dark); padding: 10px 12px;
  border-bottom: 3px solid var(--panel-edge); text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  flex: 0 0 auto;
}
.ed-panel__body { padding: 8px; overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; }
.ed-panel__body > *, .ed-prop { min-width: 0; max-width: 100%; }

.ed-tool {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 9px; margin-bottom: 6px; cursor: grab; user-select: none;
  font-weight: 600; font-size: 14px; color: var(--ink);
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
  text-align: left;
}
.ed-tool:hover { background: var(--accent); color: #fff; }
.ed-tool:active { cursor: grabbing; }
.ed-tool__ic {
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
}
.ed-hint { font-family: var(--font-mono); font-size: 15px; color: var(--ink-faint); padding: 4px 4px 8px; line-height: 1.35; }
.ed-keys { margin-top: 12px; padding: 8px 4px 2px; border-top: 1px solid var(--panel-edge);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; }
.ed-keys__t { font-family: var(--font-pixel); font-size: 11px; color: var(--ink-soft); margin-bottom: 5px; }
.ed-keys b { color: var(--ink-soft); font-weight: 700; }

/* canvas */
.ed-canvaswrap {
  overflow: auto; padding: 22px;
  display: flex; justify-content: flex-start;
}
.ed-canvas {
  /* width & height are set inline from JS (CANVAS_W and the content-driven height);
     these are fallbacks. The surface auto-grows downward as elements approach the bottom. */
  position: relative; width: 1100px; min-height: 700px; flex: 0 0 auto;
  background-color: var(--panel);
  border: 3px solid var(--panel-edge);
  box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 var(--panel-dark);
}
.ed-canvas.show-grid {
  background-image:
    linear-gradient(rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  /* major + minor grid; sizes set inline via --maj/--min */
  background-size:
    var(--maj) var(--maj), var(--maj) var(--maj),
    var(--min) var(--min), var(--min) var(--min);
}

/* placed element */
.ed-el {
  position: absolute; box-sizing: border-box; cursor: move;
  outline: 1.5px dashed transparent; outline-offset: 2px;
}
.ed-canvas:not(.preview) .ed-el:hover { outline-color: var(--accent); }
.ed-canvas:not(.preview) .ed-el.is-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.ed-canvas.preview .ed-el { cursor: default; }

/* selection toolbar */
.ed-el__bar {
  position: absolute; top: -30px; right: 0; display: flex; gap: 4px; z-index: 5;
}
.ed-el__bar button {
  font-family: var(--font-pixel); font-weight: 700; font-size: 11px; cursor: pointer; color: #fff;
  background: var(--accent-dark); border: 2px solid var(--panel-edge); padding: 4px 7px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3);
}
.ed-el__bar button:hover { background: var(--redstone); }
.ed-el__bar button.keep:hover { background: var(--accent); }

/* resize handle */
.ed-el__rz {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; z-index: 6;
  background: var(--accent); border: 2px solid var(--panel-edge); cursor: nwse-resize;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.4);
}

/* spawn ghost */
.ed-ghost {
  position: fixed; z-index: 999; pointer-events: none; opacity: .8;
  font-family: var(--font-pixel); font-weight: 700; font-size: 12px; color:#fff;
  background: var(--accent-dark); border: 2px solid var(--panel-edge); padding: 8px 10px;
  box-shadow: var(--shadow-pixel);
}

/* element inner content styling (within editor + preview share .mc-* classes) */
.ed-el .el-h1 { font-family: var(--font-pixel); font-weight: 700; font-size: 30px; color: var(--ink); line-height: 1.15; }
.ed-el .el-h2 { font-family: var(--font-pixel); font-weight: 700; font-size: 21px; color: var(--ink); line-height: 1.2; border-bottom: 2px solid rgba(0,0,0,.2); padding-bottom: 6px; }
.ed-el .el-p { font-size: 16px; color: var(--ink); line-height: 1.5; }
.ed-el .el-divider { height: 4px; background: var(--accent); width: 100%; margin-top: 8px; }
.ed-el [contenteditable] { outline: none; cursor: text; }
.ed-el [contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }

.ed-img {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 10px, rgba(0,0,0,.03) 10px 20px),
    linear-gradient(135deg, #6f93b5, #2f3d57);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), inset -2px -2px 0 rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.ed-img span { font-family: var(--font-mono); font-size: 15px; color: #fff; background: rgba(0,0,0,.45); padding: 3px 8px; }

/* (the editor renders the real aside.infobox — no mini-imitation card anymore) */

/* props panel */
.ed-prop { margin-bottom: 12px; }
.ed-prop__lab { font-family: var(--font-mono); font-size: 16px; color: var(--ink-soft); display:block; margin-bottom: 4px; }
.ed-xy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-num {
  font-family: var(--font-mono); font-size: 18px; color: var(--ink); width: 100%;
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark);
  padding: 6px 8px;
}
.ed-num__wrap { position: relative; }
.ed-num__tag { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); pointer-events: none; }
.ed-ta {
  font-family: var(--font-body); font-size: 15px; color: var(--ink); width: 100%; resize: vertical; min-height: 78px;
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark); padding: 7px 9px;
}
.ed-empty { font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); text-align: center; padding: 26px 14px; line-height: 1.4; }
/* Button rows in the props panel: equal grid columns that SHRINK (min-width:0),
   so a 4-button row (alignment) can never widen the panel and push the layout. */
.ed-zbtns { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.ed-zbtns .ed-btn {
  flex:1 1 auto; min-width:58px; text-align:center; padding:8px 6px; font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width: 1100px) {
  .ed-main { grid-template-columns: 180px minmax(0,1fr); }
}

/* ===== Properties: a horizontal bottom strip organised into labelled groups.
   Fields are grouped by purpose (content · layout · actions) and laid out
   left→right, so a control is always in the same place regardless of element
   type — a flat auto-fill grid put unrelated fields in arbitrary columns and
   moved «Удалить» around under the cursor. Groups wrap instead of scrolling,
   and each group packs its own fields into shrink-to-fit columns. ===== */
.ed-panel--props { position: relative; }
.ed-panel--props .ed-panel__head { display: flex; align-items: center; gap: 8px; }
.ed-head__dot { width: 11px; height: 11px; flex: 0 0 auto; border: 2px solid rgba(0,0,0,.5);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35); }
.ed-head__sub { margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.72); text-shadow: none; font-weight: 400; }
.ed-head__x { margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-family: var(--font-pixel); font-size: 12px; color: rgba(255,255,255,.75); }
.ed-head__sub + .ed-head__x { margin-left: 10px; }
.ed-head__x:hover { color: #fff; }

/* Drag the top edge to resize the strip (double-click resets). */
.ed-resize { position: absolute; top: -5px; left: 0; right: 0; height: 10px; z-index: 7; cursor: ns-resize; }
.ed-resize::after {
  content: ""; position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: 54px; height: 3px; background: var(--panel-edge);
}
.ed-resize:hover::after, body.ed-resizing .ed-resize::after { background: var(--accent); }
body.ed-resizing, body.ed-resizing * { cursor: ns-resize !important; user-select: none; }

.ed-panel--props .ed-panel__body {
  display: flex; flex-flow: row wrap; gap: 12px 0; align-items: stretch; align-content: start;
}
.ed-panel--props .ed-prop { margin-bottom: 0; min-width: 0; }

/* Compartments, in the inventory-panel idiom of the rest of the UI: each group is
   separated by a carved groove rather than a hairline, and sizes to ITS OWN
   contents. Nothing here has a fixed pixel width — fixed columns made the panel
   look arbitrary at most widths and cut labels off at narrow ones. */
.ed-group { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; padding: 0 16px; }
.ed-group + .ed-group { border-left: 2px solid var(--panel-dark);
  box-shadow: inset 2px 0 0 var(--panel-light); }
.ed-group:first-child { padding-left: 2px; }
.ed-group:last-child { padding-right: 2px; }
/* Content takes whatever the fixed-size compartments leave over. */
.ed-group--grow { flex: 1 1 clamp(260px, 38%, 560px); }
/* Actions sit at the far end of the strip, never between content fields. */
.ed-group--right { margin-left: auto; }
.ed-group__t { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-faint);
  letter-spacing: .05em; margin-bottom: 8px; white-space: nowrap; }
.ed-group__b { display: grid; gap: 10px 14px; align-items: start; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
/* Editors that need room (infobox rows, table cells, link lists) span the group's
   full width. `1 / -1` rather than `span 2`: it adapts to however many columns the
   group currently has instead of forcing an implicit extra one (which overflows
   when the group is narrow enough for a single column). */
.ed-prop--wide { grid-column: 1 / -1; }
/* Compartments with a handful of controls: one column, sized by the widest control
   it holds (never a hard width, never clipped). */
.ed-group--stack > .ed-group__b { display: flex; flex-direction: column; gap: 9px;
  width: max-content; max-width: 300px; }
/* The text editor grows with the strip, so dragging the strip taller directly
   gives more room to write. Its height is derived from --props-h (the dragged
   height) rather than flex-stretch: in a WRAPPING flex container `stretch` only
   reaches the line height, which is the group's own height — i.e. no growth. */
.ed-group--rich > .ed-group__b { display: flex; min-height: 0; }
.ed-group--rich .fmt { flex: 1; min-width: 0; }
.ed-ta--rich { height: max(92px, calc(var(--props-h, 270px) - 172px)); min-height: 92px; resize: none; }

/* Segmented control (alignment, layer): cells size to their labels and wrap to a
   second line when the compartment is narrow. Labels are never truncated — a
   control whose text is cut off ("Спра…") is worse than one that wraps. */
.ed-seg { display: flex; flex-wrap: wrap; min-width: 0; }
.ed-seg .ed-btn { flex: 1 0 auto; min-width: max-content; padding: 7px 11px; font-size: 11px;
  margin: 0 0 -2px -2px; }
.ed-seg .ed-btn:first-child { margin-left: 0; }
.ed-btn--danger { background: var(--redstone); color: #fff; }
.ed-btn--danger:hover { background: var(--redstone); filter: brightness(1.15); }
.ed-btn--wide { width: 100%; text-align: center; }

/* Numeric fields size to their captions and share a row while they fit. */
.ed-nums { display: grid; gap: 6px 8px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.ed-numf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-numf > span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.ed-numf .ed-num { font-size: 15px; padding: 5px 6px; text-align: center; }
/* Checkbox rows read as one clickable label. */
.ed-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink);
  line-height: 1.25; cursor: pointer; }

/* ===== Table editor: the table is edited as a table. Cells are real inputs in a
   grid, and rows/columns are moved by dragging their ⠿ grips — the shape of the
   table is visible while you work on it. ===== */
.tbl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tbl__grid { display: grid; gap: 3px; align-items: center; min-width: 0;
  overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.tbl__chead { display: flex; align-items: center; justify-content: center; gap: 2px; height: 20px; }
.tbl__grip {
  display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none;
  color: #fff; background: var(--accent-dark); border: 2px solid var(--panel-edge);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.28);
  font-size: 11px; line-height: 1; padding: 2px 4px; touch-action: none; flex: 0 0 auto;
}
.tbl__grip:hover { background: var(--accent); }
.tbl__grip:active { cursor: grabbing; }
.tbl__rgrip { display: flex; align-items: center; justify-content: center; cursor: grab;
  user-select: none; color: #fff; background: var(--accent-dark);
  border: 2px solid var(--panel-edge); box-shadow: inset 1px 1px 0 rgba(255,255,255,.28);
  font-size: 11px; line-height: 1; height: 26px; touch-action: none; }
.tbl__rgrip:hover { background: var(--accent); }
.tbl__cell {
  font-family: var(--font-body); font-size: 14px; color: var(--ink); width: 100%; min-width: 0;
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark);
  padding: 5px 7px;
}
.tbl__cell--head { font-weight: 700; background: var(--panel-2); }
.tbl__del {
  cursor: pointer; color: var(--ink-soft); background: none; border: 0; padding: 2px 4px;
  font-family: var(--font-pixel); font-size: 11px; line-height: 1;
}
.tbl__del:hover:not(:disabled) { color: var(--redstone); }
.tbl__del:disabled { opacity: .25; cursor: default; }
.tbl__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Live drag feedback: the moving row/column fades, the landing place is marked. */
.tbl__chead.is-dragging, .tbl__rgrip.is-dragging, .ibrows__r.is-dragging { opacity: .4; }
.tbl__chead.is-over, .tbl__rgrip.is-over { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Infobox field list — same grips, one row per field or section band. */
.ibrows { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ibrows__r { display: flex; gap: 4px; align-items: center; min-width: 0; }
.ibrows__r.is-over { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Rich-text formatting toolbar (props strip) ===== */
.fmt { display: flex; flex-direction: column; }
.fmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 6px; }
.fmt-btn {
  min-width: 27px; height: 27px; padding: 0 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 1px 1px 0 var(--panel-light), inset -1px -1px 0 var(--panel-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.fmt-btn:hover { background: var(--accent); color: #fff; }
.fmt-btn.mono { font-family: var(--font-mono); font-size: 12px; }
.fmt-sep { width: 2px; align-self: stretch; margin: 2px 4px; background: var(--panel-edge); opacity: .55; }
.fmt-color { position: relative; display: inline-flex; }
.fmt-a { font-weight: 700; }
.fmt-caret { font-size: 9px; margin-left: 1px; }
.fmt-swatches {
  position: absolute; top: 31px; left: 0; z-index: 30; display: grid;
  grid-template-columns: repeat(3, 24px); gap: 5px; padding: 7px;
  background: var(--panel); border: 2px solid var(--panel-edge); box-shadow: var(--shadow-pixel);
}
.fmt-sw { width: 24px; height: 24px; border: 2px solid var(--panel-edge); cursor: pointer; }
.fmt-sw:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== Canvas elements in the reading view (.cel uses same el-* inner classes) ===== */
.canvas-page { position: relative; }
.cel { box-sizing: border-box; }
.cel .el-h1 { font-family: var(--font-pixel); font-weight: 700; font-size: 30px; color: var(--ink); line-height: 1.15; margin: 0; }
.cel .el-h2 { font-family: var(--font-pixel); font-weight: 700; font-size: 21px; color: var(--ink); line-height: 1.2; border-bottom: 2px solid rgba(0,0,0,.2); padding-bottom: 6px; margin: 0; }
.cel .el-p  { font-size: 16px; color: var(--ink); line-height: 1.5; margin: 0; }
.cel .el-divider { height: 4px; background: var(--accent); width: 100%; margin: 0; }
.cel .el-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; height: 100%; }
/* Infobox card (used by both canvas infobox elements and legacy sidebar infoboxes).
   These rules previously lived in the old Thymeleaf stylesheet; ported to the SPA. */
.infobox { background: var(--panel); border: 2px solid var(--panel-edge);
  box-shadow: inset 1.5px 1.5px 0 var(--panel-light), inset -1.5px -1.5px 0 var(--panel-dark);
  overflow: hidden; }
.infobox-title { background: var(--accent); color: #fff; font-family: var(--font-pixel);
  font-weight: 700; padding: 6px 10px; font-size: 17px; text-align: center; }
/* Monolithic full-width section divider inside the card (one-cell row) — same solid
   band as the title, insertable between fields to group them. */
.infobox-section td { background: var(--accent); color: #fff; font-family: var(--font-pixel);
  font-weight: 700; text-align: center; padding: 6px 10px; font-size: 15px;
  border-top: 2px solid var(--panel-edge); }
.infobox-section td a { color: #fff; }
.infobox-fields { width: 100%; border-collapse: collapse; }
.infobox-fields th, .infobox-fields td { padding: 5px 9px; text-align: left; vertical-align: top;
  font-size: 15px; border-top: 1px solid var(--panel-dark); color: var(--ink); }
.infobox-fields th { color: var(--ink-soft); font-weight: 700; white-space: nowrap; width: 38%; }
.infobox-fields tr:first-child th, .infobox-fields tr:first-child td { border-top: none; }
.infobox-fields a { color: var(--link); }
.cel .infobox { width: 100%; height: 100%; }

/* ===== Template gallery + editor template modal ===== */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.tpl-card { padding: 10px; cursor: pointer; background: var(--slot-bg); display: flex; flex-direction: column; }
.tpl-card.is-sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.tpl-card__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.tpl-card__desc { color: var(--ink-soft); font-size: 13px; margin-top: 4px; line-height: 1.35; }
.ed-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center;
  justify-content: center; z-index: 1000; }
.ed-modal__box { background: var(--panel); width: min(700px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
.ed-modal__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-family: var(--font-pixel); font-weight: 700; font-size: 18px; background: var(--accent); color: #fff; }
.ed-modal__body { padding: 12px 14px; overflow: auto; }

/* ===== Media library grid (editor picker + admin) ===== */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.lib-grid--page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lib-item.is-sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.lib-item__thumb--file { display: flex; align-items: center; justify-content: center; }
.lib-item__thumb--file span { font-family: var(--font-pixel); font-size: 16px; color: var(--ink-soft); }
.lib-detail { display: flex; gap: 14px; margin-top: 14px; padding: 12px; background: var(--panel-2); flex-wrap: wrap; }
.lib-detail__preview { flex: 0 0 260px; max-width: 100%; }
.lib-detail__preview img { max-width: 100%; max-height: 260px; display: block; background: var(--slot-bg); }
.lib-detail__meta { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }

/* Lead photo shown next to a category/page title */
.lead-photo { max-width: 220px; max-height: 140px; object-fit: cover; display: block; }
.lead-photo--sm { max-width: 72px; max-height: 72px; }

/* Image picker (forms) */
.imgpick__thumb {
  width: 96px; height: 96px; flex: 0 0 96px;
  background: var(--slot-bg); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.lib-item { padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.lib-item:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.lib-item__thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--slot-bg); background-size: cover;
  background-position: center; image-rendering: auto; }
.lib-item__name { font-size: 12px; color: var(--ink); line-height: 1.25; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cel figure.image { margin: 0; height: 100%; display: flex; flex-direction: column; }
.cel figure.image img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; object-fit: contain; }
.cel figure.image figcaption { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 4px; }
.cel .mc-tablewrap { margin: 0; height: auto; overflow: visible; }

/* Editor inside the SPA */
.wiki--wide { max-width: 1500px; }
.ed-canvaswrap { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ed-toolbar2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px;
  border-bottom: 3px solid var(--panel-edge); background: var(--panel-2); }
.ed-canvasscroll { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; align-items: flex-start;
  /* Reserve the scrollbar gutter permanently. Without this, the vertical scrollbar
     appearing mid-drag shrank clientWidth → the fit-zoom changed → the scrollbar
     vanished again → an infinite resize loop that crashed the page. */
  scrollbar-gutter: stable; }
.ed-title { width: 220px; flex: 0 1 auto; font-size: 16px; }
.ed-modes { display: inline-flex; gap: 4px; margin-right: 6px; }

/* ===== Flow (classic wiki) — ONE layout shared by the article (.flow-page) and
   the editor (.fl-wrap). Editor blocks carry the same .fel / .fel-{type} /
   .fel--{align} classes the server renders plus the identical inline width/height,
   so WYSIWYG holds by construction. Everything under .fl-* is editor chrome and
   must never affect geometry: outlines and absolute overlays only. ===== */
/* Left-aligned so the article body hugs the left edge, in line with the page title
   (it used to be centred, which left a large gap on the left). Infobox still floats right. */
.flow-page { max-width: 900px; margin: 0; }
.flow-page::after, .fl-wrap::after { content: ""; display: block; clear: both; }
/* EVERY block is its own block formatting context: beside a floated neighbour it
   shrinks to the free space — text and headings sit next to media without their
   box, borders or the h2 underline running underneath — and past the float the
   next blocks take the full column again. A block that doesn't fit drops below.
   Nothing can ever paint over a neighbour. */
.fel { margin: 0 0 14px; display: flow-root; }
.fel-infobox { float: right; clear: right; margin: 0 0 14px 18px; max-width: 46%; }
.fel-img { text-align: center; margin-left: auto; margin-right: auto; }
.fel-img figure.image { margin: 0 auto; display: inline-block; max-width: 100%; }
.fel-img img { max-width: 100%; height: auto; }
.fel-img figcaption { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
.fel-divider { clear: both; }
.fel-tags { width: fit-content; max-width: 100%; }
.fel--left { float: left; margin: 4px 18px 12px 0; max-width: 52%; clear: left; }
.fel--right { float: right; margin: 4px 0 12px 18px; max-width: 52%; clear: right; }
.fel--center { float: none; margin-left: auto !important; margin-right: auto !important; }
/* «С новой строки»: the author forces the block to start below all floats
   (must come after .fel--left/right so it also wins on floated blocks). */
.fel--clear { clear: both; }
/* Interactive widget stages fill the block's explicit height. */
.fel-mcskin .mcw, .fel-mcblock .mcw, .fel-mcschem .mcw, .fel-mccraft .mcw { height: 100%; min-height: 120px; }
.el-h1 { font-family: var(--font-pixel); font-weight: 700; font-size: 30px; color: var(--ink); line-height: 1.15; margin: 0; }
.el-h2 { font-family: var(--font-pixel); font-weight: 700; font-size: 21px; color: var(--ink); line-height: 1.2; border-bottom: 2px solid rgba(0,0,0,.2); padding-bottom: 6px; margin: 0; }
.el-p { font-size: 16px; color: var(--ink); line-height: 1.55; margin: 0; }
.el-divider { height: 4px; background: var(--accent); width: 100%; margin: 8px 0; }
.el-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.flow-page .mc-tablewrap, .fl-wrap .mc-tablewrap { margin: 0; }
@media (max-width: 700px) {
  .fel--left, .fel--right, .fel-infobox { float: none; width: auto !important; max-width: 100%; margin: 0 0 14px; }
}

/* ===== Wiki links, Related block, hover preview card ===== */
a.wl { color: var(--link); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
a.wl:hover { color: var(--accent); }
a.xl { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; }
a.xl::after { content: "↗"; font-size: .8em; margin-left: 2px; }
/* inside the editor the links are inert (clicks are blocked) — don't promise a jump */
.fl-wrap a.wl, .fl-wrap a.xl, .ed-canvas a.wl, .ed-canvas a.xl { cursor: inherit; }

/* ===== Rich text: forum-style formatting inside paragraph / note bodies. Shared by
   the published page and the editor (both use .el-p / .mc-note__tx). ===== */
.mc-note__tx { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
.el-p ul, .el-p ol, .mc-note__tx ul, .mc-note__tx ol { margin: 6px 0; padding-left: 24px; }
.el-p li, .mc-note__tx li { margin: 3px 0; }
.el-p blockquote, .mc-note__tx blockquote { margin: 8px 0; padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }
.el-p code, .mc-note__tx code { font-family: var(--font-mono); font-size: .92em;
  background: var(--slot-bg); border: 1px solid var(--panel-edge); padding: 0 4px; }
.el-p strong, .mc-note__tx strong { font-weight: 700; }
.el-p em, .mc-note__tx em { font-style: italic; }
/* While inline-editing a text block, show the author's own newlines/markup verbatim. */
.el-p[contenteditable="true"], .mc-note__tx[contenteditable="true"] { white-space: pre-wrap; }

.rel-card {
  background: var(--panel-2, var(--panel)); border: 2px solid var(--panel-edge);
  box-shadow: inset 1.5px 1.5px 0 var(--panel-light), inset -1.5px -1.5px 0 var(--panel-dark);
  padding: 10px 14px 12px;
}
.rel-card__t {
  font-family: var(--font-pixel); font-weight: 700; font-size: 14px; color: var(--ink);
  border-bottom: 2px solid rgba(0,0,0,.2); padding-bottom: 6px; margin-bottom: 8px;
}
.rel-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.rel-list li { margin: 0 0 6px; break-inside: avoid; padding-left: 14px; position: relative; font-size: 15.5px; }
.rel-list li::before { content: "»"; position: absolute; left: 0; color: var(--accent); }
.rel-card__empty { font-size: 14px; color: var(--ink-faint); }
@media (max-width: 700px) { .rel-list { columns: 1; } }

.wltip {
  position: fixed; left: 0; top: 0; z-index: 1250; width: 320px; max-width: calc(100vw - 16px);
  background: var(--panel); border: 2px solid var(--panel-edge);
  box-shadow: 3px 3px 0 rgba(0,0,0,.35), inset 1.5px 1.5px 0 var(--panel-light), inset -1.5px -1.5px 0 var(--panel-dark);
  padding: 10px 12px; pointer-events: auto;
}
.wltip[hidden] { display: none; }
.wltip__img {
  float: right; width: 64px; height: 64px; margin: 0 0 6px 8px;
  background: var(--slot-bg) center/cover no-repeat; border: 2px solid var(--panel-edge);
}
.wltip__t { font-family: var(--font-pixel); font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.wltip__t--missing { color: var(--redstone); }
.wltip__x {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wltip__p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-top: 6px; word-break: break-all; }

/* ===== Flow editing chrome (.fl-*) — zero-geometry ===== */
.fl-wrap {
  position: relative; /* positioning context for the drag drop-bar overlay */
  width: min(920px, 100%); margin: 0 auto; min-height: 480px;
  background: var(--panel); border: 3px solid var(--panel-edge);
  box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 var(--panel-dark);
  padding: 26px 30px 60px; /* content column = 860px — same as .flow-page */
}
.fl-block { position: relative; }
.fl-wrap:not(.preview) .fl-block:hover { outline: 1.5px dashed var(--accent); outline-offset: 2px; }
.fl-wrap:not(.preview) .fl-block.is-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-handle {
  position: absolute; left: -30px; top: 2px; width: 22px; height: 22px; z-index: 4;
  display: flex; align-items: center; justify-content: center; cursor: grab;
  font-size: 14px; color: #fff; background: var(--accent-dark);
  border: 2px solid var(--panel-edge); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3);
  opacity: 0; transition: opacity .12s; touch-action: none;
}
.fl-block:hover .fl-handle, .fl-block.is-sel .fl-handle { opacity: 1; }
.fl-handle:active { cursor: grabbing; }
@media (pointer: coarse) { .fl-handle { opacity: .55; } } /* no hover on touch — keep it findable */
.fl-block .ed-el__bar { top: -28px; }
.fl-block [contenteditable] { outline: none; cursor: text; }
.fl-block [contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }

/* Reserves exactly the fitted (scaled) size of the canvas so the whole surface is
   visible without scrolling; the inner .ed-canvas is transform:scale()'d to match. */
.ed-canvasfit { flex: 0 0 auto; position: relative; }

/* ===== Members/profiles (ported from mockup profiles.css) ===== */
/* profiles.css — member directory + player profile (Minecraft GUI) */

.pr-main { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 14px; align-items: start; }

/* ---- directory (left) ---- */
.pr-dir { display: flex; flex-direction: column; }
.pr-dir__head { font-family: var(--font-pixel); font-weight: 700; font-size: 13px; color:#fff; background: var(--accent-dark); padding: 10px 12px; border-bottom: 3px solid var(--panel-edge); text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.pr-search { padding: 8px; }
.pr-search input {
  width: 100%; font-family: var(--font-mono); font-size: 18px; color: var(--ink);
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark);
  padding: 8px 10px; outline: none;
}
.pr-search input::placeholder { color: var(--ink-faint); }
.pr-list { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; max-height: 620px; overflow: auto; }
.pr-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px;
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
}
.pr-item:hover { background: var(--accent); color: #fff; }
.pr-item:hover .pr-item__sub { color: rgba(255,255,255,.85); }
.pr-item.is-sel { background: var(--accent-dark); color: #fff; box-shadow: inset -2px -2px 0 rgba(255,255,255,.2), inset 2px 2px 0 rgba(0,0,0,.4); }
.pr-item.is-sel .pr-item__sub { color: rgba(255,255,255,.85); }
.pr-item__txt { min-width: 0; flex: 1; }
.pr-item__nick { font-weight: 700; font-size: 15px; line-height: 1.2; }
.pr-item__sub { font-family: var(--font-mono); font-size: 15px; color: var(--ink-faint); }
.pr-item__on { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid var(--panel-edge); }
.pr-item__on.on { background: var(--emerald); } .pr-item__on.off { background: #6a6a6a; }
.pr-empty { font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); text-align: center; padding: 24px; }

/* ---- pixel avatar (Minecraft skin head) ---- */
.skin {
  display: grid; flex: 0 0 auto; image-rendering: pixelated;
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.35);
}
.skin i { display: block; }
.skin--sm { width: 38px; height: 38px; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr); }
.skin--lg { width: 132px; height: 132px; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr); border-width: 3px; }

/* ---- profile (right) ---- */
.pr-profile { min-width: 0; }
.pr-hero { display: flex; gap: 18px; align-items: flex-start; padding: 20px; margin-bottom: 14px; }
.pr-hero__main { min-width: 0; flex: 1; }
.pr-hero__nick { font-family: var(--font-pixel); font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1.15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-hero__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; white-space: nowrap; }
.pr-hero__bio { font-size: 16px; color: var(--ink); line-height: 1.5; margin-top: 8px; text-wrap: pretty; }
.pr-hero__meta { font-family: var(--font-mono); font-size: 17px; color: var(--ink-soft); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 18px; }

.role { font-family: var(--font-mono); font-size: 16px; padding: 3px 9px; border: 2px solid var(--panel-edge); white-space: nowrap; box-shadow: inset 1px 1px 0 rgba(255,255,255,.3); }
.role--admin { background: var(--redstone); color:#fff; }
.role--mod { background: var(--gold); color:#3a2a06; }
.role--builder { background: #b06b3a; color:#fff; }
.role--vet { background: var(--diamond); color:#06292a; }
.role--user { background: var(--panel-2); color: var(--ink); }
.role--banned { background: #3a3a3a; color: #d9d9d9; }

/* stat bars (health/xp) */
.pr-bars { padding: 16px 20px; margin-bottom: 14px; }
.pr-bar { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.pr-bar__lab { font-family: var(--font-mono); font-size: 17px; color: var(--ink-soft); width: 92px; flex: 0 0 auto; }
.pr-bar__val { font-family: var(--font-mono); font-size: 18px; color: var(--ink); margin-left: auto; white-space: nowrap; }
.xpbar { flex: 1; height: 16px; background: var(--slot-bg); border: 2px solid var(--panel-edge); box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark); position: relative; }
.xpbar__fill { height: 100%; background: repeating-linear-gradient(90deg, var(--emerald) 0 8px, color-mix(in srgb, var(--emerald) 75%, #000) 8px 10px); }
.xpbar__fill.gold { background: repeating-linear-gradient(90deg, var(--gold) 0 8px, color-mix(in srgb, var(--gold) 75%, #000) 8px 10px); }

/* stat tiles */
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; padding: 16px 20px; margin-bottom: 14px; }
.pr-stat { text-align: center; padding: 12px 8px; background: var(--panel-2); border: 2px solid var(--panel-edge); box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark); }
.pr-stat__num { font-family: var(--font-pixel); font-weight: 700; font-size: 18px; color: var(--ink); }
.pr-stat__lab { font-family: var(--font-mono); font-size: 16px; color: var(--ink-soft); margin-top: 4px; }

/* generic card */
.pr-card { padding: 16px 20px; margin-bottom: 14px; }
.pr-card__head { font-family: var(--font-pixel); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 14px; padding-bottom: 9px; border-bottom: 2px solid rgba(0,0,0,.2); }

/* achievements */
.pr-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 10px; }
.pr-ach__item { display: flex; gap: 11px; align-items: center; padding: 10px; background: var(--panel-2); border: 2px solid var(--panel-edge); box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark); }
.pr-ach__item.locked { opacity: .45; filter: grayscale(1); }
.pr-ach__ic { width: 30px; height: 30px; flex: 0 0 auto; border: 2px solid rgba(0,0,0,.5); box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4); position: relative; }
.pr-ach__ic.diamond { transform: rotate(45deg) scale(.8); }
.pr-ach__txt b { font-size: 14px; color: var(--ink); display: block; }
.pr-ach__txt span { font-family: var(--font-mono); font-size: 15px; color: var(--ink-soft); line-height: 1.25; }

/* servers played */
.pr-srv { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-srv__item { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--panel-2); border: 2px solid var(--panel-edge); box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark); cursor: pointer; }
.pr-srv__item:hover { background: var(--accent); color: #fff; }

@media (max-width: 860px) { .pr-main { grid-template-columns: 1fr; } .pr-list { max-height: 280px; } }

/* ===== Admin (ported from mockup admin.css) ===== */
/* admin.css — administrator dashboard (Minecraft GUI) */

.adm-shell { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 14px 16px 50px; }
.adm-main { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 14px; align-items: start; }

/* page bar */
.adm-bar {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap;
}
.adm-bar__title { font-family: var(--font-pixel); font-weight: 700; font-size: 19px; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.adm-bar__title .mc-logo__cube { width: 38px; height: 38px; }
.adm-bar__sub { font-family: var(--font-mono); font-size: 18px; color: var(--ink-soft); white-space: nowrap; }
.adm-bar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* nav */
.adm-nav { }
.adm-nav .mc-nav { font-size: 15px; }

/* content */
.adm-content { min-width: 0; }
.adm-card { padding: 18px 20px; margin-bottom: 14px; }
.adm-card__head { font-family: var(--font-pixel); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid rgba(0,0,0,.2); display: flex; align-items: center; gap: 10px; }
.adm-card__head .pill { margin-left: auto; }

/* stat tiles */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 12px; margin-bottom: 14px; }
.adm-tile { padding: 16px; display: flex; align-items: center; gap: 14px; }
.adm-tile__ic {
  width: 46px; height: 46px; flex: 0 0 auto; position: relative;
  border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
}
.adm-tile__ic::after { content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px), linear-gradient(90deg, rgba(0,0,0,.12) 1px,transparent 1px);
  background-size: 11px 11px; }
.adm-tile__num { font-family: var(--font-pixel); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.adm-tile > div { min-width: 0; }
.adm-tile__lab { font-family: var(--font-mono); font-size: 17px; color: var(--ink-soft); margin-top: 3px; }
.adm-tile__delta { font-family: var(--font-mono); font-size: 15px; }
.adm-tile__delta.up { color: var(--emerald); } .adm-tile__delta.down { color: var(--redstone); }

/* pill / badge */
.pill {
  font-family: var(--font-mono); font-size: 16px; padding: 3px 9px; line-height: 1.2;
  border: 2px solid var(--panel-edge); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.3);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.pill--queue { background: var(--gold); color: #3a2a06; }
.pill--ok { background: var(--emerald); color: #06210f; }
.pill--mut { background: #8a8a8a; color: #1c1c1c; }

/* role badge */
.role { font-family: var(--font-mono); font-size: 15px; padding: 2px 8px; border: 2px solid var(--panel-edge); white-space: nowrap; }
.role--admin { background: var(--redstone); color:#fff; }
.role--mod { background: var(--gold); color:#3a2a06; }
.role--user { background: var(--panel-2); color: var(--ink); }
.role--banned { background: #3a3a3a; color: #d9d9d9; }

/* mini action buttons */
.abtn {
  font-family: var(--font-pixel); font-weight: 700; font-size: 11px; cursor: pointer; color: var(--ink);
  background: var(--panel-2); border: 2px solid var(--panel-edge); padding: 6px 9px;
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark); white-space: nowrap;
}
.abtn:hover { background: var(--accent); color: #fff; }
.abtn--ok:hover { background: var(--emerald); }
.abtn--no { } .abtn--no:hover { background: var(--redstone); color:#fff; }
.abtn--danger { background: var(--redstone); color: #fff; }
.abtn--danger:hover { background: #8c2017; }
.act-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* toggle switch */
.tgl { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tgl__track {
  width: 52px; height: 26px; flex: 0 0 auto; position: relative;
  background: var(--slot-bg); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark);
}
.tgl__track.on { background: var(--accent-dark); }
.tgl__knob {
  position: absolute; top: 1px; left: 1px; width: 20px; height: 20px;
  background: var(--panel); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
  transition: left .08s steps(3);
}
.tgl__track.on .tgl__knob { left: 27px; }
.tgl__lab { font-size: 16px; color: var(--ink); }

/* settings rows */
.adm-setrow { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 2px solid rgba(0,0,0,.1); }
.adm-setrow:last-child { border-bottom: 0; }
.adm-setrow__txt { flex: 1; min-width: 0; }
.adm-setrow__txt b { font-size: 16px; color: var(--ink); display: block; }
.adm-setrow__txt span { font-family: var(--font-mono); font-size: 16px; color: var(--ink-soft); }

/* moderation diff */
.adm-mod { padding: 14px; margin-bottom: 12px; }
.adm-mod__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.adm-mod__who { font-weight: 700; }
.adm-mod__when { font-family: var(--font-mono); font-size: 16px; color: var(--ink-faint); }
.adm-mod__diff { font-family: var(--font-mono); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--slot-bg); border: 2px solid var(--panel-edge); padding: 8px 10px; box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark); }
.adm-mod__diff .add { background: rgba(43,179,106,.28); }
.adm-mod__diff .del { background: rgba(192,57,43,.25); text-decoration: line-through; }
.adm-mod__acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Side-by-side review of a proposed change (current vs proposed). */
.adm-review { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.adm-review__col { border: 2px solid var(--panel-edge); background: var(--panel); padding: 10px 12px; box-shadow: inset 2px 2px 0 rgba(0,0,0,.1); max-height: 480px; overflow: auto; }
.adm-review__col--new { border-color: var(--emerald, var(--accent)); box-shadow: inset 2px 2px 0 rgba(43,179,106,.18); }
.adm-review__lab { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 760px) { .adm-review { grid-template-columns: 1fr; } }

/* Page byline plate: who wrote the current version and when (+ link to full history). */
.page-byline {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 2px; padding: 5px 11px;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft);
  background: var(--panel-2); border: 2px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
}
.page-byline .mc-ic { width: 16px; height: 16px; }
.page-byline__sep { opacity: .6; }
.page-byline__hist { margin-left: 6px; color: var(--accent); cursor: pointer; font-weight: 700; }
.page-byline__hist:hover { text-decoration: underline; }

.adm-feed { display: flex; flex-direction: column; }
.adm-feed__row { display: flex; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 2px solid rgba(0,0,0,.1); }
.adm-feed__row:last-child { border-bottom: 0; }
.adm-feed__txt { flex: 1; min-width: 0; font-size: 15px; }
.adm-feed__txt b { color: var(--ink); }
.adm-feed__when { font-family: var(--font-mono); font-size: 15px; color: var(--ink-faint); white-space: nowrap; }
.adm-empty { font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); text-align: center; padding: 30px; }

@media (max-width: 860px) { .adm-main { grid-template-columns: 1fr; } }

/* ===== Minecraft widgets (mounted by widgets.js into .mcw placeholders) ===== */
.mcw { position: relative; width: 100%; min-height: 60px; }
.cel .mcw { height: 100%; }
.mcw__msg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; height: 100%; padding: 12px; font-size: 14px; color: var(--ink-soft);
  background: var(--slot-bg); border: 2px dashed var(--panel-edge);
}
/* video */
.mcw--video { aspect-ratio: 16 / 9; min-height: 120px; }
.cel .mcw--video { aspect-ratio: auto; }
.mcw-video__frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* 3D stages (skin / block) */
.mcw-skin__stage, .mcw-block__stage {
  position: relative; width: 100%; height: 100%; min-height: 200px; overflow: hidden;
  perspective: 1100px; cursor: grab; touch-action: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.06), rgba(0,0,0,.18)), var(--slot-bg);
  border: 2px solid var(--panel-edge);
}
.mcw--skin, .mcw--block { min-height: 220px; }
.mcw-skin__stage:active, .mcw-block__stage:active { cursor: grabbing; }
.mcw-skin__flat { image-rendering: pixelated; height: 90%; margin: auto; display: block; }
.m3-pivot { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.m3-model, .m3-part, .m3-cub { position: absolute; transform-style: preserve-3d; }
.m3-face {
  position: absolute; left: 0; top: 0; backface-visibility: hidden;
  image-rendering: pixelated; background-repeat: no-repeat;
}
/* schematic viewer */
.mcw--schem { display: flex; flex-direction: column; min-height: 260px; height: 100%; }
.mcw-schem__stage { position: relative; flex: 1; min-height: 200px; overflow: hidden;
  background: var(--slot-bg); border: 2px solid var(--panel-edge); }
.mcw-schem__cv { display: block; width: 100%; height: 100%; }
.mcw-schem__bar { display: flex; gap: 6px; align-items: center; padding: 6px 2px 0; flex-wrap: wrap; }
.mcw-btn {
  border: 2px solid var(--panel-edge); background: var(--panel-2); color: var(--ink);
  font: inherit; font-weight: 700; padding: 2px 10px; cursor: pointer; line-height: 1.4;
}
.mcw-btn:hover { background: var(--accent); color: #fff; }
.mcw-schem__layer { flex: 1; min-width: 90px; accent-color: var(--accent); }
.mcw-schem__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
/* crafting grid */
.mcw--craft { min-height: 150px; }
.mcw-craft { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 10px; height: 100%; }
.mcw-craft__grid { display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 4px; }
.mcw-craft__slot {
  position: relative; width: 44px; height: 44px; background: var(--slot-bg);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 1.5px 1.5px 0 rgba(0,0,0,.25), inset -1.5px -1.5px 0 rgba(255,255,255,.08);
}
.mcw-craft__slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.mcw-craft__arrow { font-size: 26px; color: var(--ink-soft); }
.mcw-craft__out .mcw-craft__slot { width: 56px; height: 56px; }
.mcw-craft__count {
  position: absolute; right: 2px; bottom: 0; font-family: var(--font-pixel); font-size: 15px;
  color: #fff; text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.8);
}
/* infobox media header: fused full-bleed with the card */
.infobox-media { margin: 0; background: var(--slot-bg); }
.infobox-media img { display: block; width: 100%; height: auto; }
.infobox-media .mcw { min-height: 180px; }
.infobox-media .mcw--video { min-height: 100px; }
.infobox-media .mcw-skin__stage, .infobox-media .mcw-block__stage,
.infobox-media .mcw-schem__stage { border: 0; }
.infobox-media .mcw-schem__bar { padding: 4px 6px 6px; }
/* editor palette groups + craft slot editor */
.ed-palette__group {
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: .6px; color: var(--ink-faint);
  margin: 10px 2px 4px; border-bottom: 1px solid var(--panel-dark); padding-bottom: 3px;
}
.ed-craftgrid { display: grid; grid-template-columns: repeat(3, 40px); grid-auto-rows: 40px; gap: 4px; }
.ed-craftslot {
  width: 40px; height: 40px; background: var(--slot-bg) center/contain no-repeat; cursor: pointer;
  border: 2px solid var(--panel-edge);
  box-shadow: inset 1.5px 1.5px 0 rgba(0,0,0,.25), inset -1.5px -1.5px 0 rgba(255,255,255,.08);
}
.ed-craftslot:hover { border-color: var(--accent); }

/* ===== UI batch 2: lightbox, expand, GL stages, drag-align hint, mobile ===== */

/* Editor main grid height: was an inline style; a class so media queries can undo it. */
.ed-main--fill { height: calc(100vh - 150px); }

/* --- Lightbox: any media (images, video, 3D) opens over the page --- */
.lb {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.74);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
body.lb-open { overflow: hidden; }
.lb__frame {
  position: relative; background: var(--panel);
  max-width: min(1280px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column; padding: 10px;
}
.lb__x {
  position: absolute; top: -14px; right: -14px; z-index: 6;
  width: 34px; height: 34px; cursor: pointer; color: #fff;
  background: var(--redstone); border: 2px solid var(--panel-edge);
  font-family: var(--font-pixel); font-weight: 700; font-size: 14px; line-height: 1;
  box-shadow: var(--shadow-pixel);
}
.lb__x:hover { background: #8c2017; }
.lb__body { overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lb__img { max-width: min(1200px, 90vw); max-height: 84vh; display: block; background: var(--slot-bg); image-rendering: auto; }
.lb__cap { font-family: var(--font-mono); font-size: 15px; color: var(--ink-soft); max-width: 80vw; text-align: center; }
.lb__w { width: min(1100px, 90vw); }
.lb__w--video { aspect-ratio: 16 / 9; max-height: 84vh; }
.lb__w--skin { width: min(640px, 90vw); height: min(76vh, 820px); }
.lb__w--skin .mcw-skin__stage { height: 100%; }
.lb__w--block { width: min(700px, 90vw); height: min(70vh, 700px); }
.lb__w--block .mcw-block__stage { height: 100%; }
.lb__w--schem { height: min(78vh, 900px); display: flex; flex-direction: column; }
.lb__w--schem .mcw-schem__stage { flex: 1; }

/* --- Expand-to-lightbox button on widgets (reader view) --- */
.mcw-expand {
  position: absolute; top: 6px; right: 6px; z-index: 8;
  width: 30px; height: 30px; cursor: pointer; color: #fff;
  background: rgba(0,0,0,.55); border: 2px solid var(--panel-edge);
  font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
.mcw:hover .mcw-expand, .mcw-expand:focus-visible { opacity: 1; }
.mcw-expand:hover { background: var(--accent); }
@media (pointer: coarse) { .mcw-expand { opacity: .85; } }

/* Article images open in the lightbox too */
figure.image img, .infobox-media img { cursor: zoom-in; }
.fl-wrap figure.image img, .ed-canvas figure.image img { cursor: inherit; }

/* --- WebGL stages (skinview3d / three.js) --- */
.mcw-skin__stage--gl, .mcw-block__stage--gl { perspective: none; }
.mcw-skin__stage--gl canvas, .mcw-block__stage--gl canvas {
  display: block; width: 100%; height: 100%; touch-action: none;
}
.mcw-schem__cv { touch-action: none; cursor: grab; }
.mcw-schem__cv:active { cursor: grabbing; }

/* --- Flow drag: overlay drop bar (Y = insertion gap, X extent = alignment zone),
       ghost chip following the pointer, dimmed source block. All overlays are
       pointer-transparent so the drag math never fights its own feedback. --- */
.fl-dropbar {
  position: absolute; height: 4px; background: var(--accent); z-index: 40;
  box-shadow: 0 0 0 1px rgba(0,0,0,.28); pointer-events: none;
}
.fl-dropbar::before, .fl-dropbar::after {
  content: ""; position: absolute; top: -4px; width: 4px; height: 12px;
  background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.28);
}
.fl-dropbar::before { left: 0; }
.fl-dropbar::after { right: 0; }
.fl-dropbar__tag {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 12px; color: #fff; white-space: nowrap;
  background: var(--accent-dark); border: 2px solid var(--panel-edge);
  padding: 3px 9px; box-shadow: inset 1px 1px 0 rgba(255,255,255,.25);
}
.fl-dropbar--below .fl-dropbar__tag { bottom: auto; top: 10px; }
.fl-dragchip {
  position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none; will-change: transform;
  font-family: var(--font-pixel); font-size: 12.5px; color: var(--ink);
  background: var(--panel); border: 2px solid var(--panel-edge);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35), inset 1px 1px 0 var(--panel-light);
  padding: 5px 10px;
}
.fl-block.is-dragging { opacity: .45; }
body.fl-dragging { user-select: none; -webkit-user-select: none; }
body.fl-dragging, body.fl-dragging * { cursor: grabbing !important; }

/* ============================================================
   Mobile / tablet pass
   ============================================================ */
@media (max-width: 1000px) {
  .mc-grid { grid-template-columns: 188px minmax(0,1fr); }
}

/* Editor: stack panels under the canvas on narrow screens */
@media (max-width: 900px) {
  .ed-main, .ed-main.ed-main--fill { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .ed-panel--palette, .ed-canvaswrap, .ed-panel--props { grid-column: auto; grid-row: auto; }
  .ed-canvaswrap { order: -1; min-height: 58vh; }
  .ed-panel { max-height: 40vh; }
  /* strip → normal vertical panel on mobile: groups stack full-width, the
     resize handle is pointless without a fixed grid row. */
  .ed-panel--props { max-height: 60vh; }
  .ed-panel--props .ed-panel__body { display: block; }
  .ed-panel--props .ed-prop { margin-bottom: 12px; }
  .ed-resize { display: none; }
  .ed-group { border-right: 0; padding-right: 0; margin-bottom: 14px; }
  .ed-group--right { margin-left: 0; }
  .ed-group--stack > .ed-group__b,
  .ed-group--actions > .ed-group__b { width: auto; }
  .ed-ta--rich { height: 150px; }
  .ed-canvasscroll { padding: 10px; }
  .fl-wrap { padding: 20px 16px 44px; }
  .fl-handle { left: -24px; }
  .ed-toolbar2 { gap: 4px; padding: 6px 8px; }
  .ed-title { width: 130px; }
}

@media (max-width: 700px) {
  .wiki { padding: 10px 8px 40px; }
  .mc-topbar { padding: 6px 8px; gap: 8px; }
  .mc-topbar__nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .mc-topbar__nav a { padding: 7px 9px; font-size: 12px; }
  .mc-header__body { padding: 12px; gap: 10px; }
  .mc-logo__cube { width: 40px; height: 40px; }
  .mc-logo__title { font-size: 21px; }
  .mc-logo__sub { font-size: 15px; white-space: normal; }
  .mc-search { width: 100%; margin-left: 0; }
  .mc-crumbs { white-space: normal; font-size: 16px; padding: 7px 10px; }
  .mc-tabs { overflow-x: auto; scrollbar-width: none; }
  .mc-tabs::-webkit-scrollbar { display: none; }
  .mc-page { padding: 14px 12px 20px; }
  .mc-title { font-size: 25px; }
  .mc-title small { font-size: 15px; }
  .mc-h2 { font-size: 19px; }
  .mc-toc { min-width: 0; width: 100%; }
  .mc-cards { grid-template-columns: repeat(auto-fill, minmax(126px,1fr)); gap: 8px; }
  .mc-footer { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  table.mc-table th, table.mc-table td { padding: 7px 8px; font-size: 14px; }
  /* members / admin */
  .pr-hero { flex-direction: column; padding: 14px; gap: 12px; }
  .skin--lg { width: 96px; height: 96px; }
  .adm-shell { padding: 10px 8px 40px; }
  .adm-bar { padding: 10px 12px; }
  .adm-card { padding: 14px 12px; }
  .adm-card > .mc-tablewrap, .adm-card table { max-width: 100%; }
  .acc-rows { max-height: 38vh; }
  .acc-tabs { flex-wrap: wrap; }
  /* editor modals + lightbox */
  .ed-modal__box { width: 96vw; max-height: 90vh; }
  .lb { padding: 8px; }
  .lb__frame { max-width: 98vw; max-height: 96vh; padding: 6px; }
  .lb__x { top: -8px; right: -8px; }
  .lb__w { width: 92vw; }
  .lb__w--skin { height: min(70vh, 560px); }
  .lb__w--schem { height: min(72vh, 640px); }
  /* widgets */
  .mcw-craft { gap: 8px; }
  .mcw-craft__grid { grid-template-columns: repeat(3, 38px); grid-auto-rows: 38px; }
  .mcw-craft__slot { width: 38px; height: 38px; }
  .mcw-craft__out .mcw-craft__slot { width: 46px; height: 46px; }
}