:root {
  --bg: #080b16;
  --bg-alt: #0b0f1e;
  --panel: #0f1428;
  --panel-2: #131a34;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.68);
  --muted-2: rgba(255, 255, 255, 0.46);
  --border: rgba(0, 104, 255, 0.22);
  --border-soft: rgba(255, 255, 255, 0.08);
  --accent: #0068ff;
  --accent-2: #4d94ff;
  --accent-soft: rgba(0, 104, 255, 0.14);
  --accent-glow: rgba(0, 104, 255, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 68px;
  --discord-blurple: #5865f2;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 800px at 15% 0%, rgba(0, 104, 255, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(0, 104, 255, 0.12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  overflow-x: hidden;
}

body > main { flex: 1 0 auto; }
body > .footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= HEADER ================= */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-left { display: flex; align-items: center; gap: 22px; }

.brand { display: flex; align-items: center; }
.logo { width: 46px; height: 46px; object-fit: contain; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover { color: var(--fg); background: var(--accent-soft); }

.header-right { display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  margin: 8px 0 16px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  padding: 12px 8px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.mobile-nav a:hover { color: var(--fg); background: var(--accent-soft); }

/* Profile menu */

.profile-menu { position: relative; }

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.82rem;
  transition: background 0.15s ease;
}

.profile-trigger:hover { background: var(--accent-soft); }
.profile-trigger img { width: 26px; height: 26px; border-radius: 50%; display: block; }

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
}

.profile-dropdown.open { display: flex; }

.profile-dropdown .who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  border-radius: 8px 8px 0 0;
}
.profile-dropdown .who:hover { background: var(--accent-soft); }

.profile-dropdown .who img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.profile-dropdown .who-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-dropdown .who strong { display: block; color: var(--fg); font-size: 0.9rem; }

.profile-dropdown button,
.profile-dropdown a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
}

.profile-dropdown button:hover,
.profile-dropdown a:hover { background: var(--accent-soft); }

/* ================= GENERAL ================= */

.view { padding: 40px 0; }
.muted { color: var(--muted); }

.btn {
  font-family: var(--font);
  border: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--fg);
  padding: 11px 20px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { border-color: var(--border); }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-accent:hover { filter: brightness(1.12); box-shadow: 0 0 20px var(--accent-glow); }

.btn:disabled, .btn:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--accent-soft); }

.btn-discord {
  background: var(--discord-blurple);
  border-color: var(--discord-blurple);
  color: #fff;
  font-weight: 700;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-discord:hover { filter: brightness(1.12); box-shadow: 0 0 20px rgba(88, 101, 242, 0.45); }

/* ================= HERO ================= */

.hero {
  text-align: center;
  padding: 72px 0 64px;
}

.hero-logo {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 22px;
  border-radius: 36px;
  filter: drop-shadow(0 0 32px var(--accent-glow));
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 8vw, 4rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

.hero p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-actions .btn { padding: 13px 26px; font-size: 0.9rem; }

/* ================= FEATURE GRID ================= */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}

.feature-card {
  position: relative;
  display: block;
  padding: 22px 22px 44px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, var(--panel), var(--bg-alt));
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  border-color: var(--border);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border);
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.feature-card p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted);
}

.feature-arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 0.9rem;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.feature-card:hover .feature-arrow {
  color: var(--accent-2);
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* ================= DONATE ================= */

.donate-section { margin: 64px 0; }

.donate-head { text-align: center; margin-bottom: 28px; }
.donate-head h2 { margin: 0 0 8px; font-size: 1.5rem; }
.donate-head p { max-width: 520px; margin: 0 auto; line-height: 1.6; }

.donate-card {
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel);
  padding: 24px;
}

.donate-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.donate-tab {
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.donate-tab:hover { border-color: var(--border); color: var(--fg); }
.donate-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

.donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.donate-amount {
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  padding: 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.donate-amount:hover { border-color: var(--border); }
.donate-amount.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }

.donate-amount-custom {
  grid-column: span 3;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 0 12px;
}

.donate-amount-custom span { color: var(--muted-2); font-weight: 700; }

.donate-amount-custom input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 12px 0;
}

.donate-amount-custom input:focus { outline: none; }
.donate-amount-custom input::-webkit-inner-spin-button,
.donate-amount-custom input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.donate-amount-custom input { -moz-appearance: textfield; }

.donate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.donate-btn {
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--border-soft);
  background: var(--bg);
  color: var(--muted);
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: not-allowed;
}

.donate-soon {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.donate-disclaimer { margin: 0; text-align: center; font-size: 0.78rem; color: var(--muted-2); }

@media (max-width: 480px) {
  .donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .donate-amount-custom { grid-column: span 2; }
}

/* ================= FOOTER ================= */

.footer {
  border-top: 1px solid var(--border-soft);
  padding: 48px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 40px;
  justify-content: center;
  text-align: left;
  margin-bottom: 36px;
}

.footer-col h4 {
  margin: 0 0 14px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--muted); font-size: 0.85rem; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--accent-2); }

.footer-bottom {
  text-align: center;
  color: var(--muted-2);
  font-size: 0.78rem;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

/* ================= APP (guild picker / settings) ================= */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.section-head h2 { margin: 0; font-size: 1.2rem; }

/* Settings view title: sits above the sidebar/tabs (not beside the Back button on the far
   right, which is where a plain .section-head layout would push it). */
.settings-back-btn { margin-bottom: 16px; }
.settings-title { margin: 0 0 24px; font-size: 1.5rem; }

.guild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.guild-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.guild-card:hover { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
.guild-card img { width: 56px; height: 56px; border-radius: 50%; }
.guild-card .placeholder-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}

.panel {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--panel);
}

.panel h3 { margin-top: 0; }

/* The settings view (sidebar + main content) isn't a .container - that's a 1080px-max width
   meant for marketing/landing pages, which left the sidebar stranded in the middle of the
   viewport with dead space on both sides on any screen wider than that. This is an app-style
   two-column layout and needs real room, particularly for the Embed Builder's form+preview. */
.settings-shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

.settings-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.settings-sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.87rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.settings-nav-item:hover { background: var(--accent-soft); color: var(--fg); }

.settings-nav-item.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.settings-main { flex: 1; min-width: 0; }

.settings-section[hidden] { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panel-head h3 { margin: 0; }
.panel-head .switch-row { width: auto; }

#overviewPanel { max-width: 640px; }

.overview-banner {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overview-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.overview-banner-empty { color: var(--muted-2); font-size: 0.9rem; }

.overview-icon-wrap {
  position: absolute;
  left: 20px;
  bottom: -44px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 4px solid var(--panel);
  background: var(--panel);
  overflow: hidden;
}

.overview-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.overview-icon.placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
}

.overview-identity-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding-left: 124px;
  margin-bottom: 20px;
}

.overview-identity-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.overview-guild-name { font-size: 1.3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-guild-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--muted-2); }

.overview-copy-id-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}
.overview-copy-id-btn svg { width: 13px; height: 13px; }
.overview-copy-id-btn:hover { color: var(--fg); border-color: var(--accent); }

.overview-identity-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.overview-owner-inline { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.overview-owner-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.overview-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-alt);
}

.overview-stat-label { font-size: 0.78rem; color: var(--muted-2); }
.overview-stat-value { font-size: 1.4rem; font-weight: 700; }

.overview-collapse {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-alt);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.overview-collapse summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.overview-collapse summary::-webkit-details-marker { display: none; }
.overview-collapse[open] summary { margin-bottom: 10px; }

.overview-collapse-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-collapse-grid img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--panel);
}
.overview-collapse-grid img.overview-sticker-img { border-radius: 6px; object-fit: cover; }

.overview-more-note { margin: 0; font-size: 0.82rem; }

@media (max-width: 640px) {
  .overview-stats { grid-template-columns: repeat(2, 1fr); }
  .overview-identity-row { flex-wrap: wrap; align-items: flex-start; }
}

.rank-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 8px;
}

.color-pill-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-pill-row { display: flex; align-items: center; gap: 8px; }

.color-pill {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.color-pill:hover { filter: brightness(1.08); }
.color-pill span { pointer-events: none; }

.color-reset-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg);
  color: var(--muted-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.color-reset-btn:hover { border-color: var(--border); color: var(--fg); background: var(--accent-soft); }
.color-reset-btn svg { width: 15px; height: 15px; }

.rank-card-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.rank-card-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.rank-card-preview-label { font-size: 0.8rem; color: var(--muted-2); }

.rank-card-preview {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--card-bg, #191b20);
  border: 2px solid var(--card-border, #0068ff);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rank-card-preview-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid var(--card-avatar-border, #0068ff);
  transition: border-color 0.15s ease;
}

.rank-card-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-card-preview-topline {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--card-text, #fff);
}

.rank-card-preview-topline span:last-child { color: var(--card-accent, #0068ff); transition: color 0.15s ease; }

.rank-card-preview-name {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-card-preview-name-text { color: var(--card-text, #fff); }
.rank-card-preview-leveled { color: var(--card-other-text, rgba(255, 255, 255, 0.65)); font-weight: 500; }

.rank-card-preview-bar-row { display: flex; align-items: center; gap: 8px; }

.rank-card-preview-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.rank-card-preview-bar-fill {
  width: 32%;
  height: 100%;
  background: var(--card-accent, #0068ff);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.rank-card-preview-xp { font-size: 0.7rem; color: var(--card-other-text, rgba(255, 255, 255, 0.6)); flex-shrink: 0; }

@media (max-width: 640px) {
  .rank-preview-row { grid-template-columns: 1fr; }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}

.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.form-grid .switch-row { padding-bottom: 9px; }

@media (max-width: 640px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

.embed-toggle-btn { width: 100%; text-align: center; }

.embed-builder-fields { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; }
/* [hidden]'s UA-stylesheet "display: none" loses to the class rule above (an author-stylesheet
   class selector beats a bare attribute selector's specificity) unless restated here - without
   this, toggling the hidden property has no visible effect at all. */
.embed-builder-fields[hidden] { display: none; }

.switch-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.sticky-roles-options { display: flex; flex-direction: column; gap: 16px; }
.switch-row-label { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.sticky-roles-note { font-size: 0.78rem; margin: 0; color: var(--muted-2); }

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.rank-subsection {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-alt);
}

.rank-subsection:first-of-type, .panel-head + .rank-subsection { margin-top: 0; }
.rank-subsection h4 { margin: 0 0 4px; font-size: 0.95rem; }
.rank-subsection .muted { font-size: 0.85rem; margin: 0 0 14px; }

.rank-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rank-subsection-head h4 { margin: 0; }

.rank-stack-toggle { justify-content: flex-start; gap: 10px; }
.rank-stack-toggle span { font-size: 0.8rem; color: var(--muted); }

.boost-percent-input {
  width: 70px;
  flex: none;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.boost-percent-input::-webkit-inner-spin-button,
.boost-percent-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.boost-percent-input { -moz-appearance: textfield; }

.leaderboard { margin-top: 24px; }
.leaderboard h4 { margin: 0 0 12px; font-size: 0.95rem; }

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 0.85rem;
}

.leaderboard-rank { width: 28px; flex-shrink: 0; color: var(--muted-2); font-weight: 700; text-align: center; }
.leaderboard-rank.gold { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.leaderboard-rank.silver { color: #c0c0c0; text-shadow: 0 0 10px rgba(192, 192, 192, 0.4); }
.leaderboard-rank.bronze { color: #cd7f32; text-shadow: 0 0 10px rgba(205, 127, 50, 0.4); }
.leaderboard-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.leaderboard-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-level { color: var(--muted); flex-shrink: 0; }
.leaderboard-xp { color: var(--muted-2); flex-shrink: 0; width: 90px; text-align: right; }

select {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px;
}

.rank-subsection > select { display: block; width: 100%; max-width: 340px; }

/* Global fallback so a bare <input type="text/url/email">/<textarea> is never left with the
   browser's unstyled white default just because it lives outside .embed-builder-form or
   .rr-source-panel (the two places that used to be the only ones with this styling) - this bit
   the site twice already (rrExistingMessageId/rrNewContent, then embedContent). */
input[type="text"], input[type="url"], input[type="email"], textarea {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  resize: vertical;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-section > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 340px;
}

/* ================= ROLE COMBOBOX ================= */

.role-combobox { position: relative; flex: 1; min-width: 160px; }

.role-combobox-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}

.role-combobox-trigger:hover { border-color: var(--border); }

.role-combobox-value.placeholder { color: var(--muted-2); }
.role-combobox-chevron { color: var(--muted-2); font-size: 0.7rem; flex-shrink: 0; }

.role-combobox-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 30;
  padding: 8px;
}

.role-combobox-search {
  width: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.role-combobox-search:focus { outline: none; border-color: var(--accent); }

.role-combobox-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.role-combobox-option {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.role-combobox-option:hover { background: var(--accent-soft); }
.role-combobox-empty { padding: 8px 10px; font-size: 0.82rem; color: var(--muted-2); }

/* ================= UNSAVED CHANGES BAR + TOAST ================= */

.unsaved-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 0);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.unsaved-bar[hidden] { display: flex; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

.unsaved-bar-text { font-size: 0.88rem; color: var(--fg); }
.unsaved-bar-actions { display: flex; gap: 10px; }

/* Toasts stack in here (newest at the bottom, oldest pushed up) instead of sharing one fixed
   slot, so a second message while the first is still showing doesn't cut it off. */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.saved-toast {
  position: relative;
  overflow: hidden;
  min-width: 240px;
  max-width: min(90vw, 420px);
  opacity: 0;
  transform: translateY(140%);
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 14px 22px 12px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: auto;
}

.saved-toast.show { transform: translateY(0); opacity: 1; }
.saved-toast.error { background: #ff5c5c; }

.toast-text { display: block; text-align: center; }

/* The depleting bar: starts full-width, transitions to 0 over the toast's display duration
   (duration set inline per-toast in showToast() so it matches TOAST_DURATION_MS exactly). */
.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
}

.toast-progress-bar {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  transition-property: width;
  transition-timing-function: linear;
}

/* ================= ACCESS DENIED ================= */

.access-denied {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  padding: 32px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel);
}

.access-denied h2 { margin: 0 0 10px; font-size: 1.3rem; }
.access-denied p { margin: 0 0 20px; }

/* ================= COLOR PICKER ================= */

.color-field { display: flex; }
.color-hex-input { display: none; }

.color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  padding: 0;
}

.color-swatch:hover { border-color: var(--border); }

.cp-popover {
  position: fixed;
  width: 268px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 14px;
}

.cp-popover.open { display: flex; }

.cp-square {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.cp-square-white, .cp-square-black { position: absolute; inset: 0; }
.cp-square-white { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.cp-square-black { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

.cp-square-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-hue {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.cp-hue-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-fields {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 8px;
}

.cp-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--muted-2);
}

.cp-fields input {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 6px;
  font-size: 0.82rem;
  width: 100%;
  text-align: center;
}

.cp-fields input:focus { outline: none; border-color: var(--accent); }

.cp-fields input[type="number"]::-webkit-inner-spin-button,
.cp-fields input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cp-fields input[type="number"] { -moz-appearance: textfield; }

.cp-help {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted-2);
  line-height: 1.5;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.cp-help a { color: var(--accent-2); }

.status { font-size: 0.8rem; color: var(--muted); }
.status.ok { color: #4ade80; }
.status.err { color: #ff5c5c; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 20px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  font-size: 0.8rem;
}

.chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.chip button:hover { color: var(--accent-2); }

.add-row { display: flex; gap: 10px; }
.add-row select { flex: 1; }

/* ================= SIMPLE / STUB PAGES ================= */

.page-content { padding: 60px 0; max-width: 720px; margin: 0 auto; }
.page-content h1 { font-size: 2rem; margin-bottom: 12px; }
.page-content .muted { line-height: 1.7; }

/* ================= PUBLIC FORM ================= */

.public-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel);
}

.public-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.public-form input[type="text"],
.public-form input[type="email"],
.public-form textarea {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.9rem;
  resize: vertical;
}

.public-form input:focus,
.public-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.public-form .field-hint { font-size: 0.76rem; color: var(--muted-2); }

.public-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-alt);
}

.public-form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.public-form-check label { flex: 1; font-size: 0.85rem; color: var(--fg); cursor: pointer; }
.public-form-check.danger { border-color: rgba(255, 92, 92, 0.35); background: rgba(255, 92, 92, 0.08); }
.public-form-check.danger label { color: #ff5c5c; }
.public-form-check .field-hint { display: block; margin-top: 4px; color: var(--muted); }

.public-form-status {
  font-size: 0.85rem;
  padding: 12px 14px;
  border-radius: 8px;
  display: none;
}
.public-form-status.show { display: block; }
.public-form-status.error { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.35); color: #ff5c5c; }
.public-form-status.success { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); color: #4ade80; }

.public-form-submit { align-self: flex-start; }

/* ================= LEGAL DOCS ================= */

.legal-doc { padding: 60px 0 80px; max-width: 760px; margin: 0 auto; }
.legal-doc h1 { font-size: 2rem; margin: 0 0 10px; text-align: center; }
.legal-doc .legal-effective { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin: 0 0 44px; }
.legal-doc h2 { font-size: 1.1rem; margin: 34px 0 12px; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; font-size: 0.94rem; }
.legal-doc p strong { color: var(--fg); }
.legal-doc a { color: var(--accent-2); }
.status-boxes {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
}

.status-box {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  padding: 18px 26px;
  border-radius: 14px;
  border: 2px solid var(--border-soft);
  background: var(--panel);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.status-box-icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; display: block; }

/* The BOSSx hat mark is a wide/short shape, so at the same box size as the other (roughly
   square) icons, object-fit: contain letterboxes it down to about half height. Size it up
   instead of distorting it, so it reads at a similar visual weight to the other two. */
#dashboardBox .status-box-icon { width: 68px; height: 68px; }

.status-box-text { text-align: left; }
.status-box-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 3px; }
.status-box-status { font-size: 0.85rem; color: var(--muted); }

.status-connector { width: 3px; height: 26px; background: var(--border-soft); border-radius: 2px; }

.status-box.online { border-color: #4ade80; box-shadow: 0 0 22px rgba(74, 222, 128, 0.35); }
.status-box.offline { border-color: #ff5c5c; box-shadow: 0 0 22px rgba(255, 92, 92, 0.35); }
.status-box.degraded { border-color: #facc15; box-shadow: 0 0 22px rgba(250, 204, 21, 0.35); }

.status-box.loading { animation: status-pulse 1.4s ease-in-out infinite; }

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); border-color: var(--border-soft); }
  50% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-layout { flex-direction: column; }
  .settings-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: static;
  }
  .settings-nav-item {
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 auto;
    justify-content: center;
    border-radius: 10px;
  }
  .settings-nav-item span { display: none; }
  .rank-preview-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container, .settings-shell { padding: 0 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero { padding: 48px 0 40px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .form-grid { grid-template-columns: 1fr; }
  .profile-trigger span.name { display: none; }
}

/* ================= COMMANDS PAGE ================= */

.cmd-toolbar { margin: 28px 0 8px; }

.cmd-search-wrap { position: relative; }

.cmd-search {
  width: 100%;
  padding: 13px 52px 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.95rem;
}

.cmd-search:focus { outline: none; border-color: var(--accent); }
.cmd-search::placeholder { color: var(--muted-2); }

.cmd-filter-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.cmd-filter-btn svg { width: 18px; height: 18px; }
.cmd-filter-btn:hover { color: var(--fg); background: var(--accent-soft); }
.cmd-filter-btn.has-active { color: var(--accent-2); }

.cmd-filter-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
}

.cmd-filter-btn.has-active .cmd-filter-badge { display: block; }

.cmd-filters {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}

.cmd-filters.open { display: flex; }

.cmd-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.cmd-filter:hover { background: var(--accent-soft); }
.cmd-filter input { accent-color: var(--accent); }
.cmd-filter.active { color: var(--accent-2); }

.cmd-count { font-size: 0.8rem; color: var(--muted-2); margin: 18px 0 14px; }

.cmd-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 60px; }

.cmd-item {
  padding: 14px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--panel);
}

.cmd-usage { color: var(--accent-2); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.cmd-desc { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

.cmd-param {
  color: var(--fg);
  border-bottom: 1px dashed var(--accent-2);
  cursor: help;
}

.cmd-tooltip {
  position: fixed;
  max-width: 280px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  z-index: 100;
  display: none;
  pointer-events: none;
}

.cmd-tooltip.visible { display: block; }
.cmd-tooltip .tt-name { font-weight: 700; color: var(--accent-2); }
.cmd-tooltip .tt-badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.cmd-tooltip .tt-type { color: var(--muted-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.cmd-tooltip .tt-desc { color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.cmd-tooltip .tt-choices { color: var(--fg); font-size: 0.78rem; margin-top: 8px; }
.cmd-tooltip .tt-choices strong { color: var(--muted-2); font-weight: 600; display: block; margin-bottom: 3px; }

.cmd-empty { text-align: center; padding: 40px 0; color: var(--muted-2); }

@media (max-width: 560px) {
  .cmd-tooltip { max-width: calc(100vw - 32px); }
}

/* ================= CHANGELOG PAGE ================= */

.cl-search {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.95rem;
  margin: 28px 0 24px;
}

.cl-search:focus { outline: none; border-color: var(--accent); }
.cl-search::placeholder { color: var(--muted-2); }

.cl-post-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 20px 22px;
  margin-bottom: 28px;
}

.cl-post-panel h3 { margin: 0 0 4px; font-size: 1.05rem; }
.cl-post-panel .muted { font-size: 0.82rem; margin: 0 0 16px; }

.cl-post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cl-post-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.cl-post-grid textarea {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  min-height: 120px;
  resize: vertical;
}

.cl-post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.cl-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

.cl-entry {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel);
  padding: 18px 22px;
}

.cl-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cl-entry-date {
  font-size: 0.78rem;
  color: var(--muted-2);
  letter-spacing: 0.03em;
}

.cl-delete-btn {
  background: transparent;
  border: none;
  padding: 4px;
  margin: -4px;
  display: flex;
  cursor: pointer;
  color: var(--muted-2);
  border-radius: 6px;
  transition: color 0.15s ease, filter 0.15s ease;
}

.cl-delete-btn svg { width: 16px; height: 16px; }
.cl-delete-btn:hover { color: #ff5c5c; filter: drop-shadow(0 0 6px rgba(255, 92, 92, 0.65)); }

.cl-diff-block {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.cl-diff-block + .cl-diff-block { margin-top: 8px; }
.cl-diff-line-add { color: #4ade80; }
.cl-diff-line-remove { color: #ff5c5c; }

.cl-empty { text-align: center; padding: 40px 0; color: var(--muted-2); }

.cl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 60px;
}

.cl-pagination span { font-size: 0.85rem; color: var(--muted-2); }

.cl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.cl-modal-overlay[hidden] { display: none; }

/* The emoji picker opens as a nested overlay on top of the reaction-roles builder/edit
   modals, which share this same class and z-index - without this it would render behind
   whichever of those is already open, since it comes earlier in the DOM. */
#emojiPickerOverlay { z-index: 1050; }

.cl-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, filter 0.15s ease;
}

.modal-close:hover { color: #ff5c5c; filter: drop-shadow(0 0 6px rgba(255, 92, 92, 0.65)); }

.gate-modal { text-align: center; padding-top: 44px; }
.gate-modal-text { margin: 0 0 20px; font-size: 0.95rem; color: var(--muted); line-height: 1.5; }

.cl-modal h3 { margin: 0 0 10px; font-size: 1.1rem; }
.cl-modal p { margin: 0 0 16px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

.cl-channel-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(88, 101, 242, 0.16);
  color: var(--discord-blurple);
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.86rem;
}

.cl-channel-chip:hover { background: rgba(88, 101, 242, 0.28); }

.cl-modal-snippet { max-height: 160px; overflow-y: auto; margin-bottom: 20px; }
.cl-modal-snippet .cl-diff-block { font-size: 0.78rem; }

.cl-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.btn-danger {
  background: #ff5c5c;
  border-color: #ff5c5c;
  color: #fff;
  font-weight: 700;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-danger:hover { filter: brightness(1.1); box-shadow: 0 0 20px rgba(255, 92, 92, 0.45); }
.btn-danger:disabled { opacity: 0.6; cursor: default; filter: none; box-shadow: none; }

@media (max-width: 640px) {
  .cl-post-grid { grid-template-columns: 1fr; }
}

/* ================= CLOTHING PAGE ================= */

.clothing-toolbar {
  display: flex;
  gap: 16px;
  margin: 28px 0 8px;
}

.clothing-search-wrap { position: relative; flex: 1; min-width: 0; }

.clothing-search {
  width: 100%;
  padding: 13px 52px 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.95rem;
}

.clothing-search:focus { outline: none; border-color: var(--accent); }
.clothing-search::placeholder { color: var(--muted-2); }

.clothing-select-wrap { position: relative; flex-shrink: 0; }

.clothing-color-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 13px 40px 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.95rem;
  cursor: pointer;
}

.clothing-color-select:focus { outline: none; border-color: var(--accent); }

.clothing-select-wrap::after {
  content: "\25BE";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  font-size: 0.7rem;
  pointer-events: none;
}

.clothing-count { font-size: 0.8rem; color: var(--muted-2); margin: 18px 0 14px; }

.clothing-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 60px; }

.clothing-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--panel);
}

.clothing-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 118px;
  border-radius: 10px;
  background: var(--bg-alt);
  overflow: hidden;
}

/* Body + outfit are two stacked images (later one on top), same idea as the bot's own
   canvas compositing in utils/clothingImages.js - just done with CSS layering instead. */
.clothing-thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.clothing-info { min-width: 0; }
.clothing-name { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.clothing-desc { margin: 0; font-size: 0.87rem; color: var(--muted); line-height: 1.55; }

.clothing-empty { text-align: center; padding: 40px 0; color: var(--muted-2); }

@media (max-width: 640px) {
  .clothing-toolbar { flex-direction: column; }
  .clothing-item { flex-direction: column; align-items: center; text-align: center; }
}

/* ================= COMING SOON PAGE ================= */

.coming-soon {
  max-width: 480px;
  margin: 100px auto;
  text-align: center;
}

.coming-soon-icon { font-size: 2.6rem; margin-bottom: 16px; }
.coming-soon h1 { margin: 0 0 10px; }
.coming-soon p { margin: 0 0 28px; }

/* ================= EMBED BUILDER ================= */

/* Grid, not flex+wrap: with flex, a preview column that doesn't fit could end up sticky-
   positioned on top of the form instead of cleanly wrapping below it. A grid column can shrink
   or drop to its own row, but it can never overlap the column next to it. */
.embed-builder-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 340px;
  align-items: start;
  gap: 28px;
}

.embed-builder-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.embed-builder-form label,
.rr-source-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.embed-builder-form input[type="text"],
.embed-builder-form input[type="url"],
.embed-builder-form textarea,
.rr-source-panel input[type="text"],
.rr-source-panel textarea {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  resize: vertical;
}

.embed-builder-form input:focus,
.embed-builder-form textarea:focus,
.rr-source-panel input:focus,
.rr-source-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.embed-builder-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

.embed-blocks { display: flex; flex-direction: column; gap: 20px; }

.embed-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-alt);
}

.embed-add-btn { width: 100%; text-align: center; }

.eb-remove {
  align-self: flex-start;
  color: #ff5c5c;
  border-color: rgba(255, 92, 92, 0.35);
  font-size: 0.8rem;
}
.eb-remove:hover { background: rgba(255, 92, 92, 0.12); border-color: rgba(255, 92, 92, 0.5); }
.eb-remove[hidden] { display: none; }

.embed-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: start;
  gap: 8px;
  margin-bottom: 10px;
}

.embed-field-row .embed-field-name,
.embed-field-row .embed-field-value {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.82rem;
  resize: vertical;
}

.embed-field-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 8px;
}

.embed-field-remove {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.embed-field-remove:hover { color: var(--fg); border-color: var(--accent); }

.embed-builder-intro { max-width: 560px; }
.embed-builder-top-fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }

/* ---- Live preview (mimics a real Discord embed) ---- */

/* The 3rd top-level column (sidebar | main | preview) for the standalone Embed Builder page -
   only shown while that section is active, toggled in showSettingsSection(). Wider than a
   typical sidebar so .settings-main (the embed builder's own fields) gives up a bit of its
   width to it. */
.embed-preview-column {
  flex: 0 0 460px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  align-self: flex-start;
}

.embed-preview-column .rank-card-preview-label { display: block; margin-bottom: 8px; }

.embed-builder-preview {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #313338; /* Discord's actual dark-theme message-area background */
}

/* Mimics an actual Discord message: avatar left, username + bot badge + timestamp on one
   line, then the message content and any embeds below that. */
.discord-msg-preview { display: flex; gap: 14px; align-items: flex-start; }

.discord-msg-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

.discord-msg-body { flex: 1; min-width: 0; }

.discord-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }

.discord-msg-username { font-weight: 600; color: #f2f3f5; font-size: 0.95rem; }

.discord-msg-bot-badge {
  background: var(--discord-blurple);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.3;
}

.discord-msg-timestamp { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); }

.embed-preview-content-line {
  font-size: 0.9rem;
  color: #dbdee1;
  line-height: 1.4;
  margin-bottom: 8px;
  word-break: break-word;
}
.embed-preview-content-line[hidden] { display: none; }

.embed-preview-stack { display: flex; flex-direction: column; gap: 12px; }
.embed-preview-stack:empty::before { content: "Nothing to preview yet."; color: var(--muted-2); }

.embed-preview {
  background: #2b2d31; /* Discord's actual dark-theme embed background, not the site's own --bg-alt */
  border-radius: 4px;
  border-left: 4px solid var(--accent);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: #f2f3f5;
  min-height: 40px;
  /* "gg sans" is Discord's own typeface - not ours to redistribute, so it's named first only
     for visitors who happen to have it installed locally. Inter (loaded via Google Fonts in
     index.html) is the actual lookalike everyone else gets - closest free match in proportions. */
  font-family: "gg sans", "Inter", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.embed-preview-body { flex: 1; min-width: 0; }
.embed-preview-body:empty::before { content: "Nothing to preview yet."; color: var(--muted-2); }

.embed-preview-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.embed-preview-author img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.embed-preview-title { font-weight: 700; margin-bottom: 6px; }
.embed-preview-title a { color: var(--accent-2); text-decoration: none; }
.embed-preview-title a:hover { text-decoration: underline; }

.embed-preview-description {
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
}

.embed-preview-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.embed-preview-field { flex: 1 1 100%; }
.embed-preview-field.inline { flex: 1 1 30%; min-width: 120px; }

.embed-preview-field-name { font-weight: 700; font-size: 0.8rem; margin-bottom: 2px; }
.embed-preview-field-value { color: var(--muted); font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }

.embed-preview-image {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 8px;
  display: block;
}

.embed-preview-thumbnail {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.embed-preview-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--muted-2);
}
.embed-preview-footer img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

@media (max-width: 900px) {
  .embed-builder-layout { grid-template-columns: 1fr; }
}

/* Below this, the fixed-width sidebar (220px) + preview column (380px) + their gaps leave
   .settings-main too little room to be usable, well before the 860px breakpoint where
   .settings-layout itself switches to a column stack. Drop the preview to its own full-width
   row a bit earlier instead of letting .settings-main get squeezed. */
@media (max-width: 1300px) {
  .embed-preview-column { flex: 1 1 100%; position: static; order: 3; }
}

/* ================= REACTION ROLES ================= */

.rr-table-wrap { overflow-x: auto; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: 10px; }

.rr-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.rr-table th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-2);
  white-space: nowrap;
}

.rr-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.rr-table tbody tr:last-child td { border-bottom: none; }
.rr-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.rr-row-channel { color: var(--accent-2); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rr-row-channel:hover { text-decoration: underline; }

.rr-row-roles { display: flex; flex-wrap: wrap; gap: 6px; max-width: 460px; }

.rr-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  padding: 3px 10px 3px 6px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.rr-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--accent-soft);
  color: var(--accent-2);
  white-space: nowrap;
}
.rr-type-unique { background: rgba(168, 85, 247, 0.16); color: #c084fc; }
.rr-type-verify { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.rr-type-drop { background: rgba(251, 146, 60, 0.16); color: #fb923c; }

.rr-row-edit { font-size: 0.8rem; padding: 6px 14px; }

.rr-builder-modal {
  max-width: 760px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rr-edit-modal { max-width: 620px; max-height: 84vh; overflow-y: auto; }

.rr-edit-jump { display: inline-block; margin-bottom: 16px; font-size: 0.85rem; color: var(--accent-2); }
.rr-edit-jump:hover { text-decoration: underline; }

.rr-edit-actions { margin-top: 18px; justify-content: flex-start; }
.rr-edit-delete { color: #ff5c5c; border-color: rgba(255, 92, 92, 0.35); }
.rr-edit-delete:hover { background: rgba(255, 92, 92, 0.12); border-color: rgba(255, 92, 92, 0.5); }

.rr-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.rr-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.rr-emoji-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.rr-emoji-fallback { font-size: 1.1rem; line-height: 1; }

.rr-option-role { flex: 1; font-size: 0.85rem; color: var(--fg); }

.rr-option-remove {
  background: transparent;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.rr-option-remove:hover { color: #ff5c5c; }

.rr-pending-option {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.rr-pending-emoji-btn {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rr-pending-emoji-btn .rr-emoji-icon { width: 26px; height: 26px; }

.rr-pending-role { flex: 2; min-width: 220px; font-size: 0.95rem; }
.rr-pending-role .role-combobox-trigger { padding: 12px 14px; font-size: 0.95rem; }

.rr-pending-confirm, .rr-pending-cancel { padding: 12px 20px; font-size: 0.9rem; }

.rr-source-toggle { display: flex; gap: 6px; }

.rr-source-tab {
  flex: 1;
  font-family: var(--font);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rr-source-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }

.rr-source-panel { display: flex; flex-direction: column; gap: 16px; }
.rr-source-panel[hidden] { display: none; }

/* ---- Emoji picker modal (shared singleton) ---- */

.emoji-picker-modal {
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.emoji-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.emoji-picker-tabs { display: flex; gap: 6px; }

.emoji-picker-tab {
  font-family: var(--font);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.emoji-picker-tab img { width: 16px; height: 16px; }

.emoji-picker-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }

.emoji-picker-search {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.emoji-picker-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.emoji-picker-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.emoji-picker-category-strip[hidden] { display: none; }

.emoji-picker-category-btn {
  font-family: var(--font);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 5px;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-category-btn:hover { background: var(--accent-soft); border-color: var(--border); }
.emoji-picker-category-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.emoji-picker-category-btn img,
.emoji-picker-category-btn .rr-emoji-icon { width: 100%; height: 100%; object-fit: contain; }

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
  padding-right: 4px;
}

.emoji-picker-tile {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
.emoji-picker-tile:hover { background: var(--accent-soft); border-color: var(--border); }
.emoji-picker-tile img { width: 100%; height: 100%; object-fit: contain; }

.emoji-picker-empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; }

@media (max-width: 640px) {
  .rr-row-roles { max-width: 220px; }
}

/* ================= DISCORD MARKDOWN PREVIEW ================= */

.discord-mention {
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
}

.discord-timestamp { background: rgba(255, 255, 255, 0.08); color: var(--fg); }

.discord-inline-emoji { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: bottom; }

.discord-h1 { display: block; font-size: 1.5em; font-weight: 700; line-height: 1.3; }
.discord-h2 { display: block; font-size: 1.25em; font-weight: 700; line-height: 1.3; }
.discord-h3 { display: block; font-size: 1.1em; font-weight: 700; line-height: 1.3; }

.discord-quote {
  border-left: 4px solid rgba(255, 255, 255, 0.35);
  padding-left: 10px;
  margin: 4px 0;
  color: var(--muted);
}

.discord-spoiler {
  background: #1a1a1e;
  color: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.1s ease;
}
.discord-spoiler.revealed { color: inherit; background: rgba(255, 255, 255, 0.08); cursor: text; }

.discord-code-block {
  background: #1e1f22;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 4px 0;
  overflow-x: auto;
}
.discord-code-block code { font-family: "Consolas", "Menlo", monospace; font-size: 0.82em; white-space: pre; }

.discord-inline-code {
  background: #1e1f22;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.85em;
}