:root {
  --red: #e92324;
  --red-dim: #b81c1d;
  --bg: #131418;
  --bg2: #1a1c21;
  --card: #202329;
  --card-hover: #262931;
  --text: #f2f2f4;
  --muted: #8a8d97;
  --danger: #e92324;
  --success: #2ecc71;
  --border: #2b2e35;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.85em; }
.error { color: var(--danger); font-size: 0.9em; }
svg.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Global dark input defaults */
input, select, textarea {
  box-sizing: border-box;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9em;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
}
select option {
  background: var(--card);
  color: var(--text);
}
optgroup {
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
}

/* Connect screen */
.connect-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #1c1013 0%, var(--bg) 60%); }
.connect-card {
  background: var(--card); padding: 36px; border-radius: 18px; width: 400px;
  border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.connect-logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 14px; display: block; }
.connect-card h1 { margin: 0 0 4px; font-size: 1.35em; letter-spacing: -0.01em; }
.connect-card label { display: block; margin: 16px 0 6px; font-size: 0.8em; color: var(--muted); font-weight: 500; }
.connect-card input {
  width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.95em;
}
.connect-card input:focus { outline: none; border-color: var(--red); }
.btn-primary {
  margin-top: 22px; width: 100%; padding: 12px; border: none; border-radius: 9px;
  background: var(--red); color: white; font-weight: 600; cursor: pointer; font-size: 0.95em;
  transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-secondary {
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); cursor: pointer; font-size: 0.88em;
  display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s;
}
.btn-secondary:hover { background: var(--card-hover); border-color: #3a3d45; }
.small { padding: 7px 11px; font-size: 0.8em; }

/* App layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 245px; background: var(--bg2); padding: 18px 12px; display: flex; flex-direction: column;
  gap: 3px; border-right: 1px solid var(--border); flex-shrink: 0;
}

.nav-category-header {
  font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #72767d; padding: 14px 10px 4px; display: flex; align-items: center; gap: 6px;
  user-select: none;
}
.nav-divider {
  height: 1px; background: var(--border); margin: 6px 6px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 6px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.brand span { font-weight: 700; font-size: 1.05em; letter-spacing: -0.01em; }
.nav-btn {
  text-align: left; padding: 9px 12px; border-radius: 9px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 0.86em; display: flex; align-items: center; gap: 10px;
  transition: background 0.12s, color 0.12s; font-weight: 500;
}
.nav-btn:hover { background: var(--card); color: var(--text); }
.nav-btn.active { background: var(--red); color: white; }
.nav-btn.active svg { stroke: white; }
.ws-status { margin-top: 16px; font-size: 0.72em; color: var(--muted); padding: 8px 6px 4px; display: flex; align-items: center; gap: 6px; }
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.ws-dot.live { background: var(--success); }
.ws-dot.down { background: var(--danger); }
.content { flex: 1; padding: 36px 44px; max-width: 1400px; }
.tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tab-header h2 { margin: 0; font-size: 1.6em; letter-spacing: -0.01em; }
.tab-header p { margin: 4px 0 0; }
.tab h2 { margin-top: 0; font-size: 1.6em; letter-spacing: -0.01em; }

/* Forms */
.card-form {
  background: var(--card); padding: 22px; border-radius: 14px; border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.card-form.inline-form { flex-direction: row; align-items: center; gap: 10px; }
.card-form label { margin: 13px 0 6px; font-size: 0.82em; color: var(--muted); font-weight: 500; }
.card-form input, .card-form select, .card-form textarea {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.9em; font-family: inherit;
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus { outline: none; border-color: var(--red); }
/* Modern native color pickers in card-form */
.card-form input[type=color] {
  padding: 2px 4px; height: 38px; width: 60px; border-radius: 9px; cursor: pointer; background: var(--bg2);
}
.btn-row { display: flex; gap: 10px; margin-top: 20px; }

/* Section gap spacing */
.section-gap { margin-top: 24px; }

/* Panel Overview (Ticket King Style Grid) */
.panel-overview-toolbar {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap;
}
.search-wrap { flex: 1; min-width: 260px; position: relative; }
.search-wrap input {
  width: 100%; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 0.9em;
}
.search-wrap input:focus { outline: none; border-color: var(--red); }

.panel-grid-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; margin-bottom: 32px;
}
.panel-card-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  transition: transform 0.15s, border-color 0.15s;
}
.panel-card-item:hover { border-color: #3a3d45; transform: translateY(-2px); }
.panel-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-card-title { font-size: 1.1em; font-weight: 700; color: #fff; margin-bottom: 4px; }
.panel-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Panel Designer (In-Tab 2-Column Layout - Ticket King Style) */
.designer-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.designer-title-area { display: flex; align-items: center; gap: 16px; }
.designer-header-actions { display: flex; gap: 10px; }

.panel-designer-grid {
  display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start;
}
@media (max-width: 1024px) {
  .panel-designer-grid { grid-template-columns: 1fr; }
}

.designer-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.style-marginTop { margin-top: 20px; }
.designer-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.designer-card-header h4 { margin: 0; font-size: 1.05em; font-weight: 600; }
.flex-between { justify-content: space-between; }
.designer-card-body { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.82em; color: var(--muted); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.9em; font-family: inherit; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--red); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Color Swatch Picker (Visual Circle + #HEX Input) */
.color-swatch-picker {
  display: flex; align-items: center; gap: 12px; position: relative;
}
.color-swatch {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--red); cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.15s, border-color 0.15s;
}
.color-swatch:hover { transform: scale(1.08); border-color: #fff; }
.hex-input { flex: 1; font-family: monospace; font-size: 0.95em !important; font-weight: 600; text-transform: uppercase; }
.native-color-picker {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; opacity: 0; cursor: pointer;
}

/* Standalone Emoji Trigger Button */
.designer-emoji-btn {
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3em; cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; user-select: none;
}
.designer-emoji-btn:hover { border-color: var(--red); background: var(--card-hover); transform: scale(1.08); }

/* Input with Emoji trigger */
.input-with-emoji { position: relative; display: flex; align-items: center; }
.input-with-emoji input, .input-with-emoji textarea { padding-right: 40px !important; }
.btn-emoji-trigger {
  position: absolute; right: 8px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; font-size: 1.0em; cursor: pointer; padding: 4px 7px; opacity: 0.85;
  transition: opacity 0.15s, background 0.15s; line-height: 1;
}
.btn-emoji-trigger:hover { opacity: 1; background: var(--card-hover); border-color: #4e5058; }

/* ========== Multi-Select Role Dropdown ========== */
.ms-dropdown { position: relative; width: 100%; }
.ms-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.9em; cursor: pointer;
  user-select: none; transition: border-color 0.15s;
}
.ms-dropdown-trigger:hover { border-color: #4e5058; }
.ms-dropdown-trigger.open { border-color: var(--red); }
.ms-dropdown-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-dropdown-arrow { color: var(--muted); font-size: 0.7em; flex-shrink: 0; margin-left: 8px; transition: transform 0.15s; }
.ms-dropdown-trigger.open .ms-dropdown-arrow { transform: rotate(180deg); }
.ms-dropdown-panel {
  position: absolute; z-index: 50; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; max-height: 240px; overflow-y: auto; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); top: calc(100% + 4px); left: 0;
}
.ms-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer;
  transition: background 0.1s; font-size: 0.88em;
}
.ms-item:hover { background: var(--card-hover); }
.ms-item.selected { background: rgba(233,35,36,0.1); }
.ms-item input[type=checkbox] {
  accent-color: var(--red); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
}
.ms-item-name { flex: 1; }
.ms-item-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Legacy chip list (used in GuildConfig / AdminTickets / StaffActivity) */
.role-chip-list {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px; min-height: 44px;
}
.role-chip-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 0.82em;
  cursor: pointer; user-select: none; transition: all 0.15s ease;
}
.role-chip-toggle:hover { border-color: #4e5058; background: var(--card-hover); }
.role-chip-toggle.active {
  border-color: var(--red); background: rgba(233,35,36,0.15); color: #fff; font-weight: 600;
}
.role-chip-toggle input { accent-color: var(--red); width: 14px; height: 14px; }

/* ========== RoleMultiSelect Component (rms-*) ========== */
.rms-wrap { position: relative; width: 100%; }
.rms-trigger {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text); font-size: 0.9em; cursor: pointer;
  user-select: none; transition: border-color 0.15s; gap: 8px;
}
.rms-trigger:hover { border-color: #4e5058; }
.rms-trigger.open { border-color: var(--red); }
.rms-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; align-items: center; min-width: 0; }
.rms-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 2px 9px 2px 6px; font-size: 0.8em;
  max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rms-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #4e5058; }
.rms-overflow {
  font-size: 0.78em; color: var(--muted); white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 2px 9px; flex-shrink: 0;
}
.rms-placeholder { color: var(--muted); font-size: 0.88em; }
.rms-arrow { color: var(--muted); font-size: 0.7em; flex-shrink: 0; transition: transform 0.15s; }
.rms-trigger.open .rms-arrow { transform: rotate(180deg); }
.rms-panel {
  position: absolute; z-index: 200; top: calc(100% + 4px); left: 0; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55); overflow: hidden;
}
.rms-search {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  background: var(--bg2); border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 0.88em; outline: none;
}
.rms-search::placeholder { color: var(--muted); }
.rms-list { max-height: 220px; overflow-y: auto; }
.rms-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; font-size: 0.88em; transition: background 0.1s;
}
.rms-item:hover { background: var(--card-hover); }
.rms-item.selected { background: rgba(233,35,36,0.1); }
.rms-item input[type=checkbox] { accent-color: var(--red); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.rms-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #4e5058; }
.rms-item-name { flex: 1; }
.rms-empty { padding: 10px 14px; color: var(--muted); font-size: 0.85em; }

/* Discord Live Preview Container */
.discord-embed-preview {
  background: #2b2d31; border-left: 4px solid var(--red); border-radius: 8px;
  padding: 16px 18px; font-size: 0.9em; color: #dbdee1; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  line-height: 1.5;
}
.embed-author { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.9em; font-weight: 600; }
.embed-author img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.embed-title { font-weight: 700; color: #fff; font-size: 1.05em; margin-bottom: 8px; }
.embed-desc { color: #c9ccd2; line-height: 1.6; white-space: pre-wrap; }
.embed-desc strong { color: #fff; }
.embed-desc em { font-style: italic; }
.embed-desc u { text-decoration: underline; }
.embed-desc s { text-decoration: line-through; }
.discord-spoiler { background: #202225; color: transparent; border-radius: 3px; padding: 0 3px; cursor: pointer; transition: color 0.2s, background 0.2s; }
.discord-spoiler:hover { color: #dcddde; background: #36393f; }
.embed-desc code { background: #1e1f22; padding: 2px 5px; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 0.92em; color: #c3c4c7; }
.embed-desc pre { background: #1e1f22; padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; }
.embed-desc pre code { background: transparent; padding: 0; }
.embed-body-row { display: flex; gap: 14px; align-items: flex-start; }
.embed-content { flex: 1; min-width: 0; }
.embed-thumbnail { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.embed-image { width: 100%; border-radius: 6px; margin-top: 10px; }
.embed-footer { margin-top: 12px; font-size: 0.78em; color: var(--muted); padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.embed-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fake-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 6px; font-size: 0.82em; font-weight: 600; }
.fake-btn-primary { background: #5865F2; color: #fff; }
.fake-btn-secondary { background: #4e5058; color: #fff; }
.fake-btn-success { background: #248046; color: #fff; }
.fake-btn-danger { background: #da373c; color: #fff; }

/* Button editor card */
.button-editor-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  margin-bottom: 16px;
}
.button-editor-top-row {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
.button-editor-top-row input, .button-editor-top-row select {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; font-size: 0.9em;
}
.button-editor-top-row input:focus, .button-editor-top-row select:focus {
  outline: none; border-color: var(--red);
}

/* Scrim & Stats Grid */
.stats-overview-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-title { font-size: 0.82em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.stat-value { font-size: 1.8em; font-weight: 800; color: #fff; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-primary { color: var(--red) !important; }

.scrim-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px;
}
.scrim-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  border-left: 4px solid var(--border); display: flex; flex-direction: column; gap: 10px;
}
.scrim-card.win { border-left-color: var(--success); }
.scrim-card.loss { border-left-color: var(--danger); }
.scrim-card.draw { border-left-color: #f1c40f; }

/* ========== Streamer Cards (Twitch / YouTube) ========== */
.streamer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 4px;
}
.streamer-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  display: flex; align-items: center; gap: 16px; transition: border-color 0.15s, transform 0.15s;
}
.streamer-card:hover { border-color: #3a3d45; transform: translateY(-1px); }
.streamer-card.live-card { border-left: 4px solid var(--danger); }
.streamer-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg2); display: flex;
  align-items: center; justify-content: center; font-size: 1.4em; flex-shrink: 0;
}
.streamer-info { flex: 1; min-width: 0; }
.streamer-name { font-weight: 700; font-size: 1.05em; color: #fff; margin-bottom: 3px; }
.streamer-meta { font-size: 0.8em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.streamer-status { flex-shrink: 0; }
.streamer-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ========== Poll Cards ========== */
.poll-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; margin-top: 4px;
}
.poll-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.poll-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.poll-question { font-weight: 700; font-size: 1.05em; color: #fff; line-height: 1.4; }
.poll-option-bar-wrap { display: flex; flex-direction: column; gap: 7px; }
.poll-option-row { display: flex; flex-direction: column; gap: 3px; }
.poll-option-label { display: flex; justify-content: space-between; font-size: 0.82em; color: var(--muted); }
.poll-option-bar-bg { background: var(--bg2); border-radius: 4px; height: 8px; overflow: hidden; }
.poll-option-bar-fill { height: 100%; border-radius: 4px; background: var(--red); transition: width 0.4s; }
.poll-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ========== AutoMod Cards ========== */
.automod-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; margin-bottom: 20px;
}
.automod-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.automod-card-header {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-bottom: 1px solid var(--border); gap: 12px;
}
.automod-card-title { display: flex; align-items: center; gap: 10px; }
.automod-card-title strong { font-size: 1.0em; }
.automod-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.automod-card-body label { font-size: 0.8em; color: var(--muted); font-weight: 500; margin-bottom: 4px; display: block; }
.automod-card-body input, .automod-card-body select, .automod-card-body textarea {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.88em; font-family: inherit; width: 100%;
}
.automod-card-body input:focus, .automod-card-body select:focus { outline: none; border-color: var(--red); }

/* Escalation ladder rows */
.ladder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 8px;
}
.ladder-row input, .ladder-row select {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.88em;
}
.ladder-row input:focus, .ladder-row select:focus { outline: none; border-color: var(--red); }

/* ========== Modern Toggle Switch ========== */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 24px; transition: background 0.2s, border-color 0.2s; cursor: pointer;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 50%;
  transform: translateY(-50%); background: var(--muted); border-radius: 50%; transition: left 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--red); border-color: var(--red); }
.toggle-switch input:checked + .toggle-slider::before { left: 21px; background: #fff; }

/* Bot Status Templates */
.status-template-grid {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.status-template-btn {
  padding: 8px 14px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 0.84em; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.status-template-btn:hover { border-color: var(--red); background: rgba(233,35,36,0.1); }

/* Countdown Card in Bot Status */
.countdown-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-top: 20px;
}
.countdown-card h3 { margin: 0 0 14px; font-size: 1.1em; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* Suggestions Cards */
.suggestion-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; border-left: 5px solid var(--muted);
  transition: transform 0.15s, border-color 0.15s;
}
.suggestion-card:hover { border-color: #3a3d45; }
.suggestion-card.status-pending { border-left-color: #f1c40f; }
.suggestion-card.status-reviewing { border-left-color: #f39c12; }
.suggestion-card.status-processing { border-left-color: #3498db; }
.suggestion-card.status-accepted { border-left-color: #2ecc71; }
.suggestion-card.status-implemented { border-left-color: #9b59b6; }
.suggestion-card.status-rejected { border-left-color: #e74c3c; }

.sug-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sug-title { font-size: 1.15em; font-weight: 700; color: #fff; margin-bottom: 4px; }
.sug-meta { font-size: 0.82em; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.sug-category-badge {
  background: var(--bg2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px;
  font-size: 0.78em; color: var(--text); font-weight: 500;
}
.sug-desc { font-size: 0.9em; line-height: 1.5; color: #d0d2d6; white-space: pre-wrap; background: var(--bg2); padding: 12px 14px; border-radius: 9px; border: 1px solid var(--border); }
.sug-reject-box {
  background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); border-radius: 8px;
  padding: 10px 12px; font-size: 0.85em; color: #e74c3c;
}
.sug-actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

/* Leaderboard Table */
.leaderboard-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.leaderboard-table { width: 100%; border-collapse: collapse; text-align: left; }
.leaderboard-table th {
  background: var(--bg2); padding: 14px 18px; font-size: 0.82em; color: var(--muted); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.leaderboard-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.9em; }
.leaderboard-table tr:last-child td { border-bottom: none; }
.leaderboard-user { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.leaderboard-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ========== Emoji Picker Modal (works with emoji-mart and custom picker) ========== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200;
  display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.2s;
}
.emoji-picker-container {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  width: 420px; max-width: 90vw; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  max-height: 90vh; overflow: auto;
}
.emoji-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.emoji-picker-header h4 { margin: 0; font-size: 1.1em; }
/* emoji-mart web component theming */
em-emoji-picker {
  --background-rgb: 32, 35, 41;
  --border-radius: 12px;
  --category-icon-size: 20px;
  --color-border: #2b2e35;
  --color-border-over: #3a3d45;
  --font-family: 'Inter', -apple-system, sans-serif;
  --shadow: none;
  width: 100%;
  max-width: 100%;
  height: 380px;
}
/* Fallback custom emoji picker */
.emoji-picker-categories { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 12px; }
.cat-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted); border-radius: 8px;
  padding: 6px 10px; font-size: 0.8em; cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.cat-btn:hover { color: #fff; border-color: #4e5058; }
.cat-btn.active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; }
.emoji-search-input {
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 0.9em; margin-bottom: 10px; font-family: inherit;
}
.emoji-search-input:focus { outline: none; border-color: var(--red); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px;
}
.emoji-grid-item {
  background: var(--bg2); border: 1px solid transparent; border-radius: 8px; font-size: 1.35em;
  padding: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, background 0.15s, border-color 0.1s;
}
.emoji-grid-item:hover { background: var(--card-hover); transform: scale(1.2); border-color: var(--red); }
.close-btn { background: transparent; border: none; color: var(--muted); font-size: 1.2em; cursor: pointer; }
.close-btn:hover { color: #fff; }

.badge { font-size: 0.72em; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.live-badge { background: rgba(46,204,113,0.15); color: var(--success); border: 1px solid var(--success); }
.status-pill { font-size: 0.75em; padding: 3px 10px; border-radius: 20px; background: var(--bg2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.status-pill.live { background: rgba(46,204,113,0.15); color: var(--success); border-color: var(--success); }

/* Pastel Status Pills (matching emoji status colors) */
.status-pill-pastel {
  font-size: 0.78em;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.status-pill-pastel.status-open {
  background: rgba(241, 196, 15, 0.16);
  color: #f7d354;
  border: 1px solid rgba(241, 196, 15, 0.32);
}
.status-pill-pastel.status-in-progress,
.status-pill-pastel.status-claimed {
  background: rgba(88, 101, 242, 0.16);
  color: #8da0f8;
  border: 1px solid rgba(88, 101, 242, 0.35);
}
.status-pill-pastel.status-review {
  background: rgba(155, 89, 182, 0.16);
  color: #d7a6ee;
  border: 1px solid rgba(155, 89, 182, 0.35);
}
.status-pill-pastel.status-approved {
  background: rgba(46, 204, 113, 0.16);
  color: #6fe4a3;
  border: 1px solid rgba(46, 204, 113, 0.35);
}
.status-pill-pastel.status-rejected {
  background: rgba(231, 76, 60, 0.16);
  color: #f5968d;
  border: 1px solid rgba(231, 76, 60, 0.35);
}
.status-pill-pastel.status-closed {
  background: rgba(149, 165, 166, 0.14);
  color: #a8b4b5;
  border: 1px solid rgba(149, 165, 166, 0.28);
}

/* Panel list items */
.panel-list { display: flex; flex-direction: column; gap: 10px; }
.panel-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.panel-item .title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.panel-item .actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Ticket live list */
.ticket-live-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-row {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid #4e5058;
  border-radius: 10px; padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center; font-size: 0.9em;
  transition: all 0.15s ease;
}
.ticket-row:hover { background: var(--card-hover); border-color: #3e424b; }
.ticket-row.status-open { border-left-color: #f1c40f; }
.ticket-row.status-in-progress, .ticket-row.status-claimed { border-left-color: #5865F2; }
.ticket-row.status-review { border-left-color: #9b59b6; }
.ticket-row.status-approved { border-left-color: #2ecc71; }
.ticket-row.status-rejected { border-left-color: #e74c3c; }
.ticket-row.status-closed { border-left-color: #72767d; opacity: 0.65; }

/* Drawer / Modal */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 100; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 880px; max-width: 96vw;
  background: var(--bg2); border-left: 1px solid var(--border); z-index: 101;
  display: flex; overflow: hidden; box-shadow: -20px 0 60px rgba(0,0,0,0.6);
}
.drawer-form { flex: 1; padding: 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.drawer-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.drawer-form h3 { margin: 0; }
.drawer-form label { margin: 10px 0 5px; font-size: 0.8em; color: var(--muted); font-weight: 500; display: block; }
.drawer-form input, .drawer-form select, .drawer-form textarea {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 0.9em; font-family: inherit; width: 100%;
}
.drawer-form input:focus, .drawer-form select:focus, .drawer-form textarea:focus { outline: none; border-color: var(--red); }
.drawer-close-btn { background: transparent; border: none; color: var(--muted); font-size: 1.2em; cursor: pointer; }
.drawer-close-btn:hover { color: #fff; }
.drawer-preview { width: 340px; padding: 28px; border-left: 1px solid var(--border); overflow-y: auto; background: var(--bg); flex-shrink: 0; }
.preview-label { font-size: 0.78em; color: var(--muted); font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 12px; }
.discord-embed {
  background: #2b2d31; border-left: 4px solid var(--red); border-radius: 8px;
  padding: 14px 16px; font-size: 0.88em; color: #dbdee1;
}

/* Reaction role button items */
.rr-button-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
}
.rr-button-card-row1 { display: flex; gap: 8px; align-items: center; }
.rr-button-card-row2 { display: flex; gap: 8px; align-items: center; }

.button-editor-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.button-editor-row input, .button-editor-row select { flex: 1; min-width: 100px; }
.emoji-field-wrap { position: relative; }
.emoji-field-wrap input { padding-right: 28px; }
.emoji-pick-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 1.1em; opacity: 0.7; }
.emoji-pick-btn:hover { opacity: 1; }

/* ========== Steam News Cards & Presets ========== */
.steam-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px;
}
.steam-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s, transform 0.15s;
}
.steam-card:hover { border-color: #3a3d45; transform: translateY(-2px); }
.steam-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.steam-game-name { font-size: 1.1em; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.steam-app-badge {
  font-size: 0.75em; background: var(--bg2); border: 1px solid var(--border); padding: 2px 7px;
  border-radius: 6px; color: var(--muted); font-family: monospace;
}
.game-preset-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.game-preset-chip {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 8px;
  padding: 7px 12px; font-size: 0.84em; cursor: pointer; transition: all 0.15s; display: inline-flex;
  align-items: center; gap: 6px;
}
.game-preset-chip:hover { border-color: var(--red); background: rgba(233,35,36,0.12); color: #fff; }

/* Feature toggles (guildconfig) */
.feature-toggle-list { display: flex; flex-direction: column; gap: 12px; }
.feature-toggle-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.feature-toggle-item:last-child { border-bottom: none; }
.feature-toggle-desc { display: flex; flex-direction: column; gap: 2px; }
.feature-toggle-name { font-weight: 600; font-size: 0.92em; }
.feature-toggle-hint { font-size: 0.78em; color: var(--muted); }

/* Var chip row */
.var-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.var-chip {
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px;
  padding: 4px 9px; font-size: 0.78em; cursor: pointer; font-family: monospace; transition: all 0.15s;
}
.var-chip:hover { border-color: var(--red); color: var(--text); background: rgba(233,35,36,0.08); }
.template-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.template-input-wrap input { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 0.9em; font-family: inherit; }
.template-input-wrap input:focus { outline: none; border-color: var(--red); }

/* filter-mini-toggles */
.filter-mini-toggles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-mini-toggles label { margin: 0; font-size: 0.84em; color: var(--text); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.filter-mini-toggles input[type=checkbox] { accent-color: var(--red); }
.filter-mini-toggles .btn-secondary.active { background: var(--red); color: white; border-color: var(--red); }

/* Toasts */
.toast-wrap {
  position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100;
}
.toast {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--red);
  border-radius: 9px; padding: 12px 16px; font-size: 0.88em; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(10px); transition: all 0.25s ease; max-width: 340px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }

/* ========== DAXS AutoMod Rules ========== */
.daxs-rule-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.daxs-rule-card:hover { border-color: #4e5058; }
.daxs-rule-card.disabled { opacity: 0.65; }
.daxs-rule-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.daxs-rule-title-group {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.daxs-rule-title {
  font-weight: 700; font-size: 1.05em; color: #fff; margin: 0;
}
.daxs-trigger-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 0.78em; font-weight: 600;
}
.daxs-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 0.78em; font-weight: 600;
}
.daxs-status-badge.active {
  background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3);
}
.daxs-status-badge.inactive {
  background: rgba(150, 150, 150, 0.15); color: var(--muted); border: 1px solid var(--border);
}
.daxs-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.daxs-rule-body {
  display: flex; flex-direction: column; gap: 8px; font-size: 0.88em; color: var(--text);
}
.daxs-rule-roles-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.daxs-rule-roles-label {
  color: var(--muted); font-size: 0.84em;
}
.daxs-rule-role-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 2px 8px; font-size: 0.8em;
}
.daxs-rule-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.daxs-rule-info {
  display: flex; align-items: center; gap: 14px; font-size: 0.82em; color: var(--muted); flex-wrap: wrap;
}
.daxs-rule-actions {
  display: flex; gap: 8px; align-items: center;
}

/* ========== Warnings Manager ========== */
.warn-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;
}
.warn-stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; display: flex; flex-direction: column; gap: 4px;
}
.warn-stat-num {
  font-size: 1.8em; font-weight: 800; color: #fff;
}
.warn-stat-label {
  font-size: 0.82em; color: var(--muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em;
}

.warn-user-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.warn-user-card:hover { border-color: #4e5058; }
.warn-user-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.warn-user-info {
  display: flex; align-items: center; gap: 12px;
}
.warn-user-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg2);
  display: flex; align-items: center; justify-content: center; font-size: 1.1em;
  border: 1px solid var(--border); overflow: hidden; flex-shrink: 0;
}
.warn-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.warn-count-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 20px; font-size: 0.82em; font-weight: 700;
}
.warn-count-badge.level-1 { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.3); }
.warn-count-badge.level-2 { background: rgba(230, 126, 34, 0.15); color: #e67e22; border: 1px solid rgba(230, 126, 34, 0.3); }
.warn-count-badge.level-high { background: rgba(233, 35, 36, 0.15); color: #e92324; border: 1px solid rgba(233, 35, 36, 0.3); }

.warn-history-container {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.warn-history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--card); border-radius: 8px; border: 1px solid var(--border);
  font-size: 0.88em; flex-wrap: wrap;
}
.warn-filter-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 0.86em;
  font-weight: 500; transition: all 0.15s;
}
.warn-filter-btn:hover { background: var(--bg2); border-color: #555; }
.warn-filter-btn.active { background: var(--red); color: #fff; border-color: var(--red); }

/* Verification Sub-Navigation */
.verify-subnav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background: var(--bg2);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  width: fit-content;
}
.verify-subtab-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.verify-subtab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.verify-subtab-btn.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(233, 35, 36, 0.35);
}




/* Discord OAuth login button */
.btn-discord {
  margin-top: 22px; width: 100%; padding: 13px 16px; border: none; border-radius: 9px;
  background: #5865F2; color: white; font-weight: 600; cursor: pointer; font-size: 0.95em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 4px 20px rgba(88,101,242,0.35);
}
.btn-discord:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-discord:active { transform: translateY(0); }

/* Sidebar user info widget */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; margin: 8px 12px;
  background: var(--bg2); border-radius: 10px; border: 1px solid var(--border);
}
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); object-fit: cover;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-username {
  display: block; font-size: 0.82em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-role {
  display: block; font-size: 0.72em; color: var(--red); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-logout {
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px;
  display: flex; align-items: center; border-radius: 6px; transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.btn-logout:hover { color: var(--danger); background: rgba(233,35,36,0.1); }

/* ==================== 1. COMMUNITY APP (MEMBER HOMEPAGE) ==================== */
.community-app {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, rgba(233, 35, 36, 0.12) 0%, var(--bg) 60%);
  display: flex;
  flex-direction: column;
}

.comm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 20, 24, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.comm-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.comm-brand-text {
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: 0.5px;
}

.comm-brand-badge {
  font-size: 0.68em;
  color: var(--red);
  background: rgba(233, 35, 36, 0.15);
  border: 1px solid rgba(233, 35, 36, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  font-weight: 700;
}

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

.comm-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88em;
  font-weight: 600;
  transition: color 0.15s;
  padding: 6px 4px;
}

.comm-nav-link:hover {
  color: #fff;
}

.comm-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.comm-user-pill img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.comm-user-pill .uname {
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
}

.comm-role-badge {
  font-size: 0.7em;
  background: rgba(233, 35, 36, 0.2);
  color: var(--red);
  border: 1px solid rgba(233, 35, 36, 0.35);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.comm-container {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 20px 60px;
  flex: 1;
}

.comm-hero {
  background: linear-gradient(135deg, rgba(233, 35, 36, 0.18) 0%, rgba(26, 28, 33, 0.95) 100%);
  border: 1px solid rgba(233, 35, 36, 0.3);
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.comm-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--red);
  background: rgba(233, 35, 36, 0.12);
  border: 1px solid rgba(233, 35, 36, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.comm-hero h1 {
  font-size: 2.3em;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
  color: #fff;
}

.comm-hero p.lead {
  font-size: 1.05em;
  color: var(--muted);
  max-width: 720px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.comm-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.btn-discord-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #5865F2;
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
}

.btn-discord-hero:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(88, 101, 242, 0.45);
}

.comm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.comm-stat-card {
  background: rgba(19, 20, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
}

.comm-stat-label {
  font-size: 0.78em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comm-stat-val {
  font-size: 1.35em;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.comm-stat-val.online {
  color: var(--success);
}

.comm-section {
  margin-bottom: 48px;
}

.comm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.comm-section-header h2 {
  font-size: 1.5em;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comm-section-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9em;
}

.feed-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.feed-tab-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.feed-tab-btn:hover {
  color: #fff;
  border-color: #4e5058;
}

.feed-tab-btn.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.feed-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
}

.feed-card:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 35, 36, 0.4);
}

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

.feed-cat-badge {
  font-size: 0.72em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.feed-cat-badge.patchnotes { background: rgba(233, 35, 36, 0.2); color: #ff6b6b; border: 1px solid rgba(233, 35, 36, 0.4); }
.feed-cat-badge.daxs { background: rgba(52, 152, 219, 0.2); color: #70b8ff; border: 1px solid rgba(52, 152, 219, 0.4); }
.feed-cat-badge.dachschaden { background: rgba(46, 204, 113, 0.2); color: #6ee7b7; border: 1px solid rgba(46, 204, 113, 0.4); }
.feed-cat-badge.wardogs { background: rgba(155, 89, 182, 0.2); color: #c084fc; border: 1px solid rgba(155, 89, 182, 0.4); }

.feed-date {
  font-size: 0.78em;
  color: var(--muted);
}

.feed-card h3 {
  font-size: 1.15em;
  margin: 0 0 10px;
  color: #fff;
  line-height: 1.35;
}

.feed-card-body {
  font-size: 0.9em;
  color: #c9ccd3;
  line-height: 1.5;
  white-space: pre-wrap;
  flex: 1;
}

.feed-card-img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 14px;
}

.feed-card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  color: var(--muted);
}

.feed-card-footer img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
}

.empty-state p { margin: 8px 0 0; font-size: 0.92em; }

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

.member-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-chip-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.member-chip-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: var(--success);
  border: 2px solid var(--card);
  border-radius: 50%;
}

.member-chip-name {
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.about-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.about-feature-icon {
  font-size: 2em;
  margin-bottom: 12px;
}

.about-feature-card h4 {
  font-size: 1.1em;
  color: #fff;
  margin: 0 0 8px;
}

.about-feature-card p {
  color: var(--muted);
  font-size: 0.88em;
  line-height: 1.5;
  margin: 0;
}

.comm-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 30px 24px;
  text-align: center;
  font-size: 0.85em;
  color: var(--muted);
}

.comm-footer a {
  color: var(--red);
  text-decoration: none;
}

/* ==================== 2. STAFF APP (DASHBOARD FÜR SUPPORTER / MODERATOR / MANAGER) ==================== */
.staff-app {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.staff-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.staff-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  font-size: 1.05em;
}

.staff-brand img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.staff-role-pill {
  font-size: 0.72em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.staff-role-pill.supporter { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.4); }
.staff-role-pill.moderator { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.staff-role-pill.manager   { background: rgba(233, 35, 36, 0.2); color: #ff6b6b; border: 1px solid rgba(233, 35, 36, 0.4); }

.staff-user-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-user-box img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.staff-user-box .staff-name {
  font-size: 0.88em;
  font-weight: 600;
  color: #fff;
}

.staff-nav-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.staff-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.staff-nav-btn:hover {
  color: #fff;
  background: var(--card);
}

.staff-nav-btn.active {
  background: var(--card);
  color: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.staff-container {
  padding: 20px 24px;
  flex: 1;
}

/* Staff Ticket Workspace (Split View) */
.staff-ticket-workspace {
  display: flex;
  gap: 20px;
  height: calc(100vh - 145px);
  min-height: 580px;
}

.staff-ticket-sidebar {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.staff-ticket-search-box {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

.staff-ticket-search-box input {
  width: 100%;
}

.staff-ticket-filter-pills {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  overflow-x: auto;
}

.staff-filter-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.76em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.staff-filter-pill:hover { color: #fff; }
.staff-filter-pill.active { background: var(--red); color: #fff; border-color: var(--red); }

.staff-ticket-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-ticket-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.staff-ticket-item:hover {
  background: var(--card-hover);
  border-color: #3f424b;
}

.staff-ticket-item.active {
  border-color: var(--red);
  background: rgba(233, 35, 36, 0.08);
}

.staff-ticket-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.staff-ticket-item-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86em;
  font-weight: 700;
  color: #fff;
}

.staff-ticket-item-user img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.staff-status-pill {
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.staff-status-pill.open { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.staff-status-pill.in_progress { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.4); }
.staff-status-pill.closed { background: rgba(149, 165, 166, 0.2); color: #95a5a6; border: 1px solid rgba(149, 165, 166, 0.4); }

.staff-ticket-item-title {
  font-size: 0.82em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-ticket-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.staff-ticket-empty-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  padding: 40px;
  text-align: center;
}

.staff-ticket-empty-view svg {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.staff-ticket-detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.staff-chat-header {
  padding: 14px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.staff-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-chat-header-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.staff-chat-header-title {
  font-weight: 700;
  color: #fff;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.staff-chat-header-meta {
  font-size: 0.78em;
  color: var(--muted);
  margin-top: 2px;
}

.staff-actions-toolbar {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  align-items: center;
}

.staff-act-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8em;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.staff-act-btn:hover {
  border-color: var(--red);
  color: #fff;
}

.staff-act-btn.close {
  background: rgba(233, 35, 36, 0.15);
  border-color: rgba(233, 35, 36, 0.4);
  color: #ff6b6b;
}

.staff-act-btn.close:hover {
  background: var(--red);
  color: #fff;
}

.staff-act-btn.claim {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.4);
  color: #2ecc71;
}

.staff-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble-wrap {
  display: flex;
  gap: 12px;
  max-width: 82%;
}

.chat-bubble-wrap.staff-msg {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.chat-bubble {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}

.chat-bubble-wrap.staff-msg .chat-bubble {
  background: rgba(233, 35, 36, 0.1);
  border-color: rgba(233, 35, 36, 0.35);
}

.chat-meta {
  font-size: 0.74em;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-tag-staff {
  background: var(--red);
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.chat-text {
  font-size: 0.88em;
  line-height: 1.45;
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-composer {
  padding: 12px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.chat-composer textarea {
  flex: 1;
  height: 42px;
  min-height: 42px;
  max-height: 120px;
  resize: none;
  font-size: 0.88em;
}

.btn-chat-send {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88em;
  cursor: pointer;
  transition: filter 0.15s;
  height: 42px;
}

.btn-chat-send:hover {
  filter: brightness(1.15);
}

.mobile-back-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82em;
  cursor: pointer;
}

/* Responsive Staff Layout */
@media (max-width: 900px) {
  .staff-ticket-workspace {
    position: relative;
    height: calc(100vh - 130px);
  }
  .staff-ticket-sidebar {
    width: 100%;
  }
  .staff-ticket-main {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
  }
  .staff-ticket-workspace.mobile-chat-active .staff-ticket-sidebar {
    display: none;
  }
  .staff-ticket-workspace.mobile-chat-active .staff-ticket-main {
    display: flex;
  }
  .mobile-back-btn {
    display: inline-block;
  }
  .comm-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .comm-nav-links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}