/* ═══════════════════════════════════════════════════════════════════
   BeardoBot Liquid Glass dashboard (public_html/dashboard.php).
   Ported from design/dashboard-model.html, the approved model.
   Phone first: check every change at ~390px, then tablet, then desktop.
   Standalone: dashboard.php does not load beardobot.css or Bootstrap.
   ═══════════════════════════════════════════════════════════════════ */

/* Layout: iOS 26 control centre. Home = hero server tile + live control toggles +
   floating module tiles; a module opens as a glass sheet (iOS-Settings rows,
   segmented parts). One floating capsule tab bar with a sliding liquid lens;
   it turns into the Save bar when anything is unsaved. Dark-only, like the product. */
:root {
  color-scheme: dark;
  --ink: #07070c;
  --ink-2: #0e0f17;
  --text: #eef2f8;
  --muted: #9aa3b6;
  --dim: #646c80;
  --cyan: #0dafe3;
  --cyan-rgb: 13, 175, 227;
  --cyan-hi: #5fd3f7;
  --purple: #a855f7;
  --purple-rgb: 168, 85, 247;
  --green: #30d158;
  --green-rgb: 48, 209, 88;
  --amber: #ffb340;
  --amber-rgb: 255, 179, 64;
  --red: #ff5a64;
  --red-rgb: 255, 90, 100;
  --white: #ffffff;
  --on-accent: #02121b;

  /* Glass material */
  --mat: rgba(255, 255, 255, 0.055);
  --mat-thick: rgba(22, 24, 36, 0.62);
  --mat-row: rgba(255, 255, 255, 0.04);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --rim-top: rgba(255, 255, 255, 0.30);
  --rim-bot: rgba(255, 255, 255, 0.04);
  --sheen: rgba(255, 255, 255, 0.10);
  --spec: rgba(255, 255, 255, 0.16);
  --shade: rgba(0, 0, 0, 0.45);
  --scrim: rgba(4, 5, 10, 0.55);
  --blur: blur(26px) saturate(185%);
  --blur-lite: blur(14px) saturate(160%);

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bar-h: 68px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.86em; padding: 0.05em 0.35em; border-radius: 6px; background: var(--mat); border: 1px solid var(--hair); }

/* ── Backdrop: colour for the glass to bend ───────────────────── */
.world { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.blob.b1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, rgba(var(--cyan-rgb), 0.55), transparent 65%); }
.blob.b2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 6vmax; background: radial-gradient(circle, rgba(var(--purple-rgb), 0.50), transparent 65%); }
.blob.b3 { width: 38vmax; height: 38vmax; left: 30vw; bottom: -18vmax; background: radial-gradient(circle, rgba(var(--cyan-rgb), 0.35), transparent 65%); }
@media (hover: hover) and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .blob.b1 { animation: d1 40s var(--ease) infinite alternate; }
  .blob.b2 { animation: d2 52s var(--ease) infinite alternate; }
  .blob.b3 { animation: d3 60s var(--ease) infinite alternate; }
}
@keyframes d1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes d2 { to { transform: translate(-7vw, 9vh) scale(1.08); } }
@keyframes d3 { to { transform: translate(6vw, -7vh) scale(1.15); } }

/* ── The material ─────────────────────────────────────────────── */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--mat);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px var(--shade), 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Rim: bright on top, fading down, like light on a lens edge */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--rim-top), var(--rim-bot) 45%, rgba(255,255,255,0.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* Specular: follows the pointer on devices with one */
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(420px circle at var(--mx, 30%) var(--my, -20%), var(--spec), transparent 45%),
    linear-gradient(180deg, var(--sheen), transparent 38%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s var(--ease);
}
.glass > * { position: relative; z-index: 3; }
.glass.thick { background: var(--mat-thick); }

/* ── Header ───────────────────────────────────────────────────── */
.top {
  /* Scrolls away with the page (iOS large-title style). A pinned transparent
     header made glass tiles sliding under it render a hard seam at its edge;
     the floating dock stays put for navigation. */
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  max-width: 1180px; margin: 0 auto;
  padding-inline: 20px; padding-block: 14px 10px;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.22), 0 0 10px rgba(var(--green-rgb), 0.8); flex: none; }
.live-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(var(--amber-rgb), 0.22), 0 0 10px rgba(var(--amber-rgb), 0.8); }
.top .spacer { flex: 1; }
.round { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 0; color: var(--text); flex: none; }
.menu {
  position: absolute; right: 20px; top: 64px; width: min(300px, calc(100vw - 32px));
  padding: 8px; border-radius: var(--r-md); z-index: 40;
  transform-origin: top right; animation: pop 0.32s var(--spring);
}
.menu-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.menu-row + .menu-row { border-top: 1px solid var(--hair); border-radius: 0; }
.menu-row .t { flex: 1; min-width: 0; font-size: 0.9rem; }
.menu-row .t small { display: block; color: var(--muted); font-size: 0.76rem; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* ── Page frame ───────────────────────────────────────────────── */
.page { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 6px calc(var(--bar-h) + 70px); }
.view[hidden] { display: none; }
.label-up { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 26px 6px 12px; }

/* ── Home: hero ───────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.hero-main { padding: 24px 26px; border-radius: var(--r-xl); display: grid; gap: 18px; align-content: space-between; min-height: 230px; }
.hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 0.88rem; }
.hero-status .sep { opacity: 0.4; }
.hero-name { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; margin-top: 6px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-acts .round { width: 42px; height: 42px; background: rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px var(--hair); }
/* Action sheet rows */
.act-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 12px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; }
.act-row:hover { background: rgba(255,255,255,0.07); }
.act-row b { display: block; font-weight: 600; }
.act-row small { display: block; color: var(--muted); font-size: 0.8rem; }
.act-row > span:last-child { min-width: 0; }
.act-row.danger b { color: var(--red); }
.act-sep { height: 1px; background: var(--hair); margin: 6px 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 0.88rem; white-space: nowrap; color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px var(--hair);
  transition: transform 0.25s var(--spring), background 0.2s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); }
.btn:active { transform: scale(0.96); }
.btn.primary { background: linear-gradient(180deg, var(--cyan-hi), var(--cyan)); color: var(--on-accent); box-shadow: 0 8px 22px rgba(var(--cyan-rgb), 0.38), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn.danger { color: var(--red); background: rgba(var(--red-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.35); }
.btn.premium { color: var(--white); background: linear-gradient(180deg, #c084fc, var(--purple)); box-shadow: 0 8px 22px rgba(var(--purple-rgb), 0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn.sm { min-height: 34px; padding: 6px 14px; font-size: 0.8rem; }
/* A brand wordmark in place of a word (PayPal's black logo): its "y" hangs below the line, so
   it sits a little low to put the letters on the label's baseline. */
.btn-logo { height: 18px; width: auto; margin-left: -3px; transform: translateY(2px); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(var(--amber-rgb), 0.10); box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.35); font-size: 0.88rem; }
.confirm p { flex: 1 1 200px; min-width: 0; }

/* Control-centre toggles */
.cc { padding: 18px; border-radius: var(--r-xl); display: grid; gap: 14px; align-content: start; }
.cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cc-head h2 { font-size: 1rem; }
.cc-head span { font-size: 0.76rem; color: var(--muted); }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cc-grid > .cc-tog:last-child { grid-column: span 2; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.stat { padding: 16px 18px; border-radius: var(--r-lg); min-width: 0; }
.stat b { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.stat .c1 { color: var(--cyan-hi); } .stat .c2 { color: var(--green); } .stat .c3 { color: var(--amber); } .stat .c4 { color: #c9a5ff; }
.cc-tog {
  display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 22px; border: 0; text-align: left; color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px var(--hair);
  transition: background 0.3s var(--ease), transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
  min-width: 0;
}
.cc-tog:active { transform: scale(0.95); }
.cc-tog .knob { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.10); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.cc-tog b { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.cc-tog small { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
/* State is carried by the round icon, as in iOS Control Centre: solid
   green with a dark glyph when on, dim when off. The tile stays glass. */
.cc-tog .knob { color: var(--dim); }
.cc-tog b { color: var(--muted); transition: color 0.3s var(--ease); }
.cc-tog[aria-pressed="true"] b { color: var(--text); }
.cc-tog[aria-pressed="true"] .knob { background: var(--green); color: #052611; box-shadow: 0 4px 14px rgba(var(--green-rgb), 0.35); }
.cc-tog[aria-pressed="true"] { background: radial-gradient(150% 120% at 0% 0%, rgba(var(--green-rgb), 0.30), transparent 62%), rgba(255, 255, 255, 0.06); }
.cc-tog[aria-pressed="false"]:not([data-unknown]) { background: radial-gradient(150% 120% at 0% 0%, rgba(var(--red-rgb), 0.26), transparent 62%), rgba(255, 255, 255, 0.04); }
.cc-tog[data-unknown] .knob { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--amber-rgb), 0.6); color: var(--amber); }
.cc-tog.pending { box-shadow: inset 0 0 0 2px rgba(var(--amber-rgb), 0.8); }


/* Setup card */
.setup { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 18px 22px; border-radius: var(--r-xl); margin-top: 16px; }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(255,255,255,0.10) 0); }
.ring::before { content: ""; position: absolute; }
.ring i { width: 50px; height: 50px; border-radius: 50%; background: var(--ink-2); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.setup-main { flex: 1 1 260px; min-width: 0; }
.setup-main h2 { font-size: 1.05rem; }
.setup-main p { color: var(--muted); font-size: 0.86rem; margin-top: 3px; }
.steps { display: grid; gap: 2px; flex: 1 1 100%; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.step + .step { border-top: 1px solid var(--hair); }
.step .tick { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--dim); box-shadow: inset 0 0 0 1.5px var(--hair-2); }
.step.done .tick { background: var(--green); color: var(--on-accent); box-shadow: none; }
.step .what { flex: 1; min-width: 0; font-size: 0.9rem; }
.step .what small { display: block; color: var(--muted); font-size: 0.8rem; }
.step.done .what { color: var(--muted); }

/* Modules */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mod {
  display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 0; text-align: left; color: var(--text); min-height: 152px;
  transition: transform 0.45s var(--spring), box-shadow 0.4s var(--ease);
}
.mod:hover { transform: translateY(-4px); box-shadow: 0 26px 60px var(--shade), 0 0 40px rgba(var(--cyan-rgb), 0.14); }
.mod:active { transform: scale(0.97); }
.squircle { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.squircle .ic { width: 24px; height: 24px; }
.mod .mod-t { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.mod .mod-d { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.mod .meta { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--dim); }
.mod .meta .on { color: var(--green); }
/* Billing: the account rather than a feature, so on wider screens it fills the rest of the last row (--span, set by home.php)
   (laid out like them, the plan on the right of the description line). On a phone it's a tile like the rest. */
@media (min-width: 641px) {
  .mods > .mod.mod-wide { grid-column: span var(--span, 3); min-height: 0; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .mod.mod-wide > :not(.meta) { grid-column: 1; }
  .mod.mod-wide .meta { grid-column: 2; grid-row: 3; align-self: center; margin: 0; font-size: 0.82rem; color: var(--muted); }
}
.lockglyph { display: none; color: #c9a5ff; }
body.free .mod[data-prem] .lockglyph { display: inline-flex; }
.g-cyan { background: linear-gradient(135deg, #3cc6f2, #0a6f9e); }
.g-purple { background: linear-gradient(135deg, #c084fc, #6b21a8); }
.g-green { background: linear-gradient(135deg, #4ade80, #168c45); }
.g-amber { background: linear-gradient(135deg, #ffc34d, #c47a00); }
.g-red { background: linear-gradient(135deg, #ff7a82, #b81d2b); }
.g-pink { background: linear-gradient(135deg, #f472b6, #9d174d); }
.g-slate { background: linear-gradient(135deg, #8391a7, #334155); }
.g-indigo { background: linear-gradient(135deg, #818cf8, #3730a3); }
.g-orange { background: linear-gradient(135deg, #fb923c, #9a3412); }
.g-teal { background: linear-gradient(135deg, #5eead4, #0f766e); }

/* Feed + news tiles on home */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.tile { padding: 18px 20px; border-radius: var(--r-lg); display: grid; gap: 12px; align-content: start; min-width: 0; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-head h2 { font-size: 1rem; }
.live { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.kill { display: flex; gap: 10px; align-items: baseline; font-size: 0.88rem; min-width: 0; }
.kill + .kill { padding-top: 10px; border-top: 1px solid var(--hair); }
.kill .k { color: var(--green); font-weight: 700; } .kill .v { color: var(--red); font-weight: 700; }
.kill .w { color: var(--muted); font-size: 0.78rem; display: block; }
.kill > div { min-width: 0; }
.news-title { font-weight: 700; }
.news-body { color: var(--muted); font-size: 0.88rem; }

/* ── Module sheet ─────────────────────────────────────────────── */
.sheet { border-radius: var(--r-xl); padding: 18px 20px 24px; display: grid; gap: 18px; min-width: 0; }
.sheet-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.back { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--text); background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); flex: none; }
.back .ic { transform: rotate(180deg); }
.sheet-head .squircle { width: 44px; height: 44px; border-radius: 14px; }
.sheet-title { min-width: 0; }
.sheet-title h1 { font-size: 1.45rem; font-weight: 800; }
.sheet-title p { color: var(--muted); font-size: 0.86rem; }

/* Segmented control with a sliding glass lens */
.seg-wrap { position: relative; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.seg-wrap.fits { -webkit-mask: none; mask: none; }
.seg-wrap::-webkit-scrollbar { display: none; }
.seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.28); box-shadow: inset 0 0 0 1px var(--hair); }
.seg button { position: relative; z-index: 2; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.86rem; padding: 9px 16px; min-height: 44px; border-radius: 999px; white-space: nowrap; transition: color 0.25s ease; }
.seg button[aria-selected="true"] { color: var(--text); }
.seg-lens { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
  background: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.3);
  transition: transform 0.5s var(--spring), width 0.5s var(--spring); }

/* ── iOS-style groups and rows ────────────────────────────────── */
.part[hidden] { display: none; }
.part { display: grid; gap: 8px; animation: rise 0.45s var(--ease); }
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px; align-items: start; }
.col { display: grid; gap: 8px; min-width: 0; }
.g-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); padding: 10px 14px 0; display: flex; align-items: center; gap: 8px; }
.g-note { font-size: 0.8rem; color: var(--dim); padding: 0 14px 6px; }
.group { border-radius: var(--r-md); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; width: 100%; border: 0; background: transparent; text-align: left; color: var(--text); }
button.row { cursor: pointer; transition: background 0.2s ease; }
button.row:hover { background: rgba(255,255,255,0.04); }
button.row:active { background: rgba(255,255,255,0.07); }
.item + .item { border-top: 1px solid var(--hair); }
.row .squircle { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); flex: none; }
.row .squircle .ic { width: 17px; height: 17px; }
.rtxt { flex: 1; min-width: 0; }
.rtxt b { display: block; font-weight: 500; font-size: 0.95rem; }
.rtxt small { display: block; color: var(--muted); font-size: 0.86rem; line-height: 1.35; margin-top: 1px; }
.rval { color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.rval.unset { color: var(--dim); }
.chev { color: var(--dim); transition: transform 0.35s var(--spring); }
.item.open > .row .chev { transform: rotate(90deg); }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.drawer > .drawer-in { overflow: hidden; min-height: 0; }
.item.open > .drawer, .item.on > .drawer.kids { grid-template-rows: 1fr; }
.drawer-body { padding: 4px 14px 16px 56px; display: grid; gap: 12px; }
.drawer.kids > .drawer-in > .drawer-body { background: rgba(0,0,0,0.14); border-top: 1px solid var(--hair); padding: 0; gap: 0; }
/* A sub-setting's own drawer (e.g. a slider under a switch): padded, in line with the sub-setting's label. */
.kids .item > .drawer:not(.kids) > .drawer-in > .drawer-body { padding: 4px 14px 16px 22px; }
.kids .item + .item { border-top: 1px solid var(--hair); }
.kids .row { min-height: 52px; padding-left: 22px; }
.prem-lock { display: none; color: #c9a5ff; }
body.free .item[data-prem] .prem-lock { display: inline-flex; }
body.free .item[data-prem] > .row { opacity: 0.55; }
.was { display: none; font-size: 0.68rem; font-weight: 600; color: var(--amber); padding: 1px 8px; border-radius: 999px; border: 1px dashed rgba(var(--amber-rgb), 0.55); white-space: nowrap; }
body.show-was .was { display: inline-block; margin-top: 4px; }
.add-row { color: var(--cyan-hi); font-weight: 600; }
.add-row .ic { color: var(--cyan-hi); }
.pending-del { opacity: 0.45; }
.pending-del .rtxt b { text-decoration: line-through; }
.badge { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted); white-space: nowrap; }
.badge.on { background: rgba(var(--green-rgb), 0.16); color: var(--green); }
.badge.new { background: rgba(var(--cyan-rgb), 0.16); color: var(--cyan-hi); }

/* Controls */
.sw { position: relative; width: 51px; height: 31px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.16); transition: background 0.3s var(--ease); }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: var(--white); box-shadow: 0 3px 8px rgba(0,0,0,0.35); transition: transform 0.4s var(--spring), width 0.25s var(--ease); }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:active + i::after { width: 33px; }
.sw input:checked:active + i::after { transform: translateX(14px); }
.sw input:focus-visible + i { outline: 2px solid var(--cyan-hi); outline-offset: 2px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.inp {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 0; color: var(--text); font-size: 16px;
  background: rgba(0,0,0,0.30); box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: box-shadow 0.2s ease;
}
.inp:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgba(var(--cyan-rgb), 0.85), 0 0 0 4px rgba(var(--cyan-rgb), 0.16); }
.inp::placeholder { color: var(--dim); }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.inp option { background: var(--ink-2); color: var(--text); }
textarea.inp { min-height: 110px; resize: vertical; }
.inp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.inp-row > .field { min-width: 0; }
.inp-row.inp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* days · hours · minutes: one row, phones too */
.inp-row.inp-when { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 520px) {   /* iOS will not shrink a date field to share a row: next run full width, time zone under it */
  .inp-row.inp-when { grid-template-columns: minmax(0, 1fr); }
  input.inp[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; text-align: left; }
  input.inp[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
}
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .inp { text-align: center; font-variant-numeric: tabular-nums; min-width: 0; }
.stepper button { width: 46px; height: 46px; flex: none; border-radius: 14px; border: 0; background: rgba(255,255,255,0.08); color: var(--text); font-size: 1.25rem; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.stepper .unit { color: var(--muted); font-size: 0.82rem; white-space: nowrap; padding-left: 4px; }
.hint { color: var(--dim); font-size: 0.86rem; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.07); color: var(--muted); font-weight: 600; font-size: 0.84rem; box-shadow: inset 0 0 0 1px var(--hair); }
.chip-btn[aria-pressed="true"] { background: rgba(var(--cyan-rgb), 0.18); color: var(--cyan-hi); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.5); }

/* Danger */
.group.danger { box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.35); background: rgba(var(--red-rgb), 0.05); }
.danger-body { padding: 16px 14px; display: grid; gap: 10px; }
.danger-body + .danger-body { border-top: 1px solid rgba(var(--red-rgb), 0.2); }
.danger-body b { font-size: 0.95rem; }
.danger-body p { color: var(--muted); font-size: 0.84rem; }
.typed { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.typed .inp { max-width: 200px; font-family: ui-monospace, Consolas, monospace; }

/* Embed preview */
.embed { border-radius: 12px; background: #1d1f2b; border-left: 4px solid var(--cyan); padding: 12px 14px; display: grid; gap: 6px; font-size: 0.88rem; overflow-wrap: anywhere; }
.embed b { color: var(--white); }
.mention { color: #c9cdfb; background: rgba(88, 101, 242, 0.3); border-radius: 4px; padding: 0 4px; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.plan { padding: 18px; border-radius: var(--r-md); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: 8px; align-content: start; }
.plan.current { box-shadow: inset 0 0 0 1.5px rgba(var(--cyan-rgb), 0.6); }
.plan .price { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }
.plan .price small { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.plan ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.86rem; display: grid; gap: 3px; }

/* ── Capsule tab bar + save morph ─────────────────────────────── */
.dock {
  position: fixed; z-index: 50; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); width: min(640px, calc(100vw - 24px));
  height: var(--bar-h); border-radius: 999px; padding: 6px;
  background: var(--mat-thick);
  transition: transform 0.45s var(--spring);
}
.dock.compact { transform: translateX(-50%) scale(0.93); }
.tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 100%; transition: opacity 0.3s ease 0.1s, transform 0.45s var(--spring); }
.tab { position: relative; z-index: 2; border: 0; background: transparent; color: var(--muted); display: grid; place-content: center; justify-items: center; gap: 2px; font-size: 0.66rem; font-weight: 600; border-radius: 999px; min-width: 0; transition: color 0.3s ease; }
.tab .ic { width: 23px; height: 23px; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.tab[aria-current="page"] { color: var(--cyan-hi); }
/* The developer's extra Dev tab: slots sized by their labels so Moderation still fits on a phone. */
.tabs:has(> a.tab) { grid-auto-columns: auto; }
a.tab { text-decoration: none; }
a.tab:hover { color: var(--text); }
.lens { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px;
  background: rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(2px) saturate(220%) brightness(1.15); backdrop-filter: blur(2px) saturate(220%) brightness(1.15);
  transition: transform 0.55s var(--spring), width 0.55s var(--spring); }
.lens.stretch { animation: squish 0.55s var(--ease); }
@keyframes squish { 40% { scale: 1.14 0.88; } 100% { scale: 1 1; } }
.savepane { position: absolute; inset: 6px; z-index: 3; display: flex; align-items: center; gap: 8px; padding-left: 14px; border-radius: 999px; opacity: 0; pointer-events: none; transform: scale(0.92); transition: opacity 0.3s ease, transform 0.45s var(--spring); }
.dock.dirty .tabs { opacity: 0; pointer-events: none; transform: scale(0.95); transition: opacity 0.2s ease, transform 0.35s var(--spring); }
.dock.dirty .savepane { opacity: 1; pointer-events: auto; transform: none; }
.savepane .txt { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.savepane .txt .live-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(var(--amber-rgb), 0.22); }

/* Toast, overlay, sheets */
.toast { position: fixed; z-index: 90; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -160%); padding: 11px 18px; border-radius: 999px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; max-width: calc(100vw - 32px); transition: transform 0.5s var(--spring); }
.toast.show { transform: translate(-50%, 0); }
.toast .ic { color: var(--green); }
.overlay { position: fixed; inset: 0; z-index: 80; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fade 0.25s ease; }
.overlay[hidden] { display: none; }
/* A confirmation is asked from inside other popups (disband a faction from its editor,
   delete a task): it comes first in the page, so it needs its own layer to sit on top. */
#alertWrap { z-index: 85; }
.overlay.to-bottom { place-items: end center; padding: 0; }
@keyframes fade { from { opacity: 0; } }
.alert { width: min(380px, 100%); border-radius: var(--r-lg); padding: 22px 20px 16px; display: grid; gap: 14px; text-align: center; animation: pop 0.4s var(--spring); }
.alert h2 { font-size: 1.1rem; }
.alert p { color: var(--muted); font-size: 0.9rem; }
.alert .acts { display: grid; gap: 8px; }
.bottom-sheet { width: min(560px, 100%); border-radius: 30px 30px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; animation: up 0.5s var(--spring); max-height: 85vh; overflow-y: auto; }
@keyframes up { from { transform: translateY(100%); } }
.grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--hair-2); justify-self: center; margin-bottom: 8px; }
.more-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; border: 0; background: transparent; color: var(--text); text-align: left; width: 100%; min-height: 62px; }
.more-item:hover, .more-item[aria-current="page"] { background: rgba(255,255,255,0.07); }
.more-item b { display: block; }
.more-item small { color: var(--muted); font-size: 0.8rem; }
.more-item > span:last-child { min-width: 0; }

/* Drag slider above a number box */
.slider-wrap { display: grid; gap: 4px; padding: 4px 2px 2px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan) var(--fill, 0%), rgba(255,255,255,0.14) var(--fill, 0%)); box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(0,0,0,0.1); transition: transform 0.25s var(--spring); }
.slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--cyan); }
.slider::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), 0.45), 0 4px 12px rgba(0,0,0,0.45); }
.ticks { position: relative; height: 16px; font-size: 0.7rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }

/* ── Tablet ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
}
/* ── Phone ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --bar-h: 64px; }
  .tab { font-size: 0.62rem; }
  .top { padding-inline: 12px; gap: 8px; }
  .page { padding-inline: 12px; }
  .hero-main { padding: 20px; min-height: 0; border-radius: var(--r-lg); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat b { font-size: 1.35rem; }
  .cc, .setup { border-radius: var(--r-lg); }



  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-grid > .cc-tog:last-child { grid-column: span 2; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mods > .mod:last-child:nth-child(odd) { grid-column: span 2; min-height: 0; }   /* an odd one out takes the whole line */
  .mod { min-height: 124px; padding: 14px; }
  .mod .mod-d { display: none; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: 14px 10px 20px; border-radius: var(--r-lg); }
  .sheet-head { padding-inline: 4px; }
  .sheet-title h1 { font-size: 1.25rem; }
  .drawer-body { padding-left: 14px; }
  .rval { max-width: 36%; }
  .glass { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

::view-transition-group(morph) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.34, 1.25, 0.5, 1); }
::view-transition-old(morph), ::view-transition-new(morph) { animation-duration: 0.3s; height: 100%; object-fit: cover; }
.hl { animation: hl 1.8s var(--ease); }
@keyframes hl { 0%, 35% { box-shadow: inset 0 0 0 2px var(--cyan-hi); background: rgba(var(--cyan-rgb), 0.10); } }
.upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border-radius: var(--r-md); background: rgba(var(--purple-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--purple-rgb), 0.4); }
.upsell p { flex: 1 1 220px; min-width: 0; font-size: 0.9rem; }
.upsell b { display: block; }
.parts[inert] { opacity: 0.5; filter: saturate(0.5); }

/* ── Editor sheet (create / edit one thing) ───────────────────── */
.ed-wrap { place-items: center; }
.editor { width: min(760px, 100%); height: min(88vh, 940px); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--r-xl); animation: pop 0.45s var(--spring); overflow: hidden; }
.ed-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.ed-head h2 { font-size: 1.02rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-head .btn:last-child { justify-self: end; }
.ed-head .btn:first-child { justify-self: start; }
.ed-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 28px; display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; }  /* rows keep their full height and the body scrolls (overflow:hidden groups would otherwise shrink to fit) */
.ed-body .group { background: rgba(255,255,255,0.035); }
.ed-pad { padding: 14px; display: grid; gap: 12px; }
.ed-del { margin-top: 10px; }
.ed-del .btn { width: 100%; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--white); outline-offset: 3px; }
.flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.flag { aspect-ratio: 3 / 2; border-radius: 10px; border: 0; display: grid; place-items: end start; padding: 6px 8px; font-size: 0.7rem; font-weight: 700; color: var(--white); text-shadow: 0 1px 3px rgba(0,0,0,0.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.flag[aria-pressed="true"] { outline: 3px solid var(--cyan-hi); outline-offset: 2px; }
.pick { display: grid; gap: 8px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(var(--cyan-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.4); font-size: 0.84rem; font-weight: 600; }
.pchip button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: var(--text); display: grid; place-items: center; font-size: 0.9rem; line-height: 1; }
.pick-results { border-radius: 14px; background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px var(--hair-2); max-height: 230px; overflow-y: auto; }
.pick-results:empty { display: none; }
.pick-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 0; background: transparent; color: var(--text); text-align: left; }
.pick-opt + .pick-opt { border-top: 1px solid var(--hair); }
.pick-opt:hover, .pick-opt:focus-visible { background: rgba(255,255,255,0.06); }
.pick-opt small { margin-left: auto; color: var(--dim); font-size: 0.76rem; }
.pick-none { padding: 12px; color: var(--muted); font-size: 0.84rem; }
.irow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.irow + .irow { border-top: 1px solid var(--hair); }
.irow .nm { flex: 1; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.irow .nm small { display: block; color: var(--dim); font-size: 0.74rem; }
.irow .inp { width: 92px; min-height: 40px; text-align: center; padding: 6px 8px; }
.irow .x { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: rgba(var(--red-rgb), 0.12); color: var(--red); display: grid; place-items: center; }
.coord { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.82rem; }
.ed-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; align-items: start; }
.ed-split > div { display: grid; gap: 8px; min-width: 0; }
@media (max-width: 760px) {
  .ed-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ed-wrap { place-items: end center; padding: 0; }
  .editor { height: 94vh; height: 94dvh; border-radius: 28px 28px 0 0; animation: up 0.5s var(--spring); }
  .ed-body { padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Real-page additions (not needed by the static model) ──────── */
.sheet-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; color: var(--muted); font-weight: 600; flex-wrap: wrap; text-align: center; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.18); border-top-color: var(--cyan-hi); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast.is-error { box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.5), 0 18px 50px var(--shade); }
.toast.is-error .ic { color: var(--red); }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(var(--cyan-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.3); font-size: 0.9rem; }
.notice p { flex: 1 1 240px; min-width: 0; color: var(--muted); }
/* Home: Nitrado settings BeardoBot needs that are off. */
.notice.fixset { margin-top: 16px; }
.notice.fixset > div { flex: 1 1 280px; min-width: 0; }
.notice.fixset ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; color: var(--muted); font-size: 0.86rem; }
.notice.fixset li b { color: var(--text); font-weight: 600; }
.notice b { color: var(--text); }
.menu a.menu-row { color: var(--text); text-decoration: none; }
.menu a.menu-row:hover { background: rgba(255,255,255,0.06); }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.badge.warn { background: rgba(var(--amber-rgb), 0.16); color: var(--amber); }

/* ── Mobile fit (feedback 2026-10-11) ──────────────────────────── */
/* Icons never shrink when the text beside them is long. */
.squircle, .back, .round { flex-shrink: 0; }
/* A switch whose state Nitrado didn't confirm. */
.item.is-unknown .sw { opacity: 0.5; }
.cc-tog[data-unknown] small { color: var(--amber); }
@media (max-width: 640px) {
  /* Segmented control fills the width and fits without scrolling. */
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1 1 auto; padding: 9px 8px; font-size: 0.82rem; }
  .sheet-head { gap: 10px; }
  .sheet-title p { font-size: 0.8rem; }
  /* Hero: Restart, Schedules and ••• on one row; Where it posts lives in Feeds. */
  .hero-acts [data-part="where"] { display: none; }
}
/* The Discord server's icon in the header pill */

/* ── Community: welcome message inserts + preview ── */
.chip-sel { width: auto; max-width: 190px; min-height: 40px; padding: 7px 12px; border-radius: 999px; font-size: 0.84rem; }
.drawer-body .chips { margin-top: 8px; }
.wpv { padding: 14px; border-radius: var(--r-md); background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px var(--hair); font-size: 0.9rem; }
.wpv-ping { color: #c9cdfb; margin-bottom: 8px; }
.wpv-ping span { background: rgba(88,101,242,0.3); border-radius: 4px; padding: 0 3px; }
.wpv-embed { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border-radius: 6px; background: rgba(255,255,255,0.05); border-left: 4px solid #0dafe3; max-width: 520px; }   /* Discord's own embed width */
.wpv-body { min-width: 0; }
.wpv-title { display: block; color: var(--text); margin-bottom: 4px; overflow-wrap: anywhere; }
.wpv-msg { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.wpv-msg .wpv-chan { color: #c9cdfb; background: rgba(88,101,242,0.3); border-radius: 4px; padding: 0 3px; }
.wpv-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0dafe3, #6b5bd6); color: #fff; font-weight: 700; }
.wpv-img { grid-column: 1 / -1; display: block; width: 100%; height: auto; border-radius: 4px; }   /* Discord shows an embed image whole, never cropped */

/* Channel select with its on/off options on the same line */
.ctl-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.ctl-line > .field { flex: 1 1 220px; }
.inline-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 46px; }
.inline-sw { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
@media (max-width: 560px) {
  .inline-sws { width: 100%; display: grid; gap: 6px; min-height: 0; }
  .inline-sw { justify-content: space-between; }
}

/* Server card: status + switch/add buttons on top, Discord icon beside the name */
.hero-head { display: grid; gap: 14px; min-width: 0; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.hero-top .hero-status { flex: 1; min-width: 0; }
.hero-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-id .hero-name { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hero-mark { width: 56px; height: 56px; border-radius: 16px; flex: none; overflow: hidden; display: grid; place-items: center; font-weight: 800; color: var(--white); background: linear-gradient(135deg, var(--cyan), var(--purple)); box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.12); }
.hero-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tools { display: flex; gap: 8px; flex: none; }
.hero-tools .round { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); background: rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px var(--hair); }
/* Header: just the menu on Home; the server's name, quietly, elsewhere. */
.top-ctx { min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(#view-home:not([hidden])) .top-ctx { visibility: hidden; }
@media (max-width: 560px) {
  .hero-mark { width: 48px; height: 48px; border-radius: 14px; }
  .hero-tools .round { width: 36px; height: 36px; }
}

/* Top bar: brand, server name (module views), support Discord, who's signed in, log out */
.top .brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.top .brand img { width: 30px; height: 30px; display: block; }
.top a.round { text-decoration: none; }
.me { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 7px; border-radius: 999px; min-width: 0; font-size: 0.86rem; font-weight: 600; }
.me-pic { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: var(--white); background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.me-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
@media (max-width: 560px) {
  .top-ctx, .me-name { display: none; }
  .me { width: 42px; padding: 0; justify-content: center; }
}
/* Leaderboard and Player stats for this server: labelled pills, icons only on phones */
.top-links { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 4px; border-radius: 999px; flex: none; }
.top-links a { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.84rem; font-weight: 600; white-space: nowrap; transition: color 0.2s ease, background 0.2s ease; }
.top-links a:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.top-links .ic { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .top-links a { width: 34px; padding: 0; justify-content: center; }
  .top-links a span { display: none; }
}

/* Shop: category drawers list their items; kit editor contents */
.row .squircle.emo { font-size: 1rem; line-height: 1; }
.drawer-body.slist { gap: 2px; padding-left: 14px; }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; }
.srow:hover { background: rgba(255,255,255,0.05); }
.srow .rtxt { flex: 1; min-width: 0; }
.srow .rtxt b { display: block; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .rtxt small { display: block; font-size: 0.76rem; color: var(--muted); }
.srow .chev { color: var(--dim); }
.sthumb { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); }
.sthumb img { width: 100%; height: 100%; object-fit: contain; }
.srow-foot { display: flex; justify-content: flex-end; padding: 8px 4px 2px; }
.cat-row { grid-template-columns: 90px minmax(0, 1fr); }
.kc-list { display: grid; gap: 6px; margin-top: 10px; }
.kc-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); }
.kc-row .rtxt { flex: 1; min-width: 0; }
.kc-row .rtxt b { display: block; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-row .rtxt small { display: block; font-size: 0.72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-qty { width: 76px; min-height: 40px; text-align: center; flex: none; }
.kc-del { width: 36px; height: 36px; background: rgba(255,255,255,0.06); font-size: 1.1rem; }

/* Airdrops: inline link button, town list, loot editor rows */
.linkish { border: 0; background: none; padding: 0; color: var(--cyan-hi); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 900px) {
  .group.town-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; }
}
.loot-list { display: grid; gap: 8px; }
.loot-row { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); }
.loot-main { display: flex; align-items: center; gap: 10px; }
.loot-main .rtxt { flex: 1; min-width: 0; }
.loot-main .rtxt b { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.loot-main .rtxt small { display: block; font-size: 0.74rem; color: var(--muted); }
.loot-qty { width: 76px; min-height: 40px; text-align: center; flex: none; }
.loot-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.loot-row.is-removed .rtxt b { opacity: 0.45; text-decoration: line-through; }
/* A switch that can't be used right now (e.g. a drop type with no scene) */
.sw input:disabled + i { opacity: 0.35; }
.sw input:disabled { cursor: not-allowed; }

/* Zones: overview + editor maps */
.zmap-wrap { margin-bottom: 18px; }
.zmap, .zed-map { position: relative; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #14141e; box-shadow: inset 0 0 0 1px var(--hair); }
.zmap { height: clamp(260px, 46vh, 460px); }
.zed-map { aspect-ratio: 1 / 1; max-height: 62vh; }
.zmap.leaflet-container, .zed-map.leaflet-container { background: #14141e; font: inherit; }
.zmap-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.zmap .leaflet-bar a, .zed-map .leaflet-bar a, .zmap .leaflet-bar a:hover, .zed-map .leaflet-bar a:hover { background: rgba(20,20,30,0.82); color: var(--text); border-color: var(--hair); backdrop-filter: blur(10px); } 
.zmap .leaflet-bar, .zed-map .leaflet-bar { border: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.4); border-radius: 12px; overflow: hidden; }
.zstyle { display: flex; padding: 3px; border-radius: 999px; background: rgba(20,20,30,0.82); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--hair); }
.zstyle button { border: 0; background: transparent; color: var(--muted); font: 600 0.75rem/1 Inter, system-ui, sans-serif; padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.zstyle button[aria-pressed="true"] { background: rgba(255,255,255,0.14); color: var(--text); }
.ztip { background: rgba(20,20,30,0.9); color: var(--text); border: 0; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); font: 600 0.8rem Inter, system-ui, sans-serif; }
.ztip::before { display: none; }
/* Grid labels on a map with no tiles yet (glass-map-kit.js grid). */
.zgrid-lbl { color: rgba(255,255,255,0.4); font: 600 0.68rem Inter, system-ui, sans-serif; white-space: nowrap; transform: translate(4px, -14px); }
/* Touch screens: the zone tapped on the Zones map, as a card along the bottom of the map. */
.zcard.glass { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1001; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; }
.zcard b { font-size: 0.98rem; }
.zcard span { font-size: 0.84rem; color: var(--muted); }
.zcard .zcard-acts { display: flex; gap: 8px; margin-top: 8px; }
.zdot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.row .zdot { margin: 0 10px 0 10px; }
.g-label .zdot { display: inline-block; margin-right: 8px; vertical-align: 1px; width: 8px; height: 8px; }
.zvtx { display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0b0d14; font: 700 0.65rem/1 Inter, system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 2px rgba(0,0,0,0.35); cursor: grab; }
.zvtx.is-edge { background: transparent; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,0.5); }
.zed-map-wrap { display: grid; gap: 10px; margin-bottom: 16px; }
.zed-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zed-bar .hint { flex: 1 1 200px; margin: 0; }
.zed-acts { display: flex; gap: 8px; }
.zseg { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--hair); justify-self: start; }
.zseg button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.86rem; padding: 8px 16px; border-radius: 999px; }
.zseg button[aria-selected="true"] { background: rgba(255,255,255,0.14); color: var(--text); }
.zed-plist { display: grid; gap: 6px; margin-bottom: 10px; }
.zed-prow { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.zed-pn { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: center; }
.zed-prow .inp { min-height: 40px; }
.zi-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.zi-list .badge { margin-left: 4px; }
.zi-add { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: start; }
@media (max-width: 560px) { .zi-add { grid-template-columns: 1fr; } }
/* Sheets and their parts never grow past the screen: an auto grid column
   takes its widest child's minimum width (a map's panes, a long code line). */
.sheet, .part { grid-template-columns: minmax(0, 1fr); }
.parts { min-width: 0; }
.zmap .leaflet-bar a.leaflet-disabled, .zed-map .leaflet-bar a.leaflet-disabled { background: rgba(20,20,30,0.82); color: var(--dim); }
/* Zone map: vertex numbers dead centre, coordinate readout */
.zvtx span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.zcoord { padding: 5px 9px; border-radius: 8px; background: rgba(20,20,30,0.82); color: var(--text); font: 600 0.72rem/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--hair); pointer-events: none; }

/* Zones: collapsible type headers, map filter chips */
.g-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 4px 8px; border: 0; background: none; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; text-align: left; cursor: pointer; }
.g-head .zdot { width: 8px; height: 8px; }
.g-count { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text); letter-spacing: 0; }
.g-head .chev { margin-left: auto; transition: transform 0.25s var(--ease); transform: rotate(90deg); }
.g-head[aria-expanded="false"] .chev { transform: rotate(0deg); }
.zfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.zfilter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); font-weight: 600; font-size: 0.84rem; box-shadow: inset 0 0 0 1px var(--hair); }
.zfilter b { color: var(--text); font-weight: 700; }
.zfilter[aria-pressed="true"] { background: rgba(255,255,255,0.12); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.zfilter[aria-pressed="false"] .zdot { opacity: 0.35; box-shadow: none; }
/* Zone map filters: All + three types in one even row */
.zfilters { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 6px; }
.zfilter { justify-content: center; padding: 7px 10px; gap: 6px; white-space: nowrap; }
/* Live switches while Nitrado is being asked: one look for all, no on/off cue */
.cc-tog.cc-tog[data-checking] { background: rgba(255, 255, 255, 0.06); }
.cc-tog[data-checking] .knob { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--amber-rgb), 0.6); color: var(--amber); }
.cc-tog[data-checking] b { color: var(--muted); }
.cc-tog[data-checking] small { color: var(--amber); }

/* Factions: list mark, editor preview (shaped like the bot's Discord embed), colour, flags */
.fmark { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--fc); color: #fff; font-weight: 800; font-size: 0.85rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.fmark img { width: 100%; height: 100%; object-fit: cover; }
.fprev { --fc: #0DAFE3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; background: #2b2d31; border-left: 4px solid var(--fc); color: #dbdee1; }
.fprev-head { display: flex; align-items: center; gap: 8px; }
.fprev-head b { color: #fff; font-size: 1rem; overflow-wrap: anywhere; }
.fprev-flag img { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; display: block; }
.fprev p { margin: 6px 0 8px; font-size: 0.86rem; color: #b5bac1; white-space: pre-wrap; overflow-wrap: anywhere; }
.fprev-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; }
.fprev-meta span:empty { display: none; }
.fprev-img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.fsw-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.fsw { aspect-ratio: 1; width: 100%; max-width: 40px; border: 0; border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); justify-self: center; }
.fsw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-2, #14141e), 0 0 0 4px #fff; }
.fcol-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.fcol-row input[type="color"] { width: 52px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.fcol-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fcol-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 14px; }
.inp.bad { box-shadow: inset 0 0 0 1.5px rgba(var(--red-rgb), 0.8); }
#fe_hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.fflag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; max-height: 236px; overflow-y: auto; padding: 2px; }
.fflag { display: grid; gap: 4px; justify-items: center; padding: 6px 4px; border: 0; border-radius: 12px; background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); }
.fflag img, .fflag-none { width: 48px; height: 32px; object-fit: cover; border-radius: 4px; display: grid; place-items: center; }
.fflag small { font-size: 0.66rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fflag[aria-pressed="true"] { background: rgba(var(--cyan-rgb), 0.16); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(var(--cyan-rgb), 0.7); }
.fimg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.fimg-up { cursor: pointer; }
.fcount { text-align: right; margin-top: 4px; }
.fdisc { display: grid; gap: 8px; font-size: 0.9rem; }
.fdisc span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
@media (max-width: 560px) { .fsw-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; } }
.fflag-none { box-shadow: inset 0 0 0 1.5px var(--hair-2); border: 1.5px dashed rgba(255,255,255,0.25); box-sizing: border-box; }

/* Scroll bars: thin BeardoBot blue, no arrow buttons. WebKit/Blink use the
   pseudo-elements; Firefox only takes colour + width (and has no arrows). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13, 175, 227, 0.55); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(13, 175, 227, 0.85); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(13, 175, 227, 0.6) transparent; }
}

/* Moderation: command permission rows */
.cmd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cmd-top .hint { flex: 1 1 220px; margin: 0; }
.drawer-body.cmd-list { gap: 0; padding-left: 14px; }
.cmd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--hair); }
.cmd-row:first-child { border-top: 0; }
.cmd-row .rtxt b { display: block; font-size: 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cmd-row .rtxt small { display: block; font-size: 0.75rem; color: var(--muted); }
.cmd-row .cmd-tier { width: auto; min-height: 38px; padding: 6px 10px; font-size: 0.86rem; }
.cmd-row .cmd-tier:disabled { opacity: 0.4; }
@media (max-width: 560px) { .cmd-row { grid-template-columns: minmax(0, 1fr) auto; } .cmd-row .cmd-tier { grid-column: 1; grid-row: 2; justify-self: start; } .cmd-row .sw { grid-row: 1 / span 2; grid-column: 2; } }
/* The blurred background blobs can paint past their clipped layer and count
   as sideways overflow (iOS lets that pan). Contain the layer's painting,
   and clip (not just hide) sideways overflow on the page itself. */
.world { contain: paint; }
html { overflow-x: clip; }

/* Billing */
.bplan { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 8px; }
.bplan-head { display: flex; align-items: center; gap: 12px; }
.bplan-head small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bplan-head b { font-size: 1.3rem; font-weight: 800; }
.bplan-head .badge { margin-left: auto; }
.bplan p { margin: 0; color: var(--muted); }
.bplan-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.bcard { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--hair); }
.bcard.is-featured { box-shadow: inset 0 0 0 1.5px rgba(var(--cyan-rgb), 0.55); background: linear-gradient(160deg, rgba(var(--cyan-rgb), 0.10), rgba(255,255,255,0.04)); }
/* A plan shown but not on sale yet (Premium Plus until it opens): muted, not pickable. */
.bcard.is-soon { opacity: 0.55; }
.plan-pick.is-soon { cursor: default; }
.bcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bcard-head b { font-size: 1.1rem; }
.bcard-head span { color: var(--muted); font-size: 0.86rem; }
.bcard-head strong { color: var(--text); font-size: 1.4rem; font-weight: 800; }
.bcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.bcard li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.bcard li .ic { color: var(--green); flex: none; margin-top: 2px; }
.bcard form, .bcard .btn { width: 100%; }
/* Cards in a row are the same height: the action sits at the bottom, so the buttons line up. */
.bcard > form:last-child, .bcard > .btn:last-child { align-self: end; }
.bcard:has(> form:last-child, > .btn:last-child) { grid-template-rows: auto 1fr auto; }

/* Setup page (no game server linked yet) */
.setup-page { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 48px; }
.setup-card { gap: 14px; }
.setup-hero { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 12px 4px 4px; }
.setup-hero h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; text-wrap: balance; }
.setup-hero p { color: var(--muted); max-width: 52ch; }
.setup-hero .squircle { width: 56px; height: 56px; border-radius: 18px; }
.setup-hero .squircle .ic { width: 28px; height: 28px; }
.spinner.big { width: 44px; height: 44px; border-width: 3.5px; }
.plan-pick { cursor: pointer; position: relative; }
.plan-pick input { position: absolute; opacity: 0; pointer-events: none; }
.plan-pick:has(input:checked) { box-shadow: inset 0 0 0 2px rgba(var(--cyan-rgb), 0.85); background: rgba(var(--cyan-rgb), 0.08); }
.plan-pick:has(input:focus-visible) { outline: 2px solid var(--cyan-hi); outline-offset: 2px; }
.setup-go { width: 100%; min-height: 52px; font-size: 1rem; justify-content: center; }
.setup-fine { text-align: center; min-height: 1.2em; }
/* Get started: the same three steps as My Servers (.ms-steps in glass-site.css). Wide screens: a
   vertical tracker fixed in the left margin at the middle of the screen, the panel staying centred.
   Narrower: a 1 — 2 — 3 row centred above the panel. Each step's detail sits behind its (i). */
.su-layout { display: grid; gap: 22px; }
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-steps li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
/* the line on to the next step: solid green to cyan once done, dashed while still to come */
.su-steps li:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 6px, transparent 6px 11px); }
.su-steps li.is-done:not(:last-child)::after { background: linear-gradient(90deg, #4ade80, var(--cyan-hi)); }
.su-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.su-label b { font-weight: 700; font-size: 0.95rem; }
.su-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: var(--muted); background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.14); }
.su-num .ic { width: 16px; height: 16px; }
.su-steps .is-done .su-num { color: #0b2a17; background: linear-gradient(135deg, #4ade80, #168c45); box-shadow: 0 0 14px rgba(74, 222, 128, 0.35); }
.su-steps .is-done b { color: var(--muted); }
.su-steps .is-now .su-num { color: #fff; background: linear-gradient(135deg, var(--cyan-hi), var(--cyan)); box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), 0.18), 0 0 22px rgba(var(--cyan-rgb), 0.55); animation: su-breathe 2.6s ease-in-out infinite; }
.su-steps .is-now b { color: var(--text); }
.su-steps .is-next b { color: var(--muted); }
@keyframes su-breathe { 50% { box-shadow: 0 0 0 7px rgba(var(--cyan-rgb), 0.08), 0 0 32px rgba(var(--cyan-rgb), 0.7); } }
@media (prefers-reduced-motion: reduce) { .su-steps .is-now .su-num { animation: none; } }
/* (i): hover, keyboard focus, or a tap on touch screens shows the detail card under the step */
.su-info { flex: none; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center;
  font-family: inherit; font-size: 0.68rem; font-weight: 800; line-height: 1; color: var(--muted); background: rgba(255,255,255,0.07);
  box-shadow: inset 0 0 0 1px var(--hair); cursor: help; transition: color .15s, background .15s; }
.su-info:hover, .su-info:focus-visible { color: #fff; background: rgba(var(--cyan-rgb), 0.35); outline: none; }
.su-tip { position: absolute; z-index: 6; top: calc(100% + 10px); left: 50%; width: 250px; padding: 11px 13px; border-radius: 14px;
  background: rgba(16, 18, 28, 0.97); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.25), 0 16px 40px rgba(0,0,0,0.55);
  color: var(--muted); font-size: 0.84rem; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.su-info:hover .su-tip, .su-info:focus .su-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (min-width: 1200px) {
  /* 360px = half the 720px panel; the tracker hangs just off its left edge */
  .su-steps { position: fixed; z-index: 4; top: 50%; right: calc(50% + 396px); transform: translateY(-50%); grid-template-columns: none; }
  .su-steps li { grid-template-columns: auto 32px; align-items: center; justify-items: end; gap: 12px; text-align: right; padding-bottom: 40px; }
  .su-steps li:last-child { padding-bottom: 0; }
  .su-steps .su-num { grid-column: 2; grid-row: 1; }
  .su-steps .su-label { grid-column: 1; grid-row: 1; }
  .su-steps li:not(:last-child)::after { top: 40px; left: auto; right: 15px; width: 2px; height: calc(100% - 48px);
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 6px, transparent 6px 11px); }
  .su-steps li.is-done:not(:last-child)::after { background: linear-gradient(180deg, #4ade80, var(--cyan-hi)); }
  .su-tip { top: 38px; left: auto; right: 44px; transform: translateY(-4px); }
  .su-info:hover .su-tip, .su-info:focus .su-tip { transform: none; }
}
@media (max-width: 1199px) {
  /* the row: the last step's card hangs from its right edge so it stays on screen */
  .su-steps li:last-child .su-tip { left: auto; right: 0; transform: none; }
}
@media (max-width: 600px) {
  .su-label { flex-direction: column; gap: 5px; white-space: normal; }
  .su-label b { font-size: 0.85rem; }
}
/* The free trial: a wide banner across both plans, picked by default when it's offered. */
.plan-trial { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  background: linear-gradient(120deg, rgba(var(--cyan-rgb), 0.14), rgba(255,255,255,0.04) 70%); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.35); }
.plan-trial .squircle { width: 44px; height: 44px; border-radius: 14px; }
.plan-trial-txt { display: grid; gap: 3px; }
.plan-trial-txt b { font-size: 1.1rem; }
.plan-trial-price { color: var(--muted); font-size: 0.86rem; white-space: nowrap; }
.plan-trial-price strong { color: var(--text); font-size: 1.4rem; font-weight: 800; margin-right: 4px; }
@media (max-width: 520px) { .plan-trial { grid-template-columns: auto minmax(0, 1fr); } .plan-trial-price { grid-column: 2; } }
.su-gets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; }
.su-gets li { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--muted); font-size: 0.82rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--hair); }
.setup-fine.is-error, .notice.is-error p { color: var(--red); }
.notice.is-error { background: rgba(var(--red-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.35); }
/* Nitrado "how do I find this?" help (shared markup from nitrado_help.php) */
.bb-help { margin-top: 8px; font-size: 0.86rem; color: var(--muted); }
.bb-help summary { cursor: pointer; color: var(--cyan-hi); font-weight: 600; list-style: none; }
.bb-help summary::-webkit-details-marker { display: none; }
.bb-help summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform 0.2s var(--ease); }
.bb-help[open] summary::before { transform: rotate(90deg); }
.bb-help ol { margin: 8px 0 6px 18px; display: grid; gap: 4px; }
.bb-help a { color: var(--cyan-hi); }
.bb-help code { font-size: 0.82rem; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,0.08); }
/* Hero: Nitrado's description and start date under the server name. */
.hero-title { display: grid; gap: 4px; min-width: 0; }
.hero-desc { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; overflow-wrap: anywhere; }
.hero-since { margin: 0; color: var(--dim); font-size: 0.8rem; }
.hero-id:has(.hero-desc, .hero-since) { align-items: flex-start; }
.hero-id:has(.hero-desc, .hero-since) .hero-mark { margin-top: 4px; }

/* ── Activity map ── */
/* The map sheet uses the full width (the page is capped at 1180px for everything else). */
.page:has(> #view-module:not([hidden]) > #sheet-map:not([hidden])) { max-width: none; }
.am-grid { display: grid; gap: 16px; align-items: start; }
.am-side, .am-feed { display: grid; gap: 8px; align-content: start; min-width: 0; }
.am-side .g-label, .am-feed .g-label { padding-top: 0; }
.am-side .g-label:not(:first-child) { padding-top: 8px; }
.am-who { display: grid; gap: 8px; }
.am-who .inp { width: 100%; min-width: 0; }
.zfilters.am-layers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
.zfilters.am-layers .zfilter { justify-content: flex-start; padding: 7px 12px 7px 10px; min-height: 38px; }
.zfilters.am-layers .zfilter b { margin-left: auto; font-variant-numeric: tabular-nums; }
.am-map.zmap { height: clamp(360px, calc(100vh - 230px), 1200px); transition: opacity 0.2s ease; }
.am-map.is-busy { opacity: 0.7; }
#am-note { margin: 6px 4px 0; }
.am-feed .am-list { max-height: calc(100vh - 262px); }
.am-side .seg-wrap { overflow: visible; -webkit-mask: none; mask: none; }   /* always fits: four equal buttons */
.am-side .seg { display: grid; grid-auto-flow: column; grid-auto-columns: auto; width: 100%; }   /* sized by their labels, so Session fits beside 6h */
.seg button[aria-disabled="true"] { opacity: 0.45; }
.am-side .seg button { padding-inline: 4px; white-space: nowrap; }
/* Wide: filters | map | what happened. Tablet: filters | map, with what happened underneath. Phone: stacked. */
@media (min-width: 1100px) {
  .am-grid { grid-template-columns: 270px minmax(0, 1fr) 340px; }
  /* The whole page fits the window: the three columns run to the bottom bar, the panel tucked behind it (--am-h is set by
     glass-map-kit.js fitWindow), the lists scroll inside them, and the page itself doesn't scroll. */
  .page:has(> #view-module:not([hidden]) > #sheet-map:not([hidden])) { padding-block-end: calc(var(--bar-h) - 16px); }
  .am-map.zmap { height: var(--am-h, clamp(360px, calc(100vh - 230px), 1200px)); }
  /* Scrolls on its own when taller than the map; the bar sits in the middle of the gap beside the map. */
  .am-side { max-height: var(--am-h, none); overflow-y: auto; scrollbar-gutter: stable; margin-right: -13px; padding-right: 3px; }
  .am-feed { height: var(--am-h, auto); grid-template-rows: auto minmax(0, 1fr); }
  .am-feed:has(> .jr-sum:not([hidden])) { grid-template-rows: auto auto minmax(0, 1fr); }
  .am-feed .am-list { max-height: none; }
  /* Zones' Map tab too: the map runs down to the bottom bar (glass-map-kit.js fitWindow on the tab). */
  .page:has(> #view-module:not([hidden]) > #sheet-zones:not([hidden]) #part-zones-map:not([hidden])) { padding-block-end: calc(var(--bar-h) - 16px); }
  #part-zones-map .zmap { height: var(--am-h, clamp(260px, 46vh, 460px)); }
}
@media (min-width: 760px) {
  .am-side { position: sticky; top: 12px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .am-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .am-feed { grid-column: 1 / -1; }
  .am-feed .am-list { max-height: 520px; }
}
@media (max-width: 759px) {
  .am-map.zmap { height: clamp(320px, 62vh, 640px); }
  .zfilters.am-layers { display: flex; flex-wrap: wrap; }
  .zfilters.am-layers .zfilter b { margin-left: 4px; }
  .am-who { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .am-feed .am-list { max-height: 520px; }
}
.am-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.am-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.am-key i { width: 16px; height: 4px; border-radius: 2px; background: var(--c); }
/* The rounded box stays put; the list inside it scrolls, its bar out in the gap to the right of the box. */
.group.am-listbox { overflow: visible; display: grid; min-height: 0; }
.am-list { overflow-y: auto; min-height: 0; margin-right: -15px; padding-right: 5px; scrollbar-gutter: stable; }
.am-list > :first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.am-list > :last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.am-row { min-height: 48px; padding-block: 8px; border-top: 1px solid var(--hair); cursor: pointer; }
.am-row:first-child { border-top: 0; }
.am-row:hover { background: rgba(255,255,255,0.04); }
.am-row .rtxt > b { display: block; font-weight: 500; font-size: 0.9rem; }
.am-row .rtxt b b { display: inline; font-weight: 700; }
.am-row .rtxt small { color: var(--muted); font-variant-numeric: tabular-nums; }
.am-pop { display: grid; gap: 4px; font: 500 0.84rem/1.4 Inter, system-ui, sans-serif; min-width: 180px; }
.am-pop-what { font-weight: 500; color: #0b0d14; }
.am-pop span { color: #475467; font-variant-numeric: tabular-nums; }
.am-pop button { justify-self: start; margin-top: 2px; border: 0; padding: 4px 12px; border-radius: 999px; background: #0dafe3; color: #02121b; font-weight: 700; font-size: 0.78rem; }
.am-pop-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.am-pop button.ghost { background: #e6ebf2; color: #0b0d14; }

/* Player picker: the glass list under a player box (glass-map-kit.js picker), fixed so no column clips it. */
.pk-list.glass { position: fixed; z-index: 2000; border-radius: 16px; overflow: hidden; }
.pk-scroll { max-height: 264px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; }
.pk-scroll button { display: block; width: 100%; min-width: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text); padding: 9px 12px; text-align: left; font: 500 0.92rem/1.25 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pk-scroll button:hover, .pk-scroll button[aria-selected="true"] { background: rgba(var(--cyan-rgb), 0.16); }
.pk-scroll mark { background: none; color: var(--cyan-hi); font-weight: 700; }
.pk-empty { padding: 10px 12px; font-size: 0.86rem; color: var(--muted); }
/* The ✕ that clears the player box, only while it has something in it. */
.pk-wrap { position: relative; display: block; min-width: 0; }
.pk-wrap > .inp { width: 100%; padding-right: 42px; }
.pk-clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: var(--text); cursor: pointer; transition: background 0.2s ease; }
.pk-clear:hover { background: rgba(255, 255, 255, 0.22); }
.pk-clear .ic { width: 14px; height: 14px; }
.pk-wrap:has(> .inp:placeholder-shown) > .pk-clear { display: none; }

/* ── One player on the activity map: their journey (summary, timeline) ── */
.am-times { display: grid; gap: 8px; }
.am-times label { display: grid; gap: 4px; min-width: 0; }
.am-times span { padding-left: 4px; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.am-times .inp { width: 100%; min-width: 0; color-scheme: dark; }
.jr-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.jr-sum > div { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border-radius: 14px; background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); }
.jr-sum b { font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr-sum small, .jr-towns small { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.jr-towns { grid-column: 1 / -1; margin: 4px 4px 0; font-size: 0.86rem; line-height: 1.5; }
.jr-towns small { display: block; }
.jr-day { padding: 12px 14px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.jr-gap { padding: 6px 14px 6px 42px; font-size: 0.78rem; color: var(--muted); border-top: 1px dashed var(--hair); }
.am-row[aria-current] { background: rgba(var(--cyan-rgb), 0.12); }
.jr-more { font-weight: 500; color: var(--muted); }
.jr-pop-list { display: block; max-height: 160px; overflow-y: auto; font-size: 0.78rem; line-height: 1.45; color: #475467; }
/* Phone: From and To as compact rows (iOS writes the date out in full), the filters on one line that
   scrolls sideways, and the map pinned at the top while the list scrolls under it. */
@media (max-width: 759px) {
  .am-times { gap: 6px; }
  .am-times label { grid-template-columns: 42px minmax(0, 1fr); align-items: center; }
  .am-times .inp { -webkit-appearance: none; appearance: none; min-height: 44px; font-size: 16px; text-align: left; }
  .am-times .inp::-webkit-date-and-time-value { text-align: left; }
  .zfilters.am-layers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 28px 2px 0; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .zfilters.am-layers::-webkit-scrollbar { display: none; }
  .zfilters.am-layers .zfilter { flex: none; }
  .am-grid .am-main { position: sticky; top: 8px; z-index: 5; }
  .am-map.zmap { height: 46vh; min-height: 280px; }
  .am-feed .am-list { max-height: none; }
  .am-row { scroll-margin-top: calc(46vh + 24px); }
}

/* ── Loadouts (loadout builder) ────────────────────────────────── */
/* List of saved loadouts, then the builder: one outlined survivor with a section per slot
   (dashed seams, faded dead zones, plate carrier on the chest, rifles slung behind), chips
   either side, a cargo strip, cargo kits, checks and the file DayZ reads. */
.lo { display: grid; gap: 14px; min-width: 0; }
.lo-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lo-bar .grow { flex: 1; }
.lo-card { padding: 16px; border-radius: var(--r-md); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: 14px; min-width: 0; }
.lo-card h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.lo-sub { color: var(--muted); font-size: 0.84rem; }
.lo-lbl { color: var(--dim); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.lo-rows { display: grid; gap: 6px; }
.lo-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; width: 100%; min-width: 0; flex-wrap: wrap; color: var(--text); }
button.lo-row:hover { background: rgba(255,255,255,0.07); }
.lo-row .nm { flex: 1 1 150px; min-width: 0; display: grid; }
.lo-row .nm b { font-size: 0.9rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-cls { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-chip { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lo-chip.cy { background: rgba(var(--cyan-rgb),0.15); color: var(--cyan-hi); }
.lo-chip.am { background: rgba(var(--amber-rgb),0.14); color: var(--amber); }
.lo-chip.ok { background: rgba(var(--green-rgb),0.15); color: var(--green); }
.lo-thumb { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,0.05); flex: none; }
.lo-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--muted); flex: none; box-shadow: inset 0 0 0 1px var(--hair); }
.lo-x:hover { color: var(--text); background: rgba(255,255,255,0.12); }
.lo-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1px var(--hair); }
.lo-step button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-weight: 700; }
.lo-step button:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.lo-step span { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.lo-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1px var(--hair); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lo-seg button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.8rem; padding: 6px 12px; min-height: 32px; border-radius: 999px; white-space: nowrap; }
.lo-seg button[aria-pressed="true"] { color: var(--text); background: rgba(255,255,255,0.12); }
.lo-in { width: 100%; min-height: 42px; padding: 9px 13px; border-radius: var(--r-sm); border: 0; background: rgba(0,0,0,0.32); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text); }
.lo-in::placeholder { color: var(--dim); }
.lo-meta { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 560px) { .lo-meta { grid-template-columns: 1fr; } }
.lo-f { display: grid; gap: 6px; min-width: 0; }
/* The character */
.lo-doll { display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 28vw, 220px) minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.lo-col { display: grid; gap: 8px; min-width: 0; }
.lo-slot { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 6px 9px 6px 6px; border: 0; border-radius: var(--r-sm); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; min-width: 0; color: var(--text); transition: background 0.2s, box-shadow 0.2s; }
.lo-col.r .lo-slot { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 9px; }
.lo-slot:hover, .lo-slot.hot { background: rgba(255,255,255,0.08); }
.lo-slot.hot { box-shadow: inset 0 0 0 1.5px rgba(95,211,247,0.6); }
.lo-sq { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--dim); background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--hair); }
.lo-sq .ic { fill: none; stroke: currentColor; }
.lo-slot.on .lo-sq { color: var(--on-accent); background: linear-gradient(180deg, var(--cyan-hi), var(--cyan)); box-shadow: 0 6px 16px rgba(var(--cyan-rgb),0.35); }
.lo-slot.warn .lo-sq { color: #2a1a00; background: linear-gradient(180deg, #ffd27a, var(--amber)); }
.lo-st { display: grid; min-width: 0; }
.lo-st b { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.lo-slot.on .lo-st b { color: var(--text); }
.lo-st span { font-size: 0.72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .lo-st span { display: none; } .lo-sq { width: 32px; height: 32px; } .lo-slot { min-height: 48px; } }
.lo-fig { width: 100%; max-width: 210px; height: auto; display: block; margin: 0 auto; }
.lo-fig .occlude { fill: var(--ink); }
.lo-fig .outline { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.lo-fig .seams line { stroke: rgba(255,255,255,0.32); stroke-width: 1.2; stroke-dasharray: 4 3.5; pointer-events: none; }
.lo-fig .fingers line { stroke: rgba(255,255,255,0.4); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.lo-fig .z { cursor: pointer; outline: none; }
.lo-fig .z > * { fill: rgba(255,255,255,0.075); stroke: none; transition: fill 0.25s; }
.lo-fig .z:hover > *, .lo-fig .z.hot > *, .lo-fig .z:focus-visible > * { fill: rgba(var(--cyan-rgb),0.3); }
.lo-fig .z.on > * { fill: rgba(var(--cyan-rgb),0.5); }
.lo-fig .z.warn > * { fill: rgba(var(--amber-rgb),0.55); }
.lo-fig .z.on:hover > *, .lo-fig .z.on.hot > * { fill: rgba(95,211,247,0.75); }
.lo-fig .z.gun > *, .lo-fig .z.vest > path:first-child { stroke: rgba(255,255,255,0.55); stroke-width: 1.5; stroke-linejoin: round; }
.lo-fig .z.vest > path:first-child { fill: rgba(7,7,12,0.55); }
.lo-fig .z.vest .pouch { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 1.1; }
.lo-fig .z.vest.on > path:first-child { fill: rgba(var(--cyan-rgb),0.62); }
.lo-fig .z.gun.on > * { fill: rgba(var(--cyan-rgb),0.6); stroke: rgba(95,211,247,0.95); }
.lo-fig .z.vest:hover > path:first-child, .lo-fig .z.vest.hot > path:first-child, .lo-fig .z.gun:hover > *, .lo-fig .z.gun.hot > * { fill: rgba(var(--cyan-rgb),0.32); }
/* Cargo strip */
.lo-pockets { display: grid; gap: 10px; padding: 12px 14px; border: 0; border-radius: var(--r-sm); background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; width: 100%; color: var(--text); }
.lo-pk-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; color: var(--muted); }
.lo-pk-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.lo-pk-head .bad { color: var(--red); font-weight: 700; }
.lo-pk-row { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.lo-pk { display: grid; gap: 6px; align-content: start; }
.lo-pk-l { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.lo-cells { display: grid; gap: 3px; }
.lo-cells i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.09); }
.lo-cells i.f { background: var(--cyan); box-shadow: 0 0 6px rgba(var(--cyan-rgb),0.55); }
.lo-cells i.opt { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.lo-bar-meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.lo-bar-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width 0.4s var(--ease); }
.lo-bar-meter i.mid { background: var(--amber); } .lo-bar-meter i.over { background: var(--red); }
.lo-qb { min-height: 32px; padding: 4px 8px; border-radius: 999px; border: 0; background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); font-size: 0.76rem; font-weight: 600; }
/* Checks + file */
.lo-checks { display: grid; gap: 8px; }
.lo-ck { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--muted); }
.lo-ck .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; font-size: 0.7rem; font-weight: 800; }
.lo-ck.ok .dot { background: rgba(var(--green-rgb),0.16); color: var(--green); }
.lo-ck.warn .dot { background: rgba(var(--amber-rgb),0.16); color: var(--amber); }
.lo-ck.bad .dot { background: rgba(var(--red-rgb),0.16); color: var(--red); }
.lo-ck b { color: var(--text); font-weight: 600; }
.lo-json { margin: 0; max-height: 420px; overflow: auto; padding: 12px; border-radius: var(--r-sm); background: rgba(0,0,0,0.38); box-shadow: inset 0 0 0 1px var(--hair); font: 0.72rem/1.55 ui-monospace, "SF Mono", Consolas, monospace; color: #c9d3e3; white-space: pre; }
.lo-json .k { color: #8ec5ff; } .lo-json .s { color: #b5e8a8; } .lo-json .n { color: #ffcf8a; }
.lo-json .hl { background: rgba(var(--cyan-rgb),0.16); border-radius: 4px; }
.lo-actions { position: sticky; bottom: calc(var(--bar-h) + 26px + env(safe-area-inset-bottom, 0px));   /* just above the dock (14px from the bottom, --bar-h tall) */
   z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 22px; background: var(--mat-thick); -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite); box-shadow: 0 10px 30px var(--shade), inset 0 0 0 1px var(--hair); }
.lo-actions .stat { flex: 1 1 160px; min-width: 0; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.lo-actions .stat i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.lo-actions .stat i.warn { background: var(--amber); } .lo-actions .stat i.bad { background: var(--red); }
/* The slot editor: a glass sheet over the page */
.lo-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.lo-pop { width: min(640px, 100%); max-height: min(88vh, 900px); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--mat-thick); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 700px) { .lo-scrim { align-items: center; } .lo-pop { border-radius: var(--r-xl); } }
.lo-pop-head .lo-sq { width: 42px; height: 42px; color: var(--on-accent); background: linear-gradient(180deg, var(--cyan-hi), var(--cyan)); }
.lo-pop-head h2 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.lo-pop-head .lo-x { margin-left: auto; }
.lo-var { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); }
.lo-var-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lo-var-top .nm { flex: 1 1 150px; min-width: 0; display: grid; }
.lo-tree { display: grid; gap: 6px; padding-left: 12px; border-left: 1px solid var(--hair-2); margin-left: 6px; }
.lo-att { display: grid; gap: 6px; }
.lo-att-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lo-att-row .lo-lbl { min-width: 84px; }
.lo-att-row select { flex: 1 1 180px; min-width: 0; min-height: 36px; padding: 5px 10px; border-radius: 10px; border: 0; background: rgba(0,0,0,0.32); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text); font-size: 0.84rem; }
.lo-rounds { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); flex: 1 1 200px; }
.lo-rounds input { flex: 1; accent-color: var(--cyan); }
.lo-rounds b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.lo-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; width: 100%; color: var(--text); }
.lo-res:hover { background: rgba(255,255,255,0.08); }
.lo-res .nm { flex: 1; min-width: 0; display: grid; }
.lo-res .nm b { font-weight: 600; font-size: 0.86rem; }
.lo-plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--cyan-rgb),0.16); color: var(--cyan-hi); flex: none; font-weight: 800; }
/* The character and its cargo side by side when there's room; stacked (cargo straight under the figure) otherwise. */
.lo-stage { display: grid; gap: 14px; align-items: start; min-width: 0; }
@media (min-width: 1100px) { .lo-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .lo-stage .lo-cargo { position: sticky; top: 76px; max-height: calc(100vh - 190px); overflow-y: auto; } }
.lo-pockets { cursor: default; }
.lo-kits { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lo-chance { display: inline-flex; align-items: center; gap: 8px; }
/* Seven tabs on a small phone: slightly smaller labels so Moderation still fits. */
@media (max-width: 420px) { .tab { font-size: 0.56rem; } .tab .ic { width: 21px; height: 21px; } }
/* The backpack beside the figure: its flap and pocket are drawn lines, never filled */
.lo-fig .z.bag .pouch, .lo-fig .z.bag:hover .pouch, .lo-fig .z.bag.on .pouch, .lo-fig .z.bag.hot .pouch { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1.1; }
/* Slot editor: header and Done stay put, the list scrolls between them and fades at both ends */
.lo-pop-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; flex: none; }
.lo-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 10px 18px 30px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 40px), transparent 100%); }
.lo-pop-foot { position: static; flex: none; margin: 0; padding: 6px 18px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; align-items: center; gap: 10px; background: transparent; box-shadow: none; border-radius: 0; }
/* Dropdowns: our own arrow, and dark option lists (the browser's default list was unreadable) */
.lo-qb, .lo-att-row select { appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.lo-qb { background-color: rgba(0,0,0,0.3); }
.lo-att-row select { background-color: rgba(0,0,0,0.32); }
.lo-qb option, .lo-att-row select option { background: var(--ink-2); color: var(--text); }
.lo-qb option:disabled, .lo-att-row select option:disabled { color: var(--dim); }
.lo-qb:focus-visible, .lo-att-row select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px rgba(95,211,247,0.7); }
/* Cargo rows keep one line: name, amount, quickbar, remove */
.lo-crow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-sm); background: var(--mat-row); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.lo-crow .nm { display: grid; min-width: 0; }
.lo-crow .nm b { font-size: 0.88rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-crow .lo-step span { min-width: 44px; }
.lo-crow .lo-qb { max-width: 128px; }
@media (max-width: 420px) { .lo-crow { grid-template-columns: minmax(0, 1fr) auto auto; } .lo-crow .lo-qb { grid-column: 1 / -1; max-width: none; } }
.lo-start { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(var(--cyan-rgb),0.08); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb),0.22); }
/* Builder cards never grow past their column: wide rows (the kit tabs) scroll inside them instead */
.lo, .lo-card { grid-template-columns: minmax(0, 1fr); }
.lo-kits > .lo-seg { min-width: 0; flex: 0 1 auto; max-width: 100%; }
.lo-kits > .lo-seg { cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.lo-kits > .lo-seg.dragging { cursor: grabbing; }
.lo-kits > .lo-seg.dragging button { pointer-events: none; }
/* Scrollbars inside rounded panels stop short of the corners (the site's blue scrollbar, not the browser's) */
.lo-pop-body::-webkit-scrollbar-track { margin-block: 10px 24px; }
.lo-stage .lo-cargo::-webkit-scrollbar-track { margin-block: 16px; }
/* A button busy with a server call: spinner + what's happening */
.btn.lo-busy { display: inline-flex; align-items: center; gap: 8px; opacity: 1; }
.btn.lo-busy .spinner { width: 14px; height: 14px; border-width: 2px; flex: none; }
/* "Add to [this kit | every kit]" */
.lo-addlbl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lo-addto { text-transform: none; letter-spacing: 0; }
.lo-addto button { min-height: 28px; padding: 4px 10px; font-size: 0.76rem; }
/* A saved loadout in the list: the row opens it, the bin deletes it */
.lo-saved { padding: 0 10px 0 0; gap: 6px; flex-wrap: nowrap; }
.lo-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 0; background: transparent; color: var(--text); text-align: left; border-radius: var(--r-sm); }
/* Hover lights the whole row (the open button and the Delete beside it), not just the open part */
.lo-saved:has(.lo-open:hover) { background: rgba(255,255,255,0.07); }
/* Chips and Delete share one pill height so they line up */
.lo-saved .lo-chip { min-height: 30px; display: inline-flex; align-items: center; padding: 0 11px; }
.lo-del { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--red); background: rgba(var(--red-rgb),0.1); box-shadow: inset 0 0 0 1px rgba(var(--red-rgb),0.25); }
.lo-del .ic { width: 16px; height: 16px; }
.lo-del:hover { background: rgba(var(--red-rgb),0.2); }
@media (max-width: 480px) { .lo-del span { display: none; } .lo-del { padding: 0 9px; } }
/* Save / Put on server / ••• sit together on the right of the builder's save bar */
.lo-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Utilities: wide editors (form beside a live preview) ──────── */
.editor.wide { width: min(1180px, 100%); }
.ut-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 8px 20px; align-items: start; }
.ut-form, .ut-side { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ut-side { position: sticky; top: -16px; }   /* stays in view while the form scrolls (ed-body's padding) */
@media (max-width: 900px) {
  .ut-split { grid-template-columns: minmax(0, 1fr); }
  .ut-side { position: static; order: -1; }
  .ut-side .dpv { max-height: 46vh; overflow-y: auto; }
}
.ut-count { float: right; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.ut-count.over { color: var(--amber); }
.ut-warn { color: var(--amber); }
.ut-ins { margin-top: 2px; }
.ut-colour { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ut-colour input[type="color"] { width: 44px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.ut-colour .inp { width: 110px; }
.ut-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ut-sw { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); cursor: pointer; }
.ut-swatches .chip-btn { min-height: 30px; padding: 4px 12px; }
/* Message builder: optional parts fold away under "More"; open by themselves when in use. */
.ut-mores { display: grid; gap: 8px; }
.ut-more { border-radius: var(--r-lg); background: rgba(255,255,255,0.035); box-shadow: inset 0 0 0 1px var(--hair); }
.ut-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: inherit; }
.ut-more > summary::-webkit-details-marker { display: none; }
.ut-more > summary:hover { background: rgba(255,255,255,0.03); }
.ut-more > summary:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: -2px; }
.ut-more > summary b { font-size: 0.95rem; font-weight: 600; }
.ut-more-sub { flex: 1; min-width: 0; text-align: right; color: var(--dim); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-more-sub.is-set { color: var(--cyan-hi); }
.ut-more > summary::after { content: '›'; flex: none; color: var(--muted); font-size: 1.25rem; line-height: 1; transition: transform 0.2s var(--ease); }
.ut-more[open] > summary::after { transform: rotate(90deg); }
.ut-more-body { display: grid; gap: 12px; padding: 4px 16px 16px; }
.ut-forget { border-top: 1px solid var(--hair); }
.ut-cards { display: grid; gap: 10px; }
.ut-cards:empty { display: none; }
.ut-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); }
.ut-card-head { display: flex; align-items: center; gap: 8px; }
.ut-card-head b { flex: 1; font-size: 0.86rem; }
.ut-btn-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ut-emoji { text-align: center; }
.ut-mini { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,0.07); color: var(--muted); font-size: 1rem; display: grid; place-items: center; cursor: pointer; }
.ut-mini:disabled { opacity: 0.35; cursor: default; }
.ut-mini.danger { background: rgba(var(--red-rgb), 0.12); color: var(--red); }
.ut-post-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ut-posts { display: grid; gap: 4px; }
.ut-post { display: flex; align-items: center; gap: 14px; padding: 6px 2px; font-size: 0.88rem; }
.ut-post span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkish.danger { color: var(--red); }

/* Discord-style message preview (dark theme colours, Discord's own sizes) */
.dpv { padding: 14px 12px; border-radius: var(--r-md); background: #313338; box-shadow: inset 0 0 0 1px var(--hair); color: #dbdee1; font-size: 0.94rem; line-height: 1.375; overflow: hidden; }
.dpv-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.dpv-av { width: 40px; height: 40px; border-radius: 50%; }
.dpv-main { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.dpv-head { display: flex; align-items: center; gap: 6px; }
.dpv-head b { color: #f2f3f5; font-weight: 600; }
.dpv-app { background: #5865f2; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.dpv-head small { color: #949ba4; font-size: 0.75rem; }
.dpv-content, .dpv-desc, .dpv-fval { overflow-wrap: anywhere; }
.dpv-embed { display: grid; gap: 8px; max-width: 520px; width: 100%; padding: 8px 16px 16px 12px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--bar); margin-top: 2px; }
.dpv-banner { padding: 12px 16px 12px 12px; }
.dpv-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.dpv-body { display: grid; gap: 8px; min-width: 0; align-content: start; padding-top: 8px; }
.dpv-body:empty { display: none; }
.dpv-author { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: #f2f3f5; }
.dpv-author-ic { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dpv-title { font-weight: 600; color: #f2f3f5; }
.dpv-title.is-link, .dpv-author .is-link { color: #00a8fc; }
.dpv-desc { font-size: 0.875rem; }
.dpv-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.dpv-field { min-width: 0; font-size: 0.875rem; }
.dpv-fname { font-weight: 600; color: #f2f3f5; margin-bottom: 2px; }
.dpv-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 4px; margin-top: 8px; }
.dpv-image { display: block; max-width: 100%; max-height: 300px; border-radius: 4px; object-fit: contain; justify-self: start; }
.dpv-footer { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #b5bac1; }
.dpv-footer-ic { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dpv-broken { width: 80px; height: 48px; object-fit: none; background: rgba(var(--red-rgb), 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed4245' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.4); }
.dpv-thumb.dpv-broken, .dpv-author-ic.dpv-broken, .dpv-footer-ic.dpv-broken { width: 24px; height: 24px; background-size: 12px; }
.dpv-h1 { font-size: 1.5rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; line-height: 1.2; }
.dpv-h2 { font-size: 1.25rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; }
.dpv-h3 { font-size: 1rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; }
.dpv-subtext { font-size: 0.75rem; color: #949ba4; }
.dpv-quote { border-left: 4px solid #4e5058; padding-left: 10px; }
.dpv-li { padding-left: 16px; position: relative; }
.dpv-li::before { content: '•'; position: absolute; left: 4px; }
.dpv-pre { margin: 4px 0; padding: 8px; border-radius: 4px; background: #1e1f22; border: 1px solid #1a1b1e; font-size: 0.82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dpv-code { padding: 0 3px; border-radius: 3px; background: #1e1f22; font-size: 0.85em; }
.dpv-link { color: #00a8fc; text-decoration: none; }
.dpv-mention { color: #c9cdfb; background: rgba(88,101,242,0.3); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dpv-var { color: #f0b232; background: rgba(240,178,50,0.14); border-radius: 3px; padding: 0 3px; }
.dpv-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; }
.dpv-spoiler:hover { color: inherit; }
.dpv-emoji { width: 1.375em; height: 1.375em; vertical-align: -0.3em; object-fit: contain; }
.dpv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; max-width: 520px; }
.dpv-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 16px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 0.875rem; font-weight: 500; }
.dpv-btn-emoji { font-size: 1.05rem; }
.dpv-ext { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dpv-select { display: flex; align-items: center; justify-content: space-between; width: min(400px, 100%); min-height: 40px; padding: 8px 12px; margin-top: 4px; border-radius: 8px; background: #1e1f22; color: #949ba4; font-size: 0.875rem; }
.dpv-select svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.dpv-empty { color: #949ba4; font-size: 0.875rem; padding: 6px 0; }
/* Image field: link + Upload; drop an image on it or paste one in */
.ut-img { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border-radius: 12px; transition: box-shadow 0.15s; }
.ut-img .btn { white-space: nowrap; }
.ut-img.drop { box-shadow: 0 0 0 2px var(--cyan-hi); }
.ut-img.busy { opacity: 0.6; pointer-events: none; }
.ut-img.busy .btn span::after { content: '…'; }
.ut-img.off { opacity: 0.45; }
/* Emoji picker (Utilities: link buttons, role panels), laid out like Discord's */
.ut-emo { display: contents; }
.ut-emo-btn { width: 64px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.ut-emo-btn:hover { background: rgba(255,255,255,0.11); }
.ut-emo-btn .dpv-emoji { width: 26px; height: 26px; vertical-align: 0; }
.ut-emo-btn .ic { width: 18px; height: 18px; }
.ep { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md); background: #2b2d31; box-shadow: inset 0 0 0 1px var(--hair); }
.ep-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ep-head .chip-btn { min-height: 40px; }
.ep-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
.ep-body.searching { grid-template-columns: minmax(0, 1fr); }
.ep-tabs { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; scrollbar-width: none; padding-right: 4px; border-right: 1px solid rgba(255,255,255,0.06); }
.ep-tabs:empty { display: none; }
.ep-tab { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: #949ba4; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ep-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ep-tab img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ep-tab:hover { background: rgba(255,255,255,0.06); color: #dbdee1; }
.ep-tab.on { background: rgba(255,255,255,0.1); color: #fff; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ep-grid .pick-none { grid-column: 1 / -1; }
.ep-e { width: 100%; aspect-ratio: 1; border: 0; border-radius: 6px; background: none; display: grid; place-items: center; cursor: pointer; padding: 5px; font-size: 1.4rem; line-height: 1; }
.ep-e:hover, .ep-e:focus-visible { background: rgba(255,255,255,0.08); }
.ep-e img { width: 28px; height: 28px; object-fit: contain; }
/* Reaction roles preview: Discord's reaction pills */
.dpv-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dpv-react { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; background: rgba(88,101,242,0.15); box-shadow: inset 0 0 0 1px rgba(88,101,242,0.6); font-size: 0.875rem; }
.dpv-react .dpv-emoji { width: 18px; height: 18px; vertical-align: 0; }
.dpv-react b { color: #c9cdfb; font-weight: 600; }
/* Reaction roles: reactions use the emoji, so role labels hide */
.no-labels [data-r="label"] { display: none; }
/* Discord timestamps in the preview, and the 🕒 Time picker */
.dpv-time { background: rgba(255,255,255,0.08); border-radius: 3px; padding: 0 3px; }
.ut-timepick { display: grid; gap: 10px; margin-top: 4px; padding: 12px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); }
.ut-timepick .hint b { color: var(--text); }
.ut-tp-acts { display: flex; gap: 8px; }