/* ============================================================
   @font-face — vendored Inter + JetBrains Mono.
   Files live at ../fonts/ relative to this stylesheet.
   See ../fonts/README.md for upstream URLs and refresh notes.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

/* ============================================================
   SourceBans++ 2026 — Theme stylesheet
   Plain CSS. No build step. Works with any backend.
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* #1309 — pair the active palette with a CSS color-scheme so the
     browser paints native UA surfaces (the open <select> dropdown
     panel, native scrollbars, <input type="date|time|color"> pickers,
     and form autofill highlighting) in the matching scheme. Without
     this hook, html.dark only swaps tokens for DOM-rendered surfaces;
     anything painted in the browser's top-layer system UI ignores it
     and renders light, producing a jarring white panel slide-in over
     a dark page on mobile <select>s. */
  color-scheme: light;

  /* Brand */
  --brand-50:  #f5f3ff; --brand-100: #ede9fe; --brand-200: #ddd6fe;
  --brand-300: #c4b5fd; --brand-400: #a78bfa; --brand-500: #835fed;
  --brand-600: #6341c6; --brand-700: #4f32a8; --brand-800: #3b2480;
  --brand-900: #2a1a60; --brand-950: #160d38;

  /* Neutrals (zinc) */
  --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
  --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a;
  --zinc-900: #18181b; --zinc-950: #09090b;

  /* Semantic (light) */
  --bg-page: var(--zinc-50);
  --bg-surface: #ffffff;
  --bg-muted: var(--zinc-100);
  --border: var(--zinc-200);
  --text: var(--zinc-900);
  --text-muted: var(--zinc-500);
  --text-faint: var(--zinc-400);
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-50);
  --success: #059669; --success-bg: #ecfdf5;
  --warning: #d97706; --warning-bg: #fffbeb;
  --danger:  #dc2626; --danger-bg:  #fef2f2;
  --info:    #2563eb; --info-bg:    #eff6ff;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem;
  --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;

  /* Geometry */
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem;
  --radius-xl: 0.75rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
}

html.dark {
  color-scheme: dark;
  --bg-page: var(--zinc-950);
  --bg-surface: var(--zinc-900);
  --bg-muted: var(--zinc-800);
  --border: var(--zinc-800);
  --text: var(--zinc-100);
  --text-muted: var(--zinc-400);
  --text-faint: var(--zinc-600);
  --accent-soft: rgb(22 13 56 / 0.4);
  --success-bg: rgb(6 78 59 / 0.4);
  --warning-bg: rgb(120 53 15 / 0.4);
  --danger-bg:  rgb(127 29 29 / 0.4);
  --info-bg:    rgb(30 58 138 / 0.4);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  background: var(--bg-page);
  color: var(--text);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- App shell ---- */
.app { min-height: 100vh; display: flex; }
.sidebar {
  width: 15rem; flex-shrink: 0; height: 100vh; position: sticky; top: 0;
  align-self: flex-start;
  background: var(--bg-surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar__brand { height: 3.5rem; padding: 0 1rem; display: flex; align-items: center; gap: 0.625rem; border-bottom: 1px solid var(--border); }
.sidebar__brand-mark { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.sidebar__nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 0.75rem 0.5rem; }
.sidebar__section { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1.25rem; }
.sidebar__section-label { padding: 0 0.75rem 0.375rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.sidebar__link {
  display: flex; align-items: center; gap: 0.625rem; padding: 0 0.75rem; height: 2rem;
  border-radius: var(--radius-md); color: var(--text); font-weight: 500;
  text-decoration: none; transition: background-color .15s; width: 100%; border: 0; background: transparent; text-align: left;
}
.sidebar__link svg { stroke-width: 1.5; }
.sidebar__link:hover { background: var(--bg-muted); }
.sidebar__link[aria-current="page"] { background: var(--zinc-900); color: white; }
html.dark .sidebar__link[aria-current="page"] { background: var(--brand-700); color: var(--on-accent, #fff); }
.sidebar__link-count { margin-left: auto; font-size: 0.625rem; padding: 0 0.375rem; height: 1rem; display: inline-flex; align-items: center; border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 3.5rem; position: sticky; top: 0; z-index: 30;
  background: rgb(255 255 255 / 0.8); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.5rem; padding: 0 1.25rem;
}
html.dark .topbar { background: rgb(9 9 11 / 0.8); }
.topbar__breadcrumbs { display: flex; align-items: center; gap: 0.375rem; font-size: var(--fs-base); color: var(--text-muted); }
.topbar__breadcrumbs > [aria-current] { color: var(--text); font-weight: 500; }
.topbar__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); font-size: var(--fs-base);
  transition: background-color .15s, color .15s;
}
.topbar__search:hover { background: var(--bg-muted); color: var(--text); }
.topbar__search-label, .topbar__search-kbd { display: none; }
@media (max-width: 768px) {
  .topbar__search { width: 2.75rem; height: 2.75rem; }
}

/* ---- Theme toggle icon swap ---- */
.theme-toggle__moon { display: none; }
html.dark .theme-toggle__sun { display: none; }
html.dark .theme-toggle__moon { display: inline-block; }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--zinc-900);
  --btn-color: white;
  --btn-border: transparent;
  --btn-bg-hover: var(--zinc-800);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 0.875rem; border-radius: var(--radius-md);
  font-size: var(--fs-base); font-weight: 500;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-color);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--btn-bg-hover); }
:where(html.dark) .btn {
  --btn-bg: var(--zinc-100);
  --btn-color: var(--zinc-900);
  --btn-bg-hover: white;
}
.btn--primary { --btn-bg: var(--brand-600); --btn-color: white; --btn-bg-hover: var(--brand-700); }
.btn--secondary {
  --btn-bg: var(--bg-surface);
  --btn-color: var(--text);
  --btn-border: var(--border);
  --btn-bg-hover: var(--bg-muted);
}
.btn--secondary[aria-pressed="true"] {
  --btn-bg: var(--zinc-900);
  --btn-color: white;
  --btn-border: var(--zinc-900);
  --btn-bg-hover: var(--zinc-800);
}
html.dark .btn--secondary[aria-pressed="true"] {
  --btn-bg: var(--brand-700);
  --btn-color: var(--on-accent, #fff);
  --btn-border: var(--brand-700);
  --btn-bg-hover: var(--brand-600);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--text-muted);
  --btn-border: transparent;
  --btn-bg-hover: var(--bg-muted);
}
.btn--ghost:hover { --btn-color: var(--text); }
.btn--danger { --btn-bg: var(--danger); --btn-color: white; --btn-bg-hover: #b91c1c; }
.btn--sm { height: 2rem; padding: 0 0.75rem; font-size: var(--fs-xs); }
.btn--icon { width: 2.25rem; padding: 0; }
.btn--xs { height: 1.5rem; width: 1.5rem; min-width: 1.5rem; }

/* ---- In-flight action buttons ---- */
.btn[data-loading="true"] {
  position: relative;
  cursor: progress;
  pointer-events: none;
  color: transparent !important;
  text-shadow: none !important;
}
.btn[data-loading="true"] > * { visibility: hidden; }
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border-radius: 50%;
  border: 2px solid var(--btn-color, currentColor);
  border-right-color: transparent;
  border-top-color: transparent;
  animation: sbpp-btn-spin 0.6s linear infinite;
}
@keyframes sbpp-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after {
    animation-duration: 0.6s !important;
    animation-iteration-count: infinite !important;
  }
}

html.dark .btn[data-testid="login-steam"] {
  --btn-bg: #1b2838;
  --btn-color: #fff;
  --btn-border: #1b2838;
  --btn-bg-hover: #2a475e;
}

/* ---- Admin sub-tabs ---- */
.admin-tabs > [aria-current="page"] {
  background: var(--bg-surface);
  color: var(--text);
  border-bottom: 2px solid var(--brand-600);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 600;
}
html.dark .admin-tabs > [aria-current="page"] { border-bottom-color: var(--brand-500); }
.admin-tabs__back { margin-left: auto; }

@media (max-width: 768px) {
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs > * { flex-shrink: 0; scroll-snap-align: start; }
  .admin-tabs > [aria-current="page"] {
    background: var(--brand-600);
    color: white;
    border-bottom-color: transparent;
    border-radius: var(--radius-md);
  }
  html.dark .admin-tabs > [aria-current="page"] {
    background: var(--brand-500);
    color: var(--zinc-950);
  }
  .admin-tabs__back { margin-left: 0; }
}

/* ---- Admin sidebar ---- */
.admin-sidebar { font-size: var(--fs-sm); margin-bottom: 1rem; }
.admin-sidebar__details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.admin-sidebar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.admin-sidebar__summary::-webkit-details-marker { display: none; }
.admin-sidebar__summary-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.admin-sidebar__chevron {
  transition: transform .15s ease;
  color: var(--text-muted);
}
.admin-sidebar__details[open] .admin-sidebar__chevron { transform: rotate(180deg); }
.admin-sidebar__nav {
  padding: 0.5rem 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar__chevron { transition: none; }
}

.admin-sidebar-shell {
  padding: 1.5rem;
  max-width: 1400px;
}

.admin-sidebar-content .page-section {
  padding: 0;
  max-width: none;
}

@media (min-width: 1024px) {
  .admin-sidebar-shell {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .admin-sidebar {
    position: sticky;
    top: 4rem;
    align-self: start;
    margin-bottom: 0;
  }
  .admin-sidebar__details {
    border: none;
    background: transparent;
  }
  .admin-sidebar__summary { display: none; }
  .admin-sidebar__details .admin-sidebar__nav { display: flex !important; }
  .admin-sidebar__nav { padding: 0; }
  .admin-sidebar-content { min-width: 0; }
}

/* ---- Collapsible filter card ---- */
.filters-details { padding: 0; }
.filters-details > .filters-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: inherit;
}
.filters-details[open] > .filters-details__summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.filters-details__summary::-webkit-details-marker { display: none; }
.filters-details__summary:hover { background: var(--bg-muted); }
.filters-details__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(99 65 198 / 0.15);
  border-color: var(--brand-500);
}
.filters-details__summary-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filters-details__count {
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.filters-details__chevron {
  transition: transform .15s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}
.filters-details[open] .filters-details__chevron { transform: rotate(180deg); }
.filters-details__form { display: contents; }
.filters-details__header { border-bottom: none; padding-top: 0.5rem; }
.filters-details__body { display: block; }
.filters-details__body > form.card {
  margin: 0;
  border: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
@media (prefers-reduced-motion: reduce) {
  .filters-details__chevron { transition: none; }
}

/* ---- Inputs ---- */
.input, .select, .textarea {
  width: 100%; height: 2.25rem; padding: 0 0.75rem;
  border-radius: var(--radius-md); background: var(--bg-surface);
  border: 1px solid var(--border); color: var(--text); font-size: var(--fs-base);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgb(99 65 198 / 0.15);
}
.textarea { height: auto; padding: 0.625rem 0.75rem; resize: vertical; min-height: 5rem; }
.input--with-icon { padding-left: 2rem; }

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color .15s, border-color .15s;
}
input[type="checkbox"]:hover { border-color: var(--brand-600); }
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"]:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
  background-size: 75% 75%;
  background-repeat: no-repeat;
  background-position: center;
}
input[type="checkbox"]:indeterminate {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
  background-size: 75% 75%;
  background-repeat: no-repeat;
  background-position: center;
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.file-input { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text); margin-bottom: 0.375rem; }

/* ---- Card ---- */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.card__header h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.card__header p { margin: 0.25rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.card__body { padding: 1.25rem; }

/* ---- Status pill ---- */
.pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; height: 1.25rem; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 500; box-shadow: inset 0 0 0 1px currentColor; }
.pill--permanent { background: var(--danger-bg); color: #b91c1c; }
.pill--active    { background: var(--warning-bg); color: #b45309; }
.pill--expired   { background: var(--bg-muted); color: var(--text-muted); }
.pill--unbanned  { background: var(--success-bg); color: #047857; }
.pill--unmuted   { background: var(--success-bg); color: #047857; }
.pill--online    { background: rgb(16 185 129 / 0.15); color: #047857; }
.pill--offline   { background: var(--bg-muted); color: var(--text-muted); }
html.dark .pill--permanent { color: #fca5a5; }
html.dark .pill--active    { color: #fcd34d; }
html.dark .pill--unbanned  { color: #6ee7b7; }
html.dark .pill--unmuted   { color: #6ee7b7; }
html.dark .pill--online    { color: #6ee7b7; }

/* ---- Ban row state border ---- */
.ban-row { border-left: 3px solid transparent; }
.ban-row--permanent { border-left-color: #ef4444; }
.ban-row--active    { border-left-color: #f59e0b; }
.ban-row--expired   { border-left-color: var(--zinc-300); }
.ban-row--unbanned  { border-left-color: #10b981; }

/* ---- Inline per-row comments disclosure ---- */
.ban-comments-inline { display: inline-block; margin-top: 0.125rem; }
.ban-comments-inline__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ban-comments-inline__summary::-webkit-details-marker { display: none; }
.ban-comments-inline__summary:hover {
  background: var(--bg-surface);
  color: var(--text);
  border-color: var(--border);
}
.ban-comments-inline__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(99 65 198 / 0.15);
  border-color: var(--brand-500);
}
.ban-comments-inline[open] > .ban-comments-inline__summary {
  background: var(--bg-surface);
  color: var(--text);
  border-color: var(--border);
}
.ban-comments-inline__label { color: inherit; }
.ban-comments-inline__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
}
.ban-comments-inline__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.625rem;
  background: var(--bg-surface);
}
.ban-comments-inline__meta {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.ban-comments-inline__text {
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ban-comments-inline__text a { color: var(--brand-600); text-decoration: underline; }
html.dark .ban-comments-inline__text a { color: var(--brand-400); }
.ban-comments-inline__edit { margin-top: 0.25rem; }

/* ---- Filter chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.625rem;
  height: 1.75rem; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 500; transition: background-color .15s, color .15s;
  text-decoration: none;
}
.chip:hover { background: var(--bg-muted); color: var(--text); }
.chip[aria-pressed="true"],
.chip[data-active="true"] { background: var(--zinc-900); color: white; border-color: var(--zinc-900); }
html.dark .chip[aria-pressed="true"],
html.dark .chip[data-active="true"] { background: var(--brand-700); color: var(--on-accent, #fff); border-color: var(--brand-700); }
.chip__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; }
.chip-row { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Table ---- */
.table { width: 100%; font-size: var(--fs-base); border-collapse: collapse; }
.table thead tr { background: rgb(0 0 0 / 0.02); border-bottom: 1px solid var(--border); }
html.dark .table thead tr { background: rgb(255 255 255 / 0.02); }
.table th { text-align: left; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0.625rem 0.75rem; }
.table th:first-child, .table td:first-child { padding-left: 1.25rem; }
.table th:last-child, .table td:last-child { padding-right: 1.25rem; }
.table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; }
.table tbody tr:hover { background: var(--bg-muted); }
.table td { padding: 0.75rem; vertical-align: middle; }
.table .row-actions {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  column-gap: 0.25rem;
  justify-content: flex-end;
}

.table-scroll {
  overflow-x: auto;
  container-type: inline-size;
  container-name: tablescroll;
}
.table .col-length,
.table .col-banned,
.table .col-admin,
.table .col-ip,
.table .col-status,
.table .col-actions { white-space: nowrap; }
.table .col-status { width: 1%; }
.table .col-length {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container tablescroll (max-width: 1500px) {
  .table .col-tier-3 { display: none; }
}
@container tablescroll (max-width: 1200px) {
  .table .col-tier-2 { display: none; }
}

/* ---- Avatar ---- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: white; font-weight: 600; flex-shrink: 0; }

/* ---- Toast + drawer + palette ---- */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 80; display: flex; flex-direction: column; gap: 0.5rem; width: min(22.5rem, calc(100vw - 2rem)); }
.toast { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.75rem; display: flex; gap: 0.75rem; animation: slide-in .2s ease; }
@keyframes slide-in { from { transform: translateX(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.drawer-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.4); backdrop-filter: blur(2px); z-index: 50; }
.drawer { position: fixed; right: 0; top: 0; height: 100%; width: min(35rem, 100vw); background: var(--bg-page); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 51; display: flex; flex-direction: column; animation: slide-in .25s ease; }

.drawer .drawer__ids dd,
.drawer .drawer__ban dd { min-width: 0; overflow-wrap: anywhere; }
.drawer a[href^="tel:"],
.drawer a[href^="sms:"] { color: inherit; text-decoration: none; pointer-events: none; }
@media (max-width: 768px) {
  .drawer .drawer__ids,
  .drawer .drawer__ban { grid-template-columns: 4.5rem minmax(0, 1fr) !important; }
  .drawer .drawer__tabs { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .drawer .drawer__tabs > [role="tab"] { scroll-snap-align: start; flex-shrink: 0; }
}

html:has(#drawer-root[data-drawer-open="true"]) { overflow: hidden; }
@media (max-width: 768px) {
  html:has(#drawer-root[data-drawer-open="true"]) body { overflow: hidden; }
}

.sidebar-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.4); backdrop-filter: blur(2px); z-index: 40; display: none; }
.sidebar-backdrop[data-visible="true"] { display: block; }

.palette-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.4); backdrop-filter: blur(2px); z-index: 60; display: grid; place-items: start center; padding-top: 10vh; }
.palette { width: min(36rem, calc(100vw - 2rem)); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.palette__input { display: flex; align-items: center; gap: 0.75rem; height: 3rem; padding: 0 1rem; border-bottom: 1px solid var(--border); }
.palette__input input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-base); }

.palette__row-meta { min-width: 0; flex: 1 1 0; }
.palette__row-hints {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.palette__row-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.palette__row-hints kbd {
  display: inline-block;
  padding: 0.0625rem 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  font-weight: 400;
}
@media (max-width: 640px) {
  .palette__row-hint-label { display: none; }
}

/* ---- Skeleton ---- */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skel { background: linear-gradient(90deg, var(--zinc-100) 0, var(--zinc-200) 40px, var(--zinc-100) 80px); background-size: 200px 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-sm); }
html.dark .skel { background: linear-gradient(90deg, var(--zinc-800) 0, var(--zinc-700) 40px, var(--zinc-800) 80px); background-size: 200px 100%; }
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ---- Queue rows ---- */
details.queue-row > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}
details.queue-row > summary::-webkit-details-marker { display: none; }
.queue-row__body { flex: 1 1 0; min-width: 0; }
.queue-row__date {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
details.queue-row > summary > .row-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
  opacity: 1;
}

@media (max-width: 768px) {
  details.queue-row > summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .queue-row__body { flex: 1 1 100%; }
  .queue-row__date {
    order: 2;
    flex: 1 1 auto;
    align-self: center;
  }
  details.queue-row > summary > .row-actions {
    order: 3;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
  }
}

/* ---- Server card grid ---- */
.servers-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
}
@media (max-width: 768px) {
  .servers-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Comms mobile card actions ---- */
.ban-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 1rem 0.75rem;
}

/* ---- Responsive ---- */
[data-mobile-menu] { display: none; }
@media (max-width: 1024px) {
  .sidebar { display: none; }
  .sidebar.is-open { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 41; box-shadow: var(--shadow-lg); }
  [data-mobile-menu] { display: inline-flex; }
}
@media (max-width: 768px) {
  .table { display: none; }
  .ban-cards { display: block; }
  .scroll-x { overflow-x: visible; flex-wrap: wrap; row-gap: 0.5rem; }
}
@media (min-width: 769px) {
  .ban-cards { display: none; }
}

/* ---- Utility classes ---- */
.flex { display: flex; } .flex-1 { flex: 1; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
.grid { display: grid; }
.text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); }
.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }

.page-section {
  padding: 1.5rem;
  max-width: 1400px;
}

.m-0 { margin: 0; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; }

.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ---- Empty state ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-faint);
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}
.empty-state__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.empty-state__body {
  margin: 0;
  font-size: var(--fs-sm);
  max-width: 28rem;
}
.empty-state__actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Settings ---- */
.settings-actions {
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .settings-actions { margin-bottom: 2rem; }
}

.settings-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.settings-fieldset__legend {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.settings-fieldset__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.settings-fieldset__hint {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.settings-fieldset__hint code {
  padding: 0 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.settings-fieldset__body {
  padding: 1.25rem;
}
.settings-fieldset__input {
  width: 100%;
  max-width: 18rem;
}
.settings-fieldset__help {
  margin: 0.375rem 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
}
@media (max-width: 768px) {
  .settings-fieldset__input { max-width: 100%; }
}

/* ---- Permissions grid ---- */
.permissions-card__body {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.permissions-side__heading {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.permissions-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.permissions-group {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
}
.permissions-group__title {
  margin: 0 0 0.375rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}
.permissions-group__list {
  list-style: disc;
  margin: 0;
  padding-left: 1.125rem;
  font-size: var(--fs-sm);
  color: var(--text);
}
.permissions-group__list li + li { margin-top: 0.125rem; }
.permissions-empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
@media (min-width: 1024px) {
  .permissions-card__body {
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
  .permissions-grid--web { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .permissions-grid--web { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Footer ---- */
.app-footer {
  text-align: center;
  padding: 1.25rem 1rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.app-footer a {
  color: inherit;
  text-decoration: none;
}
.app-footer a:hover,
.app-footer a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.app-footer__sponsor i,
.app-footer__sponsor svg {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 0.35em;
  color: var(--accent);
}
.app-footer__sep {
  margin-inline: 0.35em;
}

/* ---- Dashboard intro editor ---- */
.dash-intro-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}
.dash-intro-editor > .textarea { min-height: 14rem; }
.dash-intro-preview {
  position: relative;
  min-height: 14rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-page);
  overflow-y: auto;
}
.dash-intro-preview__label {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dash-intro-preview__body { font-size: var(--fs-sm); }
.dash-intro-preview__body > :first-child { margin-top: 0; }
.dash-intro-preview__body > :last-child  { margin-bottom: 0; }
.dash-intro-preview[data-loading="true"] .dash-intro-preview__body { opacity: 0.6; }
@media (max-width: 768px) {
  .dash-intro-editor { grid-template-columns: 1fr; }
  .dash-intro-preview { min-height: 8rem; }
}

/* ---- Announcement strip ---- */
.announcement-strip {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.announcement-strip > details > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  user-select: none;
}
.announcement-strip > details > summary::-webkit-details-marker { display: none; }
.announcement-strip > details > summary::marker { content: ''; }
.announcement-strip__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announcement-strip__date {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.announcement-strip > details > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0; height: 0;
  margin-left: 0.25rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-faint);
  transform: rotate(-90deg);
  transition: transform 150ms ease;
}
.announcement-strip > details[open] > summary::after { transform: rotate(0deg); }
.announcement-strip > details > summary:hover .announcement-strip__title {
  color: var(--text);
}
.announcement-strip > details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.announcement-strip__body {
  padding: 0 0.875rem 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.announcement-strip__body > :first-child { margin-top: 0; }
.announcement-strip__body > :last-child  { margin-bottom: 0; }
.announcement-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.875rem 0.75rem;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
}
.announcement-strip__link:hover { text-decoration: underline; }
.announcement-strip__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Player right-click context menu ---- */
.context-menu-target { cursor: context-menu; }
@media (pointer: coarse) and (hover: none) {
    .servers-rcon-hint { display: none; }
}
.context-menu {
    position: fixed;
    z-index: 90;
    min-width: 12rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    animation: context-menu-in 0.12s ease-out;
    font-size: var(--fs-sm);
}
.context-menu__header {
    padding: 0.375rem 0.625rem 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.125rem;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
}
.context-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    font: inherit;
}
.context-menu__item:hover,
.context-menu__item:focus,
.context-menu__item:focus-visible {
    background: var(--bg-muted);
    color: var(--text);
    outline: none;
}
.context-menu__item:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}
@keyframes context-menu-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}