/* Minecraftia by Andrew Tyler (www.AndrewTyler.net) — the pixel font used for
   the in-game-style scoreboard. Bundled locally so it renders the same on every
   machine, whether or not a Minecraft font is installed. */
@font-face {
  font-family: "Minecraftia";
  src: url("/assets/Minecraftia-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bundled pixel fallback (OFL). Minecraftia lacks the resource-pack symbols the
   scoreboard uses (⚔ ₪ ◆ small-caps); per-glyph fallback pulls those from
   Monocraft so they render blocky instead of as .notdef tofu boxes. */
@font-face {
  font-family: "Monocraft";
  src: url("/assets/Monocraft.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* GNU Unifont (dual GPL+font-exception / OFL), subset to the symbol/arrow/
   currency/box/geometric/dingbat blocks. This is the exact font the vanilla
   client falls back to for non-ASCII BMP glyphs, so the scoreboard renders
   symbols (⚔ ✝ ₪ ─ ◆ ⇄ …) the same way the game does - no server pack needed. */
@font-face {
  font-family: "UnifontSymbols";
  src: url("/assets/unifont-symbols.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Only these symbol blocks. With this range the face is chosen for exactly
     these code points even when it is first in the stack, so Minecraftia (which
     has e.g. U+00A4) and any locally-installed "Minecraft" font can't steal the
     symbols; everything else (ASCII, Cyrillic) falls straight through to the
     pixel fonts, keeping the Russian labels as they were. */
  unicode-range: U+00A0-00FF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F,
    U+2150-218F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+2460-24FF, U+2500-257F,
    U+2580-259F, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+2900-297F, U+2B00-2BFF,
    U+2E00-2E7F, U+3000-303F;
}

/* The blocks of the same font that the face above leaves out, which servers use
   to dress a scoreboard up and the vanilla client draws with Unifont too: small
   capitals and phonetic letters (ʜᴏʟʏᴡᴏʀʟᴅ ꜱ), Braille patterns, the Cyrillic
   extensions (the multiocular O ꙮ), fullwidth forms, kana. Built by
   scripts/build-unifont-extra.py; its ranges are the ones below. Loaded only
   when a line uses one of them. */
@font-face {
  font-family: "UnifontExtra";
  src: url("/assets/unifont-extra.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0250-02AF, U+02B0-02FF, U+0500-052F, U+1C80-1C8F, U+1D00-1DBF,
    U+2800-28FF, U+2C60-2C7F, U+2DE0-2DFF, U+3040-30FF, U+A640-A69F, U+A720-A7FF,
    U+FE00-FE6F, U+FF00-FFEF;
}

:root {
  color-scheme: dark;
  --bg: #111412;
  --surface: #181d1a;
  --surface-2: #202822;
  --surface-3: #283027;
  --border: #334137;
  --text: #edf3ec;
  --muted: #9eafa2;
  --faint: #6f8073;
  --accent: #7fd36b;
  --accent-2: #5fb6c8;
  --warn: #d4ad45;
  --danger: #e26767;
  --offline: #7b817b;
  /* Online / active status green. Defined only here (never in a palette block)
     so a running bot, an active function and the status panel always read as
     green, whatever palette is picked. */
  --status-online: #46c46a;
  --status-online-soft: color-mix(in srgb, var(--status-online) 15%, var(--surface));
  --function-active-bg: #1d2b20;
  --function-active-border: #4c8d55;
  --function-paused-bg: #2a271b;
  --function-paused-border: #a17f32;
  --function-inactive-bg: #1c211e;
  --function-inactive-border: #444d47;
  --function-error-bg: #2d1d1e;
  --function-error-border: #a64e4e;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --brand-icon-filter: none;

  /* Design tokens. A palette (data-theme) only changes colours; a design
     (data-design) changes these shape and density values. The two are
     independent, so any palette works with any design. */
  --radius: 8px;
  --control-radius: var(--radius);
  --control-height: 36px;
  --panel-border-width: 1px;
  --panel-shadow: var(--shadow);
  --panel-pad: 16px;
  --panel-header-pad: 14px 16px;
  --row-height: 56px;
  --row-pad: 8px;
  --topbar-pad: 14px 18px;
  /* Shared height for the sidebar brand and the main topbar so their bottom
     borders meet as one continuous line, in every design and every view. */
  --header-height: 72px;
  --heading-transform: none;
  --heading-spacing: 0;
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-family: var(--font-family);
}

/* Scrollbars follow the palette and design tokens, so every theme gets its own.
   The thumb is inset into a transparent track via a transparent border, which
   keeps the hit area wide while the visible bar stays slim. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: min(var(--radius), 6px);
    min-height: 36px;
    min-width: 36px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--faint);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--accent);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-button {
    display: none;
  }
}

/* Soft: no panel outlines, deep rounding and generous spacing. Depth comes
   from elevation instead of borders. */
body[data-design="soft"] {
  --radius: 16px;
  --control-radius: 999px;
  --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  --control-height: 40px;
  --panel-border-width: 0px;
  --panel-pad: 20px;
  --panel-header-pad: 18px 20px;
  --row-height: 60px;
  --row-pad: 10px 12px;
  --topbar-pad: 16px 22px;
}

body[data-design="soft"] .panel-header {
  border-bottom: 0;
  padding-bottom: 4px;
}

body[data-design="soft"] button,
body[data-design="soft"] input,
body[data-design="soft"] select,
body[data-design="soft"] textarea {
  border-color: transparent;
  background: var(--glass-2);
}

body[data-design="soft"] textarea {
  border-radius: var(--radius);
}

body[data-design="soft"] .sidebar,
body[data-design="soft"] .topbar {
  border-color: transparent;
}

body[data-design="soft"] .bot-row.selected {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Compact: same structure, much higher information density. */
body[data-design="compact"] {
  --radius: 5px;
  /* Restated rather than left to inherit var(--radius) from :root, which
     would still resolve to the classic 8px. */
  --control-radius: 5px;
  --control-height: 28px;
  --panel-pad: 9px;
  --panel-header-pad: 7px 10px;
  --panel-shadow: none;
  --row-height: 38px;
  --row-pad: 4px 6px;
  --topbar-pad: 7px 10px;
  font-size: 13px;
}

body[data-design="compact"] .panel-header h3 {
  font-size: 13px;
}

body[data-design="compact"] input,
body[data-design="compact"] select,
body[data-design="compact"] textarea {
  padding: 4px 7px;
}

body[data-design="compact"] textarea {
  min-height: 60px;
}

body[data-design="compact"] .bot-row {
  margin-bottom: 2px;
  grid-template-columns: 20px 10px minmax(0, 1fr) 14px;
  gap: 7px;
}

body[data-design="compact"] .sidebar-actions,
body[data-design="compact"] .bot-list {
  padding: 6px;
}

body[data-design="compact"] .dpad {
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
}

body[data-design="compact"] .dpad-key {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}

body[data-design="compact"] .mouse-key {
  height: 74px;
  min-height: 74px;
}

/* Terminal: square, monospace, hairline outlines and no elevation. */
body[data-design="terminal"] {
  --radius: 0px;
  --control-radius: 0px;
  --control-height: 32px;
  --panel-shadow: none;
  --panel-pad: 12px;
  --panel-header-pad: 10px 12px;
  --row-height: 44px;
  --row-pad: 6px 8px;
  --topbar-pad: 10px 14px;
  --heading-transform: uppercase;
  --heading-spacing: 0.08em;
  --font-family: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 13px;
}

body[data-design="terminal"] .panel {
  border-left: 2px solid var(--accent);
}

body[data-design="terminal"] .panel-header h3,
body[data-design="terminal"] .selection-title h2 {
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-spacing);
}

body[data-design="terminal"] button {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-design="terminal"] .dpad,
body[data-design="terminal"] .dpad-key,
body[data-design="terminal"] .control-bar,
body[data-design="terminal"] .mouse-key,
body[data-design="terminal"] .bot-group-block {
  border-radius: 0;
}

body[data-design="terminal"] .bot-row.selected {
  border-left: 2px solid var(--accent);
}

/* Palettes. Every theme only overrides the custom properties declared in
   :root; layout rules never key off a theme name. Scheme specific rules use
   body[data-scheme="light"] so all light palettes share them.
   Keep the ids in sync with THEMES in public/app.js and src/storage/defaults.js. */

body[data-scheme="light"] {
  color-scheme: light;
}

body[data-theme="midnight"] {
  --bg: #0d1220;
  --surface: #131a2b;
  --surface-2: #1a2338;
  --surface-3: #232e47;
  --border: #2f3c59;
  --text: #e8eefb;
  --muted: #9aa9c6;
  --faint: #6c7c9c;
  --accent: #6aa9f5;
  --accent-2: #58c8d0;
  --warn: #d8b055;
  --danger: #e8697f;
  --offline: #78829a;
  --function-active-bg: #16233a;
  --function-active-border: #3f6ea8;
  --function-paused-bg: #2a2718;
  --function-paused-border: #9c8236;
  --function-inactive-bg: #182034;
  --function-inactive-border: #3b4761;
  --function-error-bg: #2c1c22;
  --function-error-border: #a24f5e;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

body[data-theme="carbon"] {
  --bg: #131313;
  --surface: #1b1b1b;
  --surface-2: #232323;
  --surface-3: #2c2c2c;
  --border: #3a3a3a;
  --text: #ececec;
  --muted: #a3a3a3;
  --faint: #767676;
  --accent: #e0a34a;
  --accent-2: #7fb2c4;
  --warn: #d0a53f;
  --danger: #d96a6a;
  --offline: #7d7d7d;
  --function-active-bg: #2a2418;
  --function-active-border: #8d7233;
  --function-paused-bg: #2a2618;
  --function-paused-border: #96803a;
  --function-inactive-bg: #1f1f1f;
  --function-inactive-border: #444444;
  --function-error-bg: #2c1c1c;
  --function-error-border: #9e5050;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

body[data-theme="amethyst"] {
  --bg: #15111f;
  --surface: #1d1829;
  --surface-2: #241d33;
  --surface-3: #2e2542;
  --border: #40355c;
  --text: #ece7f8;
  --muted: #a99cc4;
  --faint: #7c6f99;
  --accent: #b18cf0;
  --accent-2: #6fc2d8;
  --warn: #d5a84e;
  --danger: #e06b8b;
  --offline: #837a96;
  --function-active-bg: #241c3a;
  --function-active-border: #6d51a8;
  --function-paused-bg: #2b2418;
  --function-paused-border: #9b8034;
  --function-inactive-bg: #1f1a2c;
  --function-inactive-border: #453b60;
  --function-error-bg: #2e1a24;
  --function-error-border: #a1516a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

body[data-theme="ember"] {
  --bg: #181210;
  --surface: #211815;
  --surface-2: #2a1e19;
  --surface-3: #352622;
  --border: #4a3630;
  --text: #f4e9e3;
  --muted: #bfa397;
  --faint: #8f776c;
  --accent: #e8794a;
  --accent-2: #d8a94b;
  --warn: #d9a53f;
  --danger: #e2635f;
  --offline: #8d7d76;
  --function-active-bg: #33201a;
  --function-active-border: #a05a35;
  --function-paused-bg: #2f2517;
  --function-paused-border: #9d8233;
  --function-inactive-bg: #241a17;
  --function-inactive-border: #4d3a34;
  --function-error-bg: #331b1b;
  --function-error-border: #a44f4f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

/* Light palettes are deliberately kept well off white. Bright surfaces next to
   near black text made the panel glare, so every light theme keeps its panels at
   about 83% lightness and the page behind them at about 78%, with muted text
   dark enough to read there. Each palette keeps its own hue and colourfulness;
   only the lightness is down. */
body[data-theme="light"] {
  --bg: #d0cbbe;
  --surface: #dbd7cc;
  --surface-2: #cdc9ba;
  --surface-3: #c3bdac;
  --border: #ada692;
  --text: #2c302a;
  --muted: #565e53;
  --faint: #626b5e;
  --accent: #286a37;
  --accent-2: #1a6070;
  --warn: #825e0a;
  --danger: #a33a39;
  --offline: #82867d;
  --function-active-bg: #c9d6c7;
  --function-active-border: #5e9165;
  --function-paused-bg: #d9d0b4;
  --function-paused-border: #9e7a21;
  --function-inactive-bg: #cfccc3;
  --function-inactive-border: #9e9f95;
  --function-error-bg: #d7c4c2;
  --function-error-border: #b25957;
  --shadow: 0 16px 40px rgba(72, 64, 45, 0.12);
  --brand-icon-filter: brightness(0) saturate(100%);
}

body[data-theme="daylight"] {
  --bg: #c7cfd9;
  --surface: #d2d9e1;
  --surface-2: #c4cdd9;
  --surface-3: #b6c2d3;
  --border: #9eadc2;
  --text: #222c39;
  --muted: #4a5a71;
  --faint: #596b81;
  --accent: #285b92;
  --accent-2: #196b7d;
  --warn: #7f5a05;
  --danger: #a53832;
  --offline: #7e8b9e;
  --function-active-bg: #c5d0dd;
  --function-active-border: #5983bc;
  --function-paused-bg: #dad1b4;
  --function-paused-border: #a17a19;
  --function-inactive-bg: #cbd1d9;
  --function-inactive-border: #9fabbb;
  --function-error-bg: #d7c4c3;
  --function-error-border: #b45a57;
  --shadow: 0 16px 40px rgba(40, 60, 90, 0.11);
  --brand-icon-filter: brightness(0) saturate(100%);
}

body[data-theme="paper"] {
  --bg: #d5cdbe;
  --surface: #ded7c9;
  --surface-2: #d0c6b2;
  --surface-3: #c5baa2;
  --border: #b1a186;
  --text: #33291d;
  --muted: #63523e;
  --faint: #6f5f4b;
  --accent: #784d22;
  --accent-2: #3a5c5d;
  --warn: #7d5a0b;
  --danger: #9e3d34;
  --offline: #908575;
  --function-active-bg: #d4c9b3;
  --function-active-border: #a1773e;
  --function-paused-bg: #d8ccad;
  --function-paused-border: #9e791d;
  --function-inactive-bg: #d2cbbe;
  --function-inactive-border: #a89b85;
  --function-error-bg: #d7c1bb;
  --function-error-border: #b15e51;
  --shadow: 0 16px 40px rgba(80, 62, 40, 0.12);
  --brand-icon-filter: brightness(0) saturate(100%);
}

body[data-theme="mint"] {
  --bg: #c8d3cb;
  --surface: #d3dad4;
  --surface-2: #c3d0c6;
  --surface-3: #b5c9bb;
  --border: #97b2a0;
  --text: #21302a;
  --muted: #455e50;
  --faint: #516b5b;
  --accent: #19664d;
  --accent-2: #215e73;
  --warn: #745a07;
  --danger: #9c3b32;
  --offline: #798c82;
  --function-active-bg: #c2d3c9;
  --function-active-border: #4d906f;
  --function-paused-bg: #d7cfb2;
  --function-paused-border: #96791e;
  --function-inactive-bg: #cbd1cc;
  --function-inactive-border: #97aa9e;
  --function-error-bg: #d6c2bf;
  --function-error-border: #b25a52;
  --shadow: 0 16px 40px rgba(35, 70, 55, 0.11);
  --brand-icon-filter: brightness(0) saturate(100%);
}

body[data-theme="rose"] {
  --bg: #d6c8cd;
  --surface: #ded4d7;
  --surface-2: #d1c2c7;
  --surface-3: #c7b5bc;
  --border: #b798a3;
  --text: #302127;
  --muted: #62464f;
  --faint: #6f535b;
  --accent: #8a3456;
  --accent-2: #375d76;
  --warn: #7b5b0c;
  --danger: #9f3837;
  --offline: #8f7f84;
  --function-active-bg: #d6c2cb;
  --function-active-border: #aa607e;
  --function-paused-bg: #d9ceb0;
  --function-paused-border: #9a761d;
  --function-inactive-bg: #d2cacd;
  --function-inactive-border: #ad979f;
  --function-error-bg: #d8c1c1;
  --function-error-border: #b15555;
  --shadow: 0 16px 40px rgba(90, 50, 65, 0.11);
  --brand-icon-filter: brightness(0) saturate(100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
  /* Re-applied here, not only on :root, because a design overrides
     --font-family on body. A var() is substituted where the property is
     declared, so the :root declaration would keep resolving to the default. */
  font-family: var(--font-family);
}

/* The background glow: slowly drifting coloured light behind the whole panel. It
   is a stack of layers (#glow > .glow-layer, built by the script), one per
   palette, each with two oversized sheets that drift by transform only, so the
   compositor does the work and nothing repaints. Switching palette fades a new
   layer in over the old one, and switching the glow off fades the whole stack
   out; both animate opacity alone. (Easing the colours themselves repainted two
   screen-sized layers every frame and re-resolved every translucent surface,
   and it stuttered.) The fades are only switched on by body.glow-ready, which
   the script adds after the first palette is set, so a page load does not fade
   in. Panels are translucent, so the glow shows in the gaps, behind the content
   area and through the sidebar and top bar. */
body {
  --glow-strength: 38%;
  /* Translucent twins of --surface, --surface-2 and --surface-3 for everything
     that sits on the page: cards, buttons, fields, rows. Overlays that must stay
     readable (modals, menus, toasts, sticky table headers) keep the solid
     tokens. A lower alpha lets more of the glow through. */
  --glass-alpha: 58%;
  --glass: color-mix(in srgb, var(--surface) var(--glass-alpha), transparent);
  --glass-2: color-mix(in srgb, var(--surface-2) var(--glass-alpha), transparent);
  --glass-3: color-mix(in srgb, var(--surface-3) var(--glass-alpha), transparent);
}

body[data-scheme="light"] {
  --glow-strength: 46%;
}

/* Four glow colours per palette: the first two light the first sheet's blobs,
   the last two the second sheet's. The default is Froggion. The body carries the
   palette too (data-gradient), for the settings controls that borrow its colours;
   each layer carries its own (data-palette), so a layer fading out keeps its
   colours while the next one fades in. */
body,
.glow-layer {
  --glow-1: #2fa05a;
  --glow-2: #3fbf6a;
  --glow-3: #58d27a;
  --glow-4: #2f9e57;
}

body[data-gradient="jaba"],
.glow-layer[data-palette="jaba"] {
  --glow-1: #3fbf6a;
  --glow-2: #3fbf6a;
  --glow-3: #ee8a3a;
  --glow-4: #ee8a3a;
}

body[data-gradient="obsidian"],
.glow-layer[data-palette="obsidian"] {
  --glow-1: #7c4ddb;
  --glow-2: #b79cf5;
  --glow-3: #a62e68;
  --glow-4: #7c4ddb;
}

body[data-gradient="lava"],
.glow-layer[data-palette="lava"] {
  --glow-1: #e5493a;
  --glow-2: #ee8a3a;
  --glow-3: #f2c53d;
  --glow-4: #e5493a;
}

body[data-gradient="moonlight"],
.glow-layer[data-palette="moonlight"] {
  --glow-1: #2f62d8;
  --glow-2: #4cc3f0;
  --glow-3: #a6dcff;
  --glow-4: #2f62d8;
}

/* Gradient switched off in the settings (data-glow="off", the palette stays
   set): the glow fades out in its own colours and, once it is gone, the panels
   go back to solid, as before the glow. The script flips the attribute after
   the fade, so the panels do not change while the glow is still visible. */
body[data-glow="off"] {
  --glass-alpha: 100%;
}

#glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Faded out, the stack stops being painted at all. */
#glow.is-off {
  opacity: 0;
  visibility: hidden;
}

body.glow-ready #glow {
  transition: opacity 1s ease-in-out;
}

body.glow-ready #glow.is-off {
  transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

.glow-layer {
  position: absolute;
  inset: 0;
}

body.glow-ready .glow-layer {
  transition: opacity 1.5s ease-in-out;
}

.glow-layer.is-entering,
.glow-layer.is-leaving {
  opacity: 0;
}

.glow-a,
.glow-b {
  position: absolute;
  inset: -30%;
  will-change: transform;
}

.glow-a {
  background:
    radial-gradient(44% 50% at 22% 30%, color-mix(in srgb, var(--glow-1) var(--glow-strength), transparent), transparent 72%),
    radial-gradient(40% 46% at 78% 82%, color-mix(in srgb, var(--glow-2) calc(var(--glow-strength) * 0.7), transparent), transparent 72%);
  animation: glow-drift-a 46s ease-in-out infinite alternate;
}

.glow-b {
  background:
    radial-gradient(42% 48% at 80% 24%, color-mix(in srgb, var(--glow-3) var(--glow-strength), transparent), transparent 72%),
    radial-gradient(38% 44% at 18% 78%, color-mix(in srgb, var(--glow-4) calc(var(--glow-strength) * 0.7), transparent), transparent 72%);
  animation: glow-drift-b 58s ease-in-out infinite alternate;
}

@keyframes glow-drift-a {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(6%, 4%, 0) rotate(14deg) scale(1.08); }
  100% { transform: translate3d(2%, 7%, 0) rotate(-10deg) scale(1.02); }
}

@keyframes glow-drift-b {
  0% { transform: translate3d(5%, 3%, 0) rotate(0deg) scale(1.04); }
  50% { transform: translate3d(-6%, -4%, 0) rotate(-16deg) scale(1); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(12deg) scale(1.1); }
}

/* Theme switch: for the ~1s the .theme-switching class is on <body>, every
   element eases its themed colours toward the new palette instead of snapping.
   The class is added (and the layout flushed) before data-theme flips, so the
   old colours are the transition's starting point; it is removed after 1s. */
body.theme-switching,
body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
  transition: background-color 1s ease, color 1s ease, border-color 1s ease,
    box-shadow 1s ease, fill 1s ease, stroke 1s ease, outline-color 1s ease !important;
}

/* While a theme is switching every theme control is locked, not just no-op:
   the untouched ones dim, and the pressed one shows a spinner in place of its
   own content (text/icon) until the cross-fade finishes. */
body.theme-switching [data-action="theme"],
body.theme-switching [data-action="set-theme"] {
  pointer-events: none;
}

body.theme-switching [data-action="set-theme"]:not(.is-theme-loading),
body.theme-switching [data-action="theme"]:not(.is-theme-loading) {
  opacity: 0.5;
}

/* The colours of the inventory are the palette's own, mixed lighter or darker:
   the panel is the palette's second surface, a slot a darker well in it, and the
   bevel its light and shadow edges. Declared on body because that is where a
   palette (body[data-theme]) sets the surfaces they are mixed from. */
body {
  --inv-panel: var(--surface-2);
  --inv-hi: color-mix(in srgb, var(--surface-2) 92%, #fff);
  --inv-lo: color-mix(in srgb, var(--surface-2) 44%, #000);
  --inv-line: color-mix(in srgb, var(--surface-2) 83%, #fff);
  --inv-well: color-mix(in srgb, var(--surface-2) 63%, #000);
  --inv-well-hover: color-mix(in srgb, var(--surface-2) 96%, #fff);
  --inv-well-active: color-mix(in srgb, var(--surface-2) 90%, #fff);
  --inv-text: color-mix(in srgb, var(--text) 88%, var(--surface-2));
  --inv-title: color-mix(in srgb, var(--text) 80%, var(--surface-2));
}

body[data-scheme="light"] {
  --inv-hi: #fff;
  --inv-lo: color-mix(in srgb, var(--surface-2) 30%, #000);
  --inv-line: color-mix(in srgb, var(--surface-2) 58%, #000);
  --inv-well: color-mix(in srgb, var(--surface-2) 68%, #000);
  --inv-well-hover: color-mix(in srgb, var(--surface-2) 80%, #000);
  --inv-well-active: color-mix(in srgb, var(--surface-2) 85%, #000);
  --inv-text: var(--text);
  --inv-title: var(--text);
}

.is-theme-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

/* Hide the button's real content behind the spinner without changing its size. */
.is-theme-loading > * {
  visibility: hidden;
}

.is-theme-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* border-box so the border is inside the 16px, keeping the -8px offset exactly
     centred (content-box added the border on top and pushed it off-centre). */
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(127, 127, 127, 0.4);
  border-top-color: var(--accent);
  animation: theme-switch-spin 0.7s linear infinite;
}

@keyframes theme-switch-spin {
  to { transform: rotate(360deg); }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

button:hover:not(:disabled) {
  border-color: var(--accent-2);
  background: var(--glass-3);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass);
  color: var(--text);
  padding: 8px 10px;
  outline: none;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-2);
}

/* Custom dropdown (custom-select.js). The native <select> stays in the DOM as
   the value holder and is taken out of the layout; .mb-select stands in for it
   and copies the select's look, including the per-design overrides below. */
select.mb-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden;
}

.mb-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass);
  color: var(--text);
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.mb-select:hover:not(.is-disabled) {
  border-color: var(--accent-2);
}

.mb-select:focus-visible,
.mb-select.is-open {
  border-color: var(--accent-2);
}

.mb-select.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.mb-select-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-select-chevron {
  flex: none;
  color: var(--muted);
  transition: transform 140ms ease;
}

.mb-select.is-open .mb-select-chevron {
  transform: rotate(180deg);
  color: var(--accent-2);
}

.mb-select-menu {
  position: fixed;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: min(var(--radius), 10px);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  font-family: var(--font-family);
}

.mb-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: max(0px, calc(min(var(--radius), 10px) - 3px));
  cursor: pointer;
  white-space: nowrap;
}

.mb-select-option.is-grouped {
  padding-left: 18px;
}

.mb-select-option.is-active {
  background: var(--surface-3);
}

.mb-select-option.is-selected {
  color: var(--accent);
  font-weight: 600;
}

.mb-select-option.is-selected::after {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin: -2px 0 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mb-select-option.is-empty {
  color: var(--faint);
}

.mb-select-option.is-disabled {
  color: var(--faint);
  cursor: not-allowed;
  opacity: 0.55;
}

.mb-select-group {
  padding: 8px 10px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mb-select-group:first-child {
  padding-top: 4px;
}

body[data-design="soft"] .mb-select {
  border-color: transparent;
  background: var(--glass-2);
}

body[data-design="compact"] .mb-select {
  padding: 4px 7px;
}

.topbar-switcher .mb-select {
  min-height: 32px;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-box {
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 22px;
}

.auth-title {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.auth-title h1 {
  margin: 0;
  font-size: 24px;
}

.auth-title span {
  color: var(--muted);
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.sidebar {
  grid-row: 1 / 3;
  border-right: 1px solid var(--border);
  /* No fill of its own: sidebar, top bar and content all sit on the same
     page-wide glow, so there is no seam where they meet. */
  background: transparent;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  padding-block: 0;
  height: var(--header-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

.brand-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: var(--brand-icon-filter);
}

.brand h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.brand span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.icon-button {
  width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.bot-list {
  overflow: auto;
  padding: 10px;
}

.bot-list-section-title {
  display: flex;
  margin: 14px 4px 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.bot-row {
  display: grid;
  /* The checkbox column is closed until a multi-selection starts; the list
     gets .select-mode then and the column opens while the boxes fade in. */
  grid-template-columns: 0px 12px minmax(0, 1fr) 18px;
  transition: grid-template-columns 0.24s ease, border-color 120ms ease, background 120ms ease;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--row-height);
  margin-bottom: 6px;
  padding: var(--row-pad);
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
}

.bot-row:hover,
.bot-row.selected {
  border-color: var(--border);
  background: var(--glass-2);
}

.bot-row.plugin-attention {
  border-color: color-mix(in srgb, var(--warn) 76%, var(--border));
  background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  box-shadow: inset 3px 0 0 var(--warn);
}

.bot-list.select-mode .bot-row {
  grid-template-columns: 24px 12px minmax(0, 1fr) 18px;
}

.bot-row input {
  width: 18px;
  min-height: 18px;
  padding: 0;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bot-list.select-mode .bot-row input {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Feedback while a bot is held for a multi-selection (BOT_HOLD_MS, half a second).
   The fill waits for 0.3s and fills in the 0.2s that are left, ending as the
   selection starts. It used to start at 0.1s, which a click on a touchpad (a
   press that lasts 150-300ms, longer than a mouse's) outlasted: every click on a
   bot played part of it. */
.bot-row.holding {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 24%, transparent));
  background-repeat: no-repeat;
  background-size: 0 100%;
  animation: bot-hold-fill 0.2s linear 0.3s forwards;
}

@keyframes bot-hold-fill {
  to { background-size: 100% 100%; }
}

.bot-drag-handle {
  display: grid;
  place-items: center;
  height: 34px;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
}

.bot-row:hover .bot-drag-handle {
  color: var(--text);
  opacity: 1;
}

.bot-row.archived {
  opacity: 0.68;
}

.bot-row.archived .bot-drag-handle {
  visibility: hidden;
}

.bot-context-menu {
  position: fixed;
  z-index: 140;
  display: grid;
  width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.bot-context-menu button {
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.bot-context-menu button:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

body.bot-dragging,
body.bot-dragging .bot-row,
body.bot-dragging .bot-drag-handle {
  cursor: grabbing;
  user-select: none;
}

.bot-row.dragging {
  opacity: 0.45;
}

.bot-row.drag-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.bot-row.drag-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--offline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--offline), transparent 78%);
}

.status-dot.active {
  background: var(--status-online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-online), transparent 78%);
}

.status-dot.connecting {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn), transparent 78%);
}

.status-dot.disconnected {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger), transparent 78%);
}

.status-dot.zone-colored {
  background: var(--bot-zone-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bot-zone-color), transparent 78%);
}

.bot-meta {
  min-width: 0;
}

.bot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

/* Panel headings have no subtitle line; the small grey text under a title was
   noise. The elements stay in the markup. */
.panel-header .bot-state {
  display: none;
}

.bot-state {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-actions {
  display: grid;
  /* Fixed 3 x 2 grid. The cap keeps the icons compact when the sidebar goes
     full width on a narrow screen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 292px;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-icon-button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0;
  line-height: 1;
}

.ui-icon {
  display: block;
  flex: none;
  color: inherit;
}

.mouse-icon {
  display: block;
  color: inherit;
}

.sidebar-icon-button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glass-3);
}

.bot-group-block {
  margin: 6px 4px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bot-group-color, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bot-group-color, var(--accent)) 7%, transparent);
  overflow: hidden;
}

.bot-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bot-group-swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--bot-group-color, var(--accent));
}

.bot-group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-group-proxy {
  display: flex;
  color: var(--accent-2);
}

.bot-group-title small {
  margin-left: auto;
  color: var(--faint);
}

.bot-row.grouped {
  border-radius: 0;
}

.bot-group-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, color 120ms ease;
}

.bot-group-collapse:hover {
  color: var(--text);
}

.bot-group-block.collapsed .bot-group-collapse {
  transform: rotate(-90deg);
}

.bot-group-block.collapsed .bot-group-title {
  border-bottom: none;
}

.bot-group-drag-handle {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 4px;
  padding: 0 2px;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: -2px;
  cursor: grab;
  touch-action: none;
}

.bot-group-drag-handle:hover {
  color: var(--muted);
}

body.group-dragging,
body.group-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.bot-group-block.group-dragging-source {
  opacity: 0.5;
}

.bot-group-block.group-drop-before {
  box-shadow: inset 0 3px 0 0 var(--accent);
}

.bot-group-block.group-drop-after {
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

.bot-group-loose {
  margin-top: 2px;
}

.main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--topbar-pad);
  padding-block: 0;
  height: var(--header-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.selection-title h2 {
  margin: 0;
  font-size: 21px;
}

.selection-title span {
  color: var(--muted);
  font-size: 13px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.workspace-topbar .toolbar {
  display: none;
}

.topbar-tabs,
.topbar-tabs .bot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topbar-tabs .bot-tabs button {
  width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.topbar-switcher {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(120px, 190px) auto;
  gap: 6px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.topbar-switcher.is-auto {
  grid-template-columns: minmax(120px, 170px) minmax(120px, 190px);
}

/* The switcher sits centered in the space between the tab buttons and the
   connect/disconnect buttons. */
.topbar-switch-slot {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.topbar-switcher select,
.topbar-switcher button {
  min-height: 32px;
}

.topbar-switcher button {
  padding: 0 12px;
}

.toolbar > button {
  width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

/* The hamburger and its backdrop only exist on the mobile drawer layout;
   the media query below turns them on. */
.drawer-toggle,
.drawer-backdrop {
  display: none;
}

.content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 18px;
  display: grid;
  gap: 16px;
  align-content: start;
  /* Shrink only the window content (not the sidebar/topbar chrome) by 1.2x so
     more fits on screen; the scroll container recomputes around the zoom. */
  --content-zoom: 0.8333;
  zoom: var(--content-zoom);
}

.bot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bot-tabs button {
  min-height: 34px;
  padding: 0 12px;
}

.bot-tabs button.active {
  border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
  background: color-mix(in srgb, var(--accent), var(--surface-2) 82%);
}

/* Every bot tab has its own colour; --tab-color drives the border, icon and
   the active state. */
.bot-tabs button[data-tab] {
  --tab-color: var(--accent);
  border-color: color-mix(in srgb, var(--tab-color) 42%, var(--border));
  color: color-mix(in srgb, var(--tab-color) 82%, var(--text));
  background: color-mix(in srgb, var(--tab-color) 8%, var(--surface-2));
}

.bot-tabs button[data-tab]:hover:not(:disabled) {
  border-color: var(--tab-color);
  background: color-mix(in srgb, var(--tab-color) 16%, var(--surface-2));
}

.bot-tabs button[data-tab].active {
  border-color: color-mix(in srgb, var(--tab-color) 82%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--tab-color) 23%, var(--surface-2));
  box-shadow: inset 0 -2px 0 var(--tab-color);
}

.bot-tabs button[data-tab="profile"] { --tab-color: #62c26b; }
.bot-tabs button[data-tab="pov"] { --tab-color: #3fc8c0; }
.bot-tabs button[data-tab="chat"] { --tab-color: #5b9cf0; }
.bot-tabs button[data-tab="inventory"] { --tab-color: #e8914a; }
.bot-tabs button[data-tab="console"] { --tab-color: #d4c04a; }
.bot-tabs button[data-tab="action"] { --tab-color: #ef6f86; }
.bot-tabs button[data-tab="plugins"] { --tab-color: #ad7cf5; }
.bot-tabs button[data-tab="settings"] { --tab-color: #8fa7c4; }

/* Plugins tab: one chip per plugin above the selected plugin's panel. */
.plugin-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plugin-switch {
  --plugin-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--plugin-color) 42%, var(--border));
  color: color-mix(in srgb, var(--plugin-color) 82%, var(--text));
  background: color-mix(in srgb, var(--plugin-color) 8%, var(--surface-2));
}

.plugin-switch.plugin-violet { --plugin-color: #ad7cf5; }
.plugin-switch.plugin-amber { --plugin-color: #e5a93f; }
.plugin-switch.plugin-rose { --plugin-color: #ef6f86; }
.plugin-switch.plugin-stone { --plugin-color: #8fa7c4; }

.plugin-switch:hover:not(:disabled) {
  border-color: var(--plugin-color);
  background: color-mix(in srgb, var(--plugin-color) 16%, var(--surface-2));
}

.plugin-switch.active {
  border-color: color-mix(in srgb, var(--plugin-color) 82%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--plugin-color) 23%, var(--surface-2));
  box-shadow: inset 0 -2px 0 var(--plugin-color);
}

.plugin-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-online);
}

.plugin-live.is-attention {
  background: var(--warn);
}

.registrar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.registrar-settings-panel,
.registrar-runtime-column,
.registrar-form,
.registrar-section,
.registrar-runtime-panel .panel-body,
.registrar-safety-panel .panel-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.plugin-panel-header.plugin-amber {
  border-bottom-color: color-mix(in srgb, #e5a93f 46%, var(--border));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #e5a93f 14%, transparent),
    transparent 65%
  );
}

.plugin-panel-header.plugin-rose {
  border-bottom-color: color-mix(in srgb, #ef6f86 46%, var(--border));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #ef6f86 14%, transparent),
    transparent 65%
  );
}

.plugin-panel-header.plugin-stone {
  border-bottom-color: color-mix(in srgb, #8fa7c4 46%, var(--border));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #8fa7c4 14%, transparent),
    transparent 65%
  );
}

/* Auto mine: the tunnel cross-section is drawn as a grid of cells over a floor
   strip, next to the pickaxe fields. */
.auto-mine-tunnel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.mine-grid-wrap {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.mine-grid {
  display: grid;
  grid-template-columns: repeat(var(--mine-grid-size), 34px);
  gap: 3px;
}

.mine-cell {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface-2));
}

.mine-cell.dug {
  background: color-mix(in srgb, #8fa7c4 26%, var(--surface));
  border-style: dashed;
}

.mine-cell.dig {
  background: color-mix(in srgb, #8fa7c4 72%, var(--surface));
  border-color: #8fa7c4;
}

.mine-cell.walk {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
}

.mine-grid .mine-cell:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mine-grid .mine-cell.dig:disabled,
.mine-grid .mine-cell.dug:disabled {
  opacity: 0.9;
}

.mine-grid-floor {
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 55%, var(--surface)) 0 10px,
    color-mix(in srgb, var(--muted) 35%, var(--surface)) 10px 20px
  );
}

.mine-grid-legend {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.mine-grid-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mine-grid-legend i.mine-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.mine-steps {
  display: grid;
  gap: 6px;
}

.mine-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 110px 34px;
  gap: 6px;
  align-items: center;
}

.mine-step-index {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.mine-step input[hidden] {
  display: block;
  visibility: hidden;
}

.plugin-run-actions {
  display: flex;
  gap: 8px;
}

.auto-mine-reason {
  margin: 0;
  overflow-wrap: anywhere;
}

.auto-mine-form .compact-switch {
  justify-self: start;
  width: fit-content;
  min-height: 28px;
}

@media (max-width: 640px) {
  .auto-mine-tunnel {
    grid-template-columns: 1fr;
  }
}

/* A trigger's switch stands where its label would, so the switch reads as the
   field's title and the input below is its value. Sized to its text rather than
   stretched across the field. */
.auto-leave-form .compact-switch {
  justify-self: start;
  width: fit-content;
  min-height: 28px;
}

.auto-leave-form .field > .compact-switch {
  margin-bottom: 2px;
}

.auto-leave-reason,
.auto-leave-error {
  margin: 0;
  overflow-wrap: anywhere;
}

.auto-leave-error {
  color: var(--danger, #e5484d);
}

.built-in-plugin-badge {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, #e5a93f 58%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, #e5a93f 84%, var(--text));
  background: color-mix(in srgb, #e5a93f 10%, var(--surface));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.registrar-section + .registrar-section {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.registrar-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.registrar-field-full {
  grid-column: span 12;
}

.registrar-field-two-thirds {
  grid-column: span 8;
}

.registrar-field-half {
  grid-column: span 6;
}

.registrar-field-third {
  grid-column: span 4;
}

.registrar-field-sixth {
  grid-column: span 2;
}

.registrar-form[data-nickname-mode="numbered"] .registrar-section:first-child .registrar-field-third,
.registrar-form[data-nickname-mode="numbered"] .registrar-section:first-child .registrar-field-sixth {
  grid-column: span 3;
}

.registrar-fields > [hidden] {
  display: none;
}

.registrar-form .field > label {
  position: relative;
  width: fit-content;
  min-height: auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 65%, transparent);
  cursor: help;
  line-height: 1.35;
  text-transform: none;
}

.registrar-form .field,
.registrar-action-row > label,
.registrar-action-payload label {
  position: relative;
}

.registrar-action-row > label > span:first-child,
.registrar-action-payload label > span:first-child {
  width: fit-content;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 65%, transparent);
  cursor: help;
}

.registrar-form .field > label::after,
.registrar-action-row > label > span:first-child::after,
.registrar-action-payload label > span:first-child::after {
  content: ' ?';
  color: color-mix(in srgb, #e5a93f 78%, var(--muted));
  font-size: 10px;
}

.registrar-field-help {
  position: absolute;
  z-index: 40;
  bottom: calc(100% - 18px);
  left: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, #e5a93f 40%, var(--border));
  border-radius: 7px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, #e5a93f);
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  text-transform: none;
  transform: translateY(-5px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  visibility: hidden;
  white-space: normal;
}

.registrar-form .field > label:hover ~ .registrar-field-help,
.registrar-action-row > label > span:first-child:hover ~ .registrar-field-help,
.registrar-action-payload label > span:first-child:hover ~ .registrar-field-help {
  opacity: 1;
  transform: translateY(-8px);
  visibility: visible;
}

.registrar-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.registrar-section-heading h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
}

.registrar-section-heading > span,
.registrar-form-actions > span,
.registrar-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.registrar-section-heading > span {
  width: min(100%, 540px);
  justify-self: end;
  text-align: right;
}

.registrar-section-heading > button {
  justify-self: end;
  white-space: nowrap;
}

.registrar-ip-note {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  color: var(--muted);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: 11px;
  line-height: 1.45;
}

.registrar-action-list {
  display: grid;
  gap: 8px;
}

.registrar-action-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.registrar-action-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1.45fr) minmax(140px, 0.65fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.registrar-action-row > label,
.registrar-action-payload label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.registrar-action-row > label > span,
.registrar-action-payload label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.registrar-action-payload,
.registrar-action-feature-fields {
  min-width: 0;
}

.registrar-action-feature-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.registrar-action-wait-summary {
  display: grid;
  align-content: center;
  min-height: 57px;
  color: var(--muted);
}

.registrar-action-wait-summary span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.registrar-action-wait-summary small {
  font-size: 11px;
  line-height: 1.4;
}

.registrar-action-buttons,
.registrar-form-actions,
.registrar-runtime-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.registrar-action-buttons button {
  min-width: 32px;
  padding: 0 8px;
}

.registrar-action-buttons {
  align-self: center;
  padding-top: 17px;
}

.registrar-form-actions {
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.registrar-runtime-panel.needs-attention {
  border-color: color-mix(in srgb, var(--warn) 72%, var(--border));
  box-shadow: inset 3px 0 0 var(--warn);
}

.registrar-runtime-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--offline);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--offline), transparent 80%);
}

.registrar-runtime-dot.active {
  background: #e5a93f;
  box-shadow: 0 0 0 4px color-mix(in srgb, #e5a93f, transparent 78%);
}

/* The status tiles of Account registrar, Auto leave and Auto mine, two to a row. */
.registrar-runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.registrar-runtime-grid > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.registrar-runtime-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.registrar-runtime-grid span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.registrar-runtime-grid strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registrar-attention,
.registrar-error {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 11%, transparent);
}

.registrar-attention span,
.registrar-error {
  color: var(--muted);
  font-size: 12px;
}

.registrar-error {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

.registrar-runtime-actions {
  padding-top: 4px;
}

.plugin-start-button {
  border-color: color-mix(in srgb, #e5a93f 70%, var(--border));
  background: color-mix(in srgb, #e5a93f 24%, var(--surface-2));
}

.registrar-safety-panel .panel-body > div {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.registrar-safety-panel .panel-body > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.registrar-safety-panel span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1320px) {
  .registrar-workspace {
    grid-template-columns: 1fr;
  }

  .registrar-runtime-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .registrar-runtime-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .registrar-runtime-column {
    grid-template-columns: 1fr;
  }

  .registrar-action-row {
    grid-template-columns: minmax(140px, 0.75fr) minmax(220px, 1.25fr);
  }

  .registrar-action-buttons {
    grid-column: 1 / -1;
    justify-self: end;
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  .registrar-section-heading {
    grid-template-columns: 1fr;
  }

  .registrar-section-heading > span,
  .registrar-section-heading > button {
    width: auto;
    justify-self: start;
    text-align: left;
  }

  .registrar-field-full,
  .registrar-field-two-thirds,
  .registrar-field-half,
  .registrar-field-third,
  .registrar-field-sixth,
  .registrar-form[data-nickname-mode="numbered"] .registrar-section:first-child .registrar-field-third,
  .registrar-form[data-nickname-mode="numbered"] .registrar-section:first-child .registrar-field-sixth {
    grid-column: 1 / -1;
  }

  .registrar-runtime-grid,
  .registrar-action-row {
    grid-template-columns: 1fr;
  }

  .registrar-action-buttons {
    grid-column: auto;
    justify-self: start;
  }

  .registrar-action-feature-fields {
    grid-template-columns: 1fr;
  }
}

.action-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.action-tabs button {
  min-height: 32px;
  padding: 0 12px;
}

.action-tabs button.active {
  border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
  background: color-mix(in srgb, var(--accent), var(--surface-2) 82%);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 12px;
}

/* A profile is a cover card: the icon fills it, with a darkening gradient at the
   bottom carrying the name, address and mode/server counts. */
.profile-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.profile-card-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-3)), var(--surface-2));
}

.profile-card.has-icon .profile-card-cover {
  color: transparent;
  background-image: var(--profile-icon);
  background-size: cover;
  background-position: center;
}

.profile-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 12px 12px 10px;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.85));
}

.profile-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profile-card-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 16px;
}

.profile-card-version {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.profile-card-overlay p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.profile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
}

.profile-card-meta span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.profile-icon-editor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-icon-preview {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  color: var(--faint);
}

.profile-icon-controls {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.profile-icon-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-icon-upload {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass-2);
  cursor: pointer;
  font-size: 13px;
}

.profile-icon-upload:hover {
  border-color: var(--accent);
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 10px;
}

/* The empty state must span every column so it is centred across the whole
   panel instead of sitting inside the first grid cell. */
.group-grid .group-empty {
  grid-column: 1 / -1;
  min-height: 140px;
}

.group-grid .group-empty strong {
  font-size: 17px;
  margin-bottom: 6px;
}

.group-grid .group-empty span {
  font-size: 13px;
}

.group-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.group-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  align-items: end;
  gap: 10px;
}

.group-card-heading > span {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.group-card-heading > button {
  width: 32px;
  min-height: 32px;
  padding: 0;
}

.group-proxy-toggle {
  justify-self: start;
}

/* Type, host and port on one row, login and password on the next. */
.proxy-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.proxy-type,
.proxy-port {
  grid-column: span 3;
}

.proxy-host {
  grid-column: span 6;
}

.proxy-combined {
  grid-column: span 9;
}

.proxy-user,
.proxy-pass {
  grid-column: span 6;
}

/* No proxy of its own: nothing to fill in, so the fields fold away. */
.proxy-fields {
  display: grid;
  gap: 8px;
}

.proxy-fields.is-off {
  display: none;
}

/* With the fields folded, the rotation switch is the first thing in the card. */
.proxy-fields.is-off + .rotation-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.proxy-paste-toggle {
  justify-self: start;
}

.rotation-block > .switch {
  justify-self: start;
}

.rotation-block {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.rotation-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.rotation-grid > .field {
  grid-column: span 6;
}

.rotation-grid > .field:nth-child(1) {
  grid-column: span 3;
}

.rotation-grid > .field:nth-child(2) {
  grid-column: span 9;
}

.rotation-grid.is-disabled {
  display: none;
}

.rotation-grid .rotation-wide {
  grid-column: 1 / -1;
}

.rotation-grid textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  font-family: var(--mono, monospace);
  font-size: 0.85em;
}

.rotation-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* A card title with a muted note beside it (where the proxy comes from, who
   gets the alerts). */
.panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.panel-note {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel {
  min-width: 0;
  border: var(--panel-border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--panel-header-pad);
  border-bottom: 1px solid var(--border);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.panel-header h3 {
  margin: 0;
  font-size: 15px;
}

.panel-body {
  padding: var(--panel-pad);
}

.settings-options {
  display: grid;
  padding-block: 0;
}

.captcha-settings-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.captcha-settings-title .function-state-label {
  align-self: auto;
}

.captcha-settings-body {
  display: grid;
  gap: 10px;
}

.captcha-settings-body .muted-text {
  margin: 0;
}

.captcha-runtime-reason {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--glass-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.captcha-runtime-reason.function-state-active {
  border-left-color: var(--status-online);
}

.captcha-runtime-reason.function-state-paused {
  border-left-color: var(--function-paused-border);
}

.captcha-runtime-reason.function-state-error {
  border-left-color: var(--danger);
}

.setting-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 10px 0;
}

.setting-option + .setting-option {
  border-top: 1px solid var(--border);
}

.setting-option > div {
  display: grid;
  gap: 4px;
}

.setting-option strong {
  font-size: 14px;
}

.setting-option span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.profile-guide {
  display: grid;
  gap: 14px;
}

.profile-guide section {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.profile-guide h4,
.profile-guide p {
  margin: 0;
}

.profile-guide p {
  color: var(--muted);
  line-height: 1.5;
}

.profile-guide code {
  color: var(--text);
  font-family: Consolas, "Cascadia Mono", monospace;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field label {
  min-height: 16px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: span 12;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.switch input {
  flex: none;
  width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

/* A switch standing in a form field takes the height of the inputs beside it
   and reads as a value, not as a small uppercase caption. */
.field > .switch {
  min-height: var(--control-height);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}

/* A checkbox with a label is a button: grey with its text inside, green once it
   is on. The checkbox itself stays, invisible and laid over the whole button, so
   focus, the keyboard and every handler that reads it work as they did. The
   green is the status green, which no palette changes. */
.switch:has(> input[type="checkbox"]) {
  --toggle-height: var(--control-height);
  position: relative;
  min-height: var(--toggle-height);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass-2);
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.switch:has(> input[type="checkbox"]) > input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  cursor: inherit;
}

.switch:has(> input[type="checkbox"]):hover {
  border-color: var(--accent-2);
  background: var(--glass-3);
}

.switch:has(> input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--status-online) 62%, var(--border));
  background: color-mix(in srgb, var(--status-online) 22%, var(--surface));
  color: var(--text);
}

.switch:has(> input[type="checkbox"]:checked):hover {
  border-color: var(--status-online);
  background: color-mix(in srgb, var(--status-online) 30%, var(--surface));
}

.switch:has(> input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.switch:has(> input[type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* In a header the button is smaller, so the header does not grow around it. */
:is(.panel-header, .modal-footer) .switch:has(> input[type="checkbox"]) {
  --toggle-height: 28px;
  padding: 0 10px;
}

.feature-grid {
  columns: 2 300px;
  column-gap: 8px;
}

.built-in-feature-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feature {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: stretch;
  break-inside: avoid;
  margin: 0 0 8px;
}

.built-in-feature-grid .feature {
  min-height: 94px;
  margin: 0;
}

.function-state-active {
  border-color: var(--status-online);
  background: var(--status-online-soft);
}

.function-state-paused {
  border-color: var(--function-paused-border);
  background: var(--function-paused-bg);
}

.function-state-inactive {
  border-color: var(--function-inactive-border);
  background: var(--function-inactive-bg);
}

.function-state-error {
  border-color: var(--function-error-border);
  background: var(--function-error-bg);
}

.panel.function-state-active > .panel-header,
.panel.function-state-active > .panel-body,
.panel.function-state-paused > .panel-header,
.panel.function-state-paused > .panel-body,
.panel.function-state-inactive > .panel-header,
.panel.function-state-inactive > .panel-body,
.panel.function-state-error > .panel-header,
.panel.function-state-error > .panel-body {
  background: transparent;
}

.feature-main {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.feature-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.feature-title strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.info-button {
  width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
}

.feature-settings-button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.function-state-label {
  align-self: end;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.function-state-active .function-state-label {
  color: var(--status-online);
}

.function-state-paused .function-state-label {
  color: var(--warn);
}

.function-state-error .function-state-label {
  color: var(--danger);
}

.feature-actions {
  display: grid;
  align-self: stretch;
}

.feature-actions button {
  min-height: 54px;
  padding: 0;
}

.feature-actions .feature-toggle {
  width: 100%;
  height: 100%;
  min-height: 54px;
  padding: 0;
  color: var(--danger);
  font-size: 21px;
  border-radius: var(--radius);
}

.feature-actions .feature-toggle.enabled {
  color: var(--status-online);
}

.afk-mode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.afk-mode-card.enabled {
  border-color: color-mix(in srgb, var(--status-online) 60%, var(--border));
  background: color-mix(in srgb, var(--status-online) 12%, var(--surface));
}

.afk-mode-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.afk-mode-text strong {
  font-size: 14px;
}

.afk-mode-text span {
  color: var(--muted);
  font-size: 12px;
}

.afk-mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.afk-mode-state {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.afk-mode-card.enabled .afk-mode-state {
  color: var(--status-online);
}

.afk-mode-card .feature-toggle {
  width: 54px;
  min-height: 40px;
  padding: 0;
  color: var(--danger);
  font-size: 21px;
  border-radius: var(--radius);
}

.afk-mode-card .feature-toggle.enabled {
  color: var(--status-online);
}

.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.custom-function-card {
  align-content: start;
}

.custom-function-card:not(.library-card) {
  min-height: 116px;
}

.custom-function-card:not(.library-card) .muted-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.custom-function-title-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.custom-function-card.library-card {
  grid-template-columns: minmax(0, 1fr);
}

.muted-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.function-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.function-actions button {
  padding: 0 10px;
}

.custom-param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.custom-arg-switch {
  align-self: end;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.parameter-editor {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 18px;
}

/* .empty sets a 360px minimum and, being declared later, beats .compact-empty.
   Inside the function editor an empty list should be about one row tall. */
.parameter-editor .empty.compact-empty,
.step-editor .empty.compact-empty {
  min-height: 0;
  padding: 16px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.custom-parameter-list {
  display: grid;
  gap: 10px;
}

.custom-parameter-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.5fr) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.custom-parameter-row button {
  min-height: 38px;
}

.param-token {
  margin-left: 6px;
  color: var(--accent-2);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.info-dashboard {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.profile-dashboard {
  grid-template-columns: minmax(320px, 0.72fr) minmax(460px, 1.28fr);
  align-items: stretch;
}

.profile-dashboard .game-status-panel {
  min-height: 0;
}

.profile-dashboard .game-status-panel .panel-body {
  padding: 16px;
}

.profile-controls-column {
  align-self: stretch;
  display: grid;
  /* The scoreboard/effects row keeps its natural height; the console, chat and
     logs block fills the rest so its bottom lines up with the Work schedule
     block opposite. */
  grid-template-rows: auto 1fr;
  height: auto;
  gap: 14px;
  min-width: 0;
}

.profile-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.manual-controls {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 10px;
  height: 100%;
  margin-top: 0;
  align-items: stretch;
}

.control-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.manual-control-deck {
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  overflow: hidden;
}

.manual-control-deck-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.manual-control-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

/* Three fixed rows so the section titles, the pads and the bottom bars line
   up across all three sections regardless of what each one contains. */
.manual-control-section,
.manual-control-section.move-controls,
.manual-control-section.mouse-controls {
  display: grid;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 14px 12px;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 12px;
}

.manual-control-section + .manual-control-section {
  border-left: 1px solid var(--border);
}

/* Directional keys sit in a real cross with a hub in the middle, so the pad
   reads as a game controller instead of a block of square buttons. */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass);
}

.dpad-up {
  grid-area: 1 / 2;
}

.dpad-left {
  grid-area: 2 / 1;
}

.dpad-hub {
  grid-area: 2 / 2;
  place-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.dpad-right {
  grid-area: 2 / 3;
}

.dpad-down {
  grid-area: 3 / 2;
}

.dpad-key {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  transition: transform 90ms ease, background 90ms ease, color 90ms ease;
}

.dpad-key:hover:not(:disabled),
.control-bar:hover:not(:disabled),
.mouse-key:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}

.dpad-key.holding,
.control-bar.holding,
.mouse-key.holding {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateY(1px);
}

/* Shared bottom bar. Used by Jump (a button) and Sensitivity (a label), so it
   carries its own border and background instead of relying on button styles. */
.control-bar {
  display: flex;
  box-sizing: border-box;
  width: min(100%, 152px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 90ms ease, background 90ms ease, color 90ms ease;
}

.jump-control span {
  font-size: 15px;
}

.control-bar-spacer {
  height: 38px;
}

.sensitivity-bar {
  justify-content: space-between;
  cursor: text;
}

.sensitivity-bar input {
  width: 58px;
  min-height: 28px;
  padding: 2px 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.manual-control-section .mouse-buttons {
  display: grid;
  width: min(100%, 152px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mouse-key {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 96px;
  min-height: 96px;
  padding: 0;
  place-content: center;
  border-radius: 12px;
  color: var(--muted);
  transition: transform 90ms ease, background 90ms ease, color 90ms ease;
}

.work-schedule-panel {
  min-width: 0;
}

/* Compact Controls: the deck now lives in the narrower left column beneath the
   In-game status panel, so the pads and bars shrink to fit the status width. */
.manual-control-deck-compact {
  min-height: 0;
}

.manual-control-deck-compact .manual-control-section {
  padding: 12px 8px;
  gap: 10px;
}

.manual-control-deck-compact .dpad {
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 3px;
  padding: 5px;
}

.manual-control-deck-compact .dpad-key {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  font-size: 14px;
}

.manual-control-deck-compact .mouse-key {
  height: 72px;
  min-height: 72px;
}

.manual-control-deck-compact .control-bar {
  width: 100%;
  height: 32px;
  min-height: 32px;
  font-size: 11px;
}

.manual-control-deck-compact .manual-control-section .mouse-buttons {
  width: 100%;
}

/* Sprint and Sneak sit at the bottom of the Mouse column, mirroring Jump under
   Move and Sens under Look. */
.control-toggle-stack {
  display: grid;
  width: 100%;
  gap: 8px;
}

.control-toggle {
  justify-content: space-between;
  cursor: pointer;
}

.control-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The scoreboard is drawn as the bare in-game sidebar overlay: no panel chrome
   or header, a translucent gradient, a centered white title, white line text
   and red (§c) scores, all with Minecraft's signature drop shadow. It hugs its
   content (vanilla width) and keeps that box size even before it loads. */
.scoreboard-panel {
  min-width: 0;
}

.scoreboard-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Grow to the widest line so nothing is clipped, but never shrink below a full
     board's footprint - so an empty or not-yet-loaded scoreboard reserves the
     same size a populated one takes and nothing jumps when it fills in. */
  width: max-content;
  min-width: 316px;
  max-width: 100%;
  min-height: 462px;
  max-height: 520px;
  overflow-y: auto;
  padding: 10px 0 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(12, 14, 22, 0.62), rgba(0, 0, 0, 0.5));
  /* UnifontSymbols first so its unicode-range wins the symbol blocks exactly as
     the vanilla client does; Minecraftia (and any installed Minecraft font) then
     handles ASCII/Latin, with Monocraft and a blocky monospace as fallbacks. */
  font-family: "UnifontSymbols", "UnifontExtra", "Minecraftia", "Minecraft", "Monocraft", ui-monospace, Consolas, monospace;
  font-size: 18px;
  /* Vanilla-like line spacing: not cramped, not overly airy. */
  line-height: 1.5;
}

.scoreboard-title {
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  padding: 2px 10px 6px;
  word-break: break-word;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}

.scoreboard-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.scoreboard-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 0 10px;
  /* A line with nothing visible (the servers pad their boards with such rows to
     space the sections) keeps the height of a line, as it does in the game. */
  min-height: 1.5em;
  line-height: 1.5;
  background: transparent;
}

.scoreboard-line-text {
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}

/* Resource-pack glyphs (#7): each is a sprite sliced from the pack's bitmap
   atlas, sized to the line height and kept blocky. drop-shadow mirrors the
   text-shadow the surrounding pixel text uses. */
.mc-glyph {
  height: 1em;
  vertical-align: -0.12em;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.65));
}

.scoreboard-line-score {
  color: #ff5555;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}

/* Keeps the vanilla box size before the scoreboard loads instead of collapsing
   to a tiny message. */
.scoreboard-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  color: #c9d3cb;
  font-size: 13px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* The scoreboard (vanilla width, left) and the effects panel (fills the rest,
   right) share a row above the Controls deck. They wrap on narrow screens. */
.scoreboard-effects-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.scoreboard-effects-row .scoreboard-panel {
  flex: 0 0 auto;
}

/* The skin viewer takes the scoreboard's footprint: same width, and a body tall
   enough that the two blocks line up. */
.scoreboard-effects-row .skin-panel {
  flex: 0 0 316px;
  width: 316px;
}

.skin-body {
  display: flex;
  min-height: 416px;
  padding: 10px;
}

.skin-viewer {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.skin-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--glass-2);
  cursor: grab;
}

.skin-stage.is-dragging {
  cursor: grabbing;
}

.skin-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.skin-actions,
.skin-tools {
  position: absolute;
  top: 8px;
  display: flex;
  gap: 6px;
}

.skin-actions {
  right: 8px;
}

.skin-tools {
  left: 8px;
}

.skin-actions button,
.skin-tools button {
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
}

/* The two switches on the left read as pressed or not. */
.skin-tools button.is-on {
  border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
  background: color-mix(in srgb, var(--accent), var(--surface-2) 78%);
  color: var(--text);
}

.skin-tools button:not(.is-on) {
  color: var(--muted);
}

.skin-message {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

.skin-animation {
  display: flex;
  width: auto;
}

.skin-animation button {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 34px;
  padding: 0 10px;
}

/* The block under the scoreboard: console, chat and logs, one at a time. */
.profile-deck {
  display: flex;
  min-height: 280px;
  flex-direction: column;
}

.deck-body {
  display: flex;
  min-height: 0;
  flex: 1;
  gap: 10px;
}

.deck-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

/* The three views are picked with a column of icon buttons on the right, each
   in its own colour like the tabs above. */
.deck-switch {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
}

.deck-tab {
  --deck-color: var(--accent);
  display: grid;
  place-items: center;
  width: 56px;
  min-height: 56px;
  padding: 0;
  border: 1px solid;
  border-radius: var(--control-radius);
  cursor: pointer;
  text-decoration: none;
  border-color: color-mix(in srgb, var(--deck-color) 42%, var(--border));
  color: color-mix(in srgb, var(--deck-color) 82%, var(--text));
  background: color-mix(in srgb, var(--deck-color) 8%, var(--glass-2));
}

.deck-tab:hover:not(:disabled) {
  border-color: var(--deck-color);
  background: color-mix(in srgb, var(--deck-color) 16%, var(--glass-2));
}

/* The view's own action, at the bottom of the column. It is no colour of its own. */
.deck-action {
  --deck-color: var(--muted);
  margin-top: auto;
}

.deck-tab.active {
  border-color: color-mix(in srgb, var(--deck-color) 82%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--deck-color) 23%, var(--glass-2));
  box-shadow: inset -2px 0 0 var(--deck-color);
}

.deck-body .console-output,
.deck-body .game-chat-log,
.deck-body .deck-logs {
  flex: 1 1 0;
  min-height: 120px;
  height: auto;
  max-height: none;
}

.deck-logs {
  overflow-y: auto;
}

.deck-logs .connection-log {
  margin: 0;
}

.scoreboard-effects-row .effects-panel {
  flex: 1 1 172px;
  min-width: 172px;
}

.scoreboard-effects-row .effects-panel .panel-body {
  padding: 10px;
}

/* Active potion effects to the right of the scoreboard: vanilla icons in a
   grid, each with a timer underneath and a name tooltip on hover. */
.effects-body {
  max-height: 460px;
  overflow-y: auto;
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 8px;
}

.effect-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  cursor: default;
}

.effect-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.effect-icon {
  width: 54px;
  height: 54px;
  image-rendering: pixelated;
}

.effect-icon.is-broken {
  display: none;
}

.effect-fallback {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--glass-3);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.effect-fallback.is-shown,
.effect-icon.is-broken ~ .effect-fallback {
  display: flex;
}

.effect-tile-time {
  color: var(--accent-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.effects-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--muted);
  font-size: 13px;
}

/* The inventory block visibly powers down after five idle minutes: dimmed,
   with a wake control, so it is obvious the panel stopped streaming. */
.inventory-asleep .inventory-sleep-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px;
  opacity: 0.75;
}

.inventory-asleep .inventory-sleep-card button {
  min-height: 36px;
  padding: 0 18px;
}

/* Console tab: a terminal that runs the shared bot commands, plus the moved
   connection log beneath it. */
.console-workspace {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.console-panel {
  min-width: 0;
}

.console-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: 9px;
  color: var(--muted);
}

.console-icon-button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.console-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.console-output {
  height: min(52vh, 460px);
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
}

/* pre-wrap lives on the lines, not the container: on the container it would
   render the template's own newline/indentation as a blank leading line and
   push the first row down. On the lines it preserves the help text's spacing. */
.console-line {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.console-line-in {
  color: var(--accent-2);
  font-weight: 600;
}

.console-line-err {
  color: #e0554e;
}

.console-hint {
  color: var(--muted);
}

.console-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-prompt {
  color: var(--accent-2);
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-weight: 700;
}

.console-input-row input {
  flex: 1;
  min-width: 0;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

.console-input-row button {
  flex: none;
}

.console-help-modal {
  width: min(640px, 92vw);
}

/* The modal uses .modal-header / .modal-body (no base styling of their own), so
   the close button floats top-right (.modal-close) and the header/body get
   their padding here — otherwise the title and close button stack and the
   content hugs the edges. */
.console-help-modal .modal-header {
  padding: 16px 18px;
  padding-right: 52px;
  border-bottom: 1px solid var(--border);
}

.console-help-modal .modal-header h3 {
  margin: 0;
}

.console-help-body {
  display: grid;
  gap: 16px;
  padding: 16px 18px;
}

.console-help-group-title {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.console-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.console-help-list li {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) 1.4fr;
  gap: 12px;
  align-items: baseline;
}

.console-help-list code {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--accent-2);
  background: var(--glass-2);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.console-help-list span {
  color: var(--text);
  font-size: 13px;
}

@media (max-width: 640px) {
  .console-help-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.work-schedule-header {
  align-items: center;
}

.work-schedule-body {
  padding: 14px 16px;
}

.work-schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.work-schedule-grid .field {
  min-width: 0;
}

.work-schedule-rotate {
  min-height: 42px;
  align-self: end;
}

.work-schedule-usernames {
  grid-column: span 2;
}

.work-schedule-usernames textarea {
  min-height: 66px;
  resize: vertical;
}

.connection-log {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  font-size: 11px;
}

.connection-log-title {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.connection-log-line {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
}

.connection-log-time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.connection-log-kind {
  font-weight: 700;
}

.connection-log-kicked .connection-log-kind,
.connection-log-error .connection-log-kind {
  color: var(--danger);
}

.connection-log-logged-in .connection-log-kind {
  color: var(--accent);
}

.connection-log-online {
  color: var(--faint);
}

.connection-log-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.status-control-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.spam-cycle-message {
  grid-column: 1 / -1;
}

.spam-cycle-message textarea {
  min-height: 104px;
  resize: vertical;
}

.sensitivity-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.sensitivity-control input {
  min-height: 34px;
  padding: 5px 7px;
}

.control-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.control-options > label:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.control-options input[type="number"] {
  width: 64px;
}

.use-world-exclusions {
  grid-column: 1 / -1;
}

.world-exclusion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.world-exclusion-option {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.game-status-panel {
  min-width: 0;
  border-color: color-mix(in srgb, var(--accent), var(--border) 62%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 92%), transparent 44%),
    var(--surface);
}

.game-status-panel.dimension-nether {
  border-color: color-mix(in srgb, var(--danger), var(--border) 30%);
  background:
    linear-gradient(135deg, rgba(165, 35, 35, 0.24), rgba(59, 13, 13, 0.08) 62%),
    var(--surface);
}

.game-status-panel.dimension-end {
  border-color: color-mix(in srgb, var(--accent-2), var(--border) 34%);
  background:
    linear-gradient(135deg, rgba(150, 89, 232, 0.24), rgba(41, 24, 64, 0.08) 62%),
    var(--surface);
}

.game-status-panel.dimension-unknown {
  border-color: var(--border);
  background: var(--glass);
}

.game-chat-panel {
  min-width: 0;
}

.chat-workspace {
  height: calc(100vh - 166px);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(430px, 1.7fr) minmax(280px, 0.72fr);
  gap: 14px;
  min-width: 0;
}

.chat-primary-panel,
.notification-panel,
.chat-side-column > .broadcast-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.chat-primary-panel .chat-panel-body {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.chat-primary-panel .game-chat-log {
  height: auto;
  min-height: 0;
  max-height: none;
}

.chat-side-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}

.notification-panel > .panel-body {
  min-height: 0;
  display: grid;
  overflow: auto;
  scrollbar-gutter: stable;
}

.notification-panel .empty.compact-empty {
  height: 100%;
  min-height: 0;
}

.notification-count {
  min-width: 28px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chat-side-column .broadcast-panel .panel-body {
  padding: 10px;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.broadcast-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repeat-broadcast-panel {
  display: block;
  min-height: auto;
  margin-bottom: 12px;
}

.repeat-broadcast-panel > .panel-body {
  min-height: auto;
  overflow: visible;
  scrollbar-gutter: auto;
}

.broadcast-entry-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.broadcast-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(96px, 0.42fr) auto;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.repeat-broadcast-panel .broadcast-entry {
  grid-template-columns: 26px minmax(180px, 1fr) minmax(110px, 180px) 34px;
}

.broadcast-entry-order {
  min-width: 24px;
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.broadcast-remove {
  width: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.status-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-tools input {
  width: 64px;
  min-height: 32px;
}

.game-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.meter-stack,
.status-compact {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 30px;
}

.compact-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* The HUD fills the whole status content width so its gap to the left wall
   equals its gap to the right wall (both are the panel-body padding). */
.meter-icons {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  max-width: none;
  min-width: 0;
}

/* The icons are square and scale down with their column so a full row of ten
   never forces a wider min-content than the panel (which used to clip the
   status fields on narrow screens). A padding box keeps the aspect ratio and
   the sprite is positioned in percentages so any icon size lands on a cell. */
.meter-icons span {
  position: relative;
  padding-top: 100%;
  min-width: 0;
}

.meter-icons span::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/minecraft-hotbar-icons.png");
  background-position: var(--meter-col, 0%) var(--meter-row, 0%);
  background-repeat: no-repeat;
  background-size: 300% 400%;
  image-rendering: pixelated;
}

.meter-icons span.state-0 {
  --meter-col: 0%;
}

.meter-icons span.state-1 {
  --meter-col: 50%;
}

.meter-icons span.state-2 {
  --meter-col: 100%;
}

.meter-icons.health {
  --meter-row: 33.3333%;
}

.meter-icons.food {
  --meter-row: 0%;
}

.meter-icons.food span::before {
  transform: scaleX(-1);
}

.meter-icons.armor {
  --meter-row: 100%;
}

.compact-info,
.connection-pill {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  padding: 7px 9px;
}

.compact-info strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

/* Vanilla XP: green level above, green progress bar, total points below. */
.xp-bar-block {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 4px;
}

.xp-level {
  color: #80ff20;
  /* Same pixel font as the scoreboard so the HUD reads as one in-game unit. */
  font-family: "Minecraftia", "Minecraft", "Monocraft", ui-monospace, Consolas, monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  /* Minecraftia sits high above its baseline, leaving dead space beneath the
     digits; pull the number back down so it hugs the bar. */
  margin-bottom: -6px;
  /* Full black outline (Minecraft-style) rather than a single drop shadow. */
  text-shadow:
    -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
    -1px 0 0 #000, 1px 0 0 #000,
    -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
}

/* XP bar drawn from the "Smooth Bars" resource pack sprites. The progress
   sprite is stretched across the whole bar and revealed left-to-right with a
   clip-path, mirroring how vanilla crops the 182px texture to the fill width. */
.xp-bar {
  position: relative;
  width: 100%;
  height: 9px;
  background-image: url("/assets/xp-bar-background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
}

.xp-bar-fill {
  position: absolute;
  inset: 0;
  background-image: url("/assets/xp-bar-progress.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  clip-path: inset(0 calc((1 - var(--xp-fill, 0)) * 100%) 0 0);
  transition: clip-path 200ms ease;
}

.xp-points {
  color: var(--muted);
  font-family: "Minecraftia", "Minecraft", "Monocraft", ui-monospace, Consolas, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.connection-pill {
  grid-template-columns: 10px minmax(0, 1fr) auto;
}

.connection-pill span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--offline);
}

.connection-pill.active span {
  background: var(--status-online);
}

.connection-pill.connecting span {
  background: var(--warn);
}

.connection-pill.disconnected span {
  background: var(--danger);
}

.connection-pill small {
  color: var(--muted);
  font-size: 12px;
}

.chat-panel-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.chat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.notification-trigger {
  position: relative;
  width: 36px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

.notification-trigger span {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.compact-switch {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.game-chat-log {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  min-width: 0;
  overflow: auto;
  border: 1px solid #1f2a23;
  border-radius: var(--radius);
  background: rgba(7, 8, 7, 0.88);
  color: #f3f7f1;
  padding: 12px;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.45;
  user-select: text;
  -webkit-user-select: text;
}

.game-chat-log * {
  user-select: text;
  -webkit-user-select: text;
}

.empty-chat {
  display: grid;
  place-items: center;
  color: #a9b5aa;
}

.chat-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.chat-line.with-time {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.chat-line + .chat-line {
  margin-top: 4px;
}

.chat-time {
  color: #7f8b80;
}

.chat-prefix {
  color: var(--accent);
  font-weight: 700;
}

.chat-line.outgoing .chat-prefix {
  color: var(--accent-2);
}

.chat-text {
  overflow-wrap: anywhere;
}

.chat-text span {
  overflow-wrap: anywhere;
}

.game-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  position: relative;
}

.chat-suggestions {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 6;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* The class sets display:flex, which has the same specificity as [hidden] and
   comes later, so it would keep an empty box visible; force it hidden. */
.chat-suggestions[hidden] {
  display: none;
}

.chat-suggestion {
  font-size: 12px;
  padding: 3px 9px;
}

.record-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.record-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.record-button.recording {
  border-color: #ff4d4d;
  color: #ff6b6b;
}

.record-button.recording .record-dot {
  background: #ff4d4d;
  animation: record-pulse 1.2s ease-in-out infinite;
}

@keyframes record-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  padding: 10px;
}

.notification-item span {
  color: var(--muted);
  font-size: 12px;
}

.notification-item p {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.notification-message {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  line-height: 1.4;
}

.notifications-modal .notification-modal-body {
  max-height: min(620px, calc(100vh - 210px));
  overflow: auto;
  scrollbar-gutter: stable;
}

.inventory-tab-workspace {
  display: grid;
  grid-template-columns: minmax(640px, 1.35fr) minmax(340px, 0.65fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.inventory-tab-board,
.inventory-tab-left-column {
  min-width: 0;
  overflow-x: auto;
  padding: 8px 0 18px;
  scrollbar-gutter: stable;
}

.inventory-tab-left-column {
  display: grid;
  gap: 14px;
  align-content: start;
}

.open-container-panel {
  --inventory-slot: clamp(42px, 4.2vw, 58px);
  min-width: max-content;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.open-container-heading {
  display: flex;
  min-width: 0;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.open-container-heading > div {
  display: grid;
  gap: 2px;
}

.open-container-heading span,
.empty-container span {
  color: var(--muted);
  font-size: 12px;
}

.container-readonly {
  padding: 5px 8px;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  color: var(--warning) !important;
  font-weight: 700;
}

.container-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  border-radius: var(--radius);
}

.empty-container {
  display: grid;
  min-width: 0;
  min-height: 96px;
  place-items: center;
  text-align: center;
}

.empty-container > div {
  display: grid;
  gap: 5px;
}

.open-container-grid {
  display: grid;
  grid-template-columns: repeat(var(--container-columns), var(--inventory-slot));
  gap: 3px;
}

.container-slot {
  width: var(--inventory-slot);
  min-width: var(--inventory-slot);
  height: var(--inventory-slot);
  min-height: var(--inventory-slot);
}

.crafting-container-layout,
.furnace-container-layout {
  display: flex;
  min-height: calc(var(--inventory-slot) * 3 + 6px);
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.crafting-input-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--inventory-slot));
  gap: 3px;
}

.crafting-arrow,
.furnace-arrow {
  color: var(--muted);
  font-size: 28px;
}

.furnace-inputs {
  display: grid;
  gap: 12px;
}

.brewing-container-layout {
  display: grid;
  gap: 14px;
  justify-content: center;
}

.brewing-top,
.brewing-bottom {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.inventory-automation-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.inventory-automation-panel .panel-body {
  display: grid;
  gap: 12px;
}

.inventory-automation-actions,
.automation-rule-heading,
.automation-rule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.automation-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.inventory-automation-panel[data-feature="autoDrop"] .automation-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-mode-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.automation-settings.craft-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.craft-settings .craft-command-field {
  grid-column: 1 / -1;
  grid-row: 1;
}

.craft-settings > .field:first-child {
  grid-column: 1;
  grid-row: 2;
}

.craft-settings > .field:last-child {
  grid-column: 2;
  grid-row: 2;
}

.automation-rule-heading {
  justify-content: space-between;
  min-height: 36px;
}

.automation-rule-heading strong {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.automation-rule-list {
  display: grid;
  gap: 8px;
}

.automation-rule {
  display: grid;
  grid-template-columns: 24px repeat(2, minmax(0, 1fr)) 34px;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.automation-rule-number {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.automation-rule > .field {
  grid-column: 2 / 4;
}

.automation-item-field {
  grid-row: 1;
}

.automation-target-field {
  grid-column: 2 / 4 !important;
  grid-row: 2;
}

.automation-potion-field {
  grid-column: 2 / 4 !important;
  grid-row: 2;
}

.automation-keep-field {
  grid-column: 2 / 4 !important;
  grid-row: 3;
}

.automation-whitelist-badge {
  grid-column: 2 / 4;
  grid-row: 3;
  align-self: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.automation-rule-actions {
  grid-column: 4;
  grid-row: 1 / span 4;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
}

.automation-rule-actions button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.inventory-workspace {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.inventory-lock-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 640px);
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--warn);
  border-radius: 4px;
  background: var(--function-paused-bg);
  color: var(--text);
  font-size: 12px;
}

.inventory-lock-notice span {
  color: var(--muted);
}

.inventory-lock-notice[hidden] {
  display: none;
}

.inventory-disabled {
  min-height: 300px;
  place-items: center;
}

.inventory-disabled .empty {
  min-height: 0;
}

.minecraft-inventory {
  --inventory-slot: clamp(50px, 4.4vw, 66px);
  display: grid;
  grid-template-columns: var(--inventory-slot) minmax(0, auto);
  align-items: start;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--inv-line);
  border-radius: 3px;
  background: var(--inv-panel);
  box-shadow:
    inset 2px 2px var(--inv-hi),
    inset -2px -2px var(--inv-lo);
  color: var(--inv-text);
}

.equipment-section,
.storage-section {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.armor-slot-list {
  display: grid;
  gap: 3px;
}

.offhand-slot {
  margin-top: 3px;
}

.inventory-section-title {
  min-height: 14px;
  color: var(--inv-title);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

.hotbar-label {
  margin-top: 5px;
}

.minecraft-slot-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--inventory-slot));
  gap: 3px;
}

.minecraft-slot {
  position: relative;
  width: var(--inventory-slot);
  height: var(--inventory-slot);
  min-height: var(--inventory-slot);
  padding: 0;
  overflow: visible;
  border: 2px solid;
  border-color: var(--inv-lo) var(--inv-line) var(--inv-line) var(--inv-lo);
  border-radius: 0;
  background: var(--inv-well);
  box-shadow: none;
  image-rendering: pixelated;
}

.minecraft-slot:hover:not(:disabled),
.minecraft-slot:focus-visible {
  z-index: 30;
  border-color: #ffffa0;
  background: var(--inv-well-hover);
}

.minecraft-slot.active-hotbar {
  outline: 2px solid #f7f7f7;
  outline-offset: -4px;
  background: var(--inv-well-active);
}

.minecraft-slot.drag-target {
  z-index: 32;
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2), var(--inv-well) 78%);
}

.minecraft-slot:disabled {
  opacity: 0.72;
}

.minecraft-inventory[data-inventory-locked="true"] .minecraft-slot:disabled {
  opacity: 1;
  cursor: default;
}

.empty-slot-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: color-mix(in srgb, var(--text) 20%, transparent);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
}

.item-icon-wrap,
.item-icon,
.item-icon-fallback {
  position: absolute;
  inset: 3px;
}

.item-icon-wrap {
  display: grid;
  place-items: center;
}

.item-icon {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  image-rendering: pixelated;
  z-index: 2;
}

.item-icon-fallback {
  display: grid;
  place-items: center;
  color: rgba(30, 30, 30, 0.42);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 18px;
  font-weight: 900;
}

.armor-slot-placeholder {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  z-index: 1;
  object-fit: contain;
  opacity: 0.2;
  filter: grayscale(1) brightness(1.8);
  image-rendering: pixelated;
  pointer-events: none;
}

.item-icon-wrap.missing .item-icon {
  display: none;
}

.item-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 4;
  color: #ffffff;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: clamp(11px, 1.1vw, 15px);
  font-weight: 800;
  line-height: 1;
  text-shadow:
    1px 1px #3f3f3f,
    -1px 1px #3f3f3f,
    1px -1px #3f3f3f,
    -1px -1px #3f3f3f;
}

.item-durability {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 4px;
  z-index: 3;
  padding: 1px;
  background: #1b1b1b;
}

.item-durability > span {
  display: block;
  height: 2px;
}

.inventory-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 42px;
  height: 42px;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45));
}

body[data-scheme="light"] .minecraft-slot {
  border-color: var(--inv-lo) var(--inv-hi) var(--inv-hi) var(--inv-lo);
}

body[data-scheme="light"] .empty-slot-number {
  color: rgba(35, 35, 35, 0.34);
}

body[data-scheme="light"] .armor-slot-placeholder {
  filter: grayscale(1) brightness(0.5);
}

.item-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 80;
  width: max-content;
  max-width: min(330px, 70vw);
  display: none;
  transform: translateX(-50%);
  padding: 7px 9px;
  border: 2px solid #2a0a4a;
  border-radius: 3px;
  background: rgba(16, 0, 16, 0.96);
  box-shadow:
    inset 0 0 0 1px #100010,
    3px 3px 0 rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

.minecraft-slot:hover .item-tooltip,
.minecraft-slot:focus-visible .item-tooltip {
  display: grid;
}

.main-inventory-slots .minecraft-slot:nth-child(9n + 7) .item-tooltip,
.main-inventory-slots .minecraft-slot:nth-child(9n + 8) .item-tooltip,
.main-inventory-slots .minecraft-slot:nth-child(9n + 9) .item-tooltip,
.hotbar-inventory-slots .minecraft-slot:nth-child(n + 7) .item-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.armor-slot-list .item-tooltip,
.offhand-slot .item-tooltip {
  left: 0;
  transform: none;
}

.item-tooltip > span {
  display: block;
  overflow-wrap: anywhere;
}

.item-tooltip-name {
  color: #ffffff;
}

.item-enchant {
  color: #aaaaff;
}

.item-lore {
  color: #aaaaaa;
}

.item-advanced {
  color: #555555;
}

.compact-empty {
  min-height: 150px;
}

.info-block {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.info-block strong {
  font-size: 13px;
}

.info-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.preset-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.preset-row button {
  white-space: nowrap;
  padding: 0 12px;
}

.empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

/* Declared after .empty so a compact empty state is really compact. */
.empty.compact-empty {
  min-height: 130px;
}

.empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

/* The page behind a modal is blurred, not darkened. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

/* In and out: the blur and the window arrive together, the window a little
   below its place and a little small, and leave the same way. */
.modal-backdrop.is-opening {
  animation: modal-backdrop-in 220ms ease-out backwards;
}

.modal-backdrop.is-opening > .modal {
  animation: modal-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.modal-backdrop.is-closing {
  pointer-events: none;
  animation: modal-backdrop-out 200ms ease-in both;
}

.modal-backdrop.is-closing > .modal {
  animation: modal-out 200ms ease-in both;
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

@keyframes modal-backdrop-out {
  to {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes modal-fade-out {
  to {
    opacity: 0;
  }
}

/* Asked for less motion, the window only fades: it does not move, and the page
   behind it is blurred at once. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.is-opening {
    animation-name: modal-fade-in;
  }

  .modal-backdrop.is-opening > .modal {
    animation-name: modal-fade-in;
  }

  .modal-backdrop.is-closing {
    animation-name: modal-fade-out;
  }

  .modal-backdrop.is-closing > .modal {
    animation-name: modal-fade-out;
  }
}

.modal {
  position: relative;
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal.small {
  width: min(460px, 100%);
}

.modal.wide {
  width: min(980px, 100%);
}

.profile-modal {
  width: min(1040px, 100%);
}

.profile-guide-modal {
  width: min(760px, 100%);
}

.feature-settings-modal {
  width: min(820px, 100%);
}

.feature-settings-body {
  display: grid;
  gap: 14px;
}

.feature-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.settings-section-heading > div {
  display: grid;
  gap: 4px;
}

.settings-section-heading span,
.food-item-list > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.potion-settings,
.food-settings,
.potion-rule-list {
  display: grid;
  gap: 10px;
}

.potion-rule {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1fr) minmax(150px, 1fr) minmax(130px, 0.7fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.potion-rule-number {
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.potion-rule-actions {
  display: flex;
  gap: 6px;
}

.potion-rule-actions button {
  width: 36px;
  padding: 0;
}

.food-item-list textarea {
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.autosave-note {
  margin-right: auto;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.profile-modes-field {
  gap: 10px;
}

.profile-worlds-field {
  gap: 10px;
}

.profile-modes-heading,
.profile-mode-section-header,
.profile-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-modes-heading > label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.profile-mode-list,
.profile-mode-steps,
.profile-mode-servers,
.profile-world-list {
  display: grid;
  gap: 8px;
}

.control-world-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.control-world-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) 92px 36px 36px;
  align-items: end;
  gap: 8px;
}

.control-world-header > button {
  width: 36px;
  min-height: 36px;
  padding: 0;
}

.control-world-color input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 3px;
  cursor: pointer;
}

.control-world-axes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.control-world-axis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.control-world-axis > input {
  min-width: 0;
}

.control-world-dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.captcha-world-toggle {
  border-color: color-mix(in srgb, var(--warn), var(--border) 55%);
}

.profile-mode-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.profile-mode-header {
  align-items: end;
}

.profile-mode-header .field {
  flex: 1;
}

.profile-mode-header > button,
.profile-mode-step > button,
.profile-mode-server > button {
  width: 36px;
  min-height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
}

.profile-mode-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 10px;
}

.profile-mode-section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.profile-mode-section-header strong {
  font-size: 13px;
}

.profile-mode-step,
.profile-mode-server {
  display: grid;
  align-items: end;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.profile-mode-step {
  grid-template-columns: minmax(106px, 0.72fr) minmax(0, 1fr) 86px 36px;
}

.profile-mode-server {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.85fr) 36px;
}

.server-spam-panel .panel-body {
  display: grid;
  align-content: start;
}

.spam-cycle-mode-picker {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.spam-cycle-mode-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.spam-cycle-mode-count {
  color: var(--text);
}

.spam-cycle-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spam-cycle-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  cursor: pointer;
}

.spam-cycle-mode:has(input:checked) {
  border-color: var(--accent);
}

.spam-cycle-mode input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}

.spam-cycle-mode span {
  min-width: 0;
  line-height: 1.25;
}

.account-security-note {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.account-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(480px, 1.22fr);
  gap: 12px;
  align-items: start;
}

/* Two independent stacks instead of one shared grid, so a tall panel on one
   side never leaves a hole under its shorter neighbour on the other. */
.account-column {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.account-workspace .panel-body {
  padding: 12px 14px;
}

.account-workspace .panel-header {
  padding-block: 10px;
}

.account-workspace .setting-option {
  min-height: 0;
  padding: 8px 0;
}

.account-workspace .transfer-group {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding: 10px 0;
}

.account-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.account-session-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.server-restart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.server-restart-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.server-restart-row button {
  flex: none;
}

/* Account: Update (the panel pulling its own git checkout) */
.update-body {
  display: grid;
  gap: 12px;
}

.update-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.update-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.28fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.update-facts dt {
  color: var(--muted);
  font-size: 12px;
}

.update-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.update-facts code,
.update-commits code,
.update-rollback-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* a commit message can be a paragraph: three lines, the rest is in the tooltip */
.update-subject {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.update-branch {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}

.update-state.is-ok {
  color: var(--status-online);
}

.update-state.is-new {
  color: var(--warn);
  font-weight: 700;
}

.update-commits {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 12px;
}

.update-commits li {
  overflow-wrap: anywhere;
}

.update-commits code {
  color: var(--muted);
}

.update-more {
  color: var(--muted);
}

.update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.update-rollback-note {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.update-token {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.update-token > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.update-token-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.update-token-controls input {
  width: min(260px, 100%);
}

.update-token-saved {
  color: var(--status-online);
  font-size: 13px;
  font-weight: 700;
}

.update-token-warning {
  color: var(--warn);
  font-size: 12px;
}

.update-note {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.update-note.is-error {
  border-color: var(--function-error-border);
  background: var(--function-error-bg);
  color: var(--text);
}

.update-run {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.update-run.is-running {
  border-left-color: var(--accent);
}

.update-run.is-done {
  border-left-color: var(--status-online);
}

.update-run.is-error {
  border-left-color: var(--danger);
}

.update-run-title {
  font-size: 13px;
  font-weight: 800;
}

.update-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.update-step {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
}

.update-step small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--faint);
  font-size: 11px;
}

.update-step-mark {
  text-align: center;
  font-weight: 800;
}

.update-step.is-running {
  color: var(--text);
}

.update-step.is-running .update-step-mark::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: update-spin 0.8s linear infinite;
}

.update-step.is-done {
  color: var(--text);
}

.update-step.is-done .update-step-mark {
  color: var(--status-online);
}

.update-step.is-failed {
  color: var(--text);
}

.update-step.is-failed .update-step-mark {
  color: var(--danger);
}

.update-step.is-warning .update-step-mark {
  color: var(--warn);
}

@keyframes update-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .update-step.is-running .update-step-mark::before {
    animation: none;
  }
}

/* column-reverse keeps the newest line in view without any script */
.update-log {
  display: flex;
  flex-direction: column-reverse;
  max-height: 170px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.update-log > div {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.update-result {
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.theme-group + .theme-group {
  margin-top: 14px;
}

.theme-group-title {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.language-select {
  max-width: 260px;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}

.design-card {
  display: grid;
  gap: 6px;
  height: auto;
  padding: 8px;
  justify-items: start;
  text-align: left;
}

.design-card.active {
  border-color: var(--accent);
  background: var(--glass-3);
}

.design-preview {
  display: flex;
  width: 100%;
  height: 52px;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
}

.design-preview-side {
  width: 16px;
  flex: none;
  border-radius: 3px;
  background: var(--surface-2);
}

.design-preview-main {
  display: grid;
  flex: 1;
  gap: 3px;
  grid-template-rows: 8px 1fr 1fr;
}

.design-preview-bar,
.design-preview-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}

/* Each miniature mirrors what its design actually changes. */
.design-preview-soft .design-preview-side,
.design-preview-soft .design-preview-bar,
.design-preview-soft .design-preview-card {
  border-color: transparent;
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.design-preview-compact {
  gap: 2px;
  padding: 2px;
}

.design-preview-compact .design-preview-main {
  gap: 2px;
  grid-template-rows: 5px 1fr 1fr;
}

.design-preview-compact .design-preview-side {
  width: 11px;
}

.design-preview-compact .design-preview-bar,
.design-preview-compact .design-preview-card {
  border-radius: 2px;
}

.design-preview-terminal .design-preview-side,
.design-preview-terminal .design-preview-bar,
.design-preview-terminal .design-preview-card {
  border-radius: 0;
}

.design-preview-terminal .design-preview-card {
  border-left: 2px solid var(--accent);
}

.theme-card {
  display: grid;
  gap: 6px;
  height: auto;
  padding: 8px;
  justify-items: start;
  text-align: left;
}

.theme-card.active {
  border-color: var(--accent);
  background: var(--glass-3);
}

.theme-swatch {
  display: flex;
  width: 100%;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.theme-swatch i {
  flex: 1;
}

.theme-card-name {
  font-size: 12px;
  font-weight: 700;
}

/* Gradient palette swatches blend their colours instead of showing bands. */
.gradient-swatch {
  background: var(--bg);
}

.gradient-swatch i {
  opacity: 0.9;
}

/* One card holds the glow's switch and its speed slider. With the glow off the
   palettes and the slider dim, since they have nothing to show. */
.gradient-controls {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.gradient-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 14px;
}

.gradient-row + .gradient-row {
  border-top: 1px solid var(--border);
}

.gradient-row-label {
  flex: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.gradient-group .theme-grid,
.gradient-speed {
  transition: opacity 0.25s ease;
}

.gradient-group.is-off .theme-grid {
  opacity: 0.5;
}

.gradient-group.is-off .gradient-speed {
  opacity: 0.45;
  pointer-events: none;
}

/* The switch is a real checkbox, kept for focus and the keyboard, drawn as a
   track and a knob. On, the track is filled with the palette's own colours; the
   fill is a layer that fades in, since a gradient cannot be transitioned. */
.gradient-switch {
  justify-content: space-between;
  cursor: pointer;
}

.gradient-switch input {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.gradient-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass-3);
}

.gradient-switch-track::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--glow-1), var(--glow-3));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gradient-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), background-color 0.25s ease;
}

.gradient-switch input:checked + .gradient-switch-track::before {
  opacity: 1;
}

.gradient-switch input:checked + .gradient-switch-track::after {
  transform: translateX(20px);
  background: #fff;
}

.gradient-switch input:focus-visible + .gradient-switch-track {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* The speed slider: a thin track filled with the glow colours up to the knob.
   --fill is the knob's position, 0 to 1; the knob is 16px wide, so the fill
   ends under its centre. */
.glow-range {
  --fill: 0.5;
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.glow-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--glow-1), var(--glow-3)) 0 0 / calc(8px + (100% - 16px) * var(--fill)) 100% no-repeat,
    var(--glass-3);
  box-shadow: inset 0 0 0 1px var(--border);
}

.glow-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}

.glow-range:hover::-webkit-slider-thumb,
.glow-range:active::-webkit-slider-thumb {
  transform: scale(1.18);
}

.glow-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--glass-3);
  box-shadow: inset 0 0 0 1px var(--border);
}

.glow-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glow-1), var(--glow-3));
}

.glow-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.glow-range:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.gradient-speed-value {
  flex: none;
  min-width: 46px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.notification-channel-list {
  display: grid;
  gap: 10px;
}

.notification-channel-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.notification-channel-card.is-off {
  opacity: 0.6;
}

.notification-channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.notification-channel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notification-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.notification-channel-grid .span-2 {
  grid-column: span 2;
}

.notification-channel-grid .is-hidden {
  display: none;
}

.notification-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.notification-interval-field {
  margin-left: auto;
  max-width: 150px;
}

/* Per-event message templates: one row each (event name, editable template,
   sound toggle). */
.notification-templates {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.notification-templates > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.notification-templates > summary .bot-state {
  font-family: ui-monospace, Consolas, monospace;
}

.notification-template-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notification-template-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.notification-template-row.is-head {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-template-label {
  font-size: 13px;
  color: var(--muted);
}

.notification-template-text {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}

.notification-template-sound {
  justify-self: center;
}

@media (max-width: 640px) {
  .notification-template-row {
    grid-template-columns: 90px minmax(0, 1fr) auto;
  }
}

/* Three rows, each a caption over what it holds. */
.notification-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.notification-words {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-words > span,
.notification-hint {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.notification-words > button {
  flex: none;
}

.notification-grid.is-disabled {
  opacity: 0.55;
}

.notification-event-switches,
.notification-channel-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1100px) {
  .notification-channel-grid,
  .notification-grid {
    grid-template-columns: 1fr;
  }

  .notification-channel-grid .span-2 {
    grid-column: auto;
  }
}

.transfer-grid {
  display: grid;
  gap: 0;
}

.transfer-group {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(230px, auto);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.transfer-group:first-child {
  padding-top: 0;
}

.transfer-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.transfer-group > div:first-child {
  display: grid;
  gap: 4px;
}

.transfer-group span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.transfer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.file-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  color: var(--text);
  cursor: pointer;
}

.file-button:hover {
  border-color: var(--accent);
}

.profile-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  gap: 6px;
}

.profile-card-actions button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
}

.profile-card-actions button:hover {
  background: rgba(0, 0, 0, 0.62);
}

.required-world-badge {
  align-self: end;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 45%);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.required-world {
  border-color: color-mix(in srgb, var(--accent), var(--border) 55%);
}

.required-world .control-world-header {
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) 92px auto;
}

.profile-modes-heading > div {
  display: grid;
  gap: 3px;
}

.profile-modes-heading > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}

.modal > .panel-header {
  padding-right: 56px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.danger {
  border-color: color-mix(in srgb, var(--danger), var(--border) 35%);
  color: var(--danger);
}

.primary {
  border-color: color-mix(in srgb, var(--accent), var(--border) 35%);
  background: color-mix(in srgb, var(--accent), var(--surface-2) 82%);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  max-width: min(420px, calc(100vw - 36px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.step-editor {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.step-editor-header,
.step-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.step-editor-header h4 {
  margin: 0;
}

.step-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
  padding: 12px;
}

.step-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.step-parameter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.step-parameter-grid > .field {
  grid-column: auto;
  min-width: 0;
}

.step-parameter-grid .slot-input-row {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.step-delay-divider {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

.step-delay-divider span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.step-delay-divider input {
  max-width: 220px;
}

.cycle-delay-field.is-hidden {
  display: none;
}

.slot-picker {
  position: relative;
  display: grid;
  gap: 7px;
}

.slot-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.slot-input-row button {
  padding: 0 10px;
}

.slot-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 65;
  width: min(360px, calc(100vw - 48px));
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.slot-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.slot-picker-header label {
  margin: 0;
}

.slot-picker-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.hotbar-main {
  margin-top: 3px;
}

.hotbar-title {
  margin-top: 8px;
}

.slot-cell {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-3), white 8%), var(--surface-2));
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.slot-cell:hover:not(:disabled),
.slot-cell.selected {
  border-color: var(--accent);
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent), var(--surface-2) 72%), var(--surface-3));
}

.step-actions {
  display: flex;
  gap: 8px;
}

.step-actions button {
  min-height: 30px;
  padding: 0 10px;
}

.auction-workspace {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(560px, 1.28fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.auction-primary-column,
.auction-detail-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.auction-control-panel .panel-body,
.auction-runtime-panel .panel-body {
  display: grid;
  gap: 10px;
}

.auction-header-actions,
.auction-rule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auction-operation-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.auction-operation-switch button {
  min-width: 0;
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  font-weight: 800;
}

.auction-operation-switch button.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--text);
}

.auction-settings-section {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.auction-settings-section + .auction-settings-section {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.auction-settings-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.auction-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.auction-search-command {
  grid-column: 1 / -1;
}

.auction-server-pool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auction-server-pool-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.auction-server-target-grid {
  display: grid;
  gap: 10px;
  max-height: 320px;
  padding: 2px 6px 2px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.auction-server-group {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.auction-server-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.auction-server-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.auction-server-group-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.auction-server-group-heading span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.auction-server-group-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px;
  min-width: 0;
}

.auction-server-pool-field .auction-server-target {
  position: relative;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  overflow-wrap: normal;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--glass-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

.auction-server-pool-field .auction-server-target:hover {
  border-color: var(--muted);
  background: var(--glass-3);
}

.auction-server-pool-field .auction-server-target:has(.auction-server-target-input:checked) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.auction-server-pool-field .auction-server-target-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
}

.auction-server-target-check {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid var(--muted);
  border-radius: 3px;
  background: var(--glass);
  color: var(--surface);
}

.auction-server-target-check svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.auction-server-target-input:checked + .auction-server-target-check {
  border-color: var(--accent);
  background: var(--accent);
}

.auction-server-target-input:checked + .auction-server-target-check svg {
  opacity: 1;
}

.auction-server-target-input:focus-visible + .auction-server-target-check {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auction-server-target-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auction-param-label {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 3px;
}


.auction-balance-toggle .switch {
  min-height: 42px;
  margin: 0;
}

.auction-advanced {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.auction-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auction-advanced[open] summary {
  margin-bottom: 10px;
}

.auction-slot-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.auction-quantity-slots {
  border-top: 1px solid var(--border);
  padding-top: 9px;
}

.auction-advanced > .field + .field {
  margin-top: 9px;
}

.auction-safety-state,
.auction-runtime-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.auction-safety-state {
  min-height: 38px;
  padding: 0 10px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.auction-safety-state span,
.auction-runtime-line span,
.auction-next-refresh {
  color: var(--muted);
  font-size: 12px;
}

.auction-rule-list {
  display: grid;
  gap: 8px;
}

.auction-rule {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.auction-rule-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auction-rule-heading .switch {
  margin: 0;
}

.auction-rule-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auction-query-field {
  grid-column: 1 / -1;
}

.auction-price-limit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px;
}

.auction-price-limit > * {
  min-width: 0;
}

.auction-price-limit input[type="hidden"],
.auction-price-limit [hidden] {
  display: none;
}

.auction-price-mode-toggle {
  width: 40px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.auction-price-mode-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.auction-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
}

.auction-stat-grid > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border-right: 1px solid var(--border);
}

.auction-stat-grid > div:nth-child(3n) {
  border-right: 0;
}

.auction-stat-grid > div:nth-child(n + 4) {
  border-top: 1px solid var(--border);
}

.auction-stat-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.auction-stat-grid strong {
  font-size: 16px;
}

/* What the bot is doing now, two to a row: the name above, the value below. */
.auction-runtime-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}

.auction-runtime-line {
  display: grid;
  align-content: start;
  justify-content: stretch;
  gap: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.auction-runtime-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.auction-scan-body {
  max-height: min(520px, calc(100vh - 220px));
  overflow: auto;
  scrollbar-gutter: stable;
}

.auction-listing-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.auction-listing-table th,
.auction-listing-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.auction-listing-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.auction-listing-table th:first-child,
.auction-listing-table td:first-child {
  width: 52px;
  text-align: center;
}

.auction-listing-table th:nth-child(3),
.auction-listing-table td:nth-child(3),
.auction-listing-table th:nth-child(4),
.auction-listing-table td:nth-child(4) {
  width: 110px;
}

.auction-listing-table th:last-child,
.auction-listing-table td:last-child {
  width: 112px;
}

.auction-listing-table td:nth-child(2) {
  overflow-wrap: anywhere;
}

.auction-listing-table td:nth-child(2) strong,
.auction-listing-table td:nth-child(2) span {
  display: block;
}

.auction-listing-table td:nth-child(2) span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.auction-listing-table .is-italic {
  font-style: italic;
}

.auction-outcome-candidate td:last-child {
  color: var(--accent);
  font-weight: 800;
}

.auction-outcome-italic td:last-child,
.auction-outcome-over-price td:last-child,
.auction-outcome-inventory-full td:last-child,
.auction-outcome-insufficient-balance td:last-child,
.auction-outcome-limit-reached td:last-child {
  color: var(--warn);
}

.auction-scan-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

@media (max-width: 900px) {
  .group-grid {
    grid-template-columns: 1fr;
  }

  .account-workspace {
    grid-template-columns: 1fr;
  }
  .transfer-group {
    grid-template-columns: 1fr;
  }

  .transfer-actions {
    justify-content: flex-start;
  }

  .repeat-broadcast-panel .broadcast-entry {
    grid-template-columns: 26px minmax(0, 1fr) 34px;
  }

  .repeat-broadcast-panel .broadcast-entry .broadcast-delay-field {
    grid-column: 2 / 3;
  }

  .app-shell {
    height: 100vh;
    /* dvh excludes the phone's dynamic browser UI / on-screen buttons, so the
       scroll container ends above them instead of behind them (the chat input
       was touching the phone buttons at the bottom). */
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  /* The sidebar becomes an off-canvas drawer opened by the topbar hamburger.
     It leaves the grid flow, so .main fills the viewport and .content owns the
     vertical scroll — dragging the content now scrolls it on touch. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(300px, 84vw);
    max-height: none;
    background: var(--glass);
    border-right: 1px solid var(--border);
    border-bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  }

  .app-shell.drawer-open .sidebar {
    transform: translateX(0);
  }

  .drawer-toggle {
    display: inline-grid;
    place-items: center;
    width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    padding: 0;
  }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    cursor: pointer;
  }

  .app-shell.drawer-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .panel-header {
    flex-wrap: wrap;
  }

  .feature-grid {
    columns: 1;
  }

  .built-in-feature-grid,
  .feature-settings-grid {
    grid-template-columns: 1fr;
  }

  .potion-rule {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .potion-rule > .field {
    grid-column: 2 / 3;
  }

  .potion-rule-actions {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: stretch;
    flex-direction: column;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .custom-param-grid,
  .custom-parameter-row {
    grid-template-columns: 1fr;
  }

  .info-dashboard {
    grid-template-columns: 1fr;
  }

  .profile-dashboard .game-status-panel {
    min-height: 0;
  }

  .inventory-tab-workspace {
    grid-template-columns: 1fr;
  }

  .auction-workspace,
  .auction-rule-fields,
  .auction-settings-grid,
  .auction-slot-settings,
  .auction-server-target-grid {
    grid-template-columns: 1fr;
  }

  .auction-search-command,
  .auction-query-field {
    grid-column: auto;
  }

  /* On mobile the chat tab flows as one vertical block stack. The desktop
     layout nests fixed-height panels with their own scrollbars; on a phone that
     squeezed the side column and clipped the spam-cycle fields off the bottom
     (unreachable by scrolling). Block flow keeps every panel at its natural
     height so the whole page scrolls, and the panel bodies stop scrolling
     internally. The ::after spacer restores the bottom breathing room other
     tabs get (a scroll container's own padding-bottom is unreliable at the
     scroll end in Chrome). */
  .chat-workspace {
    height: auto;
    min-height: 0;
    display: block;
  }

  .chat-workspace > * + * {
    margin-top: 14px;
  }

  .chat-workspace::after {
    content: "";
    display: block;
    height: 18px;
  }

  .chat-side-column {
    height: auto;
    display: block;
    grid-template-rows: none;
  }

  .chat-side-column > * + * {
    margin-top: 14px;
  }

  .chat-primary-panel,
  .broadcast-panel,
  .notification-panel {
    height: auto;
    min-height: 0;
  }

  .chat-primary-panel {
    min-height: 520px;
  }

  .chat-panel-body,
  .broadcast-panel > .panel-body,
  .notification-panel > .panel-body,
  .server-spam-panel > .panel-body {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .chat-primary-panel .game-chat-log {
    min-height: 220px;
  }

  .manual-controls {
    grid-template-columns: 1fr;
  }

  .manual-control-deck {
    min-height: 0;
  }

  .manual-control-grid {
    grid-template-columns: 1fr;
  }

  .work-schedule-grid {
    grid-template-columns: 1fr;
  }

  .work-schedule-usernames {
    grid-column: auto;
  }

  .manual-control-section + .manual-control-section {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .profile-mode-columns {
    grid-template-columns: 1fr;
  }

  .control-world-axes {
    grid-template-columns: 1fr;
  }

  .game-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-delay-divider {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .profile-dashboard,
  .inventory-tab-workspace,
  .auction-workspace {
    grid-template-columns: 1fr;
  }

  .profile-dashboard .game-status-panel {
    min-height: 0;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .minecraft-inventory {
    --inventory-slot: clamp(40px, 3.8vw, 52px);
  }
}

@media (max-width: 720px) {
  .group-card-heading {
    grid-template-columns: 1fr;
  }

  .proxy-grid > .field,
  .rotation-grid > .field {
    grid-column: 1 / -1;
  }

  .group-card-heading > span,
  .group-card-heading > button {
    justify-self: start;
  }

  .inventory-automation-panel[data-feature="autoDrop"] .automation-settings {
    grid-template-columns: 1fr;
  }

  /* Keep the hamburger and the window/tab buttons together on the first row
     (left to right); the mode/server switcher and connect buttons wrap below.
     The topbar grows past the shared header height here because it can wrap. */
  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: auto;
    min-height: var(--header-height);
    padding-block: 8px;
  }

  .topbar-tabs,
  .selection-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .toolbar {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .topbar-switcher {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .toolbar > button {
    flex: 0 0 42px;
  }

  .topbar-switcher button {
    flex: initial;
  }

  .profile-mode-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 78px 36px;
  }

  .profile-mode-server {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  }

  .control-world-header {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr) 82px 36px 36px;
  }

  .required-world .control-world-header {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr) 82px auto;
  }

  .status-control-options {
    grid-template-columns: 1fr;
  }

  .game-chat-form {
    grid-template-columns: 1fr;
  }

  .broadcast-entry {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .broadcast-entry .broadcast-delay-field {
    grid-column: 2 / 3;
  }

  .setting-option {
    align-items: stretch;
    flex-direction: column;
  }

  .minecraft-inventory {
    --inventory-slot: clamp(28px, 8.2vw, 42px);
    grid-template-columns: 1fr;
  }

  .equipment-section {
    grid-template-columns: auto auto auto auto;
    align-items: end;
  }

  .armor-slot-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, var(--inventory-slot));
  }

  .offhand-slot {
    margin: 0;
  }

  .status-tools,
  .meter-row,
  .compact-info {
    grid-template-columns: 1fr;
  }

  .status-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3,
  .span-4,
  .span-6,
  .span-8,
  .span-12 {
    grid-column: span 1;
  }
}

.statistics-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.statistics-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.statistics-scope-field {
  display: grid;
  gap: 5px;
  min-width: min(300px, 40vw);
}

.statistics-scope-field label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.statistics-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.statistics-range button {
  min-height: 34px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
}

.statistics-range button.active {
  border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
  background: color-mix(in srgb, var(--accent), var(--surface-2) 84%);
}

.statistics-live-state {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.statistics-live-state > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 82%);
}

.statistics-loading {
  min-height: 320px;
  display: grid;
  place-items: center;
}

.statistics-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 2px 2px 0;
}

.statistics-context > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.statistics-context strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.statistics-context span {
  color: var(--muted);
  font-size: 11px;
}

.statistics-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 14px;
  justify-content: start;
}

.load-gauge {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-2);
}

.load-gauge-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.load-gauge-dial-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

/* Our own centred value overlay (one decimal for small loads); the component's
   built-in whole-number label is hidden via --circular-range-output-c. */
.load-gauge-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.load-gauge-value small {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}

/* Read-only dial: the circular-range web component themed to Froggion and with
   pointer/keyboard interaction disabled (it is a gauge, not an input). */
.load-gauge-dial {
  --circular-range-w: 210px;
  --circular-range-fill: var(--status-online);
  --circular-range-fill-start: var(--status-online);
  --circular-range-fill-end: var(--accent-2);
  --circular-range-bg: color-mix(in srgb, var(--border) 55%, transparent);
  --circular-range-indice-c: color-mix(in srgb, var(--border) 70%, transparent);
  --circular-range-output-c: transparent;
  color: var(--text);
  pointer-events: none;
}

.load-gauge-foot {
  color: var(--faint);
  font-size: 12px;
}

.statistics-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 8px;
}

.statistics-summary-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 108px;
  padding: 13px 14px 12px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}

.statistics-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--summary-tone, var(--accent));
  content: '';
}

.statistics-summary-card.tone-memory { --summary-tone: var(--accent-2); }
.statistics-summary-card.tone-bots { --summary-tone: var(--warn); }
.statistics-summary-card.tone-network { --summary-tone: #dc8f55; }
.statistics-summary-card.tone-latency { --summary-tone: #a98ada; }
.statistics-summary-card.tone-uptime { --summary-tone: var(--faint); }

.statistics-summary-card > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.statistics-summary-card > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
  line-height: 1.1;
}

.statistics-summary-card > small {
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.statistics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.statistics-chart-panel {
  min-width: 0;
  overflow: hidden;
  box-shadow: none;
}

.statistics-chart-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 13px 14px 8px;
}

.statistics-chart-header > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.statistics-chart-header h3 {
  margin: 0;
  font-size: 14px;
}

.statistics-chart-header span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.statistics-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 12px;
}

.statistics-chart-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.statistics-chart-legend i,
.statistics-pie-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 2px;
  background: var(--series-color);
}

.statistics-chart-legend strong {
  color: var(--text);
  font-size: 10px;
}

.statistics-chart-canvas {
  min-height: 230px;
  padding: 0 8px 8px;
}

.statistics-chart-canvas svg {
  display: block;
  width: 100%;
  height: 230px;
  overflow: visible;
}

.statistics-chart-grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.statistics-chart-axis-label {
  fill: var(--muted);
  font-size: 10px;
}

.statistics-distribution-panel,
.statistics-capacity-panel,
.statistics-breakdown-panel {
  box-shadow: none;
}

.statistics-distribution-panel > .panel-header > div,
.statistics-capacity-panel > .panel-header > div,
.statistics-breakdown-panel > .panel-header > div {
  min-width: 0;
}

.statistics-distribution-panel .bot-state,
.statistics-capacity-panel .bot-state,
.statistics-breakdown-panel .bot-state {
  display: block;
  white-space: normal;
}

.statistics-pie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.statistics-pie-block {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 18px;
}

.statistics-pie-block + .statistics-pie-block {
  border-left: 1px solid var(--border);
}

.statistics-pie {
  width: 176px;
  height: 176px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.statistics-pie > div {
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--glass);
  text-align: center;
}

.statistics-pie strong {
  font-size: 18px;
}

.statistics-pie span {
  color: var(--muted);
  font-size: 10px;
}

.statistics-pie-legend {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  max-height: 210px;
  overflow: auto;
}

.statistics-pie-legend > div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.statistics-pie-legend > div.selected {
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.statistics-pie-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.statistics-pie-legend strong {
  font-size: 10px;
}

.statistics-capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.statistics-capacity-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px;
}

.statistics-capacity-grid > div + div {
  border-left: 1px solid var(--border);
}

.statistics-capacity-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.statistics-capacity-grid strong {
  font-size: 20px;
}

.statistics-capacity-grid small {
  color: var(--muted);
  font-size: 10px;
}

.statistics-table-wrap {
  max-height: 420px;
  overflow: auto;
}

.statistics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.statistics-table th,
.statistics-table td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.statistics-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.statistics-table th:first-child,
.statistics-table td:first-child,
.statistics-table th:nth-child(2),
.statistics-table td:nth-child(2) {
  text-align: left;
}

.statistics-process-table th:nth-child(2),
.statistics-process-table td:nth-child(2) {
  text-align: right;
}

.statistics-process-table td small {
  color: var(--muted);
  font-size: 10px;
}

.statistics-process-hint {
  margin-top: 0;
}

.statistics-table tr.selected td {
  background: color-mix(in srgb, var(--accent), transparent 91%);
}

.statistics-table tbody tr:last-child td {
  border-bottom: 0;
}

.statistics-table button {
  min-height: 28px;
  max-width: 230px;
  padding: 0 8px;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.statistics-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.statistics-status .status-dot {
  flex: 0 0 10px;
}

.statistics-no-data {
  display: grid;
  place-items: center;
  min-height: 100px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.statistics-estimate-note {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 11px 13px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn), transparent 92%);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.statistics-estimate-note strong {
  flex: 0 0 auto;
  color: var(--text);
}

@media (max-width: 1380px) {
  .statistics-summary-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .statistics-pie-block {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .statistics-pie {
    width: 148px;
    height: 148px;
  }

  .statistics-pie > div {
    width: 94px;
    height: 94px;
  }
}

@media (max-width: 1120px) {
  .statistics-chart-grid,
  .statistics-pie-grid {
    grid-template-columns: 1fr;
  }

  .statistics-pie-block + .statistics-pie-block {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .statistics-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .statistics-scope-field {
    min-width: min(100%, 300px);
  }

  .statistics-live-state {
    margin-left: 0;
    padding-inline: 8px;
  }

  .statistics-summary-grid,
  .statistics-capacity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-capacity-grid > div:nth-child(odd) {
    border-left: 0;
  }

  .statistics-capacity-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .statistics-controls,
  .statistics-context,
  .statistics-estimate-note {
    align-items: stretch;
    flex-direction: column;
  }

  .statistics-scope-field,
  .statistics-range {
    width: 100%;
    min-width: 0;
  }

  .statistics-summary-grid,
  .statistics-capacity-grid {
    grid-template-columns: 1fr;
  }

  .statistics-capacity-grid > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .statistics-chart-header {
    flex-direction: column;
  }

  .statistics-chart-legend {
    justify-content: flex-start;
  }

  .statistics-pie-block {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .statistics-pie-legend {
    width: 100%;
  }

  .statistics-table {
    min-width: 720px;
  }
}

/* BotPOV tab placeholder: the view itself is laid over this box (see
   public/botpov/panel.js and pov.css). */
.pov-slot-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100vh - 170px);
  min-height: 380px;
  border: 1px dashed var(--border, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  color: var(--muted, #8d96a5);
}

/* The BotPOV tab: the inventory, BotPOV and the chat as three windows in a row,
   a tall narrow arrow on each side to go to the next. Only the window on show is
   laid out; a slide lays out the two it runs between and moves them with a
   transform that is there only while it runs (at rest a transform would make
   every fixed element inside, such as the item dragged in the inventory,
   relative to it).

   The windows are not bounded at the bottom: each is as tall as what it holds
   (the page scrolls), and no shorter than the screen. --pov-fit is the height
   of the screen below the header in this content's own pixels: the content is
   zoomed, and 100vh is not, so it has to be divided by the zoom, or the windows
   stop a sixth short of the bottom. */
.pov-carousel {
  --pov-fit: calc((100vh - 110px) / var(--content-zoom));
  /* Not stretched to the grid row: the row is sized before the windows are, and
     came out as short as the screen, cutting a taller window off. */
  align-self: start;
  display: flex;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: var(--pov-fit);
}

/* Only the sides are cut (a window sliding out); the bottom is not, so a tooltip
   or a menu can reach past the end of a window. */
.pov-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-x: clip;
}

.pov-track {
  display: flex;
}

.pov-track.is-sliding {
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0.18, 1);
  will-change: transform;
}

.pov-pane {
  display: none;
  flex: 0 0 100%;
  min-width: 0;
}

.pov-pane.is-shown {
  display: block;
}

/* The chat is a workspace of its own height, its log scrolling inside it, as it
   is on the Chat tab; here it reaches the bottom of the screen. */
.pov-pane .chat-workspace {
  height: var(--pov-fit);
  min-height: 520px;
}

.pov-pane > .pov-slot-panel {
  height: var(--pov-fit);
  min-height: 380px;
}

.pov-edge {
  flex: 0 0 26px;
  display: grid;
  place-items: start center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--glass-2);
  color: var(--muted);
  cursor: pointer;
}

/* A window can be taller than the screen, so the arrow rides along at the middle
   of what is on screen instead of at the middle of the whole window. */
.pov-edge svg {
  position: sticky;
  top: 45%;
}

.pov-edge:hover:not(.is-empty) {
  border-color: var(--accent);
  background: var(--glass-3);
  color: var(--accent);
}

.pov-edge.is-empty {
  visibility: hidden;
}

.pov-slot-notice {
  padding: 16px;
  text-align: center;
}

/* What the bot has done, under the BotPOV picture. The picture takes the height
   the table leaves; the table is a panel like any other, so every palette and
   design dresses it. */
.pov-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: calc(100vh - 170px);
  min-height: 380px;
}

/* In the BotPOV tab's windows the stage is the height of the screen, and the
   picture takes what the table leaves, but never less than a usable picture:
   a long table makes the window taller, it does not squeeze the picture. */
.pov-pane .pov-stage {
  height: auto;
  min-height: var(--pov-fit);
}

.pov-stage > .pov-slot-panel {
  flex: 1 1 0;
  height: auto;
  min-height: 140px;
}

.pov-pane .pov-stage > .pov-slot-panel {
  min-height: 380px;
}

.pov-pane .pov-stats {
  max-height: none;
}

.pov-stats {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  max-height: 55%;
  min-height: 0;
  overflow: hidden;
}

.pov-stats > .panel-header {
  flex: none;
  padding-block: 11px;
}

.pov-stats > .panel-header h3 {
  font-size: 15px;
}

.pov-stats-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pov-stats-body {
  container-type: inline-size;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* A card for each thing the bot does, in the colour of that thing: a tinted
   icon, its name, and three large numbers. Four across when each card is wide
   enough for its three numbers, two by two below that, one under that. */
.pov-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@container (max-width: 1060px) {
  .pov-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 560px) {
  .pov-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pov-stat-card {
  --tone: #7fd36b;
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tone) 15%, transparent), transparent 62%),
    var(--glass-2);
  font-variant-numeric: tabular-nums;
}

/* The colour of a thing the bot does is its own, like a health bar's red: it is
   never taken from the palette, which would turn experience violet in Amethyst. */
.pov-stat-card[data-metric="kills"] { --tone: #e26767; }
.pov-stat-card[data-metric="blocks"] { --tone: #5fb6c8; }
.pov-stat-card[data-metric="xp"] { --tone: #7fd36b; }
.pov-stat-card[data-metric="coins"] { --tone: #e3b341; }

/* An open card is lit; its list is the panel under the cards. */
.pov-stat-card.is-open {
  border-color: color-mix(in srgb, var(--tone) 62%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent);
}

.pov-stat-details {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.pov-stat-detail {
  gap: 10px;
}

.pov-stat-detail > .pov-stat-head > .pov-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.pov-stat-detail > .pov-stat-head > .pov-stat-name {
  font-size: 15px;
}

.pov-stat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--text);
}

button.pov-stat-head {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.pov-stat-head:hover:not(:disabled) {
  border-color: transparent;
  background: none;
}

button.pov-stat-head:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.pov-stat-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  color: color-mix(in srgb, var(--tone) 82%, var(--text));
}

.pov-stat-name {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.pov-stat-head:hover .pov-stat-name {
  color: color-mix(in srgb, var(--tone) 70%, var(--text));
}

.pov-stat-chevron {
  display: inline-grid;
  flex: none;
  margin-left: auto;
  color: var(--muted);
  transition: transform 160ms ease;
}

.pov-stat-card.is-open .pov-stat-chevron {
  transform: rotate(90deg);
}

.pov-stat-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pov-stat-value {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pov-stat-value + .pov-stat-value {
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.pov-stat-value > strong {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
}

.pov-stat-value[data-period="session"] > strong {
  color: color-mix(in srgb, var(--tone) 78%, var(--text));
}

/* A number that is nothing yet steps back, so what has moved stands out. */
.pov-stat-value.is-zero > strong {
  color: var(--faint);
  font-weight: 600;
}

.pov-stat-value > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Before the numbers come, the card keeps its size and each number is a bar. */
.pov-stat-value > strong:empty::before {
  content: "";
  display: block;
  width: 3.2ch;
  height: 0.8em;
  margin-block: 0.2em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  animation: pov-stat-pulse 1.4s ease-in-out infinite;
}

@keyframes pov-stat-pulse {
  50% { opacity: 0.4; }
}

/* The kinds: a name, a bar for its share of the biggest, and the three numbers. */
.pov-stat-kinds {
  display: grid;
  gap: 2px;
}

.pov-stat-kind {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(40px, 1fr) repeat(3, 92px);
  align-items: center;
  gap: 14px;
  padding: 5px 0;
  font-size: 15px;
}

.pov-stat-kind > span:nth-child(n + 3) {
  text-align: right;
}

.pov-stat-kind-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pov-stat-kind-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
}

.pov-stat-kind-bar > i {
  display: block;
  width: calc(var(--share) * 100%);
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 70%, transparent), var(--tone));
}

.pov-stat-kind-head {
  padding-block: 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pov-stat-zero,
.pov-stat-empty {
  color: var(--faint);
}

.pov-stat-empty {
  font-style: italic;
}

/* A narrow card gives up the bars. */
@container (max-width: 470px) {
  .pov-stat-kind {
    grid-template-columns: minmax(0, 1fr) repeat(3, 68px);
    gap: 8px;
  }

  .pov-stat-kind-bar,
  .pov-stat-kind-gap {
    display: none;
  }
}

@media (max-width: 600px) {
  .pov-stats-meta {
    display: none;
  }
}

/* Compact screens ---------------------------------------------------------
   Settings, Action, Plugins and Groups are laid out like Profile: cards in
   columns with a 14px gap, fields close together, and no room kept for what
   is switched off. */

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) {
  gap: 14px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) .panel-body {
  padding: 14px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) .field {
  gap: 4px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) .grid {
  gap: 10px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) :is(input, select, .mb-select) {
  min-height: max(28px, calc(var(--control-height) - 4px));
  padding-block: 5px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) .switch:has(> input[type="checkbox"]) {
  --toggle-height: max(28px, calc(var(--control-height) - 4px));
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) :is(.panel-header, .modal-footer) .switch:has(> input[type="checkbox"]) {
  --toggle-height: 28px;
}

.content:is([data-screen="settings"], [data-screen="action"], [data-screen="plugins"], [data-screen="groups"]) textarea {
  min-height: 56px;
}

/* Settings: what the bot is and how it connects on the left, what it does by
   itself on the right. */
.settings-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.settings-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

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

/* Action: Repeat message and AFK mode stand in a narrow column on the left and
   the functions are tiles on the right, so nothing is stretched across the
   screen. */
.action-dashboard {
  display: grid;
  grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.action-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

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

.content[data-screen="action"] .repeat-broadcast-panel {
  margin-bottom: 0;
}

/* A message is a card: the text on top, under it the delay and the remove button. */
.content[data-screen="action"] .broadcast-entry {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: end;
  row-gap: 8px;
  padding: 10px;
}

.content[data-screen="action"] .broadcast-entry-order {
  grid-row: 1;
  grid-column: 1;
}

.content[data-screen="action"] .broadcast-entry > .field {
  grid-column: 2 / 4;
}

.content[data-screen="action"] .broadcast-entry > .field.broadcast-delay-field {
  grid-row: 2;
  grid-column: 2;
  max-width: 180px;
}

.content[data-screen="action"] .broadcast-entry > .broadcast-remove {
  grid-row: 2;
  grid-column: 3;
}

.content[data-screen="action"] .afk-mode-card {
  margin: 0;
}

.content[data-screen="action"] .built-in-feature-grid,
.content[data-screen="action"] .feature-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.content[data-screen="action"] .feature-grid .feature {
  min-height: 112px;
  margin: 0;
  padding: 12px 12px 12px 14px;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
}

.content[data-screen="action"] .feature-main {
  gap: 6px;
}

/* What the function does, under its name: two lines at most. */
.feature-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content[data-screen="action"] .custom-function-card:not(.library-card) {
  min-height: 100px;
}

/* The status column of Account registrar, Auto leave and Auto mine stays in
   view while the long form beside it is scrolled, so Start and Stop are always
   at hand. Below the width where it drops under the form it scrolls with it. */
.registrar-runtime-column {
  position: sticky;
  top: 4px;
}

@media (max-width: 1320px) {
  .registrar-runtime-column {
    position: static;
  }
}

/* Group colour: a row of swatches, in the group's card and in the menu a right
   click on the group in the bot list opens. */
.group-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.group-color {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch, transparent);
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.group-color:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--text) 45%, transparent);
  background: var(--swatch, transparent);
  transform: scale(1.12);
}

.group-color.is-on {
  border-color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch, var(--text)) 45%, transparent);
}

.group-color-own {
  background: conic-gradient(#e26767, #e3b341, #7fd36b, #5fb6c8, #8b7cf0, #e06fc0, #e26767);
}

.group-color-own[style*="--swatch"] {
  background: var(--swatch);
}

.group-color-own > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.group-menu {
  position: fixed;
  z-index: 140;
  display: grid;
  gap: 12px;
  width: 270px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.group-menu .field {
  gap: 6px;
}

/* The second confirmation of deleting a group. */
.delete-group-body {
  display: grid;
  gap: 12px;
}

.delete-group-body p {
  margin: 0;
  line-height: 1.5;
}

.delete-group-bots {
  justify-self: start;
}

.delete-group-warning {
  color: var(--danger);
  font-size: 13px;
}

/* A question to answer (askConfirm) stands over whatever modal is open. */
.modal-backdrop[data-confirm] {
  z-index: 60;
}

.confirm-body {
  display: grid;
  gap: 10px;
}

.confirm-body p {
  margin: 0;
  line-height: 1.5;
}

.confirm-detail {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}