/* =========================================================================
   Ovels Dashboard — design system
   Palette: Signal / Ember / Current / Flare / Gold
   ========================================================================= */

:root {
  --signal: #3dbd8a;   /* green   – success / enable      */
  --ember: #d97757;    /* red     – danger / disable       */
  --current: #5fa8d3;  /* blue    – primary actions/links  */
  --flare: #d9954f;    /* orange  – warning                */
  --gold: #d4a857;     /* yellow  – highlight / badges      */

  --accent-grad: linear-gradient(135deg, var(--current), var(--signal));

  --bg: #0a0a0c;
  --bg-raised: #131316;
  --bg-card: #17181b;
  --bg-card-hover: #1a1b1f;
  --bg-input: #1d1e22;
  --border: #26272c;
  --border-soft: #1e1f23;

  --text: #f2f2f0;
  --text-dim: #a3a3a8;
  --text-faint: #6c6d73;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --glow-current: 0 0 0 1px rgba(95, 168, 211, 0.18), 0 8px 24px rgba(95, 168, 211, 0.16);
}

html[data-theme="light"] {
  --bg: #f5f5f4;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfbfa;
  --bg-input: #f0f0ef;
  --border: #e4e4e2;
  --border-soft: #ebebe9;
  --text: #17181b;
  --text-dim: #5a5b60;
  --text-faint: #93949a;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
/* Guards against incidental horizontal scroll on small screens (a row that
   doesn't wrap in time, a panel that clips at the edge) without touching
   any scrollable container inside the page. */
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-lock { overflow: hidden; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
::selection { background: var(--current); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Slim, unobtrusive scrollbar for a more crafted feel (WebKit browsers) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Shared "chroma" emoji icon treatment — dim + desaturate at rest so the
   active/hovered item reads as the clear focal point, same trick premium
   bot dashboards (Dyno, Sapphire) use for full-color category icons. */
.emoji-icon { display: block; object-fit: contain; filter: saturate(0.65) brightness(0.85); transition: filter 0.15s ease, transform 0.15s ease; }
.emoji-icon--flip { transform: scaleX(-1); }

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

.app {
  display: flex; min-height: 100vh;
  background:
    radial-gradient(720px 420px at 14% -8%, rgba(95, 168, 211, 0.08), transparent 60%),
    radial-gradient(640px 380px at 100% 0%, rgba(61, 189, 138, 0.06), transparent 55%);
  background-color: var(--bg);
  background-attachment: fixed;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 100;
  isolation: isolate;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform 0.2s ease, width 0.2s ease;
  /* The brand header and footer stay pinned; only the nav list in between
     scrolls. Without this, once the nav items are taller than the viewport
     (short laptop screens, mobile landscape, or simply having enough nav
     links) the overflow just gets visually cut off at the viewport edge
     with no way to scroll down to reach the remaining links. */
  overflow: hidden;
}

/* Scrim behind the off-canvas drawer on mobile — tapping it is the same
   as tapping "Close sidebar". Only reachable below the drawer breakpoint;
   the hamburger that opens it is hidden above that width too. */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 4, 6, 0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sidebar-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 901px) { .sidebar-backdrop { display: none; } }


/* Keep every sidebar control directly hit-testable. The drawer sits above
   the mobile scrim and remains interactive even while the rest of the app
   is locked during mobile navigation. */
.sidebar a,
.sidebar button,
.sidebar nav,
.sidebar__guild,
.nav-link {
  pointer-events: auto;
}

.sidebar__guild,
.nav-link,
.sidebar__collapse-btn {
  -webkit-user-select: none;
  user-select: none;
}

.sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 19px 18px 14px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.sidebar__brand span {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sidebar__brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(95, 168, 211, 0.35));
}

/* ---------- Sidebar: active guild / server switcher ---------- */

.sidebar__guild {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 12px 14px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sidebar__guild { cursor: pointer; touch-action: manipulation; }
.sidebar__guild:hover { border-color: var(--border); background: var(--bg-card-hover); }
.sidebar__guild img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--bg-input); }
.sidebar__guild-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sidebar__guild-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__guild-switch { font-size: 10.5px; color: var(--text-faint); }
.sidebar__guild-caret { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-faint); opacity: 0.4; transform: rotate(90deg); }

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.sidebar__user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sidebar__user span {
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-group { padding: 10px 10px; }
.nav-group__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-faint); padding: 0 10px 8px; text-transform: uppercase;
}

.nav-link {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
}
.nav-link__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.nav-link__icon svg { width: 17px; height: 17px; opacity: 0.85; }
.nav-link { transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.nav-link:hover { background: var(--bg-input); color: var(--text); }
.nav-link:hover .emoji-icon { filter: saturate(1) brightness(1); transform: scale(1.06); }
.nav-link.is-active {
  background: rgba(95, 168, 211, 0.13);
  color: var(--text);
  font-weight: 600;
}
.nav-link.is-active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 3px 3px 0; background: var(--accent-grad);
}
.nav-link.is-active .emoji-icon { filter: saturate(1) brightness(1.05); }

.sidebar__footer { margin-top: auto; padding: 14px 18px 18px; font-size: 11px; color: var(--text-faint); border-top: 1px solid var(--border-soft); }

/* ---------- Sidebar collapse (desktop "close sidebar") ---------- */

.sidebar__collapse-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px 10px; padding: 8px 10px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar__collapse-btn:hover { background: var(--bg-input); color: var(--text); }
.sidebar__collapse-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s ease; }

body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .main { margin-left: 72px; }
body.sidebar-collapsed .sidebar__brand { justify-content: center; padding: 20px 8px; }
body.sidebar-collapsed .sidebar__brand span,
body.sidebar-collapsed .sidebar__guild-info,
body.sidebar-collapsed .sidebar__guild-caret,
body.sidebar-collapsed .nav-group__label,
body.sidebar-collapsed .nav-link__label,
body.sidebar-collapsed .sidebar__collapse-btn span,
body.sidebar-collapsed .sidebar__footer { display: none; }
body.sidebar-collapsed .sidebar__guild { justify-content: center; margin: 0 10px 14px; padding: 6px; }
body.sidebar-collapsed .sidebar__collapse-btn { justify-content: center; margin: 0 12px 10px; }
body.sidebar-collapsed .sidebar__collapse-btn svg { transform: rotate(180deg); }
body.sidebar-collapsed .nav-link { justify-content: center; padding: 9px; }
body.sidebar-collapsed .nav-link.is-active::before { left: -8px; }
body.sidebar-collapsed .nav-group { padding: 14px 8px; }

/* ---------- Main column ---------- */

.main { margin-left: 248px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 20;
}
html[data-theme="light"] .topbar { background: rgba(245, 245, 244, 0.78); }

.topbar__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar__menu-btn {
  display: none; position: relative; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; border-radius: 8px;
  color: var(--text); cursor: pointer; padding: 0; flex-shrink: 0;
  transition: background 0.15s ease;
}
.topbar__menu-btn:hover { background: var(--bg-input); }
.topbar__menu-btn svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: opacity 0.15s ease, transform 0.2s ease;
}
.topbar__menu-btn .i-close { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(0.7); }
.topbar__menu-btn.is-active .i-bars { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.7); }
.topbar__menu-btn.is-active .i-close { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }

.user-menu { position: relative; }
.user-menu__trigger {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-raised);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.user-menu__trigger:hover { border-color: var(--current); background: var(--bg-card-hover); }
.user-menu__avatar {
  width: 28px; height: 28px; border-radius: 50%; padding: 2px; flex-shrink: 0;
  background: var(--accent-grad); display: flex; align-items: center; justify-content: center;
}
.user-menu__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid var(--bg-raised); }
.user-menu__trigger span {
  font-size: 13px; font-weight: 600; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu__chevron { color: var(--text-faint); transition: transform 0.15s ease; }
.user-menu.is-open .user-menu__chevron { transform: rotate(180deg); }

.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  min-width: 170px; padding: 6px; display: none;
}
.user-menu.is-open .user-menu__panel { display: block; animation: menu-in 0.15s ease; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.user-menu__panel a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ember); font-weight: 500; }
.user-menu__panel a:hover { background: rgba(217, 119, 87, 0.1); }

.content { padding: 30px 32px 60px; flex: 1; max-width: 1240px; width: 100%; box-sizing: border-box; }

.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: "Fraunces", Georgia, serif; font-size: 23px; font-weight: 600; letter-spacing: -0.005em; }
.page-head p { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; }

/* Small breadcrumb-style "back" link that sits above a .page-head title,
   for pages one level deeper than their parent's sidebar entry (e.g.
   ticket transcripts, an individual transcript). */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-faint);
  text-decoration: none; margin-bottom: 10px; padding: 4px 2px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.back-link:hover { color: var(--current); transform: translateX(-2px); }
.back-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Cards / settings groups ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
/* Wider tracks for pages with dense cards (e.g. Leveling) — 2 columns on a
   typical dashboard width instead of 3 cramped ones, still collapsing to 1
   column on narrow screens. The min(440px, 100%) clamp keeps the track from
   forcing horizontal overflow on phones narrower than 440px. */
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }

.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--current) 35%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); }

/* The Join-to-Create panel nests a role-picker popover (.role-dropdown__menu)
   several levels deep that needs to overflow past the card's edge to show
   its own scrollable list. The card's overflow:hidden (used elsewhere to
   clip rounded corners) was clipping that popover before it could scroll,
   making roles below the fold both invisible and unreachable. */
.jtcv-panel-card { overflow: visible; }

.card__header {
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__header h3 { font-size: 14.5px; }
.card__header p { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }

.card__body { padding: 18px 20px; }

.card__footer {
  padding: 14px 20px; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.card__footer.is-split { justify-content: space-between; }

/* ---------- List rows (bindings, categories, active items…) ---------- */
/* Shared shape for the "item + an action" rows used across the settings
   pages (reaction roles, tickets, counters, invites, triggers…). Wraps
   instead of squeezing the action button off-screen on narrow phones. */
.list-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.list-row:hover { border-color: var(--border); background: var(--bg-card-hover); }
.list-row > *:first-child { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.list-row > *:last-child { flex-shrink: 0; }

/* ---------- Form controls ---------- */

/* Muted secondary text — row descriptions, empty states, helper copy.
   Used well beyond form fields, so it's its own rule rather than being
   scoped to `.field`; the compound selector below still wins inside one. */
.hint { display: block; color: var(--text-faint); font-size: 12px; line-height: 1.5; }

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.field small.hint { margin-top: 4px; font-size: 11.5px; }

.field-input, .field-select, .field-textarea {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 13.5px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.field-select[multiple] { padding: 6px; }
.field-select[multiple] option { padding: 6px 8px; border-radius: 5px; }
.field-textarea { resize: vertical; min-height: 76px; }
.field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--current); box-shadow: 0 0 0 3px rgba(95, 168, 211, 0.14); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Flexible variant for rows with 3+ controls, or an odd mix like
   field + field + trailing button — cases the fixed 2-column .field-row
   grid above lays out unevenly (a lone item stranded in one column with
   an empty gap beside it). Wraps at its own natural width instead. */
.field-row--flex { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.field-row--flex > .field { flex: 1 1 150px; min-width: 0; margin-bottom: 0; }
.field-row--flex > input,
.field-row--flex > select { flex: 1 1 150px; min-width: 0; }
.field-row--flex > button { flex: 0 0 auto; }
@media (max-width: 480px) {
  .field-row--flex > button { flex: 1 1 100%; }
}

/* ---------- Toggle switch ---------- */

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
.toggle-row + .toggle-row { border-top: 1px solid var(--border-soft); }
.toggle-row__label { font-size: 13.5px; font-weight: 500; }
.toggle-row__label small { display: block; font-weight: 400; color: var(--text-faint); font-size: 11.5px; margin-top: 2px; }

.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track { position: absolute; inset: 0; background: var(--bg-raised); border: 1px solid var(--text-faint); border-radius: 999px; transition: background 0.15s, border-color 0.15s; }
.toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--text-dim); border-radius: 50%; transition: transform 0.15s, background 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.toggle input:hover + .toggle__track { border-color: var(--text-dim); }
.toggle input:checked + .toggle__track { background: var(--accent-grad); border-color: transparent; }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); background: #fff; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px; border: none;
  border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.98); }
.btn:hover { filter: brightness(1.1); }
.btn-block { width: 100%; justify-content: center; }

.btn-primary { background: var(--accent-grad); color: #06131c; box-shadow: 0 4px 18px rgba(95, 168, 211, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-success { background: var(--signal); color: #06170f; box-shadow: 0 4px 16px rgba(61, 189, 138, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-danger  { background: transparent; color: var(--ember); border: 1px solid rgba(217, 119, 87, 0.45); }
.btn-ghost   { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
/* Was referenced in several places (ticket transcripts link, share-link
   button, category "Post panel" button) but never actually defined, so
   those buttons were silently falling back to bare `.btn` — no fill, no
   border, easy to mistake for plain unstyled text. */
.btn-secondary { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); }
.btn-secondary:hover { color: var(--text); border-color: color-mix(in srgb, var(--current) 40%, var(--border)); }
.btn-sm      { padding: 6px 12px; font-size: 12px; }

/* ---------- Badges ---------- */

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.badge-signal { background: rgba(61, 189, 138, 0.18); color: var(--signal); }
.badge-ember  { background: rgba(217, 119, 87, 0.18); color: var(--ember); }
.badge-gold   { background: rgba(212, 168, 87, 0.2); color: var(--gold); }
.badge-flare  { background: rgba(217, 149, 79, 0.2); color: var(--flare); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 22px; right: 22px;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--signal);
  border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px;
  z-index: 100; animation: toast-in 0.25s ease;
}
.toast svg { width: 16px; height: 16px; color: var(--signal); flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Selector (server picker) ---------- */

.selector-page { width: 100%; max-width: 1240px; margin: 0 auto; }
.selector-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px; align-items: end; margin-bottom: 28px; }
.selector-heading { margin: 0; }
.selector-heading h1 { font-size: clamp(26px, 3vw, 34px); }
.selector-heading .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--current); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.selector-heading .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(61,189,138,.10); }
.selector-count { min-width: 70px; text-align: right; color: var(--text-faint); }
.selector-count strong { display: block; font-size: 22px; color: var(--text); line-height: 1.05; }
.selector-count span { font-size: 11px; }
.selector-search { width: 100%; max-width: none; }
.selector-search input { height: 42px; }

.server-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }

.server-card {
  min-width: 0; background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 88%, var(--bg-raised)));
  border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 190px; box-shadow: 0 8px 30px rgba(0,0,0,.08);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.server-card.is-visible { display: flex; }
.server-card:hover { border-color: color-mix(in srgb, var(--current) 65%, var(--border)); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.server-card__top { display: flex; align-items: center; gap: 13px; min-width: 0; }
.server-card img { width: 62px; height: 62px; border-radius: 17px; object-fit: cover; flex: 0 0 auto; background: var(--bg-input); border: 1px solid var(--border-soft); }
.server-card__copy { min-width: 0; }
.server-card__eyebrow { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.server-card h3 { font-size: 15px; line-height: 1.35; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-card__action { margin-top: 18px; min-height: 40px; }
.server-card__action--music { margin-top: 8px; }
.selector-empty { margin-top: 14px; padding: 48px 24px; }
.selector-empty__icon { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--current); font-size: 22px; background: var(--bg-input); }
.selector-empty h3 { margin-bottom: 4px; }
.selector-empty p { color: var(--text-faint); font-size: 12px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.search-input { position: relative; max-width: 320px; }
.search-input input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 14px 9px 36px; color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color 0.15s;
}
.search-input input:focus { outline: none; border-color: var(--current); }
.search-input svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); display: none; }
.empty-state.is-visible { display: block; }

/* ---------- Error pages ---------- */

.error-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; text-align: center; padding: 20px;
}
.error-screen .code {
  font-size: 72px; font-weight: 800;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;
}
.error-screen h1 { font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600; margin-top: 6px; }
.error-screen p { color: var(--text-dim); font-size: 13.5px; max-width: 360px; }
.error-screen .btn { margin-top: 18px; }

/* ---------- Overview: guild banner ---------- */

.guild-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.guild-banner::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 168, 211, 0.16), transparent 70%);
  pointer-events: none;
}
.guild-banner::after {
  content: ""; position: absolute; bottom: -70px; left: 10%; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 189, 138, 0.1), transparent 70%);
  pointer-events: none;
}
.guild-banner > * { position: relative; z-index: 1; }
.guild-banner img { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; object-fit: cover; background: var(--bg-input); border: 1px solid var(--border); }
.guild-banner__name { font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; }
.guild-banner__meta { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guild-banner__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); display: inline-block; box-shadow: 0 0 0 3px rgba(61, 189, 138, 0.18); }
.guild-banner__meta .dot.is-offline { background: var(--ember); box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18); }

/* ---------- Overview: stat tiles ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.stat-tile:hover { border-color: color-mix(in srgb, var(--current) 35%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-tile__icon {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px; color: var(--current); background: rgba(95, 168, 211, 0.14);
}
.stat-tile__icon svg { width: 16px; height: 16px; }
.stat-tile__icon .emoji-icon { width: 19px; height: 19px; filter: none; }
.stat-tile__value { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.stat-tile__label { font-size: 12px; color: var(--text-faint); }

/* ---------- Overview: quick-nav cards ---------- */

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.quick-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.quick-card:hover { border-color: var(--current); transform: translateY(-2px); box-shadow: var(--glow-current); }
.quick-card__icon {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); color: var(--current); transition: background 0.15s ease;
}
.quick-card:hover .quick-card__icon { background: rgba(95, 168, 211, 0.14); }
.quick-card__icon svg { width: 17px; height: 17px; }
.quick-card__icon .emoji-icon { width: 20px; height: 20px; filter: none; }
.quick-card__title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.quick-card__desc { font-size: 12px; color: var(--text-faint); margin-top: 2px; line-height: 1.4; }
.quick-card__arrow { margin-left: auto; align-self: center; width: 15px; height: 15px; color: var(--text-faint); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.quick-card:hover .quick-card__arrow { opacity: 1; transform: translateX(0); color: var(--current); }

.section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin: 26px 0 12px; }
.section-label:first-child { margin-top: 0; }

/* ---------- Wiki ---------- */

.wiki-shell { display: flex; min-height: 100vh; }
.wiki-main { flex: 1; min-width: 0; padding: 40px 48px 80px; max-width: 900px; margin: 0 auto; }
.wiki-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 48px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0;
  background: rgba(12, 12, 14, 0.85); backdrop-filter: blur(8px); z-index: 20;
}
html[data-theme="light"] .wiki-topbar { background: rgba(245, 245, 244, 0.85); }
.wiki-topbar__brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.wiki-topbar__brand img { width: 24px; height: 24px; }
.wiki-topbar__links { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--text-dim); }
.wiki-topbar__links a:hover { color: var(--text); }

.wiki-topbar__toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; position: relative;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; padding: 0;
}
.wiki-topbar__toggle svg { width: 18px; height: 18px; position: absolute; transition: opacity 0.15s ease, transform 0.2s ease; }
.wiki-topbar__toggle .i-close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.wiki-topbar__toggle.is-active .i-bars { opacity: 0; transform: rotate(45deg) scale(0.7); }
.wiki-topbar__toggle.is-active .i-close { opacity: 1; transform: rotate(0) scale(1); }

.wiki-topbar__mobile {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(12, 12, 14, 0.98); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
html[data-theme="light"] .wiki-topbar__mobile { background: rgba(245, 245, 244, 0.98); }
.wiki-topbar__mobile.is-open { max-height: 340px; opacity: 1; visibility: visible; }
.wiki-topbar__mobile a {
  padding: 13px 20px; border-bottom: 1px solid var(--border-soft);
  font-size: 14px; color: var(--text-dim);
}
.wiki-topbar__mobile a:hover { color: var(--text); background: var(--bg-input); }

@media (max-width: 780px) {
  .wiki-topbar__links { display: none; }
  .wiki-topbar__toggle { display: inline-flex; }
}
.wiki-breadcrumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; }
.wiki-breadcrumb a:hover { color: var(--current); }
.wiki-hero { margin-bottom: 32px; }
.wiki-hero h1 { font-family: "Fraunces", Georgia, serif; font-size: 32px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 8px; }
.wiki-hero p { color: var(--text-dim); font-size: 14.5px; max-width: 620px; line-height: 1.55; }
.wiki-search {
  width: 100%; max-width: 420px; margin-top: 18px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font-size: 13.5px; font-family: inherit;
}
.wiki-search:focus { outline: none; border-color: var(--current); }

.wiki-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 36px; }
.wiki-cat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; transition: border-color 0.15s, transform 0.1s;
}
.wiki-cat-card:hover { border-color: var(--current); transform: translateY(-1px); }
.wiki-cat-card__count { font-size: 11.5px; color: var(--text-faint); background: var(--bg-input); border-radius: 999px; padding: 2px 9px; display: inline-block; margin-bottom: 10px; }
.wiki-cat-card h3 { font-size: 15px; margin-bottom: 5px; }
.wiki-cat-card p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

.wiki-cmd-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.wiki-cmd {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.wiki-cmd__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wiki-cmd__name { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13.5px; font-weight: 700; color: var(--current); }
.wiki-cmd__desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.wiki-cmd__opts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wiki-cmd__opt { font-size: 12px; color: var(--text-faint); }
.wiki-cmd__opt code { color: var(--text-dim); background: var(--bg-input); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }

.wiki-toc { display: flex; flex-direction: column; gap: 2px; }
.wiki-toc a { display: block; padding: 6px 10px; border-radius: 7px; font-size: 12.5px; color: var(--text-dim); }
.wiki-toc a:hover { background: var(--bg-input); color: var(--text); }

.wiki-faq { margin-bottom: 16px; }
.wiki-faq summary {
  cursor: pointer; font-weight: 600; font-size: 14px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); list-style: none;
}
.wiki-faq summary::-webkit-details-marker { display: none; }
.wiki-faq summary::after { content: "+"; float: right; color: var(--text-faint); font-weight: 400; }
.wiki-faq[open] summary::after { content: "–"; }
.wiki-faq p { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; padding: 12px 18px 4px; }

.wiki-steps { counter-reset: step; margin: 18px 0 32px; padding: 0; list-style: none; }
.wiki-steps li {
  counter-increment: step; position: relative; padding: 4px 0 20px 40px; border-left: 1px solid var(--border-soft); margin-left: 14px;
}
.wiki-steps li:last-child { border-color: transparent; padding-bottom: 0; }
.wiki-steps li::before {
  content: counter(step); position: absolute; left: -14px; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--current); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
}
.wiki-steps strong { display: block; font-size: 14px; margin-bottom: 3px; }
.wiki-steps span { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.wiki-footer { border-top: 1px solid var(--border-soft); margin-top: 40px; padding-top: 24px; font-size: 12px; color: var(--text-faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
  .wiki-topbar { padding: 14px 20px; }
  .wiki-main { padding: 28px 20px 60px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .selector-toolbar { grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
  .selector-count { text-align: left; display: inline-flex; align-items: baseline; gap: 7px; }
  .selector-count strong { font-size: 18px; }
  .selector-search { max-width: none; }
  .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  .sidebar.is-open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar__menu-btn { display: inline-flex; }
  .content { padding: 20px; }

  /* The desktop collapse rail doesn't apply below the mobile breakpoint —
     the sidebar is already an off-canvas drawer here, so keep it full-width
     and let the hamburger menu control visibility instead. */
  body.sidebar-collapsed .sidebar { width: 248px; }
  body.sidebar-collapsed .main { margin-left: 0; }
  body.sidebar-collapsed .sidebar__brand span,
  body.sidebar-collapsed .sidebar__guild-info,
  body.sidebar-collapsed .sidebar__guild-caret,
  body.sidebar-collapsed .nav-group__label,
  body.sidebar-collapsed .nav-link__label,
  body.sidebar-collapsed .sidebar__collapse-btn span,
  body.sidebar-collapsed .sidebar__footer { display: block; }
  body.sidebar-collapsed .sidebar__guild { justify-content: flex-start; padding: 8px 9px; }
  body.sidebar-collapsed .sidebar__collapse-btn { display: flex; }
}

/* Phone-width tightening — the 900px rules above turn the sidebar into a
   drawer; these trim the chrome that's still on screen underneath it. */
@media (max-width: 560px) {
  .server-grid { grid-template-columns: 1fr; }
  .server-card { min-height: 170px; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
  .topbar__title { max-width: 38vw; }
  .user-menu__trigger span { display: none; }
  .user-menu__trigger { padding: 5px; gap: 0; }
  .page-head { margin-bottom: 18px; }
  .guild-banner { flex-wrap: wrap; padding: 16px; }
  .stat-grid, .quick-grid { gap: 10px; }
}


/* ==========================================================================
   Ovels Wiki v2 — documentation-first design system
   ========================================================================== */
.wiki-v2 {
  --wiki-max: 1240px;
  --wiki-line: rgba(255,255,255,.075);
  --wiki-soft: rgba(255,255,255,.045);
  --wiki-accent: #7dd3fc;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% -8%, rgba(79,148,190,.17), transparent 34rem),
    radial-gradient(circle at 8% 18%, rgba(63,185,136,.08), transparent 30rem),
    var(--bg);
}
html[data-theme="light"] .wiki-v2 {
  --wiki-line: rgba(0,0,0,.09);
  --wiki-soft: rgba(0,0,0,.035);
  background:
    radial-gradient(circle at 82% -8%, rgba(79,148,190,.12), transparent 34rem),
    radial-gradient(circle at 8% 18%, rgba(63,185,136,.06), transparent 30rem),
    #f7f8f9;
}
.wiki-v2__nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--wiki-line);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
}
.wiki-v2__nav-inner {
  width:min(var(--wiki-max),calc(100% - 48px)); margin:auto; min-height:72px;
  display:flex; align-items:center; gap:30px;
}
.wiki-v2__brand { display:flex; align-items:center; gap:11px; color:var(--text); min-width:235px; }
.wiki-v2__brand:hover { color:var(--text); }
.wiki-v2__brand-mark { width:40px; height:40px; border:1px solid var(--wiki-line); border-radius:13px; display:grid; place-items:center; background:var(--wiki-soft); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.wiki-v2__brand img { border-radius:9px; }
.wiki-v2__brand strong { display:block; font-size:14px; letter-spacing:-.01em; }
.wiki-v2__brand small { display:block; margin-top:2px; color:var(--text-faint); font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
.wiki-v2__nav-links { display:flex; gap:3px; align-items:center; flex:1; }
.wiki-v2__nav-links a { padding:9px 12px; border-radius:9px; color:var(--text-dim); font-size:13px; transition:.18s ease; }
.wiki-v2__nav-links a:hover { color:var(--text); background:var(--wiki-soft); }
.wiki-v2__nav-actions { display:flex; align-items:center; gap:10px; }
.wiki-v2__dashboard { padding:10px 14px; border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:12px; font-weight:700; background:var(--wiki-soft); transition:.18s ease; }
.wiki-v2__dashboard:hover { border-color:var(--current); transform:translateY(-1px); }
.wiki-v2__dashboard span { color:var(--current); }
.wiki-v2__menu { display:none; border:1px solid var(--border); background:var(--wiki-soft); color:var(--text); border-radius:10px; width:40px; height:40px; }
.wiki-v2__menu span { display:block; width:17px; height:1.5px; margin:3px auto; background:currentColor; transition:.2s; }
.wiki-v2__mobile { display:none; }
.wiki-v2__main { width:min(var(--wiki-max),calc(100% - 48px)); margin:auto; padding:48px 0 92px; }
.wiki-v2__layout { min-width:0; }
.wiki-v2__layout--aside { display:grid; grid-template-columns:220px minmax(0,1fr); gap:64px; }
.wiki-v2__layout--full { display:block; }
.wiki-v2__aside { position:relative; }
.wiki-v2__side-nav { position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:1px solid var(--wiki-line); }
.wiki-v2__side-nav > span { color:var(--text); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 10px; }
.wiki-v2__side-nav a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; margin-left:-15px; border-left:2px solid transparent; color:var(--text-faint); font-size:12.5px; transition:.15s ease; }
.wiki-v2__side-nav a:hover, .wiki-v2__side-nav a.is-active { color:var(--text); border-left-color:var(--current); background:var(--wiki-soft); }
.wiki-v2__side-nav small { color:var(--text-faint); font-size:10px; }
.wiki-v2__content { min-width:0; }
.wiki-v2__hero { padding:16px 0 74px; }
.wiki-v2__hero-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:76px; align-items:center; }
.wiki-v2__hero-copy { max-width:780px; }
.wiki-v2__eyebrow, .wiki-v2__kicker { color:var(--current); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.wiki-v2__eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.wiki-v2__eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 5px rgba(61,189,138,.12); }
.wiki-v2__hero h1 { max-width:780px; font-family:"Fraunces",Georgia,serif; font-size:clamp(54px,6vw,84px); line-height:.98; letter-spacing:-.045em; font-weight:600; margin:0 0 24px; text-wrap:balance; }
.wiki-v2__hero h1 em { font-style:normal; color:var(--current); }
.wiki-v2__hero-copy > p { max-width:670px; color:var(--text-dim); font-size:16px; line-height:1.75; margin:0; }
.wiki-v2__hero-panel { border:1px solid var(--border); border-radius:18px; padding:9px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 25px 70px rgba(0,0,0,.18); }
.wiki-v2__panel-label { padding:12px 12px 10px; color:var(--text-faint); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.wiki-v2__quick-link { display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:12px; color:var(--text); transition:.18s ease; }
.wiki-v2__quick-link:hover { background:var(--wiki-soft); transform:translateX(2px); }
.wiki-v2__quick-icon { width:34px; height:34px; border:1px solid var(--wiki-line); border-radius:10px; display:grid; place-items:center; color:var(--current); background:var(--wiki-soft); font:800 9px monospace; }
.wiki-v2__quick-link strong { display:block; font-size:12px; }
.wiki-v2__quick-link small { display:block; color:var(--text-faint); font-size:10.5px; margin-top:3px; }
.wiki-v2__quick-link b { color:var(--text-faint); font-size:15px; font-weight:400; }
.wiki-v2__hero-search { margin-top:34px; padding-top:26px; border-top:1px solid var(--wiki-line); display:flex; align-items:center; gap:28px; }
.wiki-v2__search { width:min(720px,100%); display:flex; align-items:center; gap:10px; padding:5px 7px 5px 15px; background:var(--bg-card); border:1px solid var(--border); border-radius:13px; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.wiki-v2__search:focus-within { border-color:var(--current); box-shadow:0 0 0 3px rgba(95,168,211,.12),0 12px 40px rgba(0,0,0,.12); }
.wiki-v2__search > span { color:var(--text-faint); font-size:22px; line-height:1; }
.wiki-v2__search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:13.5px; padding:10px 0; }
.wiki-v2__search kbd { padding:4px 7px; border:1px solid var(--border); border-radius:6px; color:var(--text-faint); font:11px inherit; }
.wiki-v2__stats { display:flex; gap:18px; flex-wrap:wrap; color:var(--text-faint); font-size:10.5px; white-space:nowrap; }
.wiki-v2__stats strong { color:var(--text); font-size:13px; margin-right:3px; }
.wiki-v2__section { padding:56px 0; border-top:1px solid var(--wiki-line); }
.wiki-v2__section-head { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:24px; }
.wiki-v2__section-head h2, .wiki-v2__callout h2 { font-family:"Fraunces",Georgia,serif; font-size:30px; letter-spacing:-.025em; margin:5px 0 0; }
.wiki-v2__section-head p { max-width:470px; margin:0; color:var(--text-dim); font-size:13px; line-height:1.65; }
.wiki-v2__text-link { color:var(--current); font-size:12.5px; white-space:nowrap; }
.wiki-v2__start-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wiki-v2__start-card, .wiki-v2__category { position:relative; background:linear-gradient(145deg,var(--bg-card),color-mix(in srgb,var(--bg-card) 88%,var(--current))); border:1px solid var(--border); border-radius:16px; transition:.2s ease; }
.wiki-v2__start-card { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:21px; }
.wiki-v2__start-card:hover, .wiki-v2__category:hover { transform:translateY(-3px); border-color:var(--current); box-shadow:0 18px 45px rgba(0,0,0,.14); }
.wiki-v2__number { color:var(--current); font:700 10px/1 monospace; padding-top:4px; }
.wiki-v2__start-card h3, .wiki-v2__category h3 { font-size:14px; margin:0 0 5px; }
.wiki-v2__start-card p, .wiki-v2__category p { color:var(--text-dim); font-size:12px; line-height:1.6; margin:0; }
.wiki-v2__arrow { color:var(--text-faint); }
.wiki-v2__category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wiki-v2__category { padding:19px; }
.wiki-v2__category-top { display:flex; align-items:center; justify-content:space-between; color:var(--text-faint); font-size:10.5px; margin-bottom:21px; }
.wiki-v2__category-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--wiki-soft); color:var(--current); font-weight:800; }
.wiki-v2__category-link { display:block; margin-top:17px; color:var(--current); font-size:11.5px; }
.wiki-v2__callout { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:32px; border:1px solid var(--wiki-line); border-radius:18px; background:linear-gradient(120deg,rgba(95,168,211,.11),rgba(61,189,138,.06)); }
.wiki-v2__callout p { color:var(--text-dim); font-size:13px; margin:7px 0 0; }
.wiki-v2__primary, .wiki-v2__secondary { display:inline-flex; align-items:center; gap:7px; width:max-content; border-radius:10px; padding:10px 14px; font-size:12px; font-weight:700; }
.wiki-v2__primary { background:var(--accent-grad); color:#06131c; box-shadow:0 7px 24px rgba(95,168,211,.2); }
.wiki-v2__secondary { border:1px solid var(--border); color:var(--text); background:var(--wiki-soft); }
.wiki-v2__footer { width:min(var(--wiki-max),calc(100% - 48px)); margin:auto; padding:28px 0 42px; border-top:1px solid var(--wiki-line); display:flex; justify-content:space-between; gap:25px; }
.wiki-v2__footer strong, .wiki-v2__footer span { display:block; }
.wiki-v2__footer strong { font-size:12px; }
.wiki-v2__footer span { color:var(--text-faint); font-size:11px; margin-top:4px; }
.wiki-v2__footer nav { display:flex; gap:16px; flex-wrap:wrap; align-items:start; }
.wiki-v2__footer nav a { color:var(--text-faint); font-size:11px; }
.wiki-v2__footer nav a:hover { color:var(--text); }
.wiki-v2__breadcrumb { display:flex; gap:8px; color:var(--text-faint); font-size:11.5px; margin:4px 0 22px; }
.wiki-v2__breadcrumb a:hover { color:var(--current); }
.wiki-v2__page-head { max-width:860px; padding:10px 0 38px; }
.wiki-v2__page-head h1 { font-family:"Fraunces",Georgia,serif; font-size:clamp(36px,4vw,54px); line-height:1.05; letter-spacing:-.025em; margin:8px 0 12px; text-wrap:balance; }
.wiki-v2__page-head > p { max-width:680px; color:var(--text-dim); font-size:14px; line-height:1.7; margin:0 0 20px; }
.wiki-v2__category-meta { display:inline-flex; padding:7px 10px; border:1px solid var(--wiki-line); border-radius:8px; color:var(--text-faint); font-size:11px; }
.wiki-v2__category-meta strong { color:var(--text); margin-right:4px; }
.wiki-v2__command-group { margin:0 0 50px; scroll-margin-top:95px; }
.wiki-v2__group-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:13px; padding-bottom:11px; border-bottom:1px solid var(--wiki-line); }
.wiki-v2__group-head span { color:var(--current); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.wiki-v2__group-head h2 { margin:3px 0 0; font-size:19px; }
.wiki-v2__group-head p { max-width:470px; color:var(--text-faint); font-size:11.5px; line-height:1.5; margin:0; }
.wiki-v2__command-list { display:flex; flex-direction:column; gap:9px; }
.wiki-v2__command { padding:17px 18px; border:1px solid var(--border); background:var(--bg-card); border-radius:12px; transition:border-color .15s,transform .15s; }
.wiki-v2__command:hover { border-color:color-mix(in srgb,var(--current) 40%,var(--border)); transform:translateX(2px); }
.wiki-v2__command-head { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; }
.wiki-v2__command-head > code { color:var(--current); font:700 13px/1.4 "SFMono-Regular",Consolas,monospace; }
.wiki-v2__badges { display:flex; flex-wrap:wrap; gap:5px; }
.wiki-v2__badges span { padding:3px 7px; border:1px solid var(--wiki-line); border-radius:6px; color:var(--text-faint); font-size:9.5px; }
.wiki-v2__badges .is-premium { color:var(--gold); border-color:rgba(212,168,87,.3); }
.wiki-v2__command > p { color:var(--text-dim); font-size:12.5px; line-height:1.55; margin:8px 0 0; }
.wiki-v2__options { margin-top:13px; padding-top:11px; border-top:1px solid var(--wiki-line); }
.wiki-v2__options > strong { display:block; color:var(--text-faint); text-transform:uppercase; letter-spacing:.09em; font-size:9.5px; margin-bottom:7px; }
.wiki-v2__options > div { display:grid; grid-template-columns:115px 1fr; gap:12px; padding:5px 0; font-size:11px; color:var(--text-faint); }
.wiki-v2__options code { width:max-content; color:var(--text-dim); background:var(--wiki-soft); border:1px solid var(--wiki-line); border-radius:5px; padding:2px 5px; }
.wiki-v2__no-options { margin-top:11px; color:var(--text-faint); font-size:10.5px; }
.wiki-v2__empty { border:1px dashed var(--border); border-radius:14px; padding:36px; text-align:center; color:var(--text-dim); }
.wiki-v2__empty strong { display:block; color:var(--text); margin-bottom:5px; }
.wiki-v2__empty p { font-size:12px; }
.wiki-v2__empty code { color:var(--current); }
.wiki-v2__steps { border-top:1px solid var(--wiki-line); }
.wiki-v2__step { display:grid; grid-template-columns:70px 1fr; gap:22px; padding:34px 0; border-bottom:1px solid var(--wiki-line); scroll-margin-top:100px; }
.wiki-v2__step-number { color:var(--current); font:800 11px/1 monospace; padding-top:6px; }
.wiki-v2__step h2 { font-size:20px; margin:0 0 7px; }
.wiki-v2__step p { max-width:650px; color:var(--text-dim); font-size:13px; line-height:1.7; margin:0 0 14px; }
.wiki-v2__tip { display:flex; gap:12px; margin-top:22px; padding:14px 16px; border:1px solid var(--wiki-line); border-radius:10px; background:var(--wiki-soft); color:var(--text-faint); font-size:11.5px; line-height:1.6; }
.wiki-v2__tip strong { color:var(--current); white-space:nowrap; }
.wiki-v2__tip a { color:var(--current); }
.wiki-v2__faq-list { display:flex; flex-direction:column; gap:8px; }
.wiki-v2__faq-list details { border:1px solid var(--border); background:var(--bg-card); border-radius:12px; overflow:hidden; }
.wiki-v2__faq-list summary { display:flex; justify-content:space-between; gap:20px; padding:18px; cursor:pointer; font-size:13px; font-weight:650; list-style:none; }
.wiki-v2__faq-list summary::-webkit-details-marker { display:none; }
.wiki-v2__faq-list summary span { color:var(--current); font-size:18px; font-weight:400; transition:.2s; }
.wiki-v2__faq-list details[open] summary span { transform:rotate(45deg); }
.wiki-v2__faq-list p { margin:0; padding:0 18px 18px; color:var(--text-dim); font-size:12.5px; line-height:1.7; max-width:760px; }

@media (max-width: 1050px) {
  .wiki-v2__hero-grid { grid-template-columns:1fr; gap:30px; }
  .wiki-v2__hero-panel { max-width:680px; }
  .wiki-v2__hero-search { align-items:flex-start; flex-direction:column; gap:14px; }
}
@media (max-width: 900px) {
  .wiki-v2__layout--aside { grid-template-columns:1fr; gap:0; }
  .wiki-v2__aside { display:none; }
  .wiki-v2__start-grid, .wiki-v2__category-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .music-voice-banner { grid-template-columns:auto 1fr; align-items:start; }
  .music-voice-banner__actions { flex-direction:column; align-items:stretch; }
  .music-voice-banner__select { width:100%; }
  .wiki-v2__nav-inner, .wiki-v2__main, .wiki-v2__footer { width:min(100% - 28px,var(--wiki-max)); }
  .wiki-v2__nav-inner { min-height:62px; }
  .wiki-v2__brand { min-width:0; }
  .wiki-v2__nav-links, .wiki-v2__dashboard { display:none; }
  .wiki-v2__menu { display:block; }
  .wiki-v2__mobile { display:flex; max-height:0; overflow:hidden; opacity:0; flex-direction:column; border-top:1px solid transparent; transition:.25s; }
  .wiki-v2__mobile.is-open { max-height:340px; opacity:1; border-top-color:var(--wiki-line); }
  .wiki-v2__mobile a { padding:14px max(14px,calc((100% - var(--wiki-max))/2)); color:var(--text-dim); font-size:13px; border-bottom:1px solid var(--wiki-line); }
  .wiki-v2__mobile a:hover { color:var(--text); background:var(--wiki-soft); }
  .wiki-v2__main { padding-top:30px; }
  .wiki-v2__hero { padding:10px 0 52px; }
  .wiki-v2__hero h1 { font-size:clamp(45px,13vw,66px); line-height:.98; }
  .wiki-v2__hero-copy > p { font-size:14px; line-height:1.7; }
  .wiki-v2__hero-panel { padding:7px; }
  .wiki-v2__quick-link { grid-template-columns:34px 1fr auto; padding:11px 9px; }
  .wiki-v2__hero-search { margin-top:28px; padding-top:22px; }
  .wiki-v2__search { width:100%; }
  .wiki-v2__stats { gap:10px 15px; }
  .wiki-v2__section-head { display:block; }
  .wiki-v2__section-head p { margin-top:10px; }
  .wiki-v2__start-grid, .wiki-v2__category-grid { grid-template-columns:1fr; }
  .wiki-v2__callout, .wiki-v2__footer { flex-direction:column; align-items:flex-start; }
  .wiki-v2__group-head { display:block; }
  .wiki-v2__group-head p { margin-top:8px; }
  .wiki-v2__options > div { grid-template-columns:1fr; gap:3px; }
  .wiki-v2__step { grid-template-columns:42px 1fr; gap:12px; }
  .wiki-v2__footer nav { gap:12px; }
}
@media (max-width: 420px) {
  .wiki-v2__hero h1 { font-size:44px; }
  .wiki-v2__search kbd { display:none; }
  .wiki-v2__callout { padding:22px; }
}

.toast--error { border-left-color: var(--ember); }
.toast--error svg { color: var(--ember); }
form[aria-busy="true"] .btn[type="submit"] { opacity: 0.68; cursor: wait; }

.user-menu__logout-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ember); font-weight: 500; }
.user-menu__logout-btn:hover { background: rgba(217, 119, 87, 0.1); }

/* Accessible interactive dashboard controls */
.user-menu__trigger {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
}
.user-menu__panel { pointer-events: auto; z-index: 120; }
.user-menu__logout-btn:focus-visible,
.user-menu__trigger:focus-visible,
.sidebar__collapse-btn:focus-visible,
.topbar__menu-btn:focus-visible,
.nav-link:focus-visible,
.sidebar__guild:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 2px;
}

/* ---------- Live music dashboard ---------- */
.music-dashboard { width: 100%; }
.music-voice-banner {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:14px 16px; margin-bottom:16px; border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(95,168,211,.07), rgba(61,189,138,.035) 55%, var(--bg-card));
}
.music-voice-banner.is-connected { border-color:rgba(61,189,138,.22); }
.music-voice-banner__icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--current); background:rgba(95,168,211,.09); border:1px solid rgba(95,168,211,.14); }
.music-voice-banner__copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.music-voice-banner__eyebrow { color:var(--current); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.music-voice-banner__copy strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-voice-banner__copy span { color:var(--text-faint); font-size:11px; line-height:1.4; }
.music-voice-banner__actions { display:flex; align-items:center; gap:8px; }
.music-voice-banner__select { min-width:210px; }
.music-access-card { padding:12px 14px; }
.music-access-card .music-tool-card__head { margin-bottom:8px; }
.music-access-card .music-control-row { margin-top:0; }
.music-access-card__role { display:inline-flex; align-items:center; min-height:34px; padding:0 10px; border:1px solid var(--border); border-radius:9px; background:var(--bg-input); color:var(--text-dim); font-size:12px; }
.music-access-card + .music-dashboard__layout { margin-top:12px; }

.music-dashboard__hero {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px;
  padding:2px 0 18px; border-bottom:1px solid var(--border-soft);
}
.music-dashboard__eyebrow { display:flex; align-items:center; gap:7px; color:var(--current); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px; }
.music-dashboard__dot { width:7px; height:7px; border-radius:50%; background:var(--text-faint); box-shadow:0 0 0 4px rgba(108,109,115,.1); }
.music-dashboard__dot.is-live { background:var(--signal); box-shadow:0 0 0 4px rgba(61,189,138,.12); }
.music-dashboard__hero h1 { font-family:"Fraunces",Georgia,serif; font-size:clamp(28px,4vw,38px); line-height:1; letter-spacing:-.03em; }
.music-dashboard__hero p { margin-top:7px; color:var(--text-dim); font-size:13px; max-width:650px; }
.music-dashboard__status { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-faint); background:var(--bg-card); font-size:11px; font-weight:700; white-space:nowrap; }
.music-dashboard__status span { width:6px; height:6px; border-radius:50%; background:var(--text-faint); }
.music-dashboard__status.is-live { color:var(--signal); border-color:rgba(61,189,138,.25); background:rgba(61,189,138,.06); }
.music-dashboard__status.is-live span { background:var(--signal); box-shadow:0 0 0 4px rgba(61,189,138,.10); }
.music-dashboard__layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,.78fr); gap:16px; align-items:start; }
.music-dashboard__main, .music-dashboard__side { min-width:0; display:flex; flex-direction:column; gap:18px; }
.music-player-card { display:grid; grid-template-columns:200px minmax(0,1fr); min-height:300px; overflow:hidden; }
.music-player-card__art { padding:18px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 20%, rgba(95,168,211,.12), transparent 52%), var(--bg-card); border-right:1px solid var(--border-soft); }
.music-player-card__art img, .music-player-card__placeholder { width:160px; height:160px; border-radius:18px; object-fit:cover; border:1px solid var(--border); background:var(--bg-input); box-shadow:var(--shadow-lg); }
.music-player-card__placeholder { display:grid; place-items:center; color:var(--current); }
.music-player-card__body { padding:24px 24px 20px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.music-player-card__kicker { color:var(--current); font-size:10px; font-weight:800; letter-spacing:.14em; }
.music-player-card__body h2 { margin-top:7px; font-size:clamp(22px,3vw,32px); line-height:1.08; letter-spacing:-.025em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-player-card__artist { margin-top:6px; color:var(--text-dim); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-player-card__meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; color:var(--text-faint); font-size:11px; }
.music-player-card__progress { margin-top:28px; }
.music-player-card__seek { display:block; height:5px; margin:0; }
.music-player-card__times { display:flex; justify-content:space-between; margin-top:6px; color:var(--text-faint); font-size:10.5px; }
.music-player-card__controls { display:flex; align-items:center; gap:8px; margin-top:20px; flex-wrap:wrap; }
.music-control { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:var(--bg-input); color:var(--text); cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease, filter .15s ease; }
.music-control:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--current); background:var(--bg-card-hover); }
.music-control:disabled { opacity:.4; cursor:not-allowed; }
.music-control--primary { width:46px; height:46px; border-color:transparent; background:var(--accent-grad); color:#06131c; box-shadow:0 8px 22px rgba(95,168,211,.22); }
.music-control--danger { color:var(--ember); }
.music-dashboard__tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.music-tool-card { padding:18px; }
.music-tool-card__head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.music-tool-card__head h3 { font-size:14px; }
.music-tool-card__head p { margin-top:2px; color:var(--text-faint); font-size:11.5px; }
.music-tool-card__head > svg { color:var(--current); flex-shrink:0; }
.music-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.music-search-form .btn { min-height:40px; white-space:nowrap; min-width:128px; }
.music-search-form__hint { margin-top:8px; color:var(--text-faint); font-size:10.5px; line-height:1.4; }
.music-search-form__hint strong { color:var(--text-dim); font-weight:700; }
.music-slider-row, .music-select-row, .music-control-row { display:flex; align-items:center; gap:10px; }
.music-slider-row { justify-content:space-between; color:var(--text-dim); font-size:12px; }
.music-slider-row strong { color:var(--text); font-size:12px; }
.music-range { width:100%; accent-color:var(--current); cursor:pointer; }
.music-select-row { margin-top:16px; }
.music-select-row > label { width:44px; flex:0 0 44px; color:var(--text-dim); font-size:12px; }
.music-seek { flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.music-seek span { min-width:42px; text-align:right; color:var(--text-faint); font-size:10px; }
.music-control-row { margin-top:18px; flex-wrap:wrap; }
.music-queue-card, .music-status-card { padding:18px; }
.music-queue-list { display:flex; flex-direction:column; gap:7px; max-height:520px; overflow:auto; }

.music-queue-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--border-soft); border-radius:10px; background:rgba(255,255,255,.012); transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.music-queue-item--current { border-color:color-mix(in srgb, var(--current) 70%, var(--border-soft)); background:linear-gradient(90deg, color-mix(in srgb, var(--current) 10%, transparent), rgba(255,255,255,.018)); box-shadow:0 0 0 1px color-mix(in srgb, var(--current) 18%, transparent), inset 3px 0 0 var(--current); }
.music-queue-item__index--current { color:var(--current); font-size:11px; text-align:center; }
.music-queue-item__eyebrow { margin-bottom:2px; color:var(--current); font-size:8.5px; font-weight:800; letter-spacing:.12em; }
.music-queue-item__state { color:var(--current); font-size:9.5px; font-weight:700; white-space:nowrap; }
.music-queue-empty-state { padding:4px 6px 1px 42px; color:var(--text-faint); font-size:10.5px; }

.music-queue-item__index { color:var(--text-faint); font:700 10px monospace; }
.music-queue-item__copy { min-width:0; }
.music-queue-item__copy strong { display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-queue-item__copy span { display:block; margin-top:2px; color:var(--text-faint); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-queue-item__time { color:var(--text-faint); font-size:10px; white-space:nowrap; }
.music-queue-item__remove { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--border-soft); border-radius:8px; background:transparent; color:var(--text-faint); font-size:11px; line-height:1; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.music-queue-item__remove:hover:not(:disabled) { color:var(--ember); border-color:var(--ember); background:rgba(255,90,90,.08); }
.music-queue-item__remove:disabled { opacity:.35; cursor:not-allowed; }
.music-empty { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--text-faint); gap:6px; }
.music-empty svg { color:var(--current); opacity:.7; margin-bottom:3px; }
.music-empty strong { color:var(--text-dim); font-size:13px; }
.music-empty span { max-width:220px; font-size:11px; line-height:1.5; }
.music-empty code { color:var(--current); }
.music-status-list { display:flex; flex-direction:column; gap:9px; }
.music-status-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.music-status-list > div:last-child { border-bottom:0; }
.music-status-list span { color:var(--text-faint); font-size:11px; }
.music-status-list strong { color:var(--text); font-size:11px; text-align:right; max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 980px) {
  .music-voice-banner { grid-template-columns:auto 1fr; }
  .music-voice-banner__actions { grid-column:1 / -1; }
  .music-voice-banner__select { flex:1; min-width:0; }
  .music-dashboard__layout { grid-template-columns:1fr; }
  .music-dashboard__side { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px) {
  .music-voice-banner { grid-template-columns:auto 1fr; align-items:start; }
  .music-voice-banner__actions { flex-direction:column; align-items:stretch; }
  .music-voice-banner__select { width:100%; }
  .music-player-card { grid-template-columns:1fr; }
  .music-player-card__art { border-right:0; border-bottom:1px solid var(--border-soft); padding:18px; }
  .music-player-card__art img, .music-player-card__placeholder { width:min(220px,62vw); height:min(220px,62vw); }
  .music-dashboard__tool-grid, .music-dashboard__side { grid-template-columns:1fr; }
  .music-search-form { grid-template-columns:1fr; }
  .music-dashboard__hero { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 460px) {
  .music-player-card__body { padding:18px; }
  .music-player-card__controls { gap:6px; }
  .music-control { width:35px; height:35px; }
  .music-control--primary { width:42px; height:42px; }
}

.music-voice-banner__state { display:inline-flex; align-items:center; min-height:36px; padding:0 11px; border:1px solid rgba(48, 209, 88, .22); border-radius:10px; background:rgba(48, 209, 88, .08); color:var(--text-dim); font-size:12px; white-space:nowrap; }

/* ==========================================================================
   Ovels Docs — persistent sidebar documentation shell (/wiki/*)
   ========================================================================== */
:root {
  --docs-topbar-h: 64px;
}
.docs-shell {
  --docs-line: rgba(255,255,255,.075);
  --docs-soft: rgba(255,255,255,.045);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 86% -10%, rgba(79,148,190,.14), transparent 34rem),
    radial-gradient(circle at 4% 30%, rgba(63,185,136,.07), transparent 30rem),
    var(--bg);
}
html[data-theme="light"] .docs-shell {
  --docs-line: rgba(0,0,0,.09);
  --docs-soft: rgba(0,0,0,.035);
  background:
    radial-gradient(circle at 86% -10%, rgba(79,148,190,.10), transparent 34rem),
    radial-gradient(circle at 4% 30%, rgba(63,185,136,.05), transparent 30rem),
    #f7f8f9;
}

/* ---------- Topbar ---------- */
.docs-topbar {
  position: sticky; top: 0; z-index: 60; height: var(--docs-topbar-h);
  border-bottom: 1px solid var(--docs-line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
}
.docs-topbar__inner { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.docs-topbar__menu {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--docs-soft); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.docs-topbar__brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 200px; flex-shrink: 0; }
.docs-topbar__brand:hover { color: var(--text); }
.docs-topbar__mark { width: 34px; height: 34px; border: 1px solid var(--docs-line); border-radius: 10px; display: grid; place-items: center; background: var(--docs-soft); }
.docs-topbar__mark img { border-radius: 7px; }
.docs-topbar__brand strong { display: block; font-size: 13.5px; letter-spacing: -.01em; }
.docs-topbar__brand small { display: block; margin-top: 1px; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.docs-topbar__search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--docs-soft); color: var(--text-faint); font-size: 13px; cursor: pointer; transition: border-color .15s ease;
}
.docs-topbar__search:hover { border-color: var(--current); color: var(--text-dim); }
.docs-topbar__search span { flex: 1; text-align: left; }
.docs-topbar__search kbd { font: 700 10.5px/1 "SFMono-Regular",Consolas,monospace; color: var(--text-faint); background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; }
.docs-topbar__links { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.docs-topbar__links > a:not(.docs-topbar__cta) { padding: 8px 10px; font-size: 12.5px; color: var(--text-dim); border-radius: 8px; }
.docs-topbar__links > a:not(.docs-topbar__cta):hover { color: var(--text); background: var(--docs-soft); }
.docs-topbar__cta { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--docs-soft); transition: .15s ease; }
.docs-topbar__cta:hover { border-color: var(--current); transform: translateY(-1px); color: var(--text); }
.docs-topbar__cta svg { color: var(--current); }

/* ---------- Body: sidebar + main ---------- */
.docs-body { flex: 1; display: flex; align-items: flex-start; }
.docs-sidebar {
  width: 258px; flex-shrink: 0; position: sticky; top: var(--docs-topbar-h);
  height: calc(100vh - var(--docs-topbar-h)); overflow-y: auto;
  border-right: 1px solid var(--docs-line); padding: 22px 10px 40px 22px;
}
.docs-sidebar__scroll { display: flex; flex-direction: column; gap: 22px; padding-right: 10px; }
.docs-nav-group { display: flex; flex-direction: column; gap: 1px; }
.docs-nav-group__label { display: block; margin: 0 0 6px 10px; color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.docs-nav-group__items { display: flex; flex-direction: column; gap: 1px; }
.docs-nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text-dim); font-size: 13px; transition: .15s ease; }
.docs-nav-link svg { flex-shrink: 0; color: var(--text-faint); transition: color .15s ease; }
.docs-nav-link:hover { color: var(--text); background: var(--docs-soft); }
.docs-nav-link:hover svg { color: var(--text-dim); }
.docs-nav-link.is-active { color: var(--text); background: color-mix(in srgb, var(--current) 12%, transparent); font-weight: 650; }
.docs-nav-link.is-active svg { color: var(--current); }
.docs-sidebar__backdrop { display: none; }

.docs-main { flex: 1; min-width: 0; padding: 44px 40px 100px; max-width: 1080px; margin: 0 auto; }

/* Per-page content + optional right "on this page" rail */
.docs-page { min-width: 0; }
.docs-page--aside { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 56px; align-items: start; }
.docs-page--full { display: block; max-width: 800px; }
.docs-page__content { min-width: 0; max-width: 760px; }
.docs-page__aside .wiki-v2__side-nav { position: sticky; top: calc(var(--docs-topbar-h) + 24px); }

/* ---------- Footer ---------- */
.docs-footer { border-top: 1px solid var(--docs-line); }
.docs-footer__inner {
  max-width: 1080px; margin: 0 auto; padding: 26px 40px 40px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.docs-footer__brand strong { display: block; font-size: 13px; margin-bottom: 4px; }
.docs-footer__brand span { display: block; max-width: 340px; color: var(--text-faint); font-size: 12px; line-height: 1.55; }
.docs-footer__inner nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.docs-footer__inner nav a { font-size: 12.5px; color: var(--text-dim); }
.docs-footer__inner nav a:hover { color: var(--current); }

/* ---------- Search palette ---------- */
.docs-search-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,7,9,.6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
}
.docs-search {
  width: 100%; max-width: 580px; max-height: 66vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.docs-search__input { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--docs-line); color: var(--text-faint); flex-shrink: 0; }
.docs-search__input input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14.5px; font-family: inherit; }
.docs-search__input input::placeholder { color: var(--text-faint); }
.docs-search__close { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--text-faint); }
.docs-search__close:hover { background: var(--docs-soft); color: var(--text); }
.docs-search__results { overflow-y: auto; padding: 8px; flex: 1; }
.docs-search__empty { padding: 26px 10px; text-align: center; color: var(--text-faint); font-size: 13px; }
.docs-search__result {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px;
  color: var(--text-dim); text-align: left; background: none; border: none; cursor: pointer;
}
.docs-search__result svg { flex-shrink: 0; color: var(--text-faint); }
.docs-search__result.is-active { background: var(--docs-soft); color: var(--text); }
.docs-search__result.is-active svg { color: var(--current); }
.docs-search__result-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.docs-search__result-copy strong { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-search__result-copy small { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-search__result-group { flex-shrink: 0; font-size: 10px; color: var(--text-faint); border: 1px solid var(--docs-line); border-radius: 6px; padding: 2px 7px; }
.docs-search__footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--docs-line); color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.docs-search__footer kbd { font: 700 10px/1 "SFMono-Regular",Consolas,monospace; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; margin-right: 3px; }

/* ---------- Docs-home specific bits (quick paths, feature grid, etc.) ---------- */
.docs-intro { padding: 6px 0 40px; border-bottom: 1px solid var(--docs-line); margin-bottom: 40px; }
.docs-intro__eyebrow { display: flex; align-items: center; gap: 8px; color: var(--current); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; }
.docs-intro__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(61,189,138,.12); }
.docs-intro h1 { font-family: "Fraunces", Georgia, serif; font-size: clamp(32px,4.2vw,46px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; max-width: 620px; }
.docs-intro > p { max-width: 620px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }

.docs-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 48px; }
.docs-quick-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: border-color .15s, transform .15s; }
.docs-quick-card:hover { border-color: var(--current); transform: translateY(-2px); }
.docs-quick-card svg { color: var(--current); }
.docs-quick-card strong { font-size: 13.5px; }
.docs-quick-card p { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: 0; }

.docs-section { margin-bottom: 48px; }
.docs-section__head { margin-bottom: 18px; }
.docs-section__head h2 { font-size: 20px; margin: 4px 0 6px; }
.docs-section__head p { color: var(--text-dim); font-size: 13.5px; max-width: 640px; line-height: 1.65; margin: 0; }

.docs-list { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none; }
.docs-list li { display: flex; gap: 10px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; padding: 2px 0; }
.docs-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--current); }

.docs-callout { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--docs-line); border-radius: 14px; background: var(--docs-soft); margin: 20px 0; }
.docs-callout strong { color: var(--current); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.docs-callout p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.65; }

.docs-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.docs-feature-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 19px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: border-color .15s, transform .15s; }
.docs-feature-card:hover { border-color: var(--current); transform: translateY(-2px); }
.docs-feature-card__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--docs-soft); border: 1px solid var(--docs-line); color: var(--current); }
.docs-feature-card h3 { font-size: 14.5px; margin: 0; }
.docs-feature-card p { font-size: 12px; color: var(--text-faint); line-height: 1.55; margin: 0; flex: 1; }
.docs-feature-card span { font-size: 11.5px; color: var(--current); font-weight: 650; }

.docs-guide-hero { padding-bottom: 22px; border-bottom: 1px solid var(--docs-line); margin-bottom: 28px; }
.docs-guide-hero__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--docs-soft); border: 1px solid var(--docs-line); color: var(--current); margin-bottom: 16px; }
.docs-guide-hero h1 { font-size: clamp(26px,3.4vw,34px); margin: 0 0 10px; }
.docs-guide-hero p { color: var(--text-dim); font-size: 14.5px; line-height: 1.7; max-width: 640px; margin: 0 0 14px; }
.docs-guide-hero__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.docs-guide-hero__meta span { font-size: 11px; color: var(--text-faint); border: 1px solid var(--docs-line); border-radius: 999px; padding: 4px 10px; }

.docs-steps-compact { counter-reset: dstep; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.docs-steps-compact li { counter-increment: dstep; position: relative; padding: 10px 0 10px 34px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; border-bottom: 1px solid var(--docs-line); }
.docs-steps-compact li:last-child { border-bottom: none; }
.docs-steps-compact li::before { content: counter(dstep); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--docs-soft); border: 1px solid var(--docs-line); color: var(--current); font: 700 11px/20px monospace; text-align: center; }

.docs-troubleshoot { display: flex; flex-direction: column; gap: 12px; }
.docs-troubleshoot__item { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.docs-troubleshoot__item h3 { font-size: 14px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.docs-troubleshoot__item h3 svg { color: var(--current); }
.docs-troubleshoot__item p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.65; }
.docs-troubleshoot__item ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }

.docs-support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.docs-support-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 10px; }
.docs-support-card__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--docs-soft); color: var(--current); border: 1px solid var(--docs-line); }
.docs-support-card h3 { font-size: 14.5px; margin: 0; }
.docs-support-card p { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; margin: 0; flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .docs-page--aside { grid-template-columns: 1fr; }
  .docs-page__aside { display: none; }
  .docs-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .docs-topbar__inner { padding: 0 14px; gap: 10px; }
  .docs-topbar__menu { display: inline-flex; }
  .docs-topbar__brand { min-width: 0; }
  .docs-sidebar {
    position: fixed; top: var(--docs-topbar-h); left: 0; bottom: 0; z-index: 70;
    width: 280px; background: var(--bg); transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .docs-sidebar.is-open { transform: translateX(0); }
  .docs-sidebar__backdrop { display: block; position: fixed; inset: var(--docs-topbar-h) 0 0 0; background: rgba(6,7,9,.55); z-index: 65; }
  .docs-main { padding: 32px 22px 80px; }
  .docs-topbar__search span { display: none; }
  .docs-topbar__search kbd { display: none; }
  .docs-topbar__search { max-width: none; width: auto; padding: 8px 10px; }
  .docs-topbar__links > a:not(.docs-topbar__cta) { display: none; }
  .docs-footer__inner { padding: 22px; }
}
@media (max-width: 640px) {
  .docs-quick-grid, .docs-feature-grid, .docs-support-grid { grid-template-columns: 1fr; }
  .docs-topbar__brand small { display: none; }
  .docs-search-overlay { padding-top: 8vh; }
}

/* =========================================================================
   Welcome / Farewell card editor
   ========================================================================= */
.card-editor { display: flex; flex-direction: column; gap: 18px; }

.card-editor__preview {
  position: relative; width: 100%; aspect-ratio: 2.5 / 1; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  background-color: var(--bg-input);
}
.card-editor__overlay { position: absolute; inset: 0; background: #000; }
.card-editor__bottom-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%); }
.card-editor__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 24px; text-align: center; }
.card-editor__avatar-ring { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); overflow: hidden; background: rgba(255,255,255,0.15); }
.card-editor__avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-editor__title { font-size: 20px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.card-editor__subtitle { font-size: 13.5px; font-weight: 500; opacity: 0.9; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
@media (min-width: 640px) {
  .card-editor__title { font-size: 26px; }
  .card-editor__subtitle { font-size: 15.5px; }
}

.card-editor__grid { display: flex; flex-direction: column; gap: 16px; }
.card-editor__vars { margin-top: -4px; }

.var-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.var-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--current);
  border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.var-chip:hover { border-color: var(--current); background: var(--bg-card-hover); }

.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch-row--disabled { opacity: 0.4; pointer-events: none; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-soft); cursor: pointer;
  padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); transition: transform .12s ease, border-color .12s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch--active { border-color: var(--current); box-shadow: 0 0 0 2px rgba(95, 168, 211, 0.35); }
.swatch--custom {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
  background: conic-gradient(from 0deg, #ff5e5e, #ffce54, #4cc98a, #4fa6e8, #8c6ff0, #ff5e5e);
}
.swatch--custom input[type="color"] {
  position: absolute; inset: -4px; width: 34px; height: 34px; border: none; padding: 0; cursor: pointer; opacity: 0; 
}

.opacity-slider { width: 100%; accent-color: var(--current); height: 4px; }
.card-editor__opacity-value { font-weight: 700; color: var(--text); }


/* ---------- Unified Welcome / Farewell configuration ---------- */
.greeting-config-card { overflow: hidden; }
.greeting-config-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.greeting-config-card__header p { margin: 5px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.greeting-config-card__status { flex-shrink: 0; }
.greeting-config-card__body { padding-top: 0; }
.greeting-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.greeting-section:first-child { padding-top: 4px; }
.greeting-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.greeting-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.greeting-section__head h4 { margin: 0; font-size: 14px; }
.greeting-section__head p { margin: 4px 0 0; color: var(--text-faint); font-size: 11.5px; line-height: 1.5; max-width: 680px; }
.greeting-section__hint { color: var(--current); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.greeting-section__delivery-grid { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); align-items: end; }
.greeting-section__message-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.greeting-section__embed-meta { grid-template-columns: .8fr .65fr 1.5fr; align-items: end; margin-top: 14px; }
.greeting-section__toggle-field .toggle-row { margin: 0; min-height: 42px; }
.greeting-section--card { padding-bottom: 0; }
.greeting-config-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.greeting-config-card__footer-copy { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.greeting-config-card__footer-copy strong { font-size: 12.5px; }
.greeting-config-card__footer-copy span { color: var(--text-faint); font-size: 11px; }
.greeting-config-card__actions { display: flex; align-items: center; gap: 8px; }
.field-help { display: block; margin-top: 6px; color: var(--text-faint); font-size: 10.5px; line-height: 1.45; }

/* ---------- "About this feature" note (wiki highlights, surfaced inline) ---------- */
.feature-about { margin: 14px 20px 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-input); }
.feature-about__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feature-about__list li { position: relative; padding-left: 14px; color: var(--text-faint); font-size: 11.5px; line-height: 1.5; }
.feature-about__list li::before { content: "•"; position: absolute; left: 0; color: var(--current); }
.feature-about__link { display: inline-block; margin-top: 9px; color: var(--current); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.feature-about__link:hover { text-decoration: underline; }
.field-help--error { color: var(--ember, #e8607a); }
.field-label-muted { color: var(--text-faint); font-weight: 400; }
.card-editor__top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card-editor__bg-tabs { display: inline-flex; width: 100%; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-input); }
.card-editor__bg-tabs button { flex: 1; border: 0; background: transparent; color: var(--text-faint); padding: 9px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.card-editor__bg-tabs button:hover { color: var(--text); }
.card-editor__bg-tabs button.is-active { background: var(--bg-card); color: var(--current); box-shadow: inset 0 0 0 1px var(--border); }
.card-editor__image-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.card-editor__image-error { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(90%, 600px); padding: 8px 10px; border-radius: 8px; background: rgba(18, 20, 24, .88); border: 1px solid rgba(232, 96, 122, .35); color: #fff; font-size: 10.5px; text-align: center; }
.btn-small { padding: 8px 11px; font-size: 11px; white-space: nowrap; }
@media (max-width: 760px) {
  .greeting-section__delivery-grid, .greeting-section__message-grid, .greeting-section__embed-meta, .card-editor__top-grid { grid-template-columns: 1fr; }
  .greeting-config-card__footer { align-items: stretch; }
  .greeting-config-card__actions { width: 100%; }
  .greeting-config-card__actions .btn { flex: 1; }
  .card-editor__image-panel { grid-template-columns: 1fr; }
}

/* ---------- Greeting message toggles / embed controls ---------- */
.greeting-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.greeting-option-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-input); overflow: hidden; }
.greeting-option-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 15px; border-bottom: 1px solid var(--border-soft); }
.greeting-option-card__head strong { display: block; font-size: 13px; }
.greeting-option-card__head > div > span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }
.greeting-option-card__body { padding: 14px; }
.greeting-option-card__body--disabled, .greeting-option--disabled { opacity: .46; }
.greeting-option-card__body.greeting-option--disabled input, .greeting-option-card__body.greeting-option--disabled textarea { cursor: not-allowed; }
.greeting-toggle-compact { padding: 0; gap: 8px; flex-shrink: 0; }
.greeting-toggle-compact .toggle-row__label { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.greeting-embed-fields { display: grid; grid-template-columns: .85fr .9fr 1.35fr; gap: 12px; margin-top: 12px; }
.greeting-color-input { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; }
.greeting-color-input input[type="color"] { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); cursor: pointer; }
.field-input--error { border-color: var(--ember, #e8607a) !important; box-shadow: 0 0 0 3px rgba(232,96,122,.12) !important; }
.greeting-embed-footer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 14px; align-items: center; margin-top: 14px; }
.greeting-toggle-card { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.greeting-message-summary { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: var(--text-faint); font-size: 10.5px; }
.greeting-message-summary span { padding: 5px 7px; border: 1px solid var(--border); border-radius: 999px; }
.greeting-message-summary span.is-on { color: var(--current); border-color: rgba(95,168,211,.35); }
.greeting-delivery-note { display: flex; flex-direction: column; justify-content: center; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.greeting-delivery-note strong { font-size: 11.5px; }
.greeting-delivery-note span { margin-top: 3px; color: var(--text-faint); font-size: 10.5px; }
.greeting-toggle-card .toggle { width: 44px; height: 24px; }
.greeting-toggle-card .toggle__track { background: #242830; border-color: #3b424d; }
.greeting-toggle-card .toggle__track::after { width: 18px; height: 18px; top: 2px; left: 2px; background: #aeb6c2; }
.greeting-toggle-card .toggle input:checked + .toggle__track::after { transform: translateX(20px); }
@media (max-width: 900px) {
  .greeting-options-grid { grid-template-columns: 1fr; }
  .greeting-embed-fields { grid-template-columns: 1fr 1fr; }
  .greeting-embed-fields .field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .greeting-embed-fields, .greeting-embed-footer-row { grid-template-columns: 1fr; }
  .greeting-embed-fields .field:last-child { grid-column: auto; }
}

/* Greeting variable insertion controls */
.greeting-variable-picker { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.greeting-variable-picker--disabled { opacity: .55; }
.greeting-variable-picker__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.greeting-variable-picker__head span { font-size: 11px; font-weight: 700; color: var(--text); }
.greeting-variable-picker__head small { font-size: 10px; color: var(--text-faint); }
.greeting-variable-picker__buttons { display:flex; flex-wrap:wrap; gap:8px; }
.greeting-variable-pill { appearance:none; border:1px solid var(--border); background:var(--surface-2, transparent); color:var(--current); border-radius:999px; padding:7px 10px; font:700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.greeting-variable-pill:hover:not(:disabled) { border-color:rgba(95,168,211,.45); background:rgba(95,168,211,.08); transform:translateY(-1px); }
.greeting-variable-pill:disabled { cursor:not-allowed; opacity:.55; }
@media (max-width: 760px) {
  .greeting-variable-picker__head { align-items:flex-start; flex-direction:column; gap:3px; }
}


.rank-editor__gradient-panel { display: flex; flex-direction: column; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }

.rank-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rank-preset-swatch {
  position: relative; height: 64px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.rank-preset-swatch--active { border-color: var(--accent, #5865F2); box-shadow: 0 0 0 2px rgba(88,101,242,0.35); }
.rank-preset-swatch__label {
  position: absolute; left: 8px; bottom: 6px; font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
@media (max-width: 520px) {
  .rank-preset-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rank card live preview (My Account page). CSS approximation only — the
   real /rank card is rendered server-side on canvas by the bot; this exists
   purely so the editor gives immediate visual feedback. */
.rank-preview {
  position: relative; width: 100%; aspect-ratio: 10 / 3; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow); background-color: var(--bg-input);
  padding: 20px 28px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; overflow: hidden;
}
.rank-preview--texture-diagonal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 34px);
}
.rank-preview__badges { display: flex; width: 100%; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rank-preview__badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff; padding: 5px 11px; border-radius: 999px; border: 1.5px solid; text-shadow: 0 1px 2px rgba(0,0,0,0.35); white-space: nowrap; }
.rank-preview__body { display: flex; width: 100%; align-items: center; gap: 24px; }
.rank-preview__avatar { flex-shrink: 0; width: 94px; height: 94px; display: block; overflow: hidden; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); background: rgba(255,255,255,0.15); }
.rank-preview__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rank-preview__avatar--circle { border-radius: 50%; }
.rank-preview__avatar--square { border-radius: 18px; }
.rank-preview__avatar--hex { border-radius: 0; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); }
.rank-preview__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.rank-preview__name { font-size: 22px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-preview__meta { font-size: 14px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.rank-preview__bar-track { position: relative; width: 100%; height: 15px; border-radius: 999px; background: rgba(255,255,255,0.16); overflow: hidden; }
.rank-preview__bar-fill { height: 100%; border-radius: inherit; transition: width 0.15s; }
.rank-preview__bar--square .rank-preview__bar-track, .rank-preview__bar--square .rank-preview__bar-fill { border-radius: 4px; }
.rank-preview__bar--segmented .rank-preview__bar-track { background: transparent; display: flex; gap: 3px; }
.rank-preview__bar--segmented .rank-preview__bar-track::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 6%, transparent 6% 7%);
}
.rank-preview__bar--segmented .rank-preview__bar-fill { border-radius: 4px; }
.rank-preview__xp { display: flex; width: 100%; justify-content: space-between; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
@media (max-width: 560px) {
  .rank-preview {
    aspect-ratio: auto; height: auto; min-height: 190px;
    padding: 14px 16px; gap: 10px; justify-content: flex-start;
  }
  .rank-preview__badge { font-size: 10px; padding: 4px 9px; }
  .rank-preview__body { gap: 12px; }
  .rank-preview__avatar { width: 54px; height: 54px; }
  .rank-preview__name { font-size: 15px; }
  .rank-preview__meta { font-size: 11px; }
}

.card-editor__toggle-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.card-editor__toggle-wrap > div:first-child { min-width: 0; }
.card-editor__toggle-wrap strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.card-editor__toggle-wrap small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11.5px; line-height: 1.35; }
.card-editor__toggle-wrap .toggle-row { padding: 0; }
.card-editor__toggle-wrap .toggle-row__label { display: none; }

/* ---------- Ticket dashboard revamp ---------- */
.ticket-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ticket-stats > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}
.ticket-stats strong { display: block; margin-top: 3px; font-size: 24px; line-height: 1.1; }
.ticket-recent { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.ticket-recent__title { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.ticket-recent__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; min-width: 0;
}
.ticket-recent__row:hover { border-color: var(--border); background: var(--bg-card-hover); }
.ticket-recent__row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ticket-recent__row > .hint { flex-shrink: 0; }

.role-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 250px;
  overflow: auto;
  padding: 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.role-picker__option {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 7px;
  background: var(--bg-card); cursor: pointer; transition: border-color .15s, background .15s;
}
.role-picker__option:hover { border-color: var(--border); background: var(--bg-card-hover); }
.role-picker__option input { position: absolute; opacity: 0; pointer-events: none; }
.role-picker__check {
  width: 16px; height: 16px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 4px; color: transparent; font-size: 11px; font-weight: 800;
  background: var(--bg-input);
}
.role-picker__option input:checked + .role-picker__check { color: #fff; background: var(--accent-grad); border-color: transparent; }
.role-picker__option input:focus-visible + .role-picker__check { outline: 2px solid var(--current); outline-offset: 2px; }
.role-picker__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.ticket-transcript-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 18px; align-items: start; }
.ticket-transcript-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ticket-transcript-note { padding-top: 0; color: var(--text-faint); font-size: 12px; }
.ticket-detail-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-detail-list p { margin: 0; }

/* ---------- Ticket setup — single guided box (steps 1–3) ---------- */
/* Everything a manager needs to stand up tickets lives in one .card,
   divided into numbered sections instead of scattered across several
   separate cards. Each section still holds its own <form> (via SaveForm),
   but as siblings inside one box rather than nested forms. */
/* The lift-on-hover from .card:hover reads fine for small cards, but this
   card spans the whole setup flow — lifting the entire page while someone
   is mid-form is just distracting, so it opts out. */
.ticket-setup:hover { transform: none; }
.ticket-setup__section { padding: 20px; }
.ticket-setup__section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ticket-setup__section-head h4 { font-size: 13.5px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.ticket-setup__section-head p.hint { margin-top: 3px; max-width: 62ch; }
.ticket-setup__step {
  flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-grad); color: #06131c;
  font-size: 12px; font-weight: 800; margin-top: 1px;
}
.ticket-setup__section-body { display: flex; flex-direction: column; gap: 16px; }
.ticket-setup__divider { height: 1px; background: var(--border-soft); margin: 0 20px; }
.ticket-setup__style-note {
  font-size: 12.5px; color: var(--text-dim); background: var(--bg-raised);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px;
}
.ticket-setup__style-note strong { color: var(--text); }

.ticket-category-list { display: flex; flex-direction: column; gap: 14px; }
/* Each category is a native <details> — collapsed by default so a server
   with a dozen categories doesn't turn into a wall of forms. The summary
   row stays visible when collapsed and carries the two actions (post
   panel / delete) that don't require opening the full editor. */
.ticket-category-row { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-raised); overflow: hidden; }
.ticket-category-row summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  transition: background 0.15s ease;
}
.ticket-category-row summary::-webkit-details-marker { display: none; }
.ticket-category-row summary:hover { background: var(--bg-card-hover); }
.ticket-category-row__chevron {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.ticket-category-row[open] .ticket-category-row__chevron { transform: rotate(45deg); }
.ticket-category-row__name { font-weight: 700; font-size: 13.5px; }
.ticket-category-row__summary-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ticket-category-row > form { padding: 4px 14px 14px; border-top: 1px solid var(--border-soft); }
.ticket-category-row__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.ticket-category-row__grid .field--full { grid-column: 1 / -1; }
.ticket-category-row__actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.ticket-add-category { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.ticket-add-category summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--current);
  list-style: none; user-select: none;
}
.ticket-add-category summary::-webkit-details-marker { display: none; }
.ticket-add-category[open] summary { margin-bottom: 4px; }

@media (max-width: 1100px) {
  .ticket-setup .toggle-row { align-items: flex-start; flex-wrap: wrap; }
  .ticket-setup .toggle-row__label { flex: 1 1 100%; }
}
@media (max-width: 900px) {
  .ticket-transcript-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ticket-category-row__grid { grid-template-columns: 1fr; }
  .ticket-category-row__summary-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .ticket-stats { grid-template-columns: 1fr; gap: 9px; }
  .ticket-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .ticket-stats strong { margin-top: 0; }
  .role-picker { grid-template-columns: 1fr; max-height: 300px; }
}
/* XP stats: keep the level-up announcement switch inline inside .field. */
.stats-announce-toggle .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
}
.stats-announce-toggle .toggle {
  width: 48px;
  height: 28px;
}
.stats-announce-toggle .toggle__track {
  background: #242830;
  border-color: #3b424d;
}
.stats-announce-toggle .toggle__track::after {
  width: 22px;
  height: 22px;
  top: 2px;
  left: 2px;
  background: #aeb6c2;
}
.stats-announce-toggle .toggle input:checked + .toggle__track {
  background: var(--accent-grad);
  border-color: transparent;
}
.stats-announce-toggle .toggle input:checked + .toggle__track::after {
  transform: translateX(20px);
  background: #fff;
}

/* ---------- Join-to-create multi-role dropdown ---------- */
.role-dropdown {
  position: relative;
  width: 100%;
}
.role-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.role-dropdown > summary::-webkit-details-marker { display: none; }
.role-dropdown > summary::after {
  content: "⌄";
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}
.role-dropdown[open] > summary {
  border-color: var(--current);
}
.role-dropdown[open] > summary::after { transform: rotate(180deg) translateY(-1px); }
.role-dropdown__summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.role-dropdown__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.role-dropdown__count {
  color: var(--text-faint);
  font-size: 11px;
}
.role-dropdown__menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 280px;
  overflow: auto;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
}
.role-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.role-dropdown__option:hover { background: var(--bg-card-hover); }
.role-dropdown__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.role-dropdown__check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  background: var(--bg-input);
}
.role-dropdown__option input:checked + .role-dropdown__check {
  color: #fff;
  background: var(--accent-grad);
  border-color: transparent;
}
.role-dropdown__option input:focus-visible + .role-dropdown__check {
  outline: 2px solid var(--current);
  outline-offset: 2px;
}
.role-dropdown__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

/* ---------- Join-to-create template accordions ---------- */
.jtcv-template-dropdown {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: visible;
  background: var(--bg-card);
}
.jtcv-template-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.jtcv-template-dropdown > summary::-webkit-details-marker { display: none; }
.jtcv-template-dropdown > summary::after {
  content: "⌄";
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 17px;
  transition: transform .15s ease;
}
.jtcv-template-dropdown[open] > summary {
  border-bottom: 1px solid var(--border-soft);
}
.jtcv-template-dropdown[open] > summary::after { transform: rotate(180deg); }
.jtcv-template-dropdown__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13.5px;
}
.jtcv-template-dropdown__meta {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 11.5px;
  white-space: nowrap;
}
.jtcv-template-dropdown__body { padding: 14px; }
@media (max-width: 560px) {
  .jtcv-template-dropdown > summary { align-items: flex-start; }
  .jtcv-template-dropdown__meta { display: none; }
}

/* ---------- Automation Commands — compact, responsive controls ---------- */
.automation-commands-grid { align-items: start; }
.automation-commands-card--full { grid-column: 1 / -1; }
.automation-commands-card .card__header > div:first-child { min-width: 0; }
.automation-commands-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.automation-commands-list { display: flex; flex-direction: column; gap: 10px; }
.automation-commands-form { background: transparent; }
.automation-commands-footer { flex-wrap: wrap; }
.automation-commands-footer .btn { margin-left: 0; }
.automation-commands-summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
}
.automation-commands-summary__main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  min-width: 0;
  flex: 1 1 560px;
}
.automation-commands-summary__main > div { min-width: 0; }
.automation-commands-summary__label {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.automation-commands-summary__main strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.automation-commands-summary__tags { display: flex; gap: 7px; flex-wrap: wrap; align-content: flex-start; }
.automation-commands-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 11px;
}
.automation-commands-chip--active { color: var(--text); }
.automation-commands-dropdown {
  border-top: 0;
}
.automation-commands-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-top: 1px solid var(--border-soft);
}
.automation-commands-dropdown > summary::-webkit-details-marker { display: none; }
.automation-commands-dropdown > summary::after {
  content: "⌄";
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 17px;
  transition: transform .15s ease;
}
.automation-commands-dropdown[open] > summary::after { transform: rotate(180deg); }
.automation-commands-dropdown__title { font-size: 13px; font-weight: 600; min-width: 0; }
.automation-commands-dropdown__meta { color: var(--text-faint); font-size: 11.5px; margin-left: auto; }
.automation-commands-toggle-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.automation-commands-toggle-stack .toggle-row { padding: 7px 0; }
.field-row--nested { margin: 0; }
.automation-commands-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .automation-commands-grid { grid-template-columns: 1fr; }
  .automation-commands-card--full { grid-column: auto; }
  .automation-commands-summary__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .automation-commands-card .card__header { align-items: flex-start; flex-direction: column; }
  .automation-commands-card .card__header .automation-commands-badge { align-self: flex-start; }
  .automation-commands-summary__main { grid-template-columns: 1fr; }
  .automation-commands-dropdown > summary { align-items: flex-start; }
  .automation-commands-dropdown__meta { display: none; }
  .automation-commands-footer { align-items: stretch; }
  .automation-commands-footer .btn { flex: 1 1 160px; justify-content: center; }
  .automation-commands-row-actions { width: 100%; }
  .automation-commands-row-actions .btn { flex: 1 1 120px; justify-content: center; }
}

/* First-visit onboarding tours */
.first-visit-tour__scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 6, 9, .58);
}
.first-visit-tour__spotlight {
  position: fixed;
  z-index: 1001;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 0 9999px rgba(5, 6, 9, .58), 0 12px 40px rgba(0,0,0,.32), 0 0 0 4px rgba(91, 211, 240, .10), 0 0 28px rgba(91, 211, 240, .16);
  pointer-events: none;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.first-visit-tour__panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(390px, calc(100vw - 32px));
  z-index: 1002;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 22px;
  background: rgba(19,20,24,.98);
  box-shadow: 0 22px 70px rgba(0,0,0,.4);
}
.first-visit-tour__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 7px;
}
.first-visit-tour__title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.first-visit-tour__text { margin: 8px 0 18px; line-height: 1.55; opacity: .78; }
.first-visit-tour__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 12px; opacity: .65; }
.first-visit-tour__dots { display: flex; gap: 5px; }
.first-visit-tour__dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }
.first-visit-tour__dots span.is-active { opacity: 1; }
.first-visit-tour__actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 640px) {
  .first-visit-tour__panel { right: 16px; bottom: 16px; width: calc(100vw - 32px); padding: 18px; }
}