@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Custom scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --bg:          #0d1117;
  --surface:     #161b22;
  --surface2:    #21262d;
  --surface3:    #2d333b;
  --border:      #30363d;
  --border-hover:#484f58;
  --text:        #e6edf3;
  --text-muted:  #8b949e;
  --text-subtle: #6e7681;
  --accent:      #5865f2;
  --accent-light:#7289da;
  --accent-dark: #4755d9;
  --accent-glow: rgba(88,101,242,.2);
  --green:       #3fb950;
  --green-muted: rgba(63,185,80,.15);
  --yellow:      #d29922;
  --orange:      #da6820;
  --red:         #f85149;
  --red-muted:   rgba(248,81,73,.15);
  --blue:        #58a6ff;
  --blue-muted:  rgba(88,166,255,.12);
  --voice-xp:    #3fb950;
  --chat-xp:     #5865f2;
  --gold:        #e3b341;
  --radius:      8px;
  --radius-lg:   12px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { vertical-align: middle; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(88,101,242,.12) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--blue); }

code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: .88em;
  background: var(--surface2);
  padding: .15em .35em;
  border-radius: 4px;
  color: var(--accent);
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22,27,34,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 56px;
  gap: 0.5rem;
}
.brand {
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
  flex-shrink: 0;
  margin-right: 0.5rem;
  transition: filter .15s;
}
.brand:hover { filter: brightness(1.2); text-decoration: none; }
.nav-links { display: flex; gap: 0.15rem; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface2); text-decoration: none; }
.nav-links a.active {
  color: var(--text);
  background: rgba(88,101,242,.15);
  border-bottom: 2px solid var(--accent);
  padding-bottom: calc(0.3rem - 2px);
}
.nav-login  { color: var(--accent) !important; font-weight: 600; }
.nav-logout { color: var(--red)    !important; }
.nav-user {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  padding: .25rem .6rem;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.nav-guild-ctx {
  color: var(--text);
  font-weight: 600;
  font-size: .8rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.container-wide {
  max-width: 1320px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
/* Landing page: sections manage their own width, no outer padding */
.container-lp {
  width: 100%;
  padding: 0 0 3rem;
}
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  letter-spacing: -.02em;
}
h2 {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 1.25rem;
}
h3 { font-size: 0.9rem; font-weight: 700; }

.page-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header h2 { margin: 0; }

/* ── Page wrapper (narrow content pages: privacy, terms, my-data) ────────── */
.page-wrap  { margin: 0 auto; }
.page-title { margin: 0; }
.page-sub   {
  font-size: .875rem;
  color: var(--text-muted);
  margin: .25rem 0 0;
  line-height: 1.5;
}

/* ── Generic field label + input (used in data-rights form) ──────────────── */
.field-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.field-input {
  width: 100%;
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.5;
}
.alert-error   { background: var(--red-muted);   border: 1px solid rgba(248,81,73,.4);  color: #ff7b72; }
.alert-info    { background: var(--blue-muted);  border: 1px solid rgba(88,166,255,.3); color: var(--blue); }
.alert-success { background: var(--green-muted); border: 1px solid rgba(63,185,80,.4);  color: #56d364; }
.alert-warn    { background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.4); color: var(--gold); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .4rem .9rem;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1.4;
  vertical-align: middle;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: linear-gradient(160deg, #6d82e8 0%, var(--accent) 100%);
  color: #fff;
  border-color: var(--accent-dark);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn-primary:hover {
  background: linear-gradient(160deg, #8095ee 0%, #6472f5 100%);
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(88,101,242,.45), 0 0 0 3px var(--accent-glow);
  transform: translateY(-1px);
  color: #fff;
}
.btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn-secondary:hover { background: var(--surface3); border-color: var(--border-hover); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.btn-warn   { background: rgba(210,153,34,.15); color: var(--gold); border-color: rgba(210,153,34,.4); }
.btn-warn:hover { background: rgba(210,153,34,.28); }
.btn-danger { background: var(--red-muted); color: var(--red); border-color: rgba(248,81,73,.4); }
.btn-danger:hover { background: rgba(248,81,73,.28); }
.btn-sm     { padding: .2rem .55rem; font-size: .78rem; }
.btn-full   { width: 100%; padding: .55rem 1rem; font-size: .9rem; }

/* ── Server landing page ─────────────────────────────────────────────────── */
.sh-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Banner */
.sh-banner {
  height: 180px;
  position: relative;
  background: linear-gradient(135deg, var(--a1, var(--accent)) 0%, var(--a2, #818cf8) 100%);
  flex-shrink: 0;
}
.sh-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
/* Join button shown inside banner on mobile only */
.sh-join-btn {
  display: none;
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
}

/* Body below banner */
.sh-body {
  padding: 0 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
}

/* Icon row: icon + CTA buttons */
.sh-icon-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: -44px;
}
.sh-icon-wrap { position: relative; flex-shrink: 0; }
.sh-icon,
.sh-initials {
  width: 88px; height: 88px;
  border-radius: 22px;
  object-fit: cover; display: block;
  border: 4px solid var(--surface);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.sh-initials {
  background: var(--bg, #5865f2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.4);
  position: relative; overflow: hidden; user-select: none;
}
.sh-initials::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
.sh-tier-ring {
  position: absolute; inset: -6px;
  border-radius: 26px; pointer-events: none;
}
.sh-tier-ring.tier-1 { box-shadow: 0 0 0 2.5px #9b59f5, 0 0 14px rgba(155,89,245,.55); }
.sh-tier-ring.tier-2 { box-shadow: 0 0 0 2.5px #c941c5, 0 0 14px rgba(201,65,197,.55); }
.sh-tier-ring.tier-3 { box-shadow: 0 0 0 2.5px #d97706, 0 0 14px rgba(217,119,6,.6); }

.sh-cta-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-bottom: .25rem;
}

/* Name + tier badge */
.sh-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sh-name {
  margin: 0;
  font-size: 1.65rem; font-weight: 900; line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
}

/* Stats strip */
.sh-stats {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
  flex-wrap: wrap;
}
.sh-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: .55rem 1.1rem;
  border-right: 1px solid var(--border);
  min-width: 70px;
}
.sh-stat:last-child { border-right: none; }
.sh-stat-val { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.sh-stat-lbl { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }
.sh-stat-boost .sh-stat-val { color: #c27dfa; }
.sh-stat-boost .sh-stat-lbl { color: #c27dfa; opacity: .7; }

/* Description */
.sh-desc {
  margin: 0;
  font-size: .92rem; color: var(--text-muted); line-height: 1.7;
  max-width: 700px;
}

/* ── Page cards ──────────────────────────────────────────────────────────── */
.sh-cards {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 1.5rem;
}
.sh-page-card {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.sh-page-card:hover {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateX(3px);
  box-shadow: 0 2px 12px rgba(88,101,242,.12);
  text-decoration: none; color: var(--text);
}
.sh-card-emoji {
  font-size: 1.75rem; line-height: 1; flex-shrink: 0; width: 2.2rem; text-align: center;
}
.sh-card-info {
  display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0;
}
.sh-card-label { font-size: 1rem; font-weight: 700; }
.sh-card-desc  { font-size: .8rem; color: var(--text-muted); }
.sh-card-stat  {
  font-size: .75rem; font-weight: 700;
  color: var(--accent-light);
  background: var(--accent-glow);
  border: 1px solid rgba(88,101,242,.25);
  border-radius: 99px; padding: .18rem .65rem;
  white-space: nowrap; flex-shrink: 0;
}
.sh-card-arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--border-hover);
  transition: color .15s, transform .15s;
}
.sh-page-card:hover .sh-card-arrow { color: var(--accent); transform: translateX(2px); }

/* Mobile tweaks */
@media (max-width: 540px) {
  .sh-banner { height: 120px; }
  .sh-join-btn { display: flex; }
  .sh-cta-row { display: none; }
  .sh-body { padding: 0 1rem 1rem; }
  .sh-icon { width: 72px; height: 72px; }
  .sh-initials { width: 72px; height: 72px; font-size: 1.3rem; }
  .sh-icon-row { margin-top: -36px; }
  .sh-name { font-size: 1.3rem; }
  .sh-stats { width: 100%; }
  .sh-stat { flex: 1; }
}

/* ── Server page — content sections ─────────────────────────────────────── */
.sh-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.sh-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.sh-section-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
}
.sh-section-more {
  font-size: .8rem; color: var(--accent-light);
  text-decoration: none; font-weight: 600;
}
.sh-section-more:hover { text-decoration: underline; }

/* Top members list */
.sh-top-list { display: flex; flex-direction: column; }
.sh-top-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.sh-top-row:last-child { border-bottom: none; }
.sh-top-row:hover { background: var(--surface2); }
.sh-top-rank {
  font-size: .75rem; font-weight: 800;
  color: var(--text-muted); min-width: 1.8rem; text-align: right;
}
.sh-top-rank.rank-gold   { color: #fbbf24; }
.sh-top-rank.rank-silver { color: #94a3b8; }
.sh-top-rank.rank-bronze { color: #cd7f32; }
.sh-top-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg, #5865f2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.sh-top-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sh-av-init {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: .7rem; font-weight: 700; color: #fff;
}
.sh-top-name {
  flex: 1; min-width: 0;
  font-size: .9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-top-meta {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.sh-top-level {
  font-size: .72rem; font-weight: 700;
  color: var(--accent-light);
  background: var(--accent-glow);
  border: 1px solid rgba(88,101,242,.2);
  border-radius: 99px; padding: .1rem .45rem;
}
.sh-top-xp {
  font-size: .72rem; color: var(--text-muted); font-weight: 500;
}

/* Recent mod actions list */
.sh-mod-list { display: flex; flex-direction: column; }
.sh-mod-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.sh-mod-row:last-child { border-bottom: none; }
.sh-mod-row:hover { background: var(--surface2); }
.sh-mod-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.4; }
.sh-mod-info {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .2rem .4rem; min-width: 0;
}
.sh-mod-target { font-size: .88rem; font-weight: 700; color: var(--text); }
.sh-mod-action { font-size: .78rem; font-weight: 600; color: var(--accent-light); }
.sh-mod-reason {
  font-size: .78rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; white-space: nowrap;
}
.sh-mod-meta {
  width: 100%; font-size: .73rem; color: var(--text-muted); margin-top: .1rem;
}

@media (max-width: 540px) {
  .sh-top-meta { flex-direction: column; gap: .1rem; align-items: flex-end; }
  .sh-mod-reason { display: none; }
}

/* ── Cards (guild grid) ──────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #a5b4fc, var(--accent-light));
  opacity: 0;
  transition: opacity .25s;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(88,101,242,.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.card:hover { border-color: var(--accent-dark); box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(88,101,242,.15); }
.card:hover::before { opacity: 1; }
.card:hover::after  { opacity: 1; }
.card-header { display: flex; align-items: center; gap: .75rem; }
.card-guild-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(88,101,242,.25) 0%, rgba(88,101,242,.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  border: 1px solid rgba(88,101,242,.3);
  box-shadow: 0 2px 8px rgba(88,101,242,.15);
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-guild-id {
  font-size: .72rem;
  font-family: monospace;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: .1rem;
}
.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.stat-box {
  background: var(--surface2);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.card:hover .stat-box { border-color: rgba(88,101,242,.2); }
.stat-box .stat-label {
  font-size: .67rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stat-box strong { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.card-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
/* compact button variant used in guild cards */
.btn-sm { font-size: .78rem; padding: .3rem .75rem; }

/* ── Guild list page ──────────────────────────────────────────────────────── */
.guild-list-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem;
}
.guild-list-header h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.guild-list-sub { color: var(--text-muted); font-size: .875rem; margin: .2rem 0 0; }

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

/* Guild card colour strip (always visible, coloured by boost tier) */
.guild-card { gap: 0; padding: 0; overflow: hidden; }
.guild-card::before { opacity: 1; }
.guild-card.tier-0::before { background: linear-gradient(90deg, var(--accent) 0%, #a5b4fc 100%); }
.guild-card.tier-1::before { background: linear-gradient(90deg, #9b59f5 0%, #c27dfa 100%); }
.guild-card.tier-2::before { background: linear-gradient(90deg, #c941c5 0%, #f472e0 100%); }
.guild-card.tier-3::before { background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%); }
.guild-card.guild-hidden { opacity: .85; }

.guild-body {
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .9rem;
  height: 100%;
}

/* Icon + name row */
.guild-head { display: flex; align-items: flex-start; gap: .9rem; }
.guild-icon-wrap { flex-shrink: 0; }
.guild-icon,
.guild-icon-initials {
  width: 62px; height: 62px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}
.guild-icon-initials {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.guild-icon-initials::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}

.guild-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; margin-top: .05rem; }
.guild-name-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.guild-name { font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.3; }

/* Hidden pill */
.guild-hidden-pill {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(248,81,73,.12); color: var(--red); border: 1px solid rgba(248,81,73,.28);
  border-radius: 99px; padding: .13rem .48rem; white-space: nowrap;
}

/* Boost tier badge */
.guild-boost-badge {
  font-size: .65rem; font-weight: 700; white-space: nowrap;
  border-radius: 99px; padding: .13rem .5rem;
  display: inline-flex; align-items: center; gap: .18rem;
}
.guild-boost-badge.tier-1 { background: rgba(155,89,245,.15); color: #c27dfa; border: 1px solid rgba(155,89,245,.3); }
.guild-boost-badge.tier-2 { background: rgba(244,114,224,.15); color: #f472e0; border: 1px solid rgba(244,114,224,.3); }
.guild-boost-badge.tier-3 { background: rgba(251,191,36,.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }

/* Meta chips row (member count, boosts) */
.guild-chips { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.guild-chip {
  font-size: .72rem; color: var(--text-muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 99px; padding: .1rem .45rem; white-space: nowrap;
}

/* ── Guild directory — home page ────────────────────────────────────────── */

/* Hero */
.dsc-hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}
.dsc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 120% at -5% 50%, rgba(88,101,242,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80% at 105% 20%, rgba(155,89,245,.07) 0%, transparent 60%);
  pointer-events: none;
}
.dsc-hero-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem 2.25rem;
}
.dsc-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .4rem;
}
.dsc-hero-title {
  font-size: 2rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 .45rem;
  background: linear-gradient(120deg, var(--text) 0%, #a5b4fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dsc-hero-sub {
  margin: 0; color: var(--text-muted); font-size: .9rem; max-width: 440px; line-height: 1.6;
}
.dsc-hero-sub code {
  background: var(--surface2); border: 1px solid var(--border); padding: .1em .35em;
  border-radius: 4px; color: var(--accent); font-size: .85em;
}
.dsc-hero-counters { display: flex; gap: 2rem; flex-shrink: 0; }
.dsc-counter { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.dsc-counter-val { font-size: 1.75rem; font-weight: 800; color: var(--text); line-height: 1; }
.dsc-counter-lbl {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-subtle);
}

/* Toolbar */
.dsc-toolbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.dsc-search-wrap {
  position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 340px;
}
.dsc-search-icon {
  position: absolute; left: .7rem; width: 14px; height: 14px;
  color: var(--text-subtle); pointer-events: none;
}
.dsc-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .42rem .75rem .42rem 2.1rem;
  font-size: .84rem; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.dsc-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.dsc-search-input::placeholder { color: var(--text-subtle); }
.dsc-search-kbd {
  position: absolute; right: .55rem;
  font-size: .65rem; font-family: inherit; color: var(--text-subtle);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .3rem; pointer-events: none;
  transition: opacity .15s;
}
.dsc-filters {
  display: flex; gap: .35rem; flex-wrap: wrap;
}
.dsc-filter {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: .28rem .75rem;
  font-size: .78rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.dsc-filter:hover { background: var(--surface2); color: var(--text); border-color: var(--border-hover); }
.dsc-filter.active { background: rgba(88,101,242,.15); border-color: rgba(88,101,242,.45); color: var(--text); }
.dsc-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: var(--surface2); border-radius: 99px;
  font-size: .65rem; font-weight: 700; padding: 0 .3rem; margin-left: .25rem;
}

/* Listing — grid */
.dsc-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.dsc-no-results {
  text-align: center; color: var(--text-muted); padding: 3rem 1rem; font-size: .9rem;
  grid-column: 1 / -1;
}
.dsc-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 4rem 1rem; color: var(--text-muted); text-align: center; grid-column: 1 / -1;
}
.dsc-empty-icon { font-size: 3rem; }

/* Card */
.dsc-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.dsc-card:hover {
  border-color: rgba(88,101,242,.55);
  box-shadow: 0 10px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(88,101,242,.15);
  transform: translateY(-3px);
}
.dsc-card-hidden { opacity: .75; }
.dsc-card-hot { border-color: rgba(88,101,242,.4); }

/* Banner */
.dsc-card-banner {
  height: 72px; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, var(--a1, var(--accent)) 0%, var(--a2, #818cf8) 100%);
}
.dsc-card-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.dsc-card-hot .dsc-card-banner {
  box-shadow: inset 0 0 24px rgba(88,101,242,.25);
}

/* Rank badge on banner */
.dsc-rank {
  position: absolute; top: .55rem; right: .65rem; z-index: 2;
  font-size: 1.25rem; line-height: 1;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.7));
}

/* Hidden badge on banner */
.dsc-banner-hidden {
  position: absolute; top: .55rem; left: .65rem; z-index: 2;
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  background: rgba(248,81,73,.75); color: #fff; backdrop-filter: blur(4px);
  border-radius: 4px; padding: .18rem .45rem;
}

/* Card body */
.dsc-card-body {
  padding: 0 1rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  flex: 1;
}

/* Icon row: icon overhangs banner, join on right */
.dsc-card-icon-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: -28px; margin-bottom: .1rem;
}
.dsc-icon-wrap { position: relative; flex-shrink: 0; }
.dsc-server-icon,
.dsc-server-initials {
  width: 58px; height: 58px; border-radius: 14px;
  object-fit: cover; display: block;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: border-color .18s;
}
.dsc-card:hover .dsc-server-icon,
.dsc-card:hover .dsc-server-initials { border-color: var(--surface2); }
.dsc-server-initials {
  background: var(--bg, #5865f2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  position: relative; overflow: hidden; user-select: none;
}
.dsc-server-initials::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
.dsc-icon-tier-ring {
  position: absolute; inset: -5px;
  border-radius: 17px; pointer-events: none;
}
.dsc-icon-tier-ring.tier-1 { box-shadow: 0 0 0 2px #9b59f5, 0 0 10px rgba(155,89,245,.6); }
.dsc-icon-tier-ring.tier-2 { box-shadow: 0 0 0 2px #c941c5, 0 0 10px rgba(201,65,197,.6); }
.dsc-icon-tier-ring.tier-3 { box-shadow: 0 0 0 2px #d97706, 0 0 12px rgba(217,119,6,.65); }

/* Name row */
.dsc-name-row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.dsc-server-name { font-size: 1rem; font-weight: 800; color: var(--text); text-decoration: none; }
.dsc-server-name:hover { color: var(--accent-light); text-decoration: none; }

/* Description */
.dsc-server-desc {
  margin: 0; font-size: .85rem; color: #a0aab4; line-height: 1.6;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.7em;
}
.dsc-no-desc { font-style: italic; color: var(--text-subtle); min-height: 0; }

/* Stats row */
.dsc-stats-row {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .65rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
}
.dsc-stat-pill {
  display: inline-block;
  white-space: nowrap;
  color: var(--text-muted);
}
.dsc-stat-pill b { color: var(--text); font-weight: 700; }
.dsc-stat-boost   { color: #c27dfa; }
.dsc-stat-boost b { color: #c27dfa; }
.dsc-stats-sep { color: var(--border-hover); line-height: 1; }

/* Pill badges */
.dsc-pill {
  font-size: .6rem; font-weight: 700; white-space: nowrap;
  border-radius: 99px; padding: .1rem .42rem;
  display: inline-flex; align-items: center;
}
.pill-tier-1 { background: rgba(155,89,245,.15); color: #c27dfa; border: 1px solid rgba(155,89,245,.3); }
.pill-tier-2 { background: rgba(244,114,224,.15); color: #f472e0; border: 1px solid rgba(244,114,224,.3); }
.pill-tier-3 { background: rgba(251,191,36,.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.pill-invite-admin { background: rgba(230,130,0,.12); color: #e6a040; border: 1px solid rgba(230,130,0,.3); }

/* Card footer */
.dsc-card-footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: .65rem; margin-top: .2rem;
}
.dsc-bump-info {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; white-space: nowrap; flex-wrap: wrap;
}
.dsc-meta-bump  { color: var(--accent); font-weight: 600; }
.dsc-meta-muted { color: var(--text-subtle); font-size: .73rem; }

/* Bump badges */
.dsc-cd-badge {
  font-size: .68rem; background: rgba(251,146,60,.1); color: #fb923c;
  border: 1px solid rgba(251,146,60,.3); border-radius: 99px;
  padding: .08rem .48rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dsc-ready-badge {
  font-size: .68rem; background: rgba(63,185,80,.1); color: var(--green);
  border: 1px solid rgba(63,185,80,.3); border-radius: 99px; padding: .08rem .48rem;
}

/* Action buttons */
.dsc-actions { display: flex; gap: .25rem; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

/* Admin action row (Leave / Ban / Unban) */
.dsc-card-admin-actions {
  display: flex; gap: .35rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: .55rem; margin-top: .1rem;
}

/* Banned badge */
.dsc-banned-badge {
  font-size: .7rem; background: rgba(248,81,73,.12); color: var(--red);
  border: 1px solid rgba(248,81,73,.35); border-radius: 99px;
  padding: .1rem .55rem; font-weight: 700;
}

/* Join button */
.btn-join {
  background: rgba(63,185,80,.15); color: var(--green);
  border: 1px solid rgba(63,185,80,.4); font-weight: 700;
  display: inline-flex; align-items: center;
}
.btn-join:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* Extra-small button */
.btn-xs { padding: .22rem .65rem; font-size: .73rem; border-radius: 5px; font-weight: 600; }

/* Responsive */
@media (max-width: 900px) {
  .dsc-listing { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 680px) {
  .dsc-hero-inner { flex-direction: column; }
  .dsc-hero-counters { width: 100%; justify-content: space-around; }
  .dsc-hero-title { font-size: 1.5rem; }
  .dsc-listing { grid-template-columns: 1fr; }
  .dsc-card-footer { flex-direction: column; align-items: flex-start; }
  .dsc-actions { width: 100%; justify-content: flex-start; }
  .dsc-search-wrap { max-width: none; }
  .dsc-toolbar { flex-direction: column; align-items: stretch; }
}

/* ── My Servers page ──────────────────────────────────────────────────────── */
.ms-header { margin-bottom: 1.5rem; }
.ms-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: .2rem; }
.ms-sub   { color: var(--text-muted); font-size: .87rem; }
.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.ms-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.2rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.ms-card:hover {
  border-color: rgba(88,101,242,.4);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transform: translateY(-2px);
}
.ms-card-header { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.ms-icon,
.ms-initials {
  width: 52px; height: 52px; border-radius: 14px;
  object-fit: cover; flex-shrink: 0; display: block;
}
.ms-initials {
  background: var(--bg, #5865f2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff; user-select: none;
  position: relative; overflow: hidden;
}
.ms-initials::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}
.ms-info { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.ms-name {
  font-weight: 700; font-size: .97rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-meta { display: flex; gap: .6rem; font-size: .78rem; color: var(--text-muted); flex-wrap: wrap; }
.ms-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
@media (max-width: 480px) {
  .ms-grid { grid-template-columns: 1fr; }
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  background: var(--surface2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(88,101,242,.07); }
tbody td { padding: .65rem .9rem; vertical-align: middle; }

/* ── Rank numbers ────────────────────────────────────────────────────────── */
.rank-num {
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-subtle);
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.rank-1 {
  color: #1a1200;
  background: linear-gradient(135deg, #f0d060 0%, #e3b341 100%);
  border-color: #c49800;
  box-shadow: 0 2px 8px rgba(224,179,65,.4);
  font-size: .8rem;
}
.rank-2 {
  color: #111;
  background: linear-gradient(135deg, #e0e0e0 0%, #b0b0b0 100%);
  border-color: #888;
  box-shadow: 0 2px 6px rgba(180,180,180,.3);
  font-size: .8rem;
}
.rank-3 {
  color: #1a0a00;
  background: linear-gradient(135deg, #e09050 0%, #b86820 100%);
  border-color: #8a4e10;
  box-shadow: 0 2px 6px rgba(186,104,32,.3);
  font-size: .8rem;
}

/* ── XP Progress bars ────────────────────────────────────────────────────── */
.xp-bar-wrap {
  height: 6px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 3px;
  min-width: 90px;
}
.xp-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 0%, #a5b4fc 50%, var(--accent-light) 100%);
  background-size: 200% 100%;
  animation: xp-shimmer 2.5s ease-in-out infinite;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
  box-shadow: 0 0 6px rgba(88,101,242,.4);
}
@keyframes xp-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.xp-bar-info {
  font-size: .72rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 2px;
}
.xp-bar-pct { color: var(--accent); font-weight: 600; }

/* ── XP split display ─────────────────────────────────────────────────────── */
.xp-split  { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.xp-chat   { color: var(--accent-light);  font-weight: 600; font-size: .82rem; }
.xp-voice  { color: var(--voice-xp); font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; }
.xp-total  { color: var(--text); font-weight: 700; }

/* Live voice indicator (pulsing green dot) */
.xp-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(63,185,80,.6);
  animation: xp-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes xp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,185,80,.6); }
  60%  { box-shadow: 0 0 0 5px rgba(63,185,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
}

/* ── Level badge ─────────────────────────────────────────────────────────── */
.level-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(88,101,242,.25) 0%, rgba(88,101,242,.1) 100%);
  color: #a5b4fc;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(88,101,242,.35);
  white-space: nowrap;
  letter-spacing: .02em;
}
.level-badge-chat {
  background: linear-gradient(135deg, rgba(88,101,242,.2) 0%, rgba(88,101,242,.07) 100%);
  color: #a5b4fc;
  border-color: rgba(88,101,242,.3);
}
.level-badge-voice {
  background: linear-gradient(135deg, rgba(63,185,80,.18) 0%, rgba(63,185,80,.06) 100%);
  color: #56d364;
  border-color: rgba(63,185,80,.3);
}
/* Level stack in leaderboard (main level + sub chat/voice badges) */
.level-stack  { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.level-sub    { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ── Action badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge-warn     { background: rgba(210,153,34,.18);  color: var(--gold); }
.badge-mute     { background: rgba(218,104,32,.18);  color: #e08040; }
.badge-unmute   { background: var(--green-muted);    color: var(--green); }
.badge-kick     { background: rgba(218,104,32,.18);  color: #e08040; }
.badge-ban      { background: var(--red-muted);      color: var(--red); }
.badge-purge    { background: var(--blue-muted);     color: var(--blue); }
.badge-slowmode { background: var(--blue-muted);     color: var(--blue); }
.badge-msg_del  { background: rgba(139,148,158,.1);  color: var(--text-muted); }
.badge-msg_edit { background: rgba(139,148,158,.1);  color: var(--text-muted); }

/* ── User link / leaderboard row ─────────────────────────────────────────── */
.user-link {
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.user-link:hover { text-decoration: none; }
.user-link:hover .lb-display-name { color: var(--blue); }
.lb-user  { display: flex; align-items: center; gap: .5rem; }
.lb-cell   { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--surface3);
  display: block;
}
.lb-names          { display: flex; flex-direction: column; line-height: 1.25; }
.lb-display-name   { font-size: .9rem; color: var(--text); font-weight: 500; transition: color .15s; }
.lb-user-id        { font-size: .68rem; color: var(--text-subtle); font-family: monospace; }

/* ── Compact user chip (table cells) ─────────────────────────────────────── */
.mini-user {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text);
  text-decoration: none;
  max-width: 200px;
}
.mini-user:hover { color: var(--blue); text-decoration: none; }
.mini-user:hover .mini-name { color: var(--blue); }
.mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--surface3);
  background: var(--surface2);
  display: block;
}
.mini-name {
  font-size: .875rem;
  line-height: 1.2;
  font-weight: 500;
  color: inherit;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}

/* ── Timestamps ──────────────────────────────────────────────────────────── */
.ts { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }

/* ── Reason cell ─────────────────────────────────────────────────────────── */
.reason { max-width: 340px; font-size: .875rem; color: var(--text); word-break: break-word; }

/* ── Filter form ─────────────────────────────────────────────────────────── */
.filter-form {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .45rem .7rem;
  font-size: .875rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
select option, select optgroup { background: var(--surface2); color: var(--text); }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
input[type="text"] { min-width: 180px; }
/* Remove number-input spin buttons so they don't appear as light-coloured boxes */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .3rem;
  margin-top: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: .35rem .6rem;
  border-radius: var(--radius);
  font-size: .83rem;
  text-decoration: none;
}
.pagination a { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); text-decoration: none; }
.pagination .current { background: var(--accent); color: #fff; border: 1px solid var(--accent); font-weight: 700; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3.5rem 1rem;
  font-size: .9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  color: var(--text-subtle);
  font-size: .78rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  background: linear-gradient(180deg, transparent 0%, rgba(88,101,242,.03) 100%);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.site-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.site-footer-links a {
  color: var(--text-subtle);
  text-decoration: none;
  transition: color .15s;
}
.site-footer-links a:hover { color: var(--accent); }
.site-footer-links span { opacity: .4; }

/* ── Role badges ─────────────────────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem calc(.5rem - .05em) .15rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid transparent;
}
.role-owner     { background: rgba(255,215,0,.15);  color: #e3c84e; border-color: rgba(255,215,0,.3); }
.role-admin     { background: var(--accent-glow);   color: var(--accent-light); border-color: rgba(88,101,242,.3); }
.role-moderator { background: var(--green-muted);   color: var(--green); border-color: rgba(63,185,80,.3); }
.role-viewer    { background: rgba(139,148,158,.1); color: var(--text-muted); border-color: var(--border); }

/* ── Users table ─────────────────────────────────────────────────────────── */
.user-actions  { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.inline-form   { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.text-muted    { color: var(--text-muted); font-size: .85rem; }

/* Card wrapper for data tables */
.data-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
  background: var(--surface);
  margin-bottom: 1.5rem;
  transition: border-color .2s;
}
.data-table-wrap:hover { border-color: rgba(88,101,242,.2); }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.data-table th {
  text-align: left;
  padding: .55rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(48,54,61,.5);
  vertical-align: middle;
  line-height: 1.4;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(48,54,61,.3); }
.data-table code { font-size: .8rem; }

/* password/login status badges */
.pw-set     { color: var(--green);    font-size: .75rem; font-weight: 600; }
.pw-not-set { color: var(--text-muted); font-size: .75rem; font-style: italic; }
.last-login-date { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.never-logged-in { font-size: .75rem; color: var(--text-subtle); font-style: italic; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-box {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: 0 16px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(88,101,242,.1);
  position: relative;
  overflow: hidden;
}
.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #a5b4fc, var(--accent));
}
.login-logo {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: .75rem;
  line-height: 1;
}
.login-box h1 { text-align: center; font-size: 1.3rem; margin-bottom: .4rem; }
.login-sub {
  text-align: center;
  font-size: .83rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.login-form input { width: 100%; }

/* ── Shared form controls ────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: .35rem; }
.field-group label { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.field-group input, .field-group select { width: 100%; }
.field-hint { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.45; }
.field-hint a { color: var(--accent); }
.btn-full { width: 100%; }

/* ── Settings page — Dyno-style sidebar layout ───────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 700px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav    { display: flex; flex-wrap: wrap; gap: .3rem;
                     background: none; border: none; padding: 0; flex-direction: row; }
  .settings-nav-guild { display: none; }
}

/* Sidebar */
.settings-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: sticky;
  top: 72px;  /* below navbar */
}
.settings-nav-guild {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .85rem 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .35rem;
}
.settings-nav-icon {
  font-size: 1.35rem;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(88,101,242,.25), rgba(88,101,242,.08));
  border: 1px solid rgba(88,101,242,.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-nav-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.settings-nav-sub   { font-size: .72rem; color: var(--text-muted); margin-top: .1rem;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.settings-nav-item:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.settings-nav-item.active { background: rgba(88,101,242,.15); color: var(--accent-light); font-weight: 600; }
.settings-nav-item-icon { font-size: 1.05rem; width: 1.3em; text-align: center; flex-shrink: 0; }

/* Main panel */
.settings-main { display: flex; flex-direction: column; gap: 1.25rem; }
.settings-panel-form { display: flex; flex-direction: column; gap: 1.25rem; }

.settings-panel-header {
  padding: .25rem 0 .5rem;
}
.settings-panel-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.settings-panel-desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Card (each section of fields) */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s;
}
.settings-card:hover { border-color: rgba(88,101,242,.2); }

/* Individual field row */
.settings-field {
  padding: 1.25rem 1.5rem;
  transition: background .1s;
}
.settings-field:hover { background: rgba(88,101,242,.025); }
.settings-field-sep {
  border-top: 1px solid var(--border);
}
.settings-field-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .3rem;
}
.settings-field-label label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.settings-field-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(88,101,242,.15);
  color: var(--accent-light);
  border: 1px solid rgba(88,101,242,.25);
}
.settings-field-badge.badge-warn   { background: rgba(210,153,34,.15);   color: var(--gold);  border-color: rgba(210,153,34,.3); }
.settings-field-badge.badge-mute   { background: rgba(218,104,32,.15);   color: #e08040;      border-color: rgba(218,104,32,.3); }
.settings-field-badge.badge-kick   { background: rgba(218,104,32,.15);   color: #e08040;      border-color: rgba(218,104,32,.3); }
.settings-field-badge.badge-ban    { background: rgba(248,81,73,.15);    color: var(--red);   border-color: rgba(248,81,73,.3); }
.settings-field-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .75rem;
}

/* Input with leading icon */
.settings-input-wrap {
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.settings-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-input-icon {
  padding: 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-subtle);
  background: var(--surface3);
  border-right: 1px solid var(--border);
  height: 2.35rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}
.settings-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .875rem;
  padding: .55rem .85rem;
  font-family: inherit;
  min-width: 0;
}
.settings-input::placeholder { color: var(--text-subtle); }
/* Inputs inside a wrapper must not show their own bg/border — the wrapper provides them.
   Specificity 0,2,0 beats the global input[type="text"]/number rule at 0,1,1. */
.settings-input-wrap .settings-input {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Standalone select with .settings-input class (e.g. giveaway channel picker).
   Specificity 0,1,1 beats plain .settings-input (0,1,0) which was making it transparent/borderless. */
select.settings-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .55rem 2.2rem .55rem .85rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  font-size: .875rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
select.settings-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Toggle switch (bot restart) */
.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
}
.settings-toggle input { display: none; }
.settings-toggle-track {
  width: 40px;
  height: 22px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 99px;
  position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s, background .2s;
}
.settings-toggle input:checked ~ .settings-toggle-track {
  background: rgba(63,185,80,.25);
  border-color: var(--green);
}
.settings-toggle input:checked ~ .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(18px);
  background: var(--green);
}
.settings-toggle-label { font-size: .875rem; color: var(--text); }

/* Sticky save bar */
/* ── Page-visibility block (server settings tab) ─────────────────────────── */
.vis-intro {
  padding: 1rem 1.5rem .5rem;
  margin: 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.vis-block { padding: .9rem 1.5rem; }
.vis-block-sep { border-top: 1px solid var(--border); }
.vis-block-head {
  display: flex; align-items: center; gap: .75rem;
}
.vis-block-icon  { font-size: 1.15rem; flex-shrink: 0; }
.vis-block-label { font-weight: 700; font-size: .925rem; flex: 1; min-width: 0; }
.vis-block-head .settings-select {
  flex-shrink: 0;
  width: auto;
  min-width: 190px;
}

/* Container shown/hidden by the dropdown */
.vis-pickers {
  margin-top: .85rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.vis-picker-section { padding: .85rem 1rem; }
.vis-picker-sep     { border-top: 1px solid var(--border); }
.vis-picker-label {
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
  font-size: .82rem; font-weight: 700; color: var(--text);
  margin-bottom: .5rem;
}
.vis-picker-hint { font-weight: 400; color: var(--text-muted); font-size: .78rem; }
.vis-picker-note {
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-subtle); font-style: italic;
  margin: 0;
}

/* ── Unsaved-changes sticky bar ──────────────────────────────────────────── */
.unsaved-bar {
  position: fixed;
  bottom: -80px;           /* hidden below viewport initially */
  left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 2rem));
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  background: #1e1f22;
  border: 1px solid #404249;
  border-radius: var(--radius-lg);
  padding: .8rem 1.1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(254,231,92,.08);
  z-index: 9990;
  transition: bottom .25s cubic-bezier(.34,1.56,.64,1);
}
.unsaved-bar.visible { bottom: 1.25rem; }
.unsaved-bar-msg {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.unsaved-bar-actions { display: flex; gap: .55rem; flex-shrink: 0; }

/* ── Settings save toast ─────────────────────────────────────────────────── */
.settings-toast {
  position: fixed;
  top: 1.2rem;
  right: 1.4rem;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-.4rem);
  transition: opacity .2s, transform .2s;
  z-index: 10000;
}
.settings-toast.visible { opacity: 1; transform: translateY(0); }
.settings-toast-success { background: #248046; color: #fff; }
.settings-toast-error   { background: #da373c; color: #fff; }

/* ── Leave-page confirmation modal ──────────────────────────────────────── */
.unsaved-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
}
.unsaved-modal-overlay.visible { opacity: 1; pointer-events: auto; }
.unsaved-modal {
  background: #2b2d31;
  border: 1px solid #404249;
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: min(420px, calc(100vw - 2rem));
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  transform: scale(.95);
  transition: transform .18s;
}
.unsaved-modal-overlay.visible .unsaved-modal { transform: scale(1); }
.unsaved-modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(254,231,92,.1);
  display: flex; align-items: center; justify-content: center;
}
.unsaved-modal-title { font-size: 1.15rem; font-weight: 800; text-align: center; }
.unsaved-modal-body  { font-size: .9rem; color: var(--text-muted); text-align: center; }
.unsaved-modal-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: center; }

/* ── Stream Alerts panel ──────────────────────────────────────────────── */
.stream-hero {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(145,70,255,.18) 0%, rgba(88,101,242,.12) 55%, rgba(83,252,24,.08) 100%);
  border: 1px solid rgba(145,70,255,.3);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stream-hero-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.stream-hero-body { flex: 1; min-width: 0; }
.stream-hero-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.stream-hero-desc  { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.stream-hero-stats { display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; }
.stream-stat-pill {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 99px;
  white-space: nowrap;
}
.stream-stat-pill.twitch  { background: rgba(145,70,255,.2);  color: #c084fc; border: 1px solid rgba(145,70,255,.35); }
.stream-stat-pill.kick    { background: rgba(83,252,24,.12);   color: #86efac; border: 1px solid rgba(83,252,24,.25); }
.stream-stat-pill.youtube { background: rgba(255,0,0,.12);     color: #fca5a5; border: 1px solid rgba(255,0,0,.28); }

/* Stream Add form: platform pill buttons */
.stream-platform-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.stream-platform-pill {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 99px;
  border: 2px solid var(--border); background: var(--surface2);
  cursor: pointer; font-size: .85rem; font-weight: 600;
  color: var(--text-muted); transition: border-color .15s, background .15s, color .15s;
}
.stream-platform-pill:hover { border-color: var(--text-muted); color: var(--text); }
.stream-platform-pill.active { background: var(--surface3); border-color: var(--accent); color: var(--text); }
.stream-platform-pill[data-platform="twitch"].active { border-color: #9146ff; background: rgba(145,70,255,.1); color: #c084fc; }
.stream-platform-pill[data-platform="kick"].active   { border-color: #53fc18; background: rgba(83,252,24,.08);  color: #86efac; }
.stream-platform-pill[data-platform="youtube"].active{ border-color: #FF0000; background: rgba(255,0,0,.08);   color: #fca5a5; }
/* Coming-soon pill state */
.stream-platform-pill-soon {
  opacity: .55; cursor: not-allowed !important;
  border-style: dashed;
}
.stream-platform-pill-soon:hover { border-color: var(--border); color: var(--text-muted); }
.pill-soon-badge {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .05rem .3rem; border-radius: 99px;
  background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.35); color: #ca8a04;
  margin-left: .1rem;
}

/* Stream Add form: section labels and message wrapper */
.stream-add-section { margin-bottom: 1rem; }
.stream-add-section-label {
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
}
.stream-msg-wrap {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem;
}

/* Quick-add known streamers */
.stream-quick-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.stream-quick-chip {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  text-align: left; min-width: 120px;
}
.stream-quick-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.stream-quick-chip.twitch { border-left: 3px solid #9146ff; }
.stream-quick-chip.twitch:hover { border-color: #9146ff; background: rgba(145,70,255,.1); box-shadow: 0 3px 12px rgba(145,70,255,.2); }
.stream-quick-chip.kick   { border-left: 3px solid #53fc18; }
.stream-quick-chip.kick:hover   { border-color: #53fc18; background: rgba(83,252,24,.08); box-shadow: 0 3px 12px rgba(83,252,24,.15); }
.sqc-platform { font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.sqc-name  { font-size: .88rem; font-weight: 700; color: var(--text); }
.sqc-desc  { font-size: .72rem; color: var(--text-muted); }
.stream-filter-tabs { display: flex; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; }
.stream-filter-tab {
  padding: .28rem .85rem; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface2);
  cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--text-muted);
  transition: color .15s, border-color .15s, background .15s;
}
.stream-filter-tab:hover { color: var(--text); border-color: var(--text-muted); }
.stream-filter-tab.active { color: var(--text); background: var(--surface3); border-color: var(--accent); }
.stream-filter-tab[data-filter="twitch"].active { border-color: #9146ff; color: #c084fc; background: rgba(145,70,255,.1); }
.stream-filter-tab[data-filter="kick"].active   { border-color: #53fc18; color: #86efac; background: rgba(83,252,24,.08); }
.sqc-group-label { transition: opacity .15s; }

/* Platform accent on the Add card */
.stream-add-card { transition: border-color .2s, box-shadow .2s; }
.stream-add-card.plat-twitch  { border-color: rgba(145,70,255,.5); box-shadow: 0 0 0 3px rgba(145,70,255,.07); }
.stream-add-card.plat-kick    { border-color: rgba(83,252,24,.4);  box-shadow: 0 0 0 3px rgba(83,252,24,.05); }
.stream-add-card.plat-youtube { border-color: rgba(255,0,0,.4);    box-shadow: 0 0 0 3px rgba(255,0,0,.05); }

/* Platform label chips inside cards */
.stream-platform-label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: 99px;
}
.stream-platform-label.twitch { background: rgba(145,70,255,.2); color: #c084fc; border: 1px solid rgba(145,70,255,.3); }
.stream-platform-label.kick   { background: rgba(83,252,24,.12);  color: #86efac; border: 1px solid rgba(83,252,24,.2); }

/* Message template chips */
.stream-tpl-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.stream-tpl-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.stream-tpl-chip {
  font-size: .73rem; padding: .2rem .55rem;
  border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface3); color: var(--text-muted);
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.stream-tpl-chip:hover { border-color: var(--accent); color: var(--text); background: rgba(88,101,242,.1); }

/* Variable insert chips (e.g. {streamer}, {url}) */
.stream-var-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: .72rem; padding: .15rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(99,102,241,.4);
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}
.stream-var-chip:hover { border-color: rgba(99,102,241,.75); background: rgba(99,102,241,.22); color: #c7d2fe; }

/* Discord-like embed preview */
.stream-preview-wrap {
  background: #1e1f22;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin-top: .4rem;
}
.stream-preview-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #72767d; margin-bottom: .5rem; display: block;
}
/* Plain-text mode */
.stream-preview-wrap[data-mode="plain"] .disc-mock { display: none; }
.stream-preview-plain { font-size: .84rem; color: #dcddde; line-height: 1.5; word-break: break-word; }
.stream-preview-plain a { color: #00b0f4; text-decoration: none; }
.stream-preview-plain a:hover { text-decoration: underline; }
.stream-preview-plain strong { color: #fff; font-weight: 700; }
/* Discord mock message */
.disc-mock { display: flex; gap: .75rem; align-items: flex-start; }
.disc-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; overflow: hidden;
}
.disc-msgbody { flex: 1; min-width: 0; }
.disc-username { font-size: .9rem; font-weight: 600; color: #fff; }
.disc-ts { font-size: .73rem; color: #72767d; margin-left: .45rem; font-weight: 400; }
.disc-embed {
  display: flex; margin-top: .35rem;
  max-width: 440px; background: #2b2d31;
  border-radius: 4px; border-left: 4px solid;
  overflow: hidden;
}
.disc-embed-inner { padding: .65rem .85rem .65rem .7rem; flex: 1; min-width: 0; }
.disc-embed-author {
  font-size: .77rem; font-weight: 600; color: #b5bac1;
  margin-bottom: .22rem; display: flex; align-items: center; gap: .3rem;
}
.disc-embed-title { font-size: .88rem; font-weight: 700; margin-bottom: .22rem; }
.disc-embed-title a { color: #00aff4; text-decoration: none; }
.disc-embed-title a:hover { text-decoration: underline; }
.disc-embed-desc { font-size: .81rem; color: #dbdee1; line-height: 1.45; word-break: break-word; }
.disc-embed-desc strong { color: #fff; font-weight: 700; }
.disc-embed-desc a { color: #00aff4; text-decoration: none; }
.disc-embed-image {
  margin-top: .55rem; width: 100%; height: 100px;
  background: #1e1f22; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: #444; font-size: .7rem; text-align: center; gap: .3rem;
}
.disc-embed-footer { margin-top: .5rem; font-size: .71rem; color: #72767d; display: flex; align-items: center; gap: .3rem; }
.disc-embed-thumb {
  width: 80px; min-width: 80px; height: 60px; margin: .65rem .7rem .65rem 0;
  background: #1e1f22; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #444; font-size: .65rem; text-align: center; line-height: 1.3;
}

/* Tracker group card headers */
.stream-group-header {
  padding: .6rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.stream-group-header.twitch { background: rgba(145,70,255,.12); border-bottom: 1px solid rgba(145,70,255,.25); color: #c084fc; }
.stream-group-header.kick   { background: rgba(83,252,24,.07);  border-bottom: 1px solid rgba(83,252,24,.2);  color: #86efac; }

/* Tracker row summary */
.stream-tracker-summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem; cursor: pointer; list-style: none; user-select: none;
  transition: background .1s;
}
.stream-tracker-summary:hover { background: rgba(255,255,255,.03); }
.stream-tracker-summary .str-name  { font-weight: 600; flex: 1; font-size: .9rem; }
.stream-tracker-summary .str-chan  { font-size: .8rem; color: var(--text-muted); }
.stream-tracker-summary .str-style { font-size: .72rem; color: var(--text-subtle); padding: .1rem .4rem; background: var(--surface3); border-radius: 99px; }
.stream-live-badge { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; white-space: nowrap; }
.stream-live-badge.live    { background: rgba(87,242,135,.15); color: #57f287; border: 1px solid rgba(87,242,135,.3); }
.stream-live-badge.offline { background: var(--surface3); color: var(--text-subtle); border: 1px solid var(--border); }
.stream-edit-caret { font-size: .7rem; color: var(--text-subtle); flex-shrink: 0; transition: transform .2s; }
details.stream-row[open] .stream-edit-caret { transform: rotate(180deg); }

/* Tracker edit body */
.stream-edit-body {
  padding: .9rem 1rem 1.1rem;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
}
.stream-edit-body.twitch { border-top-color: rgba(145,70,255,.2); }
.stream-edit-body.kick   { border-top-color: rgba(83,252,24,.15); }

/* Twitch/Kick tracker border on open */
details.stream-row.twitch-row { border-left: 3px solid transparent; transition: border-color .2s; }
details.stream-row.twitch-row[open] { border-left-color: #9146ff; }
details.stream-row.kick-row   { border-left: 3px solid transparent; transition: border-color .2s; }
details.stream-row.kick-row[open]   { border-left-color: #53fc18; }

/* Legacy .settings-form / .settings-section kept for any other pages */
.settings-form { max-width: 640px; display: flex; flex-direction: column; gap: 1.5rem; }
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.settings-section h2, .settings-section h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: -.25rem;
}
.settings-section input[type="text"],
.settings-section input[type="password"] { width: 100%; }
.settings-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ── User profile page ───────────────────────────────────────────────────── */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.75rem;
}
.profile-banner {
  height: 90px;
  background: linear-gradient(135deg, #1a1e5c 0%, #2a1f5c 30%, #1a2f5c 70%, #0d1117 100%);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.profile-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 20% 50%, rgba(88,101,242,.3) 0%, transparent 60%),
              radial-gradient(ellipse 40% 80% at 80% 30%, rgba(114,137,218,.2) 0%, transparent 50%);
}
.profile-body {
  display: flex;
  gap: 1.5rem;
  padding: 0 1.75rem 1.75rem;
  flex-wrap: wrap;
}
.profile-avatar-wrap { margin-top: -1.5rem; flex-shrink: 0; position: relative; z-index: 2; }
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  display: block;
  box-shadow: 0 0 0 2px rgba(88,101,242,.4), 0 4px 16px rgba(0,0,0,.5);
}
.profile-info { flex: 1; min-width: 0; padding-top: .45rem; }
.profile-name {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.02em;
}
.profile-username {
  font-size: .875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.profile-id {
  font-family: monospace;
  font-size: .75rem;
  color: var(--text-subtle);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: .1rem .45rem;
  border-radius: 4px;
}
.profile-guild { font-size: .82rem; color: var(--text-muted); margin-top: .4rem; }
.profile-guild a { color: var(--accent); }

/* ── Profile XP grid ─────────────────────────────────────────────────────── */
.profile-xp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.profile-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.profile-stat-label {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}
.profile-stat-value    { font-size: 1.2rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.profile-stat-sub      { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.profile-stat-sub-live { font-size: .72rem; color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }

/* ── XP progress card ─────────────────────────────────────────────────────── */
.xp-progress-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.xp-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.xp-progress-label { font-size: .85rem; color: var(--text-muted); }
.xp-progress-value { font-size: .85rem; font-weight: 600; color: var(--text); }

/* ── Dual XP tracks (profile page) ──────────────────────────────────────── */
.xp-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 520px) { .xp-tracks { grid-template-columns: 1fr; } }
.xp-track {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: border-color .15s;
}
.xp-track-chat  { border-left: 3px solid var(--accent); }
.xp-track-voice { border-left: 3px solid var(--green); }
.xp-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.xp-track-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.xp-track-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.xp-track-chat .xp-track-amount  { color: var(--accent-light); }
.xp-track-voice .xp-track-amount { color: var(--green); }
.xp-track-bar-wrap {
  height: 5px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
}
.xp-track-bar-fill {
  height: 100%;
  border-radius: 99px;
  min-width: 2px;
}
.xp-track-chat  .xp-track-bar-fill { background: linear-gradient(90deg, var(--accent), #a5b4fc); }
.xp-track-voice .xp-track-bar-fill { background: linear-gradient(90deg, var(--green), #56d364); }
.xp-track-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .72rem;
  color: var(--text-muted);
}

/* ── Section headings ────────────────────────────────────────────────────── */
.section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding: .4rem 0 .5rem .75rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  letter-spacing: -.01em;
}

/* ── Compact leaderboard level row ──────────────────────────────────────── */
.lb-level-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.lb-level-total {
  /* inherits .level-badge */
}
.lb-level-chat {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-light);
  white-space: nowrap;
}
.lb-level-voice {
  font-size: .75rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

/* Compact leaderboard XP display */
.lb-xp-total {
  display: block;
  font-weight: 700;
  color: var(--text);
  font-size: .9rem;
}
.lb-xp-sub {
  display: flex;
  gap: .5rem;
  margin-top: 1px;
}

/* ── Settings textarea ───────────────────────────────────────────────────── */
.settings-textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .55rem .85rem;
  font-size: .82rem;
  font-family: var(--font-mono, 'Courier New', monospace);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.settings-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-textarea::placeholder { color: var(--text-subtle); }

/* ── Number inputs in settings ───────────────────────────────────────────── */
input[type="number"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .45rem .7rem;
  font-size: .875rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
}
input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Override for .settings-input used inside .settings-input-wrap */
.settings-input-wrap input[type="number"] {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.settings-input-wrap input[type="number"]::-webkit-inner-spin-button,
.settings-input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.settings-input-wrap input[type="number"]:focus { box-shadow: none; }

/* ── Settings standalone select (used when no icon prefix is needed) ──── */
.settings-select-wrap {
  position: relative;
  display: block;
}
.settings-select-wrap::after {
  content: '';
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}
.settings-select {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .6rem 2.5rem .6rem .85rem;
  font-size: .875rem;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.settings-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-select optgroup { color: var(--text-muted); font-weight: 700; font-size: .78rem; }
.settings-select option   { color: var(--text); background: var(--surface2); padding: .3rem; }

/* ── Settings toggle row helper ───────────────────────────────────────── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* ── AutoMod preset checkboxes ────────────────────────────────────────── */
.automod-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .6rem;
  margin-top: .6rem;
}
.automod-preset-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.automod-preset-card input[type="checkbox"] { display: none; }
.automod-preset-card:hover {
  border-color: var(--border-hover);
  background: var(--surface3);
}
.automod-preset-card.active {
  border-color: var(--accent);
  background: rgba(88,101,242,.1);
}
.automod-preset-icon { font-size: 1.1rem; flex-shrink: 0; }
.automod-preset-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.automod-preset-label { font-size: .85rem; color: var(--text); line-height: 1.3; }
.automod-preset-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.3; }
.automod-preset-card.active .automod-preset-label { color: var(--text); font-weight: 500; }
/* Checkbox tick indicator */
.automod-preset-card::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.automod-preset-card.active::after {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Giveaway tab redesign ────────────────────────────────────────────── */

/* Start Giveaway card */
.ga-start-card { padding: 1.25rem; }
.ga-start-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
}
.ga-start-icon { font-size: 1.4rem; line-height: 1; padding-top: .1rem; flex-shrink: 0; }
.ga-start-title { font-size: .95rem; font-weight: 700; color: var(--text); }
.ga-start-sub   { font-size: .8rem;  color: var(--text-muted); margin-top: .15rem; }
.ga-start-form { width: 100%; }
.ga-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.ga-start-field { display: flex; flex-direction: column; gap: .35rem; }
.ga-start-field label { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.ga-start-prize   { grid-column: 1 / 2; }
.ga-start-channel { grid-column: 2 / 3; }
.ga-start-duration, .ga-start-winners { grid-column: span 1; }
.ga-start-desc { grid-column: 1 / -1; }
.ga-start-select { cursor: pointer; }
.ga-required { color: var(--red); }
.ga-optional { color: var(--text-muted); font-weight: 400; }
.ga-start-footer { margin-top: .9rem; }
.ga-start-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .55rem 1.2rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.ga-start-btn:hover { background: #4752c4; box-shadow: 0 2px 8px rgba(88,101,242,.35); }
@media (max-width: 600px) {
  .ga-start-grid { grid-template-columns: 1fr; }
  .ga-start-prize, .ga-start-channel { grid-column: 1 / -1; }
}

/* Live giveaways panel */
.ga-live-panel {
  background: var(--surface);
  border: 1px solid rgba(63,185,80,.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ga-live-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.25rem;
  background: rgba(63,185,80,.07);
  border-bottom: 1px solid rgba(63,185,80,.15);
}
.ga-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(63,185,80,.25);
  animation: ga-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes ga-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(63,185,80,.25); }
  50%       { box-shadow: 0 0 0 5px rgba(63,185,80,.08); }
}
.ga-live-title { font-size: .875rem; font-weight: 700; color: var(--green); }
.ga-live-count {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(63,185,80,.12);
  border: 1px solid rgba(63,185,80,.2);
  border-radius: 999px;
  padding: .15rem .55rem;
}
.ga-live-list { display: flex; flex-direction: column; }
.ga-live-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ga-live-item:last-child { border-bottom: none; }
.ga-live-actions {
  display: flex;
  gap: .4rem;
  margin-left: auto;
  flex-shrink: 0;
}
.ga-live-btn {
  font-size: .75rem;
  font-weight: 600;
  padding: .28rem .6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.ga-btn-end    { border-color: rgba(88,101,242,.4); color: #79c0ff; }
.ga-btn-end:hover { background: rgba(88,101,242,.18); }
.ga-btn-cancel { border-color: rgba(248,81,73,.35); color: var(--red); }
.ga-btn-cancel:hover { background: rgba(248,81,73,.12); }
.ga-live-prize {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
.ga-live-id {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-family: monospace;
  flex-shrink: 0;
}
.ga-live-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.ga-live-stat {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.ga-live-timer { color: var(--gold); font-weight: 600; }

/* Empty state */
.ga-live-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
}
.ga-live-empty > div { display: flex; flex-direction: column; gap: .2rem; }
.ga-live-empty strong { font-size: .875rem; color: var(--text); }
.ga-live-empty p { font-size: .82rem; color: var(--text-muted); margin: 0; }

/* Command quick-reference strip */
.ga-commands-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem;
}
.ga-command {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .65rem .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.ga-command:hover { border-color: rgba(88,101,242,.3); }
.ga-command code {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(88,101,242,.12);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-family: monospace;
  white-space: nowrap;
}
.ga-command span { font-size: .75rem; color: var(--text-muted); }

/* Section header inside a card */
.ga-card-section-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.ga-section-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.ga-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.ga-section-sub {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ID grid — 3 columns on desktop, 1 on mobile */
.ga-id-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Each ID column rendered as a mini-card */
.ga-id-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.ga-id-col:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.ga-id-col .settings-field-label { margin-bottom: 0; }
.ga-id-col .settings-field-desc  { margin-bottom: .25rem; font-size: .78rem; }

/* Monospace ID textarea */
.ga-id-textarea {
  font-family: 'Consolas', 'Monaco', monospace !important;
  font-size: .8rem !important;
  line-height: 1.7 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: .65rem .8rem !important;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
  color: var(--text) !important;
  transition: border-color .15s, box-shadow .15s;
  min-height: 110px;
}
.ga-id-textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Informational tip callout used in giveaway ID cards */
.ga-id-tip {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .85rem;
  background: rgba(88,101,242,.07);
  border: 1px solid rgba(88,101,242,.18);
  border-radius: var(--radius);
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: .1rem 0 .25rem;
}
.ga-id-tip-icon { flex-shrink: 0; line-height: 1.5; }
.ga-id-tip strong { color: var(--accent-light, #79c0ff); font-weight: 600; }

/* Wrapper that visually groups chips + templates + textarea + preview */
.ga-template-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-top: .35rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ga-template-field .dm-preview-wrap {
  background: var(--surface);
  margin-top: .1rem;
}

/* Entry role mode radio cards */
.ga-mode-cards {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.ga-mode-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  flex: 1;
  min-width: 200px;
  user-select: none;
}
.ga-mode-card input[type="radio"] { display: none; }
.ga-mode-card:hover { border-color: var(--border-hover); background: var(--surface3); }
.ga-mode-active {
  border-color: var(--accent) !important;
  background: rgba(88,101,242,.1) !important;
}
.ga-mode-icon { font-size: 1.2rem; flex-shrink: 0; }
.ga-mode-card > div { display: flex; flex-direction: column; gap: .15rem; }
.ga-mode-card strong { font-size: .875rem; color: var(--text); }
.ga-mode-card span { font-size: .78rem; color: var(--text-muted); }

/* Variable inline codes in field desc */
.ga-var {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(210,153,34,.12);
  border: 1px solid rgba(210,153,34,.2);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-family: monospace;
  white-space: nowrap;
}

/* ── Giveaway History table ──────────────────────────────────────────────── */
.ga-history-header {
  margin-bottom: 1rem;
}
.ga-history-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
}
.ga-history-sub {
  font-size: .82rem;
  color: var(--text-muted);
}
.ga-history-empty {
  font-size: .88rem;
  color: var(--text-muted);
  padding: .75rem 0;
}
.ga-history-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.ga-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  color: var(--text);
}
.ga-history-head th {
  background: var(--surface2);
  padding: .55rem .75rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ga-history-row {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.ga-history-row:last-child { border-bottom: none; }
.ga-history-row:hover { background: var(--surface2); }
.ga-history-row td {
  padding: .55rem .75rem;
  vertical-align: middle;
}
.ga-history-id {
  font-family: monospace;
  color: var(--text-muted);
  white-space: nowrap;
}
.ga-history-prize {
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-history-status {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 99px;
  white-space: nowrap;
}
.ga-status-ok   { background: rgba(63,185,80,.15); color: var(--green); border: 1px solid rgba(63,185,80,.3); }
.ga-status-warn { background: rgba(227,179,65,.15); color: var(--gold);  border: 1px solid rgba(227,179,65,.3); }
.ga-status-none { background: rgba(248,81,73,.15);  color: var(--red);   border: 1px solid rgba(248,81,73,.3); }
.ga-history-entries,
.ga-history-date { white-space: nowrap; }
.ga-history-winners {
  font-size: .78rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-history-none { color: var(--text-muted); }
.ga-history-actions { white-space: nowrap; }
.ga-history-form { display: inline; }
.ga-history-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  cursor: pointer;
  transition: background .13s, border-color .13s;
  white-space: nowrap;
}
.ga-history-btn:hover { background: var(--surface2); border-color: var(--border-hover,#484f58); }
.ga-btn-reroll { border-color: rgba(88,101,242,.4); color: #79c0ff; }
.ga-btn-reroll:hover { background: rgba(88,101,242,.15); }
.ga-btn-restart { border-color: rgba(63,185,80,.35); color: var(--green); }
.ga-btn-restart:hover { background: rgba(63,185,80,.1); }
.ga-restart-row {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ga-restart-dur {
  width: 62px;
  padding: .25rem .45rem;
  font-size: .78rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  -moz-appearance: textfield;
}
.ga-restart-dur::-webkit-inner-spin-button,
.ga-restart-dur::-webkit-outer-spin-button { -webkit-appearance: none; }
.ga-restart-unit { font-size: .75rem; color: var(--text-muted); }
.ga-history-note {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 1rem;
  line-height: 1.6;
}

/* ── Discord OAuth login button ──────────────────────────────────────────── */
.btn-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #5865f2;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .65rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .08s;
  text-decoration: none;
  letter-spacing: .01em;
}
.btn-discord:hover {
  background: #4752c4;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(88,101,242,.3);
}
.btn-discord:active { transform: scale(.98); }
.discord-logo { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ── Login divider ───────────────────────────────────────────────────────── */
.login-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0;
  color: var(--text-subtle);
  font-size: .78rem;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Settings textarea — styled like .settings-input-wrap ────────────────── */
textarea.settings-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.5;
  padding: .55rem .85rem;
  resize: vertical;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea.settings-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea.settings-input::placeholder { color: var(--text-subtle); }

/* ── Settings section label (lightweight inter-card header) ──────────────── */
.settings-section-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  padding: .75rem .1rem .2rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.settings-section-label-desc {
  font-size: .8rem;
  color: var(--text-subtle);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── First field in a settings-card should never show the top separator ──── */
.settings-card > .settings-field:first-child { border-top: none; }

/* ── Panel Access tab ────────────────────────────────────────────────────── */
.access-grants-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.access-grants-head,
.access-grants-row {
  display: grid;
  grid-template-columns: minmax(140px,1fr) 80px 100px minmax(100px,1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .15rem;
  font-size: .82rem;
}
.access-grants-head {
  color: var(--text-muted);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: .4rem;
}
.access-grants-row { border-bottom: 1px solid rgba(48,54,61,.5); }
.access-grants-row:last-child { border-bottom: none; }
.access-id code { font-size: .8rem; }
.access-granted-by { color: var(--text-muted); font-size: .8rem; }

/* Role/type badges on access tab */
.access-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px;
  text-transform: capitalize;
}
.access-badge-role       { background: var(--blue-muted);                    color: var(--blue);        border: 1px solid rgba(88,166,255,.25); }
.access-badge-user       { background: rgba(63,185,80,.12);                  color: var(--green);       border: 1px solid rgba(63,185,80,.25); }
.access-badge-role-admin     { background: rgba(88,101,242,.15); color: var(--accent-light); border: 1px solid rgba(88,101,242,.3); }
.access-badge-role-moderator { background: rgba(63,185,80,.12);  color: var(--green);         border: 1px solid rgba(63,185,80,.25); }
.access-badge-role-viewer    { background: var(--surface3);      color: var(--text-muted);    border: 1px solid var(--border); }

/* Add-grant row */
.access-add-row {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* Tab lock grid */
.access-lock-grid {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.access-lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem .1rem;
  border-bottom: 1px solid rgba(48,54,61,.4);
}
.access-lock-row:last-child { border-bottom: none; }
.access-lock-tab-label { font-size: .88rem; color: var(--text); }
.access-lock-select { width: 170px; flex-shrink: 0; }

/* Small danger button used in grants table */
.btn-sm {
  font-size: .78rem;
  padding: .25rem .65rem;
}
.btn-danger {
  background: rgba(248,81,73,.12);
  color: var(--red);
  border: 1px solid rgba(248,81,73,.3);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, box-shadow .15s;
}
.btn-danger:hover {
  background: rgba(248,81,73,.22);
  box-shadow: 0 0 0 3px rgba(248,81,73,.15);
}

/* ── Audit Log tab ───────────────────────────────────────────────────────── */
.audit-table {
  display: flex;
  flex-direction: column;
}
.audit-head,
.audit-row {
  display: grid;
  grid-template-columns: 130px 90px 120px 170px 1fr;
  align-items: center;
  gap: .5rem;
  padding: .45rem .15rem;
  font-size: .82rem;
}
.audit-head {
  color: var(--text-muted);
  font-weight: 600;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: .4rem;
}
.audit-row { border-bottom: 1px solid rgba(48,54,61,.45); }
.audit-row:last-child { border-bottom: none; }
.audit-time { color: var(--text-muted); font-size: .79rem; white-space: nowrap; }

.audit-tab-badge {
  display: inline-block;
  font-size: .71rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--surface3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: capitalize;
}

.audit-action-badge {
  display: inline-block;
  font-size: .71rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  text-transform: capitalize;
}
.audit-action-save         { background: rgba(63,185,80,.12);  color: var(--green);        border: 1px solid rgba(63,185,80,.25); }
.audit-action-grant_add    { background: rgba(88,101,242,.12); color: var(--accent-light); border: 1px solid rgba(88,101,242,.3); }
.audit-action-grant_remove { background: rgba(248,81,73,.12);  color: var(--red);          border: 1px solid rgba(248,81,73,.3); }
.audit-action-lock_change  { background: rgba(227,179,65,.12); color: var(--gold);         border: 1px solid rgba(227,179,65,.3); }
.audit-action-log_clear    { background: rgba(248,81,73,.12);  color: var(--red);          border: 1px solid rgba(248,81,73,.3); }
.audit-action-log_retention { background: var(--surface3);     color: var(--text-muted);   border: 1px solid var(--border); }

.audit-actor { display: flex; align-items: center; gap: .35rem; overflow: hidden; }
.audit-actor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .81rem; }
.audit-actor-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 800;
  flex-shrink: 0;
}
.audit-actor-type.discord  { background: rgba(88,101,242,.2); color: var(--accent-light); }
.audit-actor-type.password { background: var(--surface3);      color: var(--text-muted); }
.audit-detail { color: var(--text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── DM Template editor ──────────────────────────────────────────────────── */
.dm-template-card { padding: 1rem 1.25rem; }
.dm-template-card-sep { margin-top: .75rem; }

.dm-template-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.dm-template-icon { font-size: 1.2rem; }
.dm-template-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.dm-template-hint { font-size: .75rem; color: var(--text-muted); margin-left: auto; }

/* Variable chips */
.dm-var-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .6rem;
}
.dm-var-chip {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: .73rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--accent-light, #79c0ff);
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.dm-var-chip:hover {
  background: rgba(88,101,242,.18);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88,101,242,.15);
}

/* Template quick-insert row */
.dm-tpl-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.dm-tpl-label { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.dm-tpl-btn {
  font-size: .74rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dm-tpl-btn:hover { background: var(--surface3); border-color: var(--accent); color: var(--accent-light, #79c0ff); }
.dm-tpl-btn-clear { color: var(--text-muted); }
.dm-tpl-btn-clear:hover { color: var(--red); border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.08); }

/* Textarea */
.dm-textarea {
  width: 100%;
  margin-bottom: .6rem;
  resize: vertical;
  min-height: 90px;
}

/* Live preview */
.dm-preview-wrap {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  min-height: 38px;
}
.dm-preview-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: .05rem;
}
.dm-preview {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.5;
  flex: 1;
  word-break: break-word;
}
.dm-preview-empty { color: var(--text-muted); font-style: italic; }
.dm-preview strong { color: var(--text); font-weight: 700; }

/* ── Games & Economy tab ─────────────────────────────────────────────────── */
.stream-stat-pill.tiktok  { background: rgba(255,0,80,.12);    color: #ff6fa8; border: 1px solid rgba(255,0,80,.3); }
.stream-stat-pill.twitter { background: rgba(29,155,240,.12);  color: #60c4f8; border: 1px solid rgba(29,155,240,.3); }

/* ── Games & Economy ────────────────────────────────────────────────────── */
.games-master-card {
  padding: 0;
  overflow: visible !important; /* allow dropdown/picker overlays to escape */
}
.games-master-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem .8rem;
  border-bottom: 1px solid var(--border);
}
.games-master-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .75rem;
  padding: 1rem 1.25rem;
}
.games-master-fields > div { display: flex; flex-direction: column; gap: .3rem; }

/* ── Access control column ───────────────────────────────────────────────── */
.games-access-col  { display: flex; flex-direction: column; padding: .75rem; border-radius: var(--radius); overflow: visible; }
.games-access-allow { background: rgba(63,185,80,.04);  border: 1px solid rgba(63,185,80,.2); }
.games-access-block { background: rgba(248,81,73,.04);   border: 1px solid rgba(248,81,73,.2); }
.games-access-heading { font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: .6rem; }
/* access control card itself needs overflow visible so id-picker dropdowns work */
.games-access-card { overflow: visible !important; }

/* ── Games list (row layout) ─────────────────────────────────────────────── */
.games-list {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.game-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center; gap: .6rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--game-accent, var(--border));
  transition: background .1s;
}
.game-row:last-child { border-bottom: none; }
.game-row:hover { background: var(--surface3); }
.game-row:has(.game-card-toggle:not(:checked)) { opacity: .5; }
.game-row-name  { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.game-row-icon  { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.game-row-title { font-size: .87rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.game-row-bets  { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.game-row-label { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.game-row-ch    { flex-shrink: 0; }
@media (max-width: 680px) {
  .game-row { grid-template-columns: 44px 1fr; row-gap: .4rem; }
  .game-row-bets, .game-row-ch { grid-column: 1 / -1; padding-left: .25rem; }
}

/* ── Economy leaderboard mini-card ──────────────────────────────────────── */
.eco-lb-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.eco-lb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem;
  background: var(--surface3);
  border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; color: var(--text);
}
.eco-lb-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center; gap: .55rem;
  padding: .45rem .9rem;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.eco-lb-row:last-child { border-bottom: none; }
.eco-lb-row:hover { background: var(--surface3); }
.eco-lb-rank { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.eco-lb-rank.gold   { color: #fbbf24; }
.eco-lb-rank.silver { color: #94a3b8; }
.eco-lb-rank.bronze { color: #b45309; }
.eco-lb-user { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.eco-lb-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.eco-lb-name { font-size: .8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-lb-bal { font-size: .82rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ── Shared game primitives ──────────────────────────────────────────────── */
.game-card-tag {
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: 99px;
  background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3);
  flex-shrink: 0;
}
.game-bet-input { width: 90px; }
.games-save-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ── Milestone chip picker ────────────────────────────────────────────────── */
.milestone-picker {}
.milestone-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  min-height: 2rem; margin-bottom: .5rem;
}
.milestone-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: .5rem; padding: .3rem .35rem .3rem .6rem;
  font-size: .82rem; color: var(--text);
  transition: border-color .15s;
}
.milestone-chip:hover { border-color: var(--border-hover); }
.milestone-chip-count { font-weight: 700; color: var(--text-muted); font-size: .75rem; }
.milestone-chip-emoji { font-size: .95rem; }
.milestone-add {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
}

/* ── Landing page (index.php) ───────────────────────────────────────────── */

/* Hero */
.lp-hero {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 4rem 1.5rem 3rem;
}
.lp-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88,101,242,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 80%, rgba(155,89,245,.08) 0%, transparent 60%);
}
.lp-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

/* ── ID Chip Picker (TTS allowed roles / users) ─────────────────────────── */
.id-picker { display: flex; flex-direction: column; gap: .5rem; }

/* Chips row */
.id-picker-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  min-height: 2rem;
}
.id-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: .5rem; padding: .3rem .35rem .3rem .5rem;
  color: var(--text); max-width: 28rem;
  transition: border-color .15s, background .15s; cursor: default;
}
.id-chip:hover { border-color: var(--border-hover); }
.id-chip-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; display: block;
}
.id-chip-avatar-init {
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; color: #fff; user-select: none;
}
.id-chip-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.id-chip-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.id-chip-label {
  font-size: .82rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.id-chip-id {
  font-size: .62rem; color: var(--text-subtle);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.id-chip-remove {
  background: none; border: none; padding: 0; margin: 0 0 0 .1rem;
  color: var(--text-subtle); cursor: pointer; font-size: .85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; width: 1.2rem; height: 1.2rem; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.id-chip-remove:hover { color: #f85149; background: rgba(248,81,73,.12); }

/* Add row */
.id-picker-add { display: flex; gap: .4rem; position: relative; }
.id-picker-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-family: inherit;
  font-size: .875rem; padding: .45rem .75rem; outline: none;
  transition: border-color .15s, box-shadow .15s; min-width: 0;
}
.id-picker-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.id-picker-input::placeholder { color: var(--text-subtle); }
.id-picker-btn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: .8rem;
  padding: .45rem .8rem; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.id-picker-btn:hover { background: var(--surface3); border-color: var(--border-hover); }

/* Dropdown suggestions */
.id-picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); z-index: 200;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: none;
}
.id-picker-dropdown.open { display: block; }
.id-picker-option {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; cursor: pointer; font-size: .875rem;
  transition: background .1s;
}
.id-picker-option:hover, .id-picker-option.active { background: var(--surface3); }
.id-picker-option-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.id-picker-option-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-picker-option-id { font-size: .75rem; color: var(--text-subtle); flex-shrink: 0; }
.id-picker-option-avatar {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.id-picker-option-avatar-init {
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff; user-select: none;
}
.id-picker-empty { padding: .5rem .75rem; font-size: .85rem; color: var(--text-subtle); }

/* Resolving spinner */
@keyframes id-picker-spin { to { transform: rotate(360deg); } }
.id-picker-resolving {
  font-size: .8rem; color: var(--text-subtle); padding: .2rem .1rem;
  display: none; align-items: center; gap: .4rem;
}
.id-picker-resolving::before {
  content: ''; display: inline-block;
  width: .75rem; height: .75rem;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: id-picker-spin .65s linear infinite;
  flex-shrink: 0;
}
.id-picker-resolving.visible { display: flex; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.3); border-radius: 999px;
  padding: .3rem 1rem; margin-bottom: 1.5rem;
}
.lp-hero-title {
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900; line-height: 1.12; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--text) 0%, #a5b4fc 60%, #c27dfa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 1.1rem;
}
.lp-hero-sub {
  font-size: 1.05rem; color: var(--text-muted); line-height: 1.7;
  max-width: 580px; margin: 0 auto 2rem;
}
.lp-hero-actions {
  display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 2.25rem;
}
.lp-btn-invite { padding: .65rem 1.85rem; font-size: .95rem; font-weight: 700; }
.lp-btn-browse { padding: .65rem 1.5rem; font-size: .95rem; }
.lp-hero-stats {
  display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem; margin-top: .5rem;
}
.lp-hstat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.lp-hstat strong { font-size: 1.65rem; font-weight: 900; color: var(--text); line-height: 1; }
.lp-hstat span {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-subtle);
}

/* Sections */
.lp-section {
  max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem;
}
.lp-section-title {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em;
  text-align: center; color: var(--text); margin-bottom: .6rem;
}
.lp-section-sub {
  text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 2.25rem;
}

/* Features grid */
.lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.lp-feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
  transition: border-color .2s, box-shadow .2s, transform .18s;
}
.lp-feature:hover {
  border-color: rgba(88,101,242,.35);
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(88,101,242,.1);
  transform: translateY(-2px);
}
.lp-feature-icon {
  font-size: 2rem; margin-bottom: .75rem; line-height: 1;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); margin-bottom: 1rem;
}
.lp-fi-xp      { background: rgba(88,101,242,.12); }
.lp-fi-mod     { background: rgba(63,185,80,.1); }
.lp-fi-tts     { background: rgba(59,130,246,.1); }
.lp-fi-music   { background: rgba(168,85,247,.1); }
.lp-fi-giveaway{ background: rgba(249,115,22,.1); }
.lp-fi-streams { background: rgba(145,70,255,.1); }
.lp-fi-panel   { background: rgba(20,184,166,.1); }
.lp-feature h3 {
  font-size: .97rem; font-weight: 700; color: var(--text); margin-bottom: .4rem;
}
.lp-feature p {
  font-size: .84rem; color: var(--text-muted); line-height: 1.65; margin: 0;
}

/* Steps */
.lp-steps-section { border-top: 1px solid var(--border); }
.lp-steps {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.lp-step {
  flex: 1; min-width: 180px; max-width: 260px;
  text-align: center; padding: 1.25rem 1rem;
}
.lp-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(88,101,242,.15); border: 2px solid rgba(88,101,242,.4);
  color: var(--accent); font-weight: 900; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.lp-step h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.lp-step p  { font-size: .82rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.lp-step-arrow {
  font-size: 1.5rem; color: var(--border); align-self: center;
  padding: 0 .25rem; margin-top: -1.5rem;
}

/* CTA */
.lp-cta {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  max-width: 600px; margin: 0 auto;
  border-top: 1px solid var(--border);
}
.lp-cta-title {
  font-size: 1.75rem; font-weight: 900; letter-spacing: -.035em;
  color: var(--text); margin-bottom: .65rem;
}
.lp-cta-sub {
  font-size: .92rem; color: var(--text-muted); line-height: 1.65;
  margin-bottom: 1.75rem;
}

/* Responsive */
@media (max-width: 640px) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-step-arrow { display: none; }
  .lp-steps { flex-direction: column; align-items: center; }
  .lp-step { max-width: 100%; }
  .lp-hero-title { font-size: 1.9rem; }
}