/* Global scrollbar theming. appeals.html loads ONLY this stylesheet (no
   style.css), so the rules are repeated here rather than inherited - they
   resolve against this file's own palette. Harmless duplication on
   index.html / leaderboard.html, which load both. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-label);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

:root {
  --topbar-h: 58px;
  --sidebar-w: 264px;

  /* same depth ramp, hairlines and radii as murderduelscomp.com, murderduelscomp.com and
     appeals.murderduelscomp.com. the component rules below all read these, so the whole
     dashboard follows without touching their layout or animations. */
  --bg-topbar:  #05080e;
  --bg-sidebar: #05080e;
  --bg-content: #070a10;
  --bg-card:    rgba(255, 255, 255, 0.026);
  --bg-input:   #05080e;
  --bg-hover:   rgba(255, 255, 255, 0.045);
  --bg-active:  rgba(0, 250, 255, 0.1);
  --surface:        rgba(255, 255, 255, 0.026);
  --surface-strong: rgba(255, 255, 255, 0.045);

  --text:       #e4edf7;
  --text-muted: rgba(228, 237, 247, 0.62);
  --text-label: rgba(228, 237, 247, 0.38);
  --text-link:  #00faff;

  --border:        rgba(255, 255, 255, 0.06);
  --border-dark:   rgba(255, 255, 255, 0.06);
  --border-bright: rgba(255, 255, 255, 0.1);

  --teal:       #00faff;
  --teal-hover: #bcfbff;
  --teal-dim:   rgba(0, 250, 255, 0.1);
  --teal-glow:  rgba(0, 250, 255, 0.26);
  --blue:   #0079e4;
  --green:  #23a559;
  --yellow: #faa61a;
  --red:    #ed4245;

  --gradient-teal:    linear-gradient(135deg, #00faff 0%, #0079e4 100%);
  --gradient-card:    none;
  --gradient-sidebar: none;

  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card:  none;
  --shadow-btn:   none;
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.65);
}

html,
body {
  min-height: 100%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-content);
}

body {
  isolation: isolate;
  background: var(--bg-content);
}

/* the grid overlay and vignette went with the gradient ground */
body::before,
body::after { content: none; }

#select-page,
#dashboard,
#mda-nav-bar,
#mda-splash {
  position: relative;
  z-index: 1;
}

#dashboard {
  min-height: 100vh;
  background: var(--bg-content);
}

#mda-splash {
  position: fixed;
  z-index: 99999;
  background: #070a12;
}

.ts-bg-grid {
  background-image: radial-gradient(rgba(0, 250, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

.login-title,
.ss-card-title,
.page-title,
.stat-value,
.card-title,
.modal-title,
h1,
h2,
h3 {
  /* one face everywhere, like the other three sites; headings get their weight
     and tightening from Inter rather than a second display family */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.topbar {
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.dash-body {
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg-content);
}

.dash-inner {
  background: transparent;
}

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 18px 0 52px rgba(0, 0, 0, 0.2);
}

.sidebar-top,
.sidebar-footer {
  border-color: var(--border);
}

.nav-section-label {
  color: rgba(176, 244, 255, 0.42);
  letter-spacing: 0.16em;
}

.nav-item {
  color: #83a8c4;
  border-radius: 0 16px 16px 0;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(2px);
}

.nav-item.active {
  color: var(--teal);
  background: linear-gradient(90deg, rgba(0, 250, 255, 0.14), rgba(79, 140, 255, 0.04));
  border-left-color: var(--teal);
}

.sidebar-home-btn,
.sidebar-fetch-btn,
.topbar-user,
.server-chip,
.btn,
.btn-small,
.btn-primary,
.btn-secondary,
.btn-discord,
button {
  border-radius: 999px;
}

.sidebar-home-btn,
.sidebar-fetch-btn,
.server-chip,
.topbar-user,
.ss-user-pill {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  color: var(--text);
}

.sidebar-fetch-btn:hover,
.server-chip:hover,
.topbar-user:hover {
  border-color: var(--border-bright);
  box-shadow: 0 14px 32px rgba(6, 15, 26, 0.3);
}

.dash-main {
  background: transparent;
  min-height: calc(100vh - var(--topbar-h));
}

.page-header-text h2,
.page-title,
.card-title,
.stat-value {
  color: var(--text);
}

.page-header-text p,
.card-description,
.stat-label,
.setting-description {
  color: #a8c4d8;
}

.page {
  max-width: 1120px;
}

.page-header,
.section-header {
  border-bottom-color: var(--border);
}

.page-icon,
.section-icon,
.form-icon,
.stat-icon,
.card-icon,
.module-icon {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 250, 255, 0.13), rgba(79, 140, 255, 0.08));
  border: 1px solid rgba(124, 215, 255, 0.16);
  color: var(--teal);
}

.card,
.settings-card,
.stat-card,
.module-card,
.feat-top-card,
.feat-row,
.panel,
.setting-card,
.case-card,
.ticket-card,
.template-card,
.rr-panel-card,
.giveaway-card,
.leaderboard-row,
.command-card,
.cmd-card,
.form-card,
.modal,
.ss-center-card,
.login-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

.card::after,
.settings-card::after,
.stat-card::after,
.module-card::after,
.feat-top-card::after,
.feat-row::after,
.panel::after,
.setting-card::after,
.case-card::after,
.ticket-card::after,
.template-card::after,
.rr-panel-card::after,
.giveaway-card::after,
.command-card::after,
.cmd-card::after,
.ss-center-card::after,
.login-box::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%);
}

.feature-list,
.feat-top-grid,
.stats-grid,
.module-grid,
.settings-grid,
.form-grid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.feature-list::after,
.feat-top-grid::after,
.stats-grid::after,
.module-grid::after,
.settings-grid::after,
.form-grid::after {
  display: none !important;
}

.stat-card,
.module-card,
.feat-top-card,
.feat-row,
.setting-card,
.case-card,
.ticket-card,
.template-card,
.command-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.stat-card:hover,
.module-card:hover,
.feat-top-card:hover,
.feat-row:hover,
.setting-card:hover,
.case-card:hover,
.ticket-card:hover,
.template-card:hover,
.command-card:hover {
  transform: translateY(-3px);
  border-color: rgba(145, 235, 255, 0.25);
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.34);
}

.dash-main .feat-top-grid,
.dash-main .feature-list,
.dash-main .stats-grid,
.dash-main .module-grid {
  opacity: 1 !important;
}

.dash-main .feat-top-card,
.dash-main .feat-row,
.dash-main .stat-card,
.dash-main .module-card,
.dash-main .settings-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(8, 24, 40, 0.86) !important;
  border-color: rgba(124, 215, 255, 0.16) !important;
}

.dash-main .feat-row-title,
.dash-main .feat-top-card h3,
.dash-main .stat-value,
.dash-main .page-header-text h2 {
  color: #f1fbff !important;
  opacity: 1 !important;
}

.dash-main .feat-row-desc,
.dash-main .feat-top-card p,
.dash-main .stat-label,
.dash-main .page-header-text p {
  color: #9fbed3 !important;
  opacity: 1 !important;
}

.dash-main .feat-row-icon,
.dash-main .page-header-icon,
.dash-main .stat-icon {
  background: rgba(0, 250, 255, 0.1) !important;
  border: 1px solid rgba(124, 215, 255, 0.16) !important;
  color: var(--teal) !important;
}

input,
textarea,
select,
.input,
.select,
.picker-add-btn,
.picker-chip,
.search-input {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(124, 215, 255, 0.14);
  border-radius: 18px;
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus,
.search-input:focus {
  border-color: rgba(122, 235, 255, 0.38);
  box-shadow: 0 0 0 4px rgba(0, 250, 255, 0.08);
}

.btn-primary,
.btn-discord,
.primary-btn,
button.primary {
  background: var(--gradient-teal);
  color: #03111a;
  border-color: rgba(122, 231, 255, 0.28);
  box-shadow: var(--shadow-btn);
  font-weight: 800;
}

.btn-secondary,
.btn,
.btn-small {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.toggle,
.sidebar-mod-toggle,
.switch,
.toggle-switch {
  background: transparent;
  border-color: transparent;
}

.toggle-switch {
  width: 42px !important;
  height: 24px !important;
}

.toggle-slider {
  border-radius: 999px !important;
  background: rgba(16, 39, 62, 0.88) !important;
  border: 1px solid rgba(124, 215, 255, 0.13) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.toggle-slider::before {
  width: 18px !important;
  height: 18px !important;
  left: 2px !important;
  top: 2px !important;
  background: #f1fbff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #00faff, #2ce6a7) !important;
  border-color: rgba(134, 246, 255, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(0, 250, 255, 0.08);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px) !important;
}

.sidebar-mod-toggle {
  background: rgba(16, 39, 62, 0.88) !important;
  border: 1px solid rgba(124, 215, 255, 0.13) !important;
}

.sidebar-mod-toggle.active,
.sidebar-mod-toggle.on {
  background: linear-gradient(135deg, #00faff, #2ce6a7) !important;
}

.badge,
.pill,
.tag,
.status-pill,
.nav-badge {
  border-radius: 999px;
  background: rgba(0, 250, 255, 0.1);
  border: 1px solid rgba(124, 215, 255, 0.16);
  color: #aaf5ff;
}

.modal-overlay {
  background: rgba(1, 8, 16, 0.66);
  backdrop-filter: blur(14px);
  z-index: 9000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9001;
  width: min(90vw, 760px);
  max-height: 88vh;
  overflow: hidden;
  transform: translate(-50%, -50%);
  flex-direction: column;
}

.toast {
  background: rgba(7, 20, 34, 0.95);
  border: 1px solid rgba(124, 215, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}

.log-search-wrap,
.tpl-search-wrap,
.dc-search-wrap,
.picker-search {
  position: relative;
}

.log-search-icon,
.tpl-search-icon,
.dc-search-icon {
  z-index: 2;
  color: #9fbed3 !important;
}

.log-search-input,
.tpl-search-wrap input,
input.dc-search-input,
.picker-search input,
.rr-ep-search,
.search-input {
  min-height: 38px;
  line-height: 20px;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(124, 215, 255, 0.14) !important;
}

.log-search-input {
  padding-left: 38px !important;
}

.tpl-search-wrap input {
  padding-left: 36px !important;
}

input.dc-search-input {
  padding-left: 38px !important;
}

.picker-search input {
  padding-left: 14px !important;
}

select,
.form-control,
.tpl-use-select,
.tpl-use-input,
.tpl-item-card-row input[type="text"],
.tpl-item-card-row select,
.dc-filter-sel {
  min-height: 38px;
  border-radius: 16px !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(124, 215, 255, 0.14) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

select,
.tpl-use-select,
.tpl-item-card-row select,
.dc-filter-sel {
  appearance: none;
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fbed3 50%),
    linear-gradient(135deg, #9fbed3 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

select:hover,
.form-control:hover,
.tpl-use-select:hover,
.tpl-use-input:hover,
.dc-filter-sel:hover {
  border-color: rgba(124, 215, 255, 0.24) !important;
}

select:focus,
.form-control:focus,
.tpl-use-select:focus,
.tpl-use-input:focus,
.dc-filter-sel:focus {
  outline: none !important;
  border-color: rgba(122, 235, 255, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(0, 250, 255, 0.08) !important;
}

select option {
  background: #0b1828 !important;
  color: #eef9ff !important;
}

select option:checked {
  background: linear-gradient(135deg, #106984, #124a72) !important;
  color: #ffffff !important;
}

.role-chip,
.prefix-chip,
.tag,
.log-ch-chip,
.picker-chip,
.tpl-var-item code,
.badge,
.pill {
  border-radius: 999px !important;
  background: rgba(0, 250, 255, 0.1) !important;
  border: 1px solid rgba(124, 215, 255, 0.16) !important;
  color: #d8f7ff !important;
}

.role-chip button,
.role-chip .chip-x,
.prefix-chip-del,
.picker-chip-x,
.log-ch-chip-x,
.tpl-grid-del,
.tpl-folder-del-btn,
.tpl-list-item-actions button,
.modal-close,
.picker-modal-close,
.tpl-modal-x,
.tpl-ec-remove,
.tpl-ec-field-del,
.tpl-item-del-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124, 215, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #9fbed3 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.role-chip button:hover,
.role-chip .chip-x:hover,
.prefix-chip-del:hover,
.picker-chip-x:hover,
.log-ch-chip-x:hover,
.tpl-grid-del:hover,
.tpl-folder-del-btn:hover,
.tpl-list-item-actions button:hover,
.modal-close:hover,
.picker-modal-close:hover,
.tpl-modal-x:hover,
.tpl-ec-remove:hover,
.tpl-ec-field-del:hover,
.tpl-item-del-btn:hover {
  border-color: rgba(255, 111, 145, 0.34) !important;
  background: rgba(255, 111, 145, 0.12) !important;
  color: #ffc7d4 !important;
}

.tpl-grid-item,
.tpl-folder-row,
.tpl-list-item,
.tpl-item-card,
.tpl-embed-card,
.tpl-var-item,
.rc-condition-card,
.log-categories-list,
.data-table,
.table-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    rgba(8, 24, 40, 0.82) !important;
  border-color: rgba(124, 215, 255, 0.14) !important;
  border-radius: 18px !important;
}

.tpl-tab.active,
.tpl-sub-tab.active,
.tpl-folder-dp-item.active,
.tpl-sched-day-btn.active {
  color: var(--teal) !important;
  border-color: rgba(0, 250, 255, 0.55) !important;
}

.tpl-action-btn--blue,
.btn-group .btn.active {
  background: var(--gradient-teal) !important;
  color: #03111a !important;
}

.tpl-grid-item-icon,
.feature-icon,
.badge-type.mute {
  color: var(--teal) !important;
  background: rgba(0, 250, 255, 0.1) !important;
  border-color: rgba(124, 215, 255, 0.16) !important;
}

input[type="checkbox"]:not(.toggle-switch input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 5px !important;
  border: 2px solid rgba(210, 242, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  display: inline-grid !important;
  place-items: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0, 250, 255,0.08);
}

input[type="checkbox"]:not(.toggle-switch input)::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #03111a;
  border-bottom: 2px solid #03111a;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}

input[type="checkbox"]:not(.toggle-switch input):checked {
  background: linear-gradient(135deg, #00faff, #2ce6a7) !important;
  border-color: rgba(180, 252, 255, 0.95) !important;
}

input[type="checkbox"]:not(.toggle-switch input):checked::before {
  transform: rotate(-45deg) scale(1);
}

.checkbox-label,
.check-row,
.tpl-show-folders-label,
.tpl-auto-opt-label,
.tpl-sticky-opt-label,
.tpl-ec-inline-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.login-page,
#servers-card {
  background: var(--bg-content);
}

.server-card {
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.server-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
}

.confirm-dialog-modal {
  width: min(92vw, 440px) !important;
  max-height: 80vh !important;
}

.confirm-dialog-message {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.55;
}

.btn,
.btn-small,
.btn-sm,
.btn-xs,
.btn-icon-xs,
.am-pill-add-btn,
.picker-add-btn,
.log-set-ch-btn,
.comp-action-btn,
.comp-card-btn,
.tpl-ec-add-field,
.tpl-ar-add-btn,
.tpl-channel-pick-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: max-content;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.role-chip,
.prefix-chip,
.dc-pill,
.am-pill,
.auto-trigger-pill,
.log-ch-chip,
.badge,
.badge-type,
.status-pill,
.tpl-ar-type-badge,
.dl-serial-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.role-chip button i,
.prefix-chip-del i,
.picker-chip-x i,
.log-ch-chip-x i,
.modal-close i,
.picker-modal-close i,
.tpl-modal-x i,
.tpl-ec-remove i,
.tpl-grid-del i,
.tpl-item-del-btn i,
.comp-card-btn.danger i {
  line-height: 1 !important;
  display: block !important;
  pointer-events: none;
}

#defmsg-modal {
  width: min(94vw, 1040px) !important;
  max-height: 92vh !important;
}

#defmsg-modal .modal-body {
  max-height: calc(92vh - 126px);
  overflow: auto;
}

#defmsg-preview {
  min-height: 360px !important;
  max-height: 58vh;
  overflow: auto;
  border-radius: 14px !important;
  padding: 18px !important;
  background: #313338 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#defmsg-pane-raw textarea,
#defmsg-pane-vars textarea {
  min-height: 46vh;
}

.lb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lb-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.lb-search-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
}

.lb-search-input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px 0 38px !important;
}

.lb-meta {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.lb-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* Tell the browser this button accepts vertical pans, so a scroll gesture
     that starts on a row never gets misclassified as a tap. Paired with the
     JS touch-guard in app.js / leaderboard.js. */
  touch-action: pan-y;
}

.lb-row:hover {
  background: rgba(0, 250, 255, 0.055);
}

.lb-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 14px;
  color: var(--text-muted);
  font-size: 12px;
}

.page-jump-btn {
  min-width: 110px;
  justify-content: center;
}

.list-page-flip {
  animation: listPageFlip 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform, filter;
}

.list-page-loading {
  opacity: 0.58;
  filter: saturate(0.78);
  transform: translateY(1px);
  transition: opacity 150ms ease, filter 150ms ease, transform 150ms ease;
  pointer-events: none;
}

@keyframes listPageFlip {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.gw-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.gw-entry-pill,
.gw-status,
.gw-entry-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid rgba(124, 215, 255, 0.2);
  background: rgba(0, 250, 255, 0.08);
  color: #d8f7ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.gw-entry-pill {
  border-color: rgba(124, 215, 255, 0.26);
  cursor: pointer;
}

.gw-entry-pill:hover {
  border-color: rgba(0, 250, 255, 0.55);
  background: rgba(0, 250, 255, 0.14);
}

.gw-status-ended {
  color: #a9c6d8;
  background: rgba(160, 190, 210, 0.08);
  border-color: rgba(160, 190, 210, 0.18);
}

.gw-status-active {
  color: #9ff4c2;
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.24);
}

.gw-status-paused {
  color: #ffdf8a;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.24);
}

.gw-participants-list {
  max-height: 430px;
  overflow-y: auto;
  margin-top: 14px;
  border: 1px solid rgba(124, 215, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.gw-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(124, 215, 255, 0.1);
}

.gw-entry-row:last-child {
  border-bottom: 0;
}

.gw-entry-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gw-entry-rank {
  width: 30px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.gw-entry-label {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.gw-entry-label code {
  margin-left: 6px;
  color: #9fbed3;
  font-size: 12px;
}

.gw-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gw-remove-entry {
  color: #ffc7d4 !important;
}

.gw-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-muted);
}

.lb-user-modal {
  width: min(92vw, 760px) !important;
}

.lb-user-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.lb-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-user-head img,
.lb-user-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
}

.lb-user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5865f2;
  font-weight: 800;
}

.lb-user-name {
  font-weight: 800;
  color: var(--text-primary);
}

.lb-user-id {
  color: var(--text-muted);
  font-size: 12px;
}

.lb-user-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-user-ranks span {
  border: 1px solid rgba(124, 215, 255, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  color: #d8f7ff;
  background: rgba(0, 250, 255, 0.08);
  font-size: 12px;
}

.lb-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lb-stat-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.lb-stat-grid input {
  min-height: 40px;
}

@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
  }

  .page {
    max-width: none;
  }

  .lb-toolbar,
  .gw-list-toolbar,
  .lb-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-search-wrap {
    min-width: 0;
  }

  .lb-meta {
    text-align: center;
    white-space: normal;
  }

  /* Pagination buttons stack on mobile: give them room and let the page-jump
     pill stretch so it doesn't get clipped between Prev/Next. */
  .lb-pagination .btn {
    width: 100%;
    justify-content: center;
  }

  .page-jump-btn {
    width: 100%;
  }

  .gw-entry-row,
  .gw-entry-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-stat-grid {
    grid-template-columns: 1fr;
  }

  .lb-user-ranks span {
    font-size: 11px;
    padding: 5px 8px;
  }

  /* Subtab bar (Overall / Weekly / Monthly / Voice XP). On phones the 4
     buttons' combined width overflows the viewport, so shrink the padding
     and font, AND let the bar scroll horizontally as a safety net for very
     narrow devices. Bar gets max-width: 100% + min-width: 0 so it stays
     constrained to its parent's width (otherwise the flex children would
     push it wider than the page and html's overflow-x: hidden would just
     clip them off-screen, which is exactly what was happening before). */
  .subtab-bar {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .subtab-bar::-webkit-scrollbar {
    display: none;
  }

  .subtab-bar .subtab {
    flex-shrink: 0;
    padding: 6px 11px;
    font-size: 12px;
  }
}

/* Phone-sized leaderboard rows: shrink the rank pill / name / value so the
   row never forces horizontal overflow inside narrow containers. */
@media (max-width: 520px) {
  .lb-row {
    gap: 10px;
    padding: 9px 2px;
  }

  .lb-meta {
    font-size: 11px;
  }
}

/* Dashboard polish follow-up */
.sidebar-mod-toggle { display: none !important; }
.nav-item.active .sidebar-mod-toggle { display: inline-flex !important; }

#picker-modal-overlay {
  z-index: 30000 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

#picker-modal {
  width: min(430px, calc(100vw - 28px)) !important;
  max-height: min(640px, calc(100dvh - 36px)) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 21, 36, 0.96) !important;
  border-color: rgba(124, 215, 255, 0.22) !important;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(0, 250, 255, 0.05) !important;
}
#picker-modal.picker-modal--emoji {
  width: min(530px, calc(100vw - 28px)) !important;
}

.picker-modal-header {
  padding: 14px 16px 12px !important;
  border-bottom-color: rgba(124, 215, 255, 0.12) !important;
}

.picker-search {
  padding: 10px 12px !important;
  border-bottom-color: rgba(124, 215, 255, 0.1) !important;
}

.picker-search input {
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.picker-body { min-height: 0 !important; }
.picker-list { padding: 8px !important; }
#picker-modal.picker-modal--with-sidebar .picker-sidebar {
  background: rgba(0, 0, 0, 0.18) !important;
  border-right-color: rgba(124, 215, 255, 0.1) !important;
}
.picker-sidebar-btn {
  border-radius: 10px !important;
}
.picker-sidebar-btn:hover,
.picker-sidebar-btn.active {
  background: rgba(0, 250, 255, 0.11) !important;
  color: #f3fbff !important;
}
.picker-sidebar-btn.active {
  box-shadow: inset 3px 0 0 #00faff !important;
}
.picker-group-label { padding: 10px 8px 4px !important; color: #a9efff !important; letter-spacing: .06em !important; }
.picker-item {
  border-radius: 12px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
}
.picker-item:hover,
.picker-item.active {
  background: rgba(0, 250, 255, 0.1) !important;
  color: #f3fbff !important;
}
.picker-item.disabled {
  cursor: not-allowed !important;
  opacity: .45 !important;
}
.picker-emoji-grid {
  padding: 4px 0 10px !important;
}
.picker-emoji-item {
  border-radius: 10px !important;
}
.picker-emoji-item:hover {
  background: rgba(0, 250, 255, 0.1) !important;
}

.picker-wrap {
  min-width: 0;
  max-width: 100%;
}
.picker-chip,
.picker-add-btn {
  min-height: 34px !important;
  border-radius: 999px !important;
}
.picker-add-btn {
  padding: 7px 13px !important;
  border-style: solid !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.native-select-btn {
  min-height: 42px !important;
  border-radius: 18px !important;
  padding: 0 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
    rgba(8, 24, 40, 0.92) !important;
  border-color: rgba(124, 215, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
.native-select-wrap.open .native-select-btn {
  border-color: rgba(0, 250, 255, 0.58) !important;
  box-shadow: 0 0 0 4px rgba(0, 250, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.native-select-menu {
  display: none !important;
}
.native-select-wrap.open .native-select-menu { display: none !important; }

.save-bar {
  left: 50% !important;
  right: auto !important;
  bottom: 22px !important;
  width: min(520px, calc(100vw - 28px)) !important;
  transform: translate(-50%, calc(100% + 34px)) scale(.98) !important;
  border: 1px solid rgba(124, 215, 255, 0.2) !important;
  border-radius: 999px !important;
  padding: 8px 10px 8px 16px !important;
  gap: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(6, 18, 31, 0.96) !important;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(0, 250, 255, 0.04) !important;
  z-index: 12000 !important;
}
.save-bar.visible { transform: translate(-50%, 0) scale(1) !important; }
.save-bar > span {
  color: #ccecff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.save-bar .btn { min-height: 34px !important; padding: 7px 13px !important; }

.modal-close,
.picker-modal-close,
.dc-pill-x,
.auto-trigger-pill-x,
.rc-cond-pill-x,
.emoji-multi-remove,
.am-action-chip-remove,
.prefix-chip-remove,
.am-import-close,
.picker-chip-x,
.role-chip button,
.role-chip .chip-x,
.prefix-chip-del,
.am-pill-remove,
.rr-entry-del,
.rr-delete-btn,
.cc-action-del-btn,
.tpl-modal-x,
.tpl-grid-del,
.tpl-folder-del-btn,
.tpl-item-del-btn,
.tpl-ec-remove,
.tpl-ec-field-del,
.log-ch-chip-x,
.btn-icon,
.btn-icon-xs,
.am-cond-icon-btn,
.am-btn-delete,
.remove-btn,
.delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.dc-pill-x,
.auto-trigger-pill-x,
.rc-cond-pill-x,
.emoji-multi-remove,
.am-action-chip-remove,
.prefix-chip-remove,
.am-import-close,
.modal-close,
.picker-modal-close,
.picker-chip-x,
.role-chip button,
.role-chip .chip-x,
.prefix-chip-del,
.am-pill-remove,
.rr-entry-del,
.rr-delete-btn,
.cc-action-del-btn,
.tpl-modal-x,
.tpl-grid-del,
.tpl-folder-del-btn,
.tpl-item-del-btn,
.tpl-ec-remove,
.tpl-ec-field-del,
.log-ch-chip-x {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

.modal-close > *,
.picker-modal-close > *,
.picker-chip-x > *,
.role-chip button > *,
.prefix-chip-del > *,
.am-pill-remove > *,
.rr-entry-del > *,
.rr-delete-btn > *,
.cc-action-del-btn > *,
.tpl-modal-x > *,
.tpl-grid-del > *,
.tpl-folder-del-btn > *,
.tpl-item-del-btn > *,
.tpl-ec-remove > *,
.tpl-ec-field-del > *,
.dc-pill-x > *,
.auto-trigger-pill-x > *,
.rc-cond-pill-x > *,
.emoji-multi-remove > *,
.am-action-chip-remove > *,
.prefix-chip-remove > *,
.am-import-close > *,
.log-ch-chip-x > * {
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
}

.check-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 16px 10px 0 !important;
  white-space: nowrap !important;
}

.check-row input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.check-row + .check-row {
  margin-left: 0 !important;
}

.badge,
.badge-type,
.status-pill,
.gw-status-pill,
.gw-entry-pill,
.platform-badge,
.rr-panel-type-badge,
.dc-pill,
.dl-serial-pill {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.data-table th,
.data-table td {
  vertical-align: middle !important;
}
.data-table td .badge,
.data-table td .badge-type,
.data-table td .status-pill {
  margin: 0 !important;
}

button,
.btn,
.btn-sm,
.btn-xs,
.filter-btn,
.subtab,
.tab-btn,
.msgs-subnav-item {
  min-width: 0;
}

@media (max-width: 768px) {
  /* Lock the dashboard SPA viewport (so .dash-main is the only scroller).
     Skip the public leaderboard body - that page is a normal scrolling
     document and needs body to scroll. html stays locked either way, since
     the public leaderboard uses body-as-scroller (html does not need to
     scroll, only body does). */
  html {
    height: 100%;
    overflow: hidden !important;
  }
  body:not(.public-leaderboard-body) {
    height: 100%;
    overflow: hidden !important;
  }
  .dash-body {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    min-height: 0 !important;
  }
  .dash-main {
    height: calc(100dvh - var(--topbar-h)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .content-area {
    padding: 18px 14px 120px !important;
    max-width: 100% !important;
  }
  #page-messages,
  .msgs-subpage,
  .tpl-layout,
  .tpl-main,
  .tpl-sidebar,
  .tpl-editor {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .msgs-subnav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .msgs-subnav-item {
    flex: 0 0 auto !important;
  }
  .save-bar {
    bottom: 14px !important;
    width: calc(100vw - 20px) !important;
    border-radius: 22px !important;
    flex-wrap: wrap !important;
  }
}
.appeals-inbox-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
}

.appeals-list-panel,
.appeals-detail-panel {
  min-height: 360px;
  border: 1px solid rgba(120, 215, 255, .14);
  border-radius: 8px;
  background: rgba(6, 16, 28, .42);
  padding: 12px;
}

.appeals-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.appeal-row {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(120, 215, 255, .12);
  background: rgba(10, 24, 39, .72);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: grid;
  gap: 5px;
}

.appeal-row:hover,
.appeal-row.active {
  border-color: rgba(0, 250, 255, .42);
  background: rgba(13, 35, 53, .9);
}

.appeal-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
}

.appeal-row-meta,
.appeal-detail-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.appeal-status {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(148, 163, 184, .16);
  color: #cbd5e1;
}

.appeal-status.pending { background: rgba(250, 204, 21, .16); color: #fde68a; }
.appeal-status.accepted { background: rgba(34, 197, 94, .16); color: #86efac; }
.appeal-status.rejected { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.appeal-status.closed { background: rgba(148, 163, 184, .14); color: #cbd5e1; }

.appeal-answer-list,
.appeal-message-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.appeal-answer,
.appeal-message {
  border: 1px solid rgba(120, 215, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 10px;
}

.appeal-answer strong,
.appeal-message strong {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}

.appeal-message small {
  color: var(--text-muted);
}

.appeal-reply-box {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.appeal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .appeals-inbox-layout {
    grid-template-columns: 1fr;
  }
}

/* Dashboard appeal review redesign */
.appeals-control-panel,
.appeals-inbox-card,
.appeals-advanced-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(7, 21, 36, 0.82);
  border: 1px solid rgba(124, 215, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.appeals-control-panel {
  padding: 18px;
  margin-bottom: 16px;
}

#mod-sub-appeals {
  flex-direction: column;
}

.appeals-control-head,
.appeals-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.appeals-control-head {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(124, 215, 255, 0.1);
}

.appeals-kicker {
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.appeals-control-head h3,
.appeals-section-head h4 {
  margin: 0;
  color: #f3fbff;
  font-size: 18px;
  line-height: 1.2;
}

.appeals-section-head p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.appeals-enable-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border: 1px solid rgba(124, 215, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #d9f6ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.appeals-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
}

.appeals-settings-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(124, 215, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
}

.appeals-settings-panel h4 {
  margin: 0 0 12px;
  color: #f3fbff;
  font-size: 13px;
}

.appeals-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.appeals-field-grid .form-group {
  margin: 0;
  min-width: 0;
}

.appeals-field-grid .form-control,
.appeals-field-grid .native-select-wrap,
.appeals-field-grid .native-select-btn {
  width: 100%;
  min-width: 0;
}

.appeals-check-group {
  margin-bottom: 12px;
}

.appeals-check-group .label-small {
  margin-bottom: 8px;
}

.appeals-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(124, 215, 255, 0.09);
}

.appeals-toggle-row strong,
.appeals-toggle-row span {
  display: block;
}

.appeals-toggle-row strong {
  color: #eef9ff;
  font-size: 12px;
}

.appeals-toggle-row span {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
}

.appeals-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.appeals-inbox-card {
  padding: 18px;
  margin-bottom: 16px;
}

.appeals-inbox-card .appeals-inbox-layout {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.appeals-inbox-card .appeals-list-panel,
.appeals-inbox-card .appeals-detail-panel {
  min-height: 520px;
  border-radius: 14px;
  background: rgba(2, 10, 19, 0.36);
  border-color: rgba(124, 215, 255, 0.13);
}

.appeals-list-controls {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.appeals-list-controls .form-control {
  min-width: 0;
}

.appeals-inbox-card .appeals-list {
  max-height: 470px;
}

.appeals-inbox-card .appeal-row {
  border-radius: 12px;
  padding: 12px;
  background: rgba(10, 25, 42, .68);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.appeals-inbox-card .appeal-row:hover,
.appeals-inbox-card .appeal-row.active {
  transform: translateY(-1px);
  background: rgba(14, 39, 60, .92);
}

.appeals-inbox-card .appeals-detail-panel {
  padding: 16px;
  overflow: auto;
}

.appeals-inbox-card .appeal-answer,
.appeals-inbox-card .appeal-message {
  border-radius: 12px;
  padding: 12px;
}

.appeals-inbox-card .appeal-reply-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(124, 215, 255, 0.1);
}

.appeals-advanced-panel {
  padding: 0;
  overflow: hidden;
}

.appeals-advanced-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.appeals-advanced-panel summary::-webkit-details-marker {
  display: none;
}

.appeals-advanced-panel summary strong,
.appeals-advanced-panel summary small {
  display: block;
}

.appeals-advanced-panel summary strong {
  color: #eef9ff;
  font-size: 13px;
}

.appeals-advanced-panel summary small {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 3px;
}

.appeals-advanced-panel summary i {
  color: var(--text-muted);
  transition: transform .18s ease;
}

.appeals-advanced-panel[open] summary i {
  transform: rotate(180deg);
}

.appeals-advanced-panel p,
.appeals-advanced-panel textarea,
.appeals-advanced-panel .appeals-form-error,
.appeals-advanced-panel > button {
  margin-left: 18px;
  margin-right: 18px;
}

.appeals-advanced-panel p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 10px;
}

.appeals-json-editor {
  width: calc(100% - 36px);
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.appeals-form-error {
  color: #ff8ca5;
  font-size: 12px;
  margin-top: 8px;
}

.appeals-advanced-panel > button {
  margin-top: 10px;
  margin-bottom: 16px;
}

@media (max-width: 920px) {
  .appeals-settings-grid,
  .appeals-inbox-card .appeals-inbox-layout {
    grid-template-columns: 1fr;
  }

  .appeals-inbox-card .appeals-list-panel,
  .appeals-inbox-card .appeals-detail-panel {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  #mod-sub-appeals .page-header {
    order: 1;
  }

  #mod-sub-appeals .appeals-inbox-card {
    order: 2;
  }

  #mod-sub-appeals .appeals-control-panel {
    order: 3;
  }

  #mod-sub-appeals .appeals-advanced-panel {
    order: 4;
  }

  .appeals-control-panel,
  .appeals-inbox-card {
    padding: 14px;
  }

  .appeals-control-head,
  .appeals-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .appeals-enable-control {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .appeals-field-grid,
  .appeals-list-controls {
    grid-template-columns: 1fr;
  }

  .appeals-save-row,
  .appeal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .appeals-save-row .btn,
  .appeal-actions .btn {
    width: 100%;
  }

  #cfg-mod-appeals-site-url {
    font-size: 12px;
  }
}

/* one hover for every remove control, so they stop each having their own */
.picker-chip-x:hover,
.log-ch-chip-x:hover,
.dc-pill-x:hover,
.am-pill-remove:hover,
.am-action-chip-remove:hover,
.auto-trigger-pill-x:hover,
.prefix-chip-remove:hover,
.rc-cond-pill-x:hover,
.emoji-multi-remove:hover {
  background: rgba(237, 66, 69, 0.16);
  color: #ff9ea0;
  border-radius: 50%;
}

/* topbar rides the same 1400px centre line as .dash-inner under it, so the
   brand and the account controls stop hugging the window edges */
.topbar {
  padding-left: max(20px, calc((100vw - 1400px) / 2));
  padding-right: max(20px, calc((100vw - 1400px) / 2));
}

/* legal links sit with the rest of the sidebar footer now */
.sidebar-legal {
  display: flex;
  gap: 14px;
  padding: 10px 18px 4px;
}
.sidebar-legal a {
  font-size: 12px;
  color: var(--text-label);
  text-decoration: none;
  transition: color .14s;
}
.sidebar-legal a:hover { color: var(--text-muted); }

/* leaderboard hiding */
.lb-row--hidden { opacity: .62; }
.lb-row--hidden:hover { opacity: 1; }

.lb-hide-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, .026);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.lb-hide-row:hover { background: rgba(255, 255, 255, .045); }
.lb-hide-row input { margin-top: 2px; flex-shrink: 0; }
.lb-hide-row strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.lb-hide-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.lb-hidden-note {
  margin-top: 10px;
  padding: 10px 13px;
  background: rgba(237, 66, 69, .1);
  border: 1px solid rgba(237, 66, 69, .28);
  border-radius: var(--radius);
  font-size: 12px;
  color: #ff9ea0;
}

/* ═══════════════════════════════════════════════════════════
   FORM ROW ALIGNMENT
   a field row stacks label over control per group. when one label
   wrapped to two lines its control dropped with it while the ones
   either side stayed put, so the YouTube row had its input 19px
   below the two buttons next to it and the add button 19px below
   that again. stretch the groups, pin the controls to the bottom,
   and put every control in a row on the dashboard's own 34px.
   ═══════════════════════════════════════════════════════════ */

.form-row { align-items: stretch; }

.form-row > .form-group {
  display: flex;
  flex-direction: column;
}
.form-row > .form-group > label { flex: 0 0 auto; }
.form-row > .form-group > :not(label):not(.picker-hidden-select):last-child { margin-top: auto; }

/* the picker upgrade appends a hidden <select> after the visible wrapper, so
   :last-child lands on something display:none and the wrapper never moved */
.form-row > .form-group > .picker-wrap { margin-top: auto; }

.form-row > .form-group > input,
.form-row > .form-group > select,
.form-row > .form-group > .btn,
.form-row > .form-group > button,
.form-row > .form-group > .native-select-btn,
.form-row > .form-group > .picker-trigger {
  min-height: 34px;
}
/* .picker-add-btn is already pinned to 34 with !important further up, so the
   row just has to meet it rather than fight it */

/* the picker's own add button sat 10px taller than the "+ Add" beside it in
   the role adder. only bump small buttons that actually share a row with a
   picker, so a lone .btn-sm elsewhere keeps its size. */
.role-chip-adder { align-items: center; }
.role-chip-adder > .btn-sm,
.picker-row > .btn-sm,
.picker-wrap + .btn-sm {
  min-height: 34px;
}

/* a custom select next to plain inputs was 8px taller than all of them */
.form-row .native-select-btn,
.form-group .native-select-btn { min-height: 34px !important; }

/* template grid actions: the move button was 19px beside 28px siblings */
.tpl-move-folder-btn,
.tpl-folder-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}
.tpl-move-folder-btn i,
.tpl-folder-del-btn i { display: block; line-height: 1; }

/* ═══════════════════════════════════════════════════════════
   YOUTUBE CHANNEL PICKER
   music-dashboard shape, youtube's red instead of our teal since
   the whole panel is about their platform.
   ═══════════════════════════════════════════════════════════ */

.yt-pick-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.yt-pick-btn:hover { border-color: rgba(255, 0, 0, .45); color: var(--text); }
.yt-pick-btn.has-value { color: var(--text); }
.yt-pick-empty { display: inline-flex; align-items: center; gap: 8px; }

.yt-pick-chosen { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.yt-pick-chosen img,
.yt-pick-fallback {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(255, 255, 255, .08);
}
.yt-pick-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-pick-handle, .yt-pick-subs { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.yt-picker-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(2, 5, 10, .72);
  backdrop-filter: blur(3px);
}

.yt-picker {
  position: fixed; z-index: 1201;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(100% - 32px, 560px);
  max-height: min(78vh, 640px);
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: ytPickerIn .2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes ytPickerIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.yt-picker-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.yt-picker-head h3 {
  margin: 0; margin-right: auto;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.yt-picker-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255, 0, 0, .14);
  color: #ff4444;
}

.yt-picker-search {
  position: relative;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.yt-picker-search svg {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.yt-picker-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 14px 0 34px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
}
.yt-picker-search input:focus { outline: none; border-color: rgba(255, 0, 0, .45); }

.yt-picker-results { overflow-y: auto; flex: 1; padding: 6px; }
.yt-picker-hint { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--text-muted); }

.yt-picker-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 12px;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--text); text-align: left; cursor: pointer;
  transition: background .14s;
}
.yt-picker-row:hover { background: rgba(255, 0, 0, .1); }
.yt-picker-row img,
.yt-picker-row .yt-pick-fallback { width: 34px; height: 34px; }
.yt-picker-row-main { flex: 1; min-width: 0; }
.yt-picker-row-title {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yt-picker-row-meta { display: block; font-size: 12px; color: var(--text-muted); }
.yt-picker-row-pick {
  flex-shrink: 0;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 0, 0, .16);
  color: #ff6b6b; font-size: 11px; font-weight: 700;
  opacity: 0; transition: opacity .14s;
}
.yt-picker-row:hover .yt-picker-row-pick { opacity: 1; }

/* ── scoped dashboard roles ─────────────────────────────────────────────── */
/* a page the role cannot open stays in the list, dimmed with a lock. hiding it
   would just make people ask where it went. */
.nav-item.nav-locked,
.sidebar-item.nav-locked {
  opacity: 0.38;
}

.nav-item.nav-locked::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center / contain no-repeat;
}

.denied-card {
  max-width: 520px;
  margin: 14vh auto 0;
  padding: 34px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.denied-card svg { color: var(--text-label); margin-bottom: 14px; }
.denied-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.denied-card p  { margin: 0; font-size: 13.5px; line-height: 1.6; }

.page-readonly .locked-control {
  opacity: 0.55;
  cursor: not-allowed;
}

/* the access editor on general settings.

   one column on purpose. two columns squeeze the page name down to nothing the
   moment the window is narrower than about 1200px, and a group with an odd
   number of pages leaves an orphan hanging in the other column. a single list
   is taller and always right. */
.dr-role {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}

.dr-role-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dr-role-name { font-weight: 600; color: var(--text); font-size: 14px; }

.dr-role-sum {
  font-size: 12px;
  color: var(--text-label);
  margin-left: auto;
  margin-right: 4px;
}

.dr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-label);
}

.dr-legend b { color: var(--text-muted); font-weight: 600; margin-right: 5px; }

.dr-grid { padding: 0 16px 14px; }

.dr-group {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-label);
  padding: 18px 0 8px;
}

.dr-grid > .dr-group:first-child { padding-top: 14px; }

/* label left, control right. the label takes whatever is left over, so it never
   gets crushed no matter how narrow the window is. */
.dr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
}

.dr-group + .dr-row { border-top: 0; }

.dr-page {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dr-seg {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 78px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 28px;
}

.dr-seg button {
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-label);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.dr-seg button:last-child { border-right: 0; }
.dr-seg button:hover { background: var(--bg-hover); color: var(--text-muted); }
.dr-seg button.on { background: var(--bg-active); color: var(--teal); font-weight: 600; }

@media (max-width: 560px) {
  .dr-row { flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .dr-seg { grid-template-columns: repeat(3, 1fr); width: 100%; }
}

/* the ticket narrowing hangs off the tickets row */
.dr-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 6px;
  padding: 11px 13px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dr-sub-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }

.dr-sub-note {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--text-label);
}

.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dr-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-label);
  font-family: inherit;
  font-size: 12px;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.dr-chip:hover { background: var(--bg-hover); color: var(--text-muted); }
.dr-chip.on {
  background: var(--bg-active);
  border-color: rgba(0, 250, 255, 0.32);
  color: var(--teal);
}

/* the header text takes the slack so everything after it sits on the right.
   the docs link used to claim margin-left:auto for itself, but several headers
   already have an action button doing the same, and two auto margins split the
   free space between them rather than sharing an edge - which parked Settings
   in the middle of the header. an auto margin still beats flex-grow, so a
   header with an action button keeps that button and the docs link together on
   the right, and a header without one still pushes the docs link over. */
.page-header .page-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* docs link, top right of a page header */
.page-header .docs-link {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-label);
  background: transparent;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.page-header .docs-link:hover {
  color: var(--teal);
  border-color: rgba(0, 250, 255, 0.32);
  background: var(--bg-active);
}

.page-header .docs-link svg { width: 17px; height: 17px; }