/* ==========================================================================
   Sizing convention: every px value that isn't a border-width, a box-shadow
   offset/blur/spread, or a @media breakpoint (clamp() isn't valid inside a
   media query condition — that's a hard CSS limitation, not a style choice)
   is expressed as clamp(min, Nvw, max) rather than a bare px number, so
   spacing and type scale smoothly with the viewport instead of jumping at
   breakpoints. The formula used throughout: for a target value V (assuming a
   1440px reference width), vw% = round(V / 1440 * 100, 3); min = round(V *
   0.83); max = round(V * 1.17). Nested clamp()/calc()/min() are fine and used
   throughout (e.g. `calc(100vh - clamp(119px, 9.722vw, 161px))`) — this
   applies even inside those. Any new px value added to this file, now or in
   the future, should follow this same convention rather than being left bare.
   ========================================================================== */
:root {
  --bg: #0d1220;
  --bg-elevated: #171c30;
  --bg-card: #111527;
  --border: #262b45;
  --text: #e7e9ee;
  --text-dim: #9298a8;
  --accent: #4f56d6;
  --accent-hover: #6366f1;
  --accent-2: #2dd4e8;
  /* RGB triplets (no "rgb(...)" wrapper) alongside their hex counterparts above,
     specifically so rgba(var(--accent-rgb), 0.35)-style glows and tints can follow
     whatever a theme sets --accent/--accent-2 to, rather than staying stuck on the
     default blue/cyan regardless of the active theme — plain hex custom properties
     can't have their opacity adjusted on their own without this. Any theme that
     overrides --accent or --accent-2 should set the matching -rgb pair alongside it. */
  --accent-rgb: 79, 86, 214;
  --accent-2-rgb: 45, 212, 232;
  --stat-purple: #a855f7;
  --stat-orange: #f0973a;
  --stat-pink: #ec4899;
  --success: #3ba55d;
  --danger: #ed4245;
  --warn: #f0b232;
  --radius: clamp(10px, 0.833vw, 14px);
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), 0.16), transparent 45%),
              radial-gradient(circle at 85% 15%, rgba(var(--accent-2-rgb), 0.08), transparent 40%),
              radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.07), transparent 50%),
              var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, .brand, .card h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---------- Login screen ---------- */
.login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: clamp(17px, 1.389vw, 23px);
  padding: clamp(48px, 3.889vw, 64px) clamp(41px, 3.333vw, 55px);
  text-align: center;
  max-width: clamp(323px, 26.389vw, 437px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 0 clamp(60px, 5vw, 90px) rgba(var(--accent-rgb), 0.12);
}
/* A wider variant for the first-run setup wizard's later steps (the .env form, the
   restore form) — these carry more fields and per-field guidance text than a login or
   the original single-purpose setup card was ever designed to hold. */
.login-card-wide {
  max-width: clamp(480px, 39.167vw, 620px);
}
.login-card h1 { font-size: clamp(20px, 1.667vw, 28px); margin: clamp(17px, 1.389vw, 23px) 0 clamp(7px, 0.556vw, 9px); }
.login-card p { color: var(--text-dim); margin-bottom: clamp(24px, 1.944vw, 32px); font-size: clamp(12px, 0.972vw, 16px); line-height: 1.5; }

.setup-form { text-align: left; }
.setup-form .field { margin-bottom: clamp(14px, 1.111vw, 18px); }
.field-guidance {
  font-size: clamp(11px, 0.903vw, 15px);
  color: var(--text-dim);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(7px, 0.556vw, 9px);
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  margin-top: clamp(5px, 0.417vw, 7px);
  line-height: 1.5;
}
.field-guidance a { color: var(--accent); }
.setup-choice-row { display: flex; flex-direction: column; gap: clamp(10px, 0.833vw, 14px); text-align: left; }
.setup-choice-btn {
  display: block;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(10px, 0.833vw, 14px);
  padding: clamp(14px, 1.111vw, 18px) clamp(16px, 1.25vw, 21px);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.setup-choice-btn:hover { border-color: var(--accent); background: var(--bg-card); }
.setup-choice-btn .choice-title { font-weight: 700; font-size: clamp(14px, 1.111vw, 18px); margin-bottom: clamp(3px, 0.278vw, 5px); }
.setup-choice-btn .choice-desc { color: var(--text-dim); font-size: clamp(12px, 0.972vw, 16px); line-height: 1.4; }
.file-drop {
  display: block;
  border: 1px dashed var(--border);
  border-radius: clamp(8px, 0.694vw, 12px);
  padding: clamp(14px, 1.111vw, 18px);
  text-align: center;
  cursor: pointer;
}
.file-drop input[type="file"] { width: 100%; }

.auth-tabs {
  display: flex;
  gap: clamp(3px, 0.278vw, 5px);
  background: var(--bg-elevated);
  border-radius: clamp(8px, 0.694vw, 12px);
  padding: clamp(3px, 0.278vw, 5px);
  margin-bottom: clamp(17px, 1.389vw, 23px);
}
.auth-tab {
  flex: 1;
  padding: clamp(7px, 0.556vw, 9px) clamp(10px, 0.833vw, 14px);
  border-radius: clamp(6px, 0.486vw, 8px);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: clamp(11px, 0.903vw, 15px);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active { background: var(--accent); color: white; }
.auth-panel { text-align: left; }
.logo-dot {
  width: clamp(37px, 3.056vw, 51px); height: clamp(37px, 3.056vw, 51px); border-radius: clamp(10px, 0.833vw, 14px);
  background: linear-gradient(135deg, var(--accent), #8a91f7);
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
}
.login-logo {
  /* Deliberately larger than the .logo-dot badge this shares a slot with: on the
     login screen the logo is the only branding on the page, whereas in the
     sidebar it sits beside a wordmark and competes with navigation. */
  width: clamp(88px, 7.5vw, 128px); height: clamp(88px, 7.5vw, 128px);
  border-radius: clamp(16px, 1.4vw, 24px);
  object-fit: contain;
  display: inline-block;
}

/* Match the fallback badge to the custom logo on the login screen only, so the
   two look the same size whether or not branding has been uploaded. */
.login-screen .logo-dot {
  width: clamp(88px, 7.5vw, 128px); height: clamp(88px, 7.5vw, 128px);
  border-radius: clamp(16px, 1.4vw, 24px);
}

/* ---------- App shell ---------- */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: clamp(221px, 18.056vw, 299px);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.3), 1px 0 0 rgba(var(--accent-rgb), 0.06);
  display: flex;
  flex-direction: column;
  padding: clamp(17px, 1.389vw, 23px) clamp(12px, 0.972vw, 16px);
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-top { margin-bottom: clamp(15px, 1.25vw, 21px); }
.sidebar-banner-btn {
  display: block;
  width: calc(100% + clamp(12px, 0.972vw, 16px) * 2); /* bleeds past the sidebar's clamp(12px, 0.972vw, 16px) side padding, so it's flush with both edges */
  margin: clamp(-23px, -1.389vw, -17px) calc(clamp(12px, 0.972vw, 16px) * -1) clamp(12px, 0.972vw, 16px) calc(clamp(12px, 0.972vw, 16px) * -1); /* pulls up flush with the sidebar's top edge too */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.sidebar-banner-btn:hover { opacity: 0.85; }
.sidebar-banner {
  display: block;
  width: 100%;
  object-fit: cover;
}
.brand {
  display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px);
  font-weight: 700; font-size: clamp(14px, 1.111vw, 18px); padding: clamp(5px, 0.417vw, 7px) clamp(7px, 0.556vw, 9px) clamp(14px, 1.111vw, 18px);
}
.brand-btn {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  border-radius: clamp(7px, 0.556vw, 9px);
  transition: background 0.15s ease;
}
.brand-btn:hover { background: var(--bg-card); }
.brand .logo-dot { width: clamp(19px, 1.528vw, 25px); height: clamp(19px, 1.528vw, 25px); border-radius: clamp(5px, 0.417vw, 7px); }
.brand .brand-logo { width: clamp(19px, 1.528vw, 25px); height: clamp(19px, 1.528vw, 25px); border-radius: clamp(5px, 0.417vw, 7px); object-fit: contain; flex: 0 0 auto; }
.brand #brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.brand-subtitle { font-size: clamp(10px, 0.764vw, 12px); font-weight: 500; color: var(--text-dim); }

/* The name of whichever server is currently selected — sits between the branding
   above and the nav below, so it's clear which server every page underneath actually
   belongs to (the page title alone only ever said e.g. "AutoMod", never which server's
   AutoMod). Collapses to nothing and takes up no space at all on the Dashboard picker
   itself, where no server is selected. */
.sidebar-server-name {
  padding: 0 clamp(7px, 0.556vw, 9px) clamp(12px, 0.972vw, 16px);
  margin-top: calc(clamp(14px, 1.111vw, 18px) * -1); /* pulls up into .brand's own bottom padding, so this reads as one continuous block instead of two stacked gaps */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-server-name:empty { display: none; }
.sidebar-server-name small { color: var(--text-dim); font-size: clamp(10px, 0.833vw, 14px); }

/* ---------- Dashboard home: hero, stat cards, activity columns ---------- */
.dash-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.5vw, 28px);
  border-radius: clamp(16px, 1.25vw, 20px);
  padding: clamp(28px, 2.361vw, 38px) clamp(28px, 2.361vw, 38px);
  margin-bottom: clamp(20px, 1.667vw, 28px);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.dash-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), 0.35), transparent 45%),
              radial-gradient(circle at 60% 90%, rgba(var(--accent-2-rgb), 0.15), transparent 40%);
  pointer-events: none;
}
.dash-hero-content { position: relative; min-width: 0; }
.dash-hero-greeting { color: var(--text-dim); font-size: clamp(13px, 1.042vw, 17px); }
.dash-hero-name { margin: clamp(2px, 0.208vw, 4px) 0 clamp(8px, 0.694vw, 12px); font-size: clamp(26px, 2.222vw, 36px); }
.dash-hero-sub { margin: 0 0 clamp(14px, 1.111vw, 18px); color: var(--text-dim); font-size: clamp(12px, 0.972vw, 16px); max-width: 60ch; }
.dash-hero-pills { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.694vw, 12px); }
.dash-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: clamp(5px, 0.417vw, 7px) clamp(10px, 0.833vw, 14px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: clamp(11px, 0.903vw, 14px);
  font-weight: 600;
  color: var(--text-dim);
}
.dash-hero-pill svg { flex-shrink: 0; }
.dash-hero-pill-online { color: var(--success); border-color: rgba(59,165,93,0.3); }
.dash-hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: online-pulse 2s ease-in-out infinite; }
.dash-hero-art {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  flex-shrink: 0;
  color: var(--accent);
  text-align: center;
}
.dash-hero-tagline { font-family: var(--font-display); font-size: clamp(13px, 1.042vw, 16px); font-weight: 600; color: var(--text); line-height: 1.3; }
@media (max-width: 900px) { .dash-hero-art { display: none; } }

.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 12.5vw, 190px), 1fr));
  gap: clamp(14px, 1.111vw, 18px);
  margin-bottom: clamp(20px, 1.667vw, 28px);
}
.dash-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 1.25vw, 20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.dash-stat-icon {
  width: clamp(32px, 2.5vw, 40px);
  height: clamp(32px, 2.5vw, 40px);
  border-radius: clamp(8px, 0.694vw, 12px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(10px, 0.833vw, 14px);
}
.dash-stat-icon.c-blue { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.dash-stat-icon.c-purple { background: rgba(168,85,247,0.16); color: var(--stat-purple); }
.dash-stat-icon.c-cyan { background: rgba(var(--accent-2-rgb), 0.16); color: var(--accent-2); }
.dash-stat-icon.c-orange { background: rgba(240,151,58,0.16); color: var(--stat-orange); }
.dash-stat-label { color: var(--text-dim); font-size: clamp(11px, 0.903vw, 15px); margin-bottom: clamp(3px, 0.278vw, 5px); }
.dash-stat-value { font-family: var(--font-display); font-size: clamp(20px, 1.667vw, 26px); font-weight: 700; margin-bottom: clamp(6px, 0.5vw, 8px); }
.sparkline { display: block; width: 100%; height: clamp(24px, 2vw, 32px); }

.dash-activity-commands-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  margin-bottom: clamp(20px, 1.667vw, 28px);
}
@media (max-width: 1050px) { .dash-activity-commands-row { grid-template-columns: 1fr; } }

.dash-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: clamp(10px, 0.764vw, 12px);
  font-weight: 600;
  color: var(--success);
  background: rgba(59,165,93,0.12);
  border-radius: 999px;
  padding: 3px 9px;
}
.dash-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: online-pulse 2s ease-in-out infinite; }
.dash-last-updated { font-size: clamp(10px, 0.764vw, 12px); font-weight: 400; color: var(--text-dim); }
.dash-chart-legend { display: flex; flex-wrap: wrap; gap: clamp(12px, 1vw, 18px); margin: clamp(10px, 0.833vw, 14px) 0; }
.dash-chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(11px, 0.903vw, 14px); color: var(--text-dim); }
.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.dash-top-commands-list { display: flex; flex-direction: column; gap: clamp(12px, 1vw, 16px); margin-top: clamp(10px, 0.833vw, 14px); }
.dash-top-command-row { display: flex; align-items: center; gap: clamp(10px, 0.833vw, 14px); }
.dash-top-command-icon {
  width: clamp(28px, 2.222vw, 34px); height: clamp(28px, 2.222vw, 34px);
  border-radius: clamp(8px, 0.694vw, 10px);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-top-command-main { flex: 1; min-width: 0; }
.dash-top-command-head { display: flex; justify-content: space-between; font-size: clamp(12px, 0.972vw, 15px); font-weight: 600; margin-bottom: 5px; }
.dash-top-command-head span:last-child { color: var(--text-dim); font-weight: 500; }
.dash-top-command-bar { height: 5px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; }
.dash-top-command-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }

.dash-promo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: clamp(20px, 1.667vw, 26px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
}
.dash-promo-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(var(--accent-rgb), 0.3), transparent 60%);
  pointer-events: none;
}
.dash-promo-icon { position: relative; color: var(--accent); margin-bottom: 10px; }
.dash-promo-title { position: relative; font-family: var(--font-display); font-size: clamp(16px, 1.319vw, 20px); font-weight: 700; }
.dash-promo-sub { position: relative; font-size: clamp(11px, 0.903vw, 14px); color: var(--text-dim); margin-bottom: clamp(10px, 0.833vw, 14px); }
.dash-promo-text { position: relative; margin: 0; font-size: clamp(11px, 0.903vw, 14px); color: var(--text-dim); line-height: 1.5; }

.dash-columns {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}
.dash-col-main, .dash-col-side { min-width: 0; }
.dash-activity-list { display: flex; flex-direction: column; }
.dash-activity-row {
  display: flex; align-items: center; gap: clamp(10px, 0.833vw, 14px);
  padding: clamp(8px, 0.694vw, 12px) 0;
  border-bottom: 1px solid var(--border);
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-icon {
  width: clamp(28px, 2.222vw, 32px);
  height: clamp(28px, 2.222vw, 32px);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.dash-activity-text { min-width: 0; flex: 1; }
.dash-activity-main { font-size: clamp(12px, 0.972vw, 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.dash-activity-sub { color: var(--text-dim); font-size: clamp(10px, 0.833vw, 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-time { color: var(--text-dim); font-size: clamp(10px, 0.833vw, 14px); flex: 0 0 auto; }

.dashboard-home-servers { min-width: 0; }

.dashboard-guild-list {
  display: flex;
  flex-direction: column;
}
.dashboard-guild-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.833vw, 14px);
  width: 100%;
  padding: clamp(10px, 0.833vw, 14px) clamp(4px, 0.333vw, 6px);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: background 0.15s ease;
}
.dashboard-guild-list .dashboard-guild-row:first-child { border-top: none; padding-top: 0; }
.dashboard-guild-row:hover { background: var(--bg-elevated); border-radius: var(--radius); }
.dashboard-guild-icon {
  width: clamp(38px, 3.056vw, 46px);
  height: clamp(38px, 3.056vw, 46px);
  border-radius: clamp(10px, 0.833vw, 14px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  flex: 0 0 auto;
}
.dashboard-guild-icon img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-guild-info { flex: 1; min-width: 0; }
.dashboard-guild-name {
  font-weight: 700;
  font-size: clamp(12px, 0.972vw, 15px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-guild-members { font-size: clamp(11px, 0.833vw, 13px); color: var(--text-dim); }
.dashboard-guild-arrow { color: var(--text-dim); flex: 0 0 auto; }
.dashboard-online-dot {
  width: clamp(7px, 0.556vw, 9px);
  height: clamp(7px, 0.556vw, 9px);
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(59,165,93,0.2);
  animation: online-pulse 2.4s ease-in-out infinite;
}
.dashboard-online-dot-muted { background: var(--text-dim); animation: none; box-shadow: none; opacity: 0.4; }
@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(59,165,93,0.2); }
  50% { box-shadow: 0 0 0 5px rgba(59,165,93,0.05); }
}

/* ---------- Moderator: member list, context menu, action modal ---------- */
.member-section-label {
  font-size: clamp(11px, 0.903vw, 15px);
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: clamp(5px, 0.417vw, 7px);
}
.member-list {
  display: flex;
  flex-direction: column;
}
.member-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.694vw, 12px);
  padding: clamp(4px, 0.347vw, 6px) clamp(7px, 0.556vw, 9px);
  border-radius: clamp(5px, 0.417vw, 7px);
  cursor: context-menu;
  transition: background 0.1s ease;
  user-select: none;
}
.member-row:hover { background: var(--bg-elevated); }
.member-row-avatar {
  position: relative;
  width: clamp(23px, 1.944vw, 33px);
  height: clamp(23px, 1.944vw, 33px);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #8a91f7);
  font-size: clamp(10px, 0.833vw, 14px);
  font-weight: 700;
  color: white;
  flex: 0 0 auto;
}
.member-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-status-dot {
  position: absolute;
  bottom: clamp(-1px, -0.069vw, -1px);
  right: clamp(-1px, -0.069vw, -1px);
  width: clamp(7px, 0.625vw, 11px);
  height: clamp(7px, 0.625vw, 11px);
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.member-row-name { font-size: clamp(12px, 0.972vw, 16px); font-weight: 600; color: var(--text); }

.moderator-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}
.moderator-column { display: flex; flex-direction: column; min-width: 0; }

.security-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}
.security-column { display: flex; flex-direction: column; min-width: 0; }

/* A genuine grid (not two independent flex columns) so each row's height is set by its
   tallest cell and a card lines up with its counterpart on the other side — two
   separate flex-stacks only line up by coincidence once the content above them differs
   in height, which a form full of fields versus a compact preview box always will. */
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}

.member-list-scroll {
  max-height: clamp(420px, 34.7vw, 600px);
  overflow-y: auto;
  padding-right: clamp(5px, 0.417vw, 7px);
}
.mod-log-scroll {
  max-height: clamp(420px, 34.7vw, 600px);
  overflow-y: auto;
  padding-right: clamp(5px, 0.417vw, 7px);
}
.mod-log-entry {
  padding: clamp(7px, 0.556vw, 9px) clamp(3px, 0.278vw, 5px);
  border-bottom: 1px solid var(--border);
  font-size: clamp(11px, 0.903vw, 15px);
}
.mod-log-entry:last-child { border-bottom: none; }
.mod-log-entry .meta { color: var(--text-dim); font-size: clamp(10px, 0.833vw, 14px); margin-top: clamp(2px, 0.139vw, 2px); }
/* Sized for roughly 15 rows of .list-item (its padding + margin + one line of text
   comes to about 50px per row at a typical viewport) before scrolling kicks in —
   taller than .mod-log-scroll/.member-list-scroll above since those were sized for
   their own, denser row heights, not this one. */
.birthday-list-scroll {
  max-height: clamp(622px, 52.083vw, 877px);
  overflow-y: auto;
  padding-right: clamp(5px, 0.417vw, 7px);
}
/* Same .list-item row height assumption as .birthday-list-scroll above, scaled up for
   roughly 20 rows instead of 15 (the point past which the Music queue is expected to
   need scrolling) — proportioned from that same class's own clamp values rather than
   picked independently, so both stay visually consistent if that row height is ever
   retuned. */
.music-queue-scroll {
  max-height: clamp(830px, 69.44vw, 1170px);
  overflow-y: auto;
  padding-right: clamp(5px, 0.417vw, 7px);
}

.member-context-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: clamp(125px, 10.417vw, 176px);
  padding: clamp(5px, 0.417vw, 7px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.member-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(7px, 0.556vw, 9px) clamp(10px, 0.833vw, 14px);
  background: none;
  border: none;
  border-radius: clamp(7px, 0.556vw, 9px);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(11px, 0.903vw, 15px);
  cursor: pointer;
}
.member-context-menu button:hover { background: var(--bg-elevated); }

.mod-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
}
.mod-modal {
  width: min(clamp(349px, 29.167vw, 491px), calc(100vw - clamp(33px, 2.778vw, 47px)));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 1.667vw, 28px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.mod-modal h3 { margin-top: 0; }

.nav { flex: 1; display: flex; flex-direction: column; gap: clamp(2px, 0.139vw, 2px); margin-top: clamp(10px, 0.833vw, 14px); overflow-y: auto; }
.nav-divider {
  height: clamp(1px, 0.069vw, 1px);
  margin: clamp(8px, 0.694vw, 12px) clamp(6px, 0.556vw, 8px) clamp(10px, 0.833vw, 14px);
  background: linear-gradient(to right, transparent, var(--border) 15%, var(--border) 85%, transparent);
}
.nav-item {
  display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px);
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  border-radius: clamp(8px, 0.694vw, 12px);
  color: var(--text-dim);
  cursor: pointer;
  font-size: clamp(12px, 0.972vw, 16px);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.nav-item:hover { background: var(--bg-card); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  color: white;
  box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.35);
}
.nav-item-icon { flex-shrink: 0; opacity: 0.85; }
.nav-item.active .nav-item-icon { opacity: 1; }
.nav-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-submenu .nav-subitem .nav-item-icon { width: 15px; height: 15px; }

/* ---------- Collapsible "Settings" nav group ---------- */
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
}
.nav-group-icon { flex: 0 0 auto; opacity: 0.85; }
.nav-group-label { flex: 1; }
.nav-chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.nav-group.open > .nav-group-toggle .nav-chevron { transform: rotate(90deg); }

.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.nav-submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.139vw, 2px);
}
.nav-group.open .nav-submenu { grid-template-rows: 1fr; }
.nav-submenu .nav-subitem {
  padding-left: clamp(29px, 2.361vw, 39px);
  font-size: clamp(11px, 0.903vw, 15px);
}
.nav-submenu-inner .nav-subitem:first-child { margin-top: clamp(5px, 0.417vw, 7px); }

.dash-logo-preview {
  width: clamp(61px, 5vw, 83px);
  height: clamp(61px, 5vw, 83px);
  border-radius: clamp(10px, 0.833vw, 14px);
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.dash-logo-preview img { width: 100%; height: 100%; object-fit: contain; }

.dash-banner-preview {
  width: 100%;
  max-width: clamp(221px, 18.056vw, 299px);
  min-height: clamp(51px, 4.167vw, 69px);
  border-radius: clamp(7px, 0.556vw, 9px);
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  margin-bottom: clamp(10px, 0.833vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-banner-preview img { width: 100%; height: auto; display: block; }
.dash-banner-preview .empty-state { margin: 0; padding: clamp(14px, 1.111vw, 18px); font-size: clamp(10px, 0.833vw, 14px); }

/* ---------- Menu Editor (drag & drop) ---------- */
#menu-editor-list { display: flex; flex-direction: column; gap: clamp(5px, 0.417vw, 7px); }
.menu-editor-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.694vw, 12px);
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(7px, 0.556vw, 9px);
  font-size: clamp(11px, 0.903vw, 15px);
  cursor: grab;
}
.menu-editor-row:active { cursor: grabbing; }
.menu-editor-row.dragging { opacity: 0.4; }
.menu-editor-row-label { flex: 1; }
.drag-handle { color: var(--text-dim); letter-spacing: clamp(-2px, -0.139vw, -2px); flex: 0 0 auto; }
.menu-editor-group { border: 1px dashed var(--border); border-radius: clamp(8px, 0.694vw, 12px); padding: clamp(7px, 0.556vw, 9px); }
.menu-editor-group-header { background: var(--bg-card); margin-bottom: clamp(5px, 0.417vw, 7px); cursor: grab; }
.menu-editor-sublist { display: flex; flex-direction: column; gap: clamp(5px, 0.417vw, 7px); padding-left: clamp(15px, 1.25vw, 21px); min-height: clamp(7px, 0.556vw, 9px); }
.menu-editor-subrow { background: var(--bg-card); }
.menu-editor-empty {
  color: var(--text-dim);
  font-size: clamp(10px, 0.833vw, 14px);
  font-style: italic;
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  border: 1px dashed var(--border);
  border-radius: clamp(7px, 0.556vw, 9px);
  text-align: center;
}
/* The line that tracks the pointer during a drag, showing exactly where the button
   will land — this is what replaces ambiguous whole-row highlighting. */
.menu-editor-insert-line {
  height: clamp(3px, 0.208vw, 3px);
  border-radius: clamp(2px, 0.139vw, 2px);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(88,101,242,0.25);
  margin: clamp(2px, 0.139vw, 2px) 0;
}


.sidebar-bottom { border-top: 1px solid var(--border); padding-top: clamp(12px, 0.972vw, 16px); margin-top: clamp(8px, 0.694vw, 12px); }
.user-avatar {
  width: clamp(26px, 2.083vw, 34px); height: clamp(26px, 2.083vw, 34px); border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--bg-elevated);  /* shows while the CDN image is still loading */
}
.user-avatar-sm { width: clamp(22px, 1.736vw, 28px); height: clamp(22px, 1.736vw, 28px); }
.login-note {
  font-size: clamp(11px, 0.903vw, 14px); color: var(--text-dim);
  margin-top: clamp(10px, 0.833vw, 14px); line-height: 1.5;
}
/* Kept even though no template renders it any more: a custom theme in
   dashboard/themes/ may still reference it, and themes are user files this
   project doesn't get to edit. */
.user-avatar-fallback {
  width: clamp(26px, 2.083vw, 34px); height: clamp(26px, 2.083vw, 34px); border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8a91f7);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: clamp(11px, 0.903vw, 15px); font-weight: 700;
  flex-shrink: 0;
}
.logout-link { display: block; padding: clamp(7px, 0.556vw, 9px); font-size: clamp(11px, 0.903vw, 15px); color: var(--text-dim); text-decoration: none; }
.logout-link:hover { color: var(--danger); }

.sidebar-status-pill {
  display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px);
  width: 100%;
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sidebar-status-pill:hover { border-color: var(--accent); }
.sidebar-status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  animation: online-pulse 2s ease-in-out infinite;
}
.sidebar-status-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.sidebar-status-label { font-size: clamp(11px, 0.903vw, 14px); font-weight: 600; }
.sidebar-status-version { font-size: clamp(10px, 0.764vw, 12px); color: var(--text-dim); }
.sidebar-status-pill svg { color: var(--text-dim); flex-shrink: 0; }

.content { flex: 1; padding: clamp(27px, 2.222vw, 37px) clamp(34px, 2.778vw, 46px); max-width: clamp(833px, 68.056vw, 1127px); }
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(20px, 1.667vw, 28px);
  gap: 14px;
}
.page-title-row {
  font-size: clamp(22px, 1.806vw, 30px);
  margin: 0 0 clamp(20px, 1.667vw, 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-title-row:empty { display: none; margin: 0; }

/* Hidden on desktop — the sidebar is always visible there, so there's nothing for this
   button to open. Only shown (see the mobile media query below) once the sidebar
   switches to its off-canvas, hamburger-triggered behavior. */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(33px, 2.778vw, 47px);
  height: clamp(33px, 2.778vw, 47px);
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: clamp(8px, 0.694vw, 12px);
  color: var(--text);
  cursor: pointer;
}
.mobile-menu-btn:hover { background: var(--bg-elevated); }

.topbar { gap: clamp(12px, 1vw, 20px); }
/* Pins the bell/user cluster to the right end of the bar directly, rather than via
   justify-content dividing space between it and a sibling (previously the search bar,
   now nothing) — that approach depends on how much space that other sibling actually
   claims, which is exactly the kind of thing that can differ for a moment while a page
   is still loading versus once it's settled. margin-left: auto pushes this cluster to
   the far edge on its own, independent of whatever else is (or isn't) in the bar. */
.topbar-actions { display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px); flex-shrink: 0; margin-left: auto; }
.topbar-icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: clamp(36px, 2.917vw, 44px); height: clamp(36px, 2.917vw, 44px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
}
.topbar-icon-btn:hover { color: var(--text); border-color: var(--accent); }
.topbar-bell-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elevated);
}
.topbar-bell-wrap, .topbar-user-wrap { position: relative; }
.topbar-bell-panel, .topbar-user-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  z-index: 40;
  overflow: hidden;
}
/* Wider than the shared default above — a real name, a channel tag, and a relative
   timestamp ("DutchElite33", "#TheCrew", "6d ago") need more room than the plain
   "Log out" link the user panel holds, or the timestamp column crowds against the
   edge with nothing to separate it. */
.topbar-bell-panel { min-width: 340px; }
.topbar-bell-panel .dash-activity-list { padding: 0 clamp(12px, 1vw, 16px) clamp(4px, 0.333vw, 6px); }
.topbar-bell-panel-header {
  padding: clamp(10px, 0.833vw, 14px) clamp(12px, 1vw, 16px);
  font-size: clamp(12px, 0.972vw, 14px);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.topbar-bell-empty { padding: clamp(16px, 1.333vw, 22px); text-align: center; color: var(--text-dim); font-size: clamp(12px, 0.972vw, 14px); }
.topbar-user-panel { min-width: 160px; padding: 6px; }
.topbar-user-btn {
  display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(5px, 0.417vw, 7px) clamp(10px, 0.833vw, 14px) clamp(5px, 0.417vw, 7px) clamp(5px, 0.417vw, 7px);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  height: clamp(36px, 2.917vw, 44px);
}
.topbar-user-btn:hover { border-color: var(--accent); }
.topbar-user-btn span { font-size: clamp(12px, 0.972vw, 15px); font-weight: 600; white-space: nowrap; }
.topbar-user-btn svg { color: var(--text-dim); flex-shrink: 0; }
.topbar-user-panel .logout-link { border-radius: calc(var(--radius) - 3px); padding: clamp(8px, 0.694vw, 11px) clamp(10px, 0.833vw, 14px); }
.topbar-user-panel .logout-link:hover { background: var(--bg-elevated); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
}

/* ---------- Toast notifications (replaces blocking alert() dialogs) ---------- */
#toast-container {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 1.944vw, 32px);
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(8px, 0.694vw, 12px);
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.111vw, 18px);
  max-width: min(clamp(408px, 33.333vw, 552px), 90vw);
  padding: clamp(12px, 0.972vw, 16px) clamp(14px, 1.111vw, 18px) clamp(12px, 0.972vw, 16px) clamp(15px, 1.25vw, 21px);
  background: #111214;
  border: 1px solid var(--border);
  border-radius: clamp(10px, 0.833vw, 14px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  color: var(--text);
  font-size: clamp(12px, 0.972vw, 16px);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(clamp(14px, 1.111vw, 18px)) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.toast-visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-message { flex: 1; line-height: 1.4; }
.toast-ok {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(11px, 0.903vw, 15px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  padding: clamp(5px, 0.417vw, 7px) clamp(7px, 0.556vw, 9px);
  border-radius: clamp(5px, 0.417vw, 7px);
  font-family: inherit;
}
.toast-ok:hover { background: rgba(88,101,242,0.15); }
.toast.toast-confirm { gap: clamp(10px, 0.833vw, 14px); }
.toast-cancel { color: var(--text-dim); }
.toast-cancel:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.toast-ok.toast-danger { color: var(--danger); }
.toast-ok.toast-danger:hover { background: rgba(237,66,69,0.15); }
.toast.toast-prompt { flex-wrap: wrap; }
.toast-input {
  flex: 1 1 100%;
  order: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: clamp(5px, 0.417vw, 7px);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(12px, 0.972vw, 16px);
  padding: clamp(6px, 0.5vw, 8px) clamp(9px, 0.694vw, 12px);
}
.toast-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Cards / forms ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(19px, 1.528vw, 25px) clamp(20px, 1.667vw, 28px);
  margin-bottom: clamp(17px, 1.389vw, 23px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.02) inset;
}
.card h3 { margin: 0 0 clamp(3px, 0.278vw, 5px); font-size: clamp(13px, 1.042vw, 17px); }
/* A card's title sharing its row with buttons/actions (an "Add" button, a "Close"
   button, and similar) needs its own margin zeroed out — otherwise the title's
   normal bottom margin stacks awkwardly with the row's own height once a taller
   sibling (a button) is in it. But zeroing it out left nothing to separate that
   row from a .desc line directly underneath, which .desc itself doesn't supply
   (it only ever had its own margin-bottom, never a margin-top) — so this row
   pattern provides the right spacing itself, once, rather than every place that
   uses it needing its own one-off inline margin. */
.card-header-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 0.833vw, 14px);
  margin-bottom: clamp(10px, 0.833vw, 14px);
}
.card-header-row h3 { margin: 0; }
.card .desc { color: var(--text-dim); font-size: clamp(11px, 0.903vw, 15px); margin-bottom: clamp(14px, 1.111vw, 18px); }

.field { margin-bottom: clamp(14px, 1.111vw, 18px); }
.field label { display: block; font-size: clamp(11px, 0.903vw, 15px); font-weight: 600; margin-bottom: clamp(5px, 0.417vw, 7px); color: var(--text-dim); }
.field .hint { font-size: clamp(10px, 0.833vw, 14px); color: var(--text-dim); margin-top: clamp(3px, 0.278vw, 5px); }

.checkbox-row {
  display: flex; align-items: center; gap: clamp(8px, 0.694vw, 12px);
  font-size: clamp(12px, 0.972vw, 15px);
  margin-bottom: clamp(10px, 0.833vw, 14px);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }

.cc-code-editor {
  width: 100%;
  min-height: clamp(160px, 13.333vw, 220px);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.5;
  resize: vertical;
  white-space: pre;
  tab-size: 2;
}

.cc-function-ref { max-height: clamp(360px, 30vw, 480px); overflow-y: auto; margin-top: clamp(10px, 0.833vw, 14px); }
.cc-function-category { margin-bottom: clamp(16px, 1.333vw, 22px); }
.cc-function-category-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 0.972vw, 15px);
  color: var(--accent);
  margin-bottom: clamp(8px, 0.694vw, 12px);
  padding-bottom: clamp(5px, 0.417vw, 7px);
  border-bottom: 1px solid var(--border);
}
.cc-function-row { margin-bottom: clamp(9px, 0.75vw, 12px); }
.cc-function-row code {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: clamp(11px, 0.903vw, 13px);
  color: var(--accent-2);
  margin-bottom: 2px;
}
.cc-function-desc { font-size: clamp(11px, 0.903vw, 14px); color: var(--text-dim); }

input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%;
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  border-radius: clamp(7px, 0.556vw, 9px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: clamp(12px, 0.972vw, 16px);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: clamp(60px, 4.861vw, 80px); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }

.row { display: flex; gap: clamp(14px, 1.111vw, 18px); }
.row > .field { flex: 1; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: clamp(8px, 0.694vw, 12px) 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .label { font-size: clamp(12px, 0.972vw, 16px); font-weight: 500; }
.toggle-row .sub { font-size: clamp(10px, 0.833vw, 14px); color: var(--text-dim); }

/* ---------- General page: module cards ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(17px, 1.389vw, 23px);
  align-items: stretch;
}
.module-grid .card {
  margin-bottom: 0;
  padding: clamp(20px, 1.667vw, 28px) clamp(22px, 1.806vw, 30px);
  display: flex;
  align-items: center;
}
.module-grid .toggle-row {
  width: 100%;
  padding: 0;
  border-bottom: none;
  gap: clamp(14px, 1.111vw, 18px);
}
.module-grid .toggle-row .label { font-size: clamp(14px, 1.111vw, 18px); font-weight: 700; margin-bottom: clamp(5px, 0.417vw, 7px); }
.module-grid .toggle-row .sub { font-size: clamp(11px, 0.903vw, 15px); line-height: 1.5; }

@media (max-width: 1200px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .module-grid { grid-template-columns: 1fr; }
}

/* ---------- Logging module ---------- */
.log-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}
.log-column { display: flex; flex-direction: column; gap: clamp(20px, 1.667vw, 28px); min-width: 0; }
.automod-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
}
.automod-column { display: flex; flex-direction: column; gap: clamp(20px, 1.667vw, 28px); min-width: 0; }
.multi-select { padding: clamp(5px, 0.417vw, 7px); }
.multi-select option { padding: clamp(7px, 0.556vw, 9px) clamp(8px, 0.694vw, 12px); border-radius: clamp(5px, 0.417vw, 7px); }
.log-event-row { cursor: default; }
.log-event-edit {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: clamp(12px, 0.972vw, 16px);
  padding: clamp(5px, 0.417vw, 7px) clamp(7px, 0.556vw, 9px);
  border-radius: clamp(5px, 0.417vw, 7px);
  margin-left: clamp(7px, 0.556vw, 9px);
}
.log-event-edit:hover { background: var(--bg-card); color: var(--accent); }

.card-drag-header { display: flex; align-items: center; gap: clamp(7px, 0.556vw, 9px); margin-bottom: clamp(3px, 0.278vw, 5px); }
.card-drag-header h3 { margin: 0; }
.log-drag-handle {
  color: var(--text-dim);
  letter-spacing: clamp(-2px, -0.139vw, -2px);
  flex: 0 0 auto;
  cursor: grab;
  padding: clamp(2px, 0.139vw, 2px) clamp(3px, 0.278vw, 5px);
  border-radius: clamp(3px, 0.278vw, 5px);
  user-select: none;
  -webkit-user-select: none;
}
.log-drag-handle:hover { background: var(--bg-card); color: var(--text); }
.log-block.dragging { opacity: 0.4; }
.log-column { min-height: clamp(10px, 0.833vw, 14px); }

@media (max-width: 1050px) {
  .log-columns { grid-template-columns: 1fr; }
  .dash-columns { grid-template-columns: 1fr; }
}

.switch { position: relative; width: clamp(36px, 2.917vw, 48px); height: clamp(20px, 1.667vw, 28px); flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: clamp(20px, 1.667vw, 28px); transition: 0.2s; }
.slider::before { content: ""; position: absolute; height: clamp(15px, 1.25vw, 21px); width: clamp(15px, 1.25vw, 21px); left: clamp(3px, 0.208vw, 3px); bottom: clamp(3px, 0.208vw, 3px); background: white; border-radius: 50%; transition: 0.2s; }
input:checked + .slider { background: var(--accent); }
input:checked + .slider::before { transform: translateX(clamp(15px, 1.25vw, 21px)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(8px, 0.625vw, 10px) clamp(14px, 1.111vw, 18px);
  border-radius: clamp(7px, 0.556vw, 9px);
  border: none;
  font-size: clamp(11px, 0.903vw, 15px);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; }
.btn-primary:hover { box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-danger { background: rgba(237,66,69,0.12); color: var(--danger); }
.btn-danger:hover { background: rgba(237,66,69,0.2); }
/* Discord's own brand colour rather than this dashboard's accent: a "Sign in with
   Discord" button is one people recognise by colour before they read it, and a
   theme that recolours --accent shouldn't turn it into something unrecognisable. */
.btn-discord { background: #5865F2; color: #fff; gap: clamp(7px, 0.556vw, 10px); text-decoration: none; }
.btn-discord:hover { background: #4752c4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4); transform: translateY(-1px); }
.btn-lg { padding: clamp(10px, 0.833vw, 14px) clamp(24px, 1.944vw, 32px); font-size: clamp(12px, 0.972vw, 16px); }
.btn-sm { padding: clamp(5px, 0.417vw, 7px) clamp(8px, 0.694vw, 12px); font-size: clamp(10px, 0.833vw, 14px); }

.list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(10px, 0.833vw, 14px) clamp(12px, 0.972vw, 16px);
  background: var(--bg-elevated);
  border-radius: clamp(7px, 0.556vw, 9px);
  margin-bottom: clamp(7px, 0.556vw, 9px);
  font-size: clamp(11px, 0.903vw, 15px);
}
.list-item .meta { color: var(--text-dim); font-size: clamp(10px, 0.833vw, 14px); }

#warn-list {
  max-height: clamp(220px, 18.4vw, 300px); /* roughly 5 rows before it starts scrolling */
  overflow-y: auto;
  padding-right: clamp(4px, 0.278vw, 6px); /* keeps the scrollbar from overlapping the Delete buttons */
}

/* ---------- Reaction Roles table ---------- */
.rr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(11px, 0.903vw, 15px);
}
.rr-table th {
  text-align: left;
  padding: clamp(8px, 0.694vw, 12px) clamp(10px, 0.833vw, 14px);
  color: var(--text-dim);
  font-size: clamp(10px, 0.833vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
.rr-table td {
  padding: clamp(10px, 0.833vw, 14px);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.rr-table tbody tr:hover { background: var(--bg-elevated); }
.rr-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Reaction Role template wizard ---------- */
.rr-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(119px, 9.722vw, 161px), 1fr));
  gap: clamp(8px, 0.694vw, 12px);
}
.rr-template-btn {
  padding: clamp(8px, 0.694vw, 12px) clamp(12px, 0.972vw, 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(7px, 0.556vw, 9px);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(11px, 0.903vw, 15px);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.rr-template-btn:hover { border-color: var(--accent); }
.rr-template-btn.active { border-color: var(--accent); background: rgba(88,101,242,0.15); color: var(--accent); }
.rr-pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.417vw, 7px);
  padding: clamp(5px, 0.417vw, 7px) clamp(10px, 0.833vw, 14px) clamp(5px, 0.417vw, 7px) clamp(7px, 0.556vw, 9px);
  border: 1px solid var(--border);
  border-radius: clamp(17px, 1.389vw, 23px);
  font-size: clamp(11px, 0.903vw, 15px);
  margin: 0 clamp(7px, 0.556vw, 9px) clamp(7px, 0.556vw, 9px) 0;
  background: var(--bg-elevated);
}
.rr-pill-dot { width: clamp(8px, 0.694vw, 12px); height: clamp(8px, 0.694vw, 12px); border-radius: 50%; flex: 0 0 auto; }

.emoji-icon {
  width: clamp(17px, 1.389vw, 23px);
  height: clamp(17px, 1.389vw, 23px);
  vertical-align: clamp(-6px, -0.347vw, -4px);
  object-fit: contain;
}

.pill {
  display: inline-block; padding: clamp(3px, 0.208vw, 3px) clamp(8px, 0.625vw, 10px); border-radius: clamp(17px, 1.389vw, 23px);
  font-size: clamp(9px, 0.764vw, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: rgba(88,101,242,0.15); color: var(--accent);
}

.empty-state { color: var(--text-dim); font-size: clamp(11px, 0.903vw, 15px); padding: clamp(17px, 1.389vw, 23px) 0; text-align: center; }

.error-banner {
  background: rgba(237,66,69,0.12);
  border: 1px solid rgba(237,66,69,0.3);
  color: var(--danger);
  padding: clamp(10px, 0.833vw, 14px) clamp(14px, 1.111vw, 18px);
  border-radius: clamp(8px, 0.694vw, 12px);
  font-size: clamp(11px, 0.903vw, 15px);
  margin-bottom: clamp(17px, 1.389vw, 23px);
}

.inline-form { display: flex; gap: clamp(8px, 0.694vw, 12px); margin-top: clamp(12px, 0.972vw, 16px); flex-wrap: wrap; }
.inline-form input, .inline-form select { flex: 1; min-width: clamp(119px, 9.722vw, 161px); }

.stat-edit-row {
  display: flex;
  gap: clamp(8px, 0.694vw, 12px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.stat-edit-row select, .stat-edit-row input { flex: 1; min-width: clamp(119px, 9.722vw, 161px); }
.stat-edit-row .stat-row-remove { flex: 0 0 auto; }

.loader { color: var(--text-dim); font-size: clamp(12px, 0.972vw, 16px); padding: clamp(34px, 2.778vw, 46px); text-align: center; }

@media (max-width: 800px) {
  #app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .content { padding: clamp(17px, 1.389vw, 23px); }
}


/* ---------- Embed builder ---------- */
.embed-mode-tabs {
  display: flex;
  gap: clamp(7px, 0.556vw, 9px);
  margin-bottom: clamp(14px, 1.111vw, 18px);
}
.content:has(.embed-builder-layout) {
  max-width: none;
  width: 100%;
}
.content:has(.module-grid) {
  max-width: none;
  width: 100%;
}
.content:has(.log-columns) {
  max-width: none;
  width: 100%;
}
.content:has(.automod-columns) {
  max-width: none;
  width: 100%;
}
.content:has(.moderator-columns) {
  max-width: none;
  width: 100%;
}
.content:has(.security-columns) {
  max-width: none;
  width: 100%;
}
.content:has(.welcome-grid) {
  max-width: none;
  width: 100%;
}
.content:has(.dash-hero) {
  max-width: none;
  width: 100%;
}
.embed-builder-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 1.667vw, 28px);
  align-items: start;
  width: 100%;
}
.embed-builder-form,
.embed-preview-card {
  min-width: 0;
  width: 100%;
}
.embed-preview-card {
  position: sticky;
  top: clamp(20px, 1.667vw, 28px);
  background: #313338;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(12px, 0.972vw, 16px);
  min-height: clamp(187px, 15.278vw, 253px);
  /* Discord itself caps an embed around 432px; this is intentionally ~200px wider than
     that so the preview is easier to read while editing, per explicit request. */
  max-width: clamp(537px, 43.889vw, 727px);
}
.embed-preview-header {
  color: #b5bac1;
  font-size: clamp(10px, 0.833vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 clamp(8px, 0.694vw, 12px) clamp(2px, 0.139vw, 2px);
}
.preview-plaintext {
  font-size: clamp(13px, 1.042vw, 16px);
  color: var(--text);
  margin-bottom: clamp(6px, 0.556vw, 9px);
  white-space: pre-wrap;
  word-break: break-word;
}
.ticket-buttons-preview {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(7px, 0.556vw, 9px);
  margin-top: clamp(10px, 0.833vw, 14px);
}
.ticket-button-preview {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.417vw, 7px);
  padding: clamp(7px, 0.556vw, 9px) clamp(12px, 0.972vw, 16px);
  border-radius: clamp(5px, 0.417vw, 7px);
  font-size: clamp(11px, 0.903vw, 15px);
  font-weight: 600;
  color: white;
}
.ticket-dropdown-preview {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  min-width: clamp(133px, 11.111vw, 187px);
}
.discord-embed-preview {
  position: relative;
  overflow: hidden;
  background: #2b2d31;
  border-left: 4px solid #5865F2;
  border-radius: clamp(3px, 0.278vw, 5px);
  padding: clamp(10px, 0.833vw, 14px) clamp(12px, 0.972vw, 16px) clamp(8px, 0.694vw, 12px);
  min-height: clamp(128px, 10.417vw, 172px);
  font-size: clamp(11px, 0.903vw, 15px);
  color: #dbdee1;
}
.preview-author {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.486vw, 8px);
  font-weight: 600;
  margin-bottom: clamp(5px, 0.417vw, 7px);
}
.preview-author img, .preview-footer img {
  width: clamp(17px, 1.389vw, 23px);
  height: clamp(17px, 1.389vw, 23px);
  border-radius: 50%;
  object-fit: cover;
}
.preview-title {
  color: #f2f3f5;
  font-size: clamp(14px, 1.111vw, 18px);
  font-weight: 700;
  margin-bottom: clamp(4px, 0.347vw, 6px);
  word-break: break-word;
}
.preview-description {
  white-space: normal;
  line-height: 1.4;
  margin-bottom: clamp(7px, 0.556vw, 9px);
  word-break: break-word;
}
.preview-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 0.556vw, 9px);
  margin-top: clamp(7px, 0.556vw, 9px);
}
.preview-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.208vw, 3px);
  line-height: 1.35;
}
.preview-field:not(.inline) { grid-column: 1 / -1; }
.preview-field strong { color: #f2f3f5; }
.preview-field span { white-space: normal; word-break: break-word; }
.preview-thumbnail {
  float: right;
  width: clamp(68px, 5.556vw, 92px);
  height: clamp(68px, 5.556vw, 92px);
  margin: 0 0 clamp(7px, 0.556vw, 9px) clamp(10px, 0.833vw, 14px);
  object-fit: cover;
  border-radius: clamp(3px, 0.278vw, 5px);
}
.preview-image {
  display: block;
  clear: both;
  width: 100%;
  max-height: clamp(221px, 18.056vw, 299px);
  object-fit: cover;
  border-radius: clamp(3px, 0.278vw, 5px);
  margin-top: clamp(8px, 0.694vw, 12px);
}
.preview-footer {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.486vw, 8px);
  color: #b5bac1;
  font-size: clamp(9px, 0.764vw, 13px);
  margin-top: clamp(8px, 0.694vw, 12px);
}
.preview-empty { color: #949ba4; font-style: italic; }

/* ---------- Markdown rendered inside the live preview ---------- */
.discord-embed-preview a { color: #00a8fc; text-decoration: none; }
.discord-embed-preview a:hover { text-decoration: underline; }
.embed-preview-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.694vw, 12px);
}
.embed-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  margin-bottom: clamp(12px, 1vw, 16px);
}
.embed-tab {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  padding: clamp(6px, 0.5vw, 8px) clamp(10px, 0.8vw, 14px);
  border-radius: clamp(6px, 0.5vw, 8px);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: clamp(12px, 1vw, 14px);
  cursor: pointer;
}
.embed-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.embed-tab-remove {
  opacity: 0.65;
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
}
.embed-tab-remove:hover { opacity: 1; }
.embed-tab-add {
  padding: clamp(6px, 0.5vw, 8px) clamp(12px, 0.9vw, 16px);
  border-radius: clamp(6px, 0.5vw, 8px);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: clamp(12px, 1vw, 14px);
  cursor: pointer;
}
.embed-tab-add:hover { border-color: var(--accent); color: var(--text); }
.embed-tab-add:disabled { opacity: 0.4; cursor: not-allowed; }
.embed-char-counter {
  font-size: clamp(12px, 0.95vw, 14px);
  color: var(--text-dim);
  margin: clamp(10px, 0.8vw, 14px) 0;
}
.embed-char-counter.over-limit { color: var(--danger); font-weight: 600; }
.md-code {
  background: #1e1f22;
  border-radius: clamp(3px, 0.208vw, 3px);
  padding: 0 clamp(3px, 0.278vw, 5px);
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(10px, 0.833vw, 14px);
}
.md-codeblock {
  background: #1e1f22;
  border-radius: clamp(3px, 0.278vw, 5px);
  padding: clamp(7px, 0.556vw, 9px) clamp(8px, 0.694vw, 12px);
  margin: clamp(5px, 0.417vw, 7px) 0;
  overflow-x: auto;
}
.md-codeblock code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(10px, 0.833vw, 14px);
  white-space: pre;
}
.md-spoiler {
  background: #1e1f22;
  color: transparent;
  border-radius: clamp(3px, 0.208vw, 3px);
  padding: 0 clamp(2px, 0.139vw, 2px);
  cursor: pointer;
}
.md-spoiler.revealed { color: inherit; background: #35373c; }
.md-h1, .md-h2, .md-h3 { color: #f2f3f5; font-weight: 700; margin: clamp(5px, 0.417vw, 7px) 0 clamp(3px, 0.278vw, 5px); }
.md-h1 { font-size: clamp(17px, 1.389vw, 23px); }
.md-h2 { font-size: clamp(14px, 1.181vw, 20px); }
.md-h3 { font-size: clamp(12px, 0.972vw, 16px); }
.md-quote {
  margin: clamp(3px, 0.278vw, 5px) 0;
  padding: 0 0 0 clamp(8px, 0.694vw, 12px);
  border-left: 4px solid #4e5058;
  color: #dbdee1;
}
ul.md-list, ol.md-list { margin: clamp(3px, 0.278vw, 5px) 0; padding-left: clamp(19px, 1.528vw, 25px); }
.md-list li { margin: clamp(2px, 0.139vw, 2px) 0; }
.color-picker-row { display: flex; gap: clamp(7px, 0.556vw, 9px); align-items: center; }
.color-picker-row input[type=text] { flex: 1; }
.color-swatch {
  width: clamp(39px, 3.194vw, 53px);
  height: clamp(34px, 2.778vw, 46px);
  padding: 0;
  border-radius: clamp(7px, 0.556vw, 9px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  flex: 0 0 auto;
}
.color-swatch:hover { border-color: var(--accent); }
.embed-warning { color: var(--warn); }

/* ---------- Custom color picker popover ---------- */
.color-popover {
  position: fixed;
  z-index: 1000;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(8px, 0.694vw, 12px);
  padding: clamp(12px, 0.972vw, 16px);
  width: clamp(187px, 15.278vw, 253px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.833vw, 14px);
}
.color-popover-sv {
  position: relative;
  width: 100%;
  height: clamp(110px, 9.028vw, 150px);
  border-radius: clamp(5px, 0.417vw, 7px);
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
  cursor: crosshair;
}
.color-popover-sv-thumb {
  position: absolute;
  width: clamp(10px, 0.833vw, 14px);
  height: clamp(10px, 0.833vw, 14px);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-popover-hue {
  position: relative;
  width: 100%;
  height: clamp(10px, 0.833vw, 14px);
  border-radius: clamp(5px, 0.417vw, 7px);
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
}
.color-popover-hue-thumb {
  position: absolute;
  top: 50%;
  width: clamp(12px, 0.972vw, 16px);
  height: clamp(12px, 0.972vw, 16px);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-popover-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(5px, 0.417vw, 7px);
}
.color-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.color-preset:hover { transform: scale(1.12); }

@media (max-width: 1050px) {
  .embed-builder-layout { grid-template-columns: 1fr; }
  .embed-preview-card { position: relative; top: 0; }
}

/* ==========================================================================
   Mobile layout — hamburger-triggered off-canvas sidebar.
   768px comfortably covers phones in portrait (an iPhone 15 Pro Max's own
   viewport is 430px wide) through small tablets, without touching how this
   looks on any laptop or desktop width.
   ========================================================================== */
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(82vw, clamp(249px, 20.833vw, 351px));
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  /* Toggled by JS on #app — see toggleMobileSidebar() in app.js. Off-canvas by
     default (above) so there's no flash of the full sidebar before JS runs. */
  #app.sidebar-open .sidebar { transform: translateX(0); }
  #app.sidebar-open .sidebar-backdrop { display: block; }

  .content {
    max-width: none;
    width: 100%;
    padding: clamp(15px, 1.25vw, 21px) clamp(13px, 1.111vw, 19px);
  }
  /* Two real children left here on mobile now (the hamburger button, and the bell/
     user cluster) — not three, since the search bar that used to sit between them
     is gone. auto sizes the hamburger to its own width; 1fr gives the cluster all
     the remaining space, and justify-self: end (below) is what actually pins it to
     the right edge of that space, the same job margin-left: auto does under flex. */
  .content-header {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .content-header .topbar-actions {
    justify-self: end;
  }

  /* Every module's two-column layout collapses to a single stacked column —
     there's no room for two side-by-side cards on a phone screen. The
     .content:has() rules that widen these pages out already apply at every
     width (they're defined outside this media query), so nothing extra is
     needed there — this is purely about column *count*. */
  .module-grid,
  .log-columns,
  .automod-columns,
  .moderator-columns,
  .security-columns,
  .welcome-grid,
  .embed-builder-layout {
    grid-template-columns: 1fr;
  }

  /* Two-field form rows (channel + role, title + color, etc.) stack instead of
     squeezing two inputs into a too-narrow row. */
  .row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-online-dot { animation: none; }
}

/* Stacked radio choices where each option needs a sentence of explanation, not
   just a label — used by the restore wizard's destructive-action picker. */
.radio-row {
  display: flex; align-items: flex-start; gap: clamp(8px, 0.625vw, 11px);
  padding: clamp(8px, 0.625vw, 11px) 0; cursor: pointer;
  font-size: clamp(11px, 0.903vw, 14px); line-height: 1.5;
}
.radio-row + .radio-row { border-top: 1px solid var(--border); }
.radio-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; }

/* Layout for the health card's in-progress state: spinner beside a line saying
   what is currently being contacted, rather than a bare spinner that gives no
   way to distinguish working from stuck. */
.health-running { display: flex; align-items: center; gap: clamp(10px, 0.833vw, 14px); padding: clamp(14px, 1.25vw, 20px) 0; }
.health-running .loader { margin: 0; flex-shrink: 0; }