/* =================================================================
   FluxBans — Dashboard Stylesheet v2
   Sidebar layout · Glass cards · Rich dark theme
   ================================================================= */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  /* Palette */
  --bg:            #06080f;
  --bg-sidebar:    #080c18;
  --bg-card:       #0d1422;
  --bg-card-alt:   #111a2c;
  --bg-hover:      #141f30;
  --bg-input:      #080e1c;

  /* Accent */
  --accent:        #6366f1;
  --accent-hover:  #5558e0;
  --accent-subtle: rgba(99,102,241,0.12);
  --accent-glow:   rgba(99,102,241,0.32);

  /* Text */
  --text:          #dde6f6;
  --text-muted:    #4a5d82;
  --text-dim:      #243050;

  /* Borders */
  --border:        rgba(255,255,255,0.055);
  --border-strong: rgba(255,255,255,0.10);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.50);
  --shadow:    0 4px 24px rgba(0,0,0,.60);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.80);

  /* Punishment palette */
  --ban-bg:     rgba(239,68,68,.10);   --ban-fg:  #f87171; --ban-border:  rgba(239,68,68,.22);
  --mute-bg:    rgba(249,115,22,.10);  --mute-fg: #fb923c; --mute-border: rgba(249,115,22,.22);
  --kick-bg:    rgba(168,85,247,.10);  --kick-fg: #c084fc; --kick-border: rgba(168,85,247,.22);
  --warn-bg:    rgba(234,179,8,.10);   --warn-fg: #facc15; --warn-border: rgba(234,179,8,.22);

  /* Status palette */
  --active-bg:   rgba(34,197,94,.10);    --active-fg:   #4ade80; --active-border:   rgba(34,197,94,.22);
  --expired-bg:  rgba(100,116,139,.08);  --expired-fg:  #94a3b8; --expired-border:  rgba(100,116,139,.18);
  --removed-bg:  rgba(59,130,246,.08);   --removed-fg:  #60a5fa; --removed-border:  rgba(59,130,246,.18);
  --pending-bg:  rgba(59,130,246,.10);   --pending-fg:  #60a5fa;
  --approved-bg: rgba(34,197,94,.10);    --approved-fg: #4ade80;
  --denied-bg:   rgba(239,68,68,.10);    --denied-fg:   #f87171;

  /* Sidebar */
  --sidebar-w: 240px;

  /* Shape */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --transition: 0.15s ease;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  --grad-accent: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --grad-ban:    linear-gradient(135deg,#dc2626 0%,#f43f5e 100%);
}

/* Light theme */
html.light {
  --bg:            #f0f4fc;
  --bg-sidebar:    #e8eef8;
  --bg-card:       #ffffff;
  --bg-card-alt:   #f5f8ff;
  --bg-hover:      #edf1fc;
  --bg-input:      #f8faff;
  --text:          #0f172a;
  --text-muted:    #4a5d82;
  --text-dim:      #b0bdcf;
  --border:        rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow:    0 4px 24px rgba(0,0,0,.09);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.14);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--accent-hover); text-decoration:underline; }
img { display:block; max-width:100%; }

h1,h2,h3,h4 { font-weight:800; line-height:1.2; color:var(--text); }
h1 { font-size:1.75rem; letter-spacing:-.5px; }
h2 { font-size:1.35rem; letter-spacing:-.3px; }
h3 { font-size:1.05rem; }
p  { margin-bottom:.75rem; }
p:last-child { margin-bottom:0; }

code,kbd {
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.82em;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.18);
  border-radius:5px;
  padding:.1em .45em;
  color:#a5b4fc;
}

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

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:100;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar { display:none; }

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:1.1rem 1rem 1rem;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  flex-shrink:0;
}
.sidebar-brand:hover { text-decoration:none; }

.brand-logo {
  width:34px; height:34px;
  background:var(--grad-brand);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:#fff;
  box-shadow:0 0 20px rgba(99,102,241,.45);
  flex-shrink:0;
}

.brand-wordmark {
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.4px;
  background:var(--grad-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.sidebar-nav {
  flex:1;
  padding:.6rem .5rem;
  display:flex;
  flex-direction:column;
  gap:1px;
  overflow-y:auto;
  scrollbar-width:none;
}
.sidebar-nav::-webkit-scrollbar { display:none; }

.nav-section-label {
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--text-dim);
  padding:.85rem .75rem .25rem;
}

.nav-item {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.52rem .75rem;
  border-radius:var(--radius);
  color:var(--text-muted);
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:background var(--transition),color var(--transition);
  position:relative;
  white-space:nowrap;
}
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; }
.nav-item.active { background:var(--accent-subtle); color:var(--accent); font-weight:600; }
.nav-item.active::before {
  content:'';
  position:absolute;
  left:-1px; top:22%; bottom:22%;
  width:3px;
  background:var(--accent);
  border-radius:0 3px 3px 0;
}
.nav-item svg { flex-shrink:0; opacity:.75; transition:opacity var(--transition); }
.nav-item:hover svg,.nav-item.active svg { opacity:1; }

.nav-item-label { flex:1; }

.nav-badge {
  font-size:.62rem;
  font-weight:800;
  padding:.1rem .42rem;
  border-radius:20px;
  background:var(--ban-bg);
  color:var(--ban-fg);
  border:1px solid var(--ban-border);
  letter-spacing:.2px;
}

.sidebar-divider {
  height:1px;
  background:var(--border);
  margin:.5rem .75rem;
}

.sidebar-footer {
  padding:.9rem 1rem;
  border-top:1px solid var(--border);
  flex-shrink:0;
}

.server-pill {
  display:flex;
  align-items:center;
  gap:.55rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.5rem .75rem;
}

.online-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--active-fg);
  box-shadow:0 0 8px var(--active-fg);
  flex-shrink:0;
  animation:dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}

.server-pill-name {
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Sidebar overlay (mobile) ──────────────────────────────────── */
.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
  z-index:99;
}
.sidebar-overlay.open { display:block; }

/* ── Content area ──────────────────────────────────────────────── */
.content-area {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ── Mobile topbar ─────────────────────────────────────────────── */
.mobile-topbar {
  display:none;
  height:54px;
  padding:0 1rem;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:var(--bg-sidebar);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:90;
  flex-shrink:0;
}

.sidebar-toggle {
  background:none;
  border:none;
  cursor:pointer;
  padding:.4rem;
  color:var(--text);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
  flex-shrink:0;
}
.sidebar-toggle:hover { background:rgba(255,255,255,.06); }

.mobile-wordmark {
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.3px;
  background:var(--grad-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Page hero ─────────────────────────────────────────────────── */
.page-hero {
  background:linear-gradient(180deg,rgba(99,102,241,.065) 0%,transparent 100%);
  border-bottom:1px solid var(--border);
  padding:2rem 0 1.5rem;
  margin-bottom:2rem;
}

/* ── Layout ────────────────────────────────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 1.5rem; }

.page-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}

.page-title    { font-size:1.65rem; font-weight:900; letter-spacing:-.5px; }
.page-subtitle { color:var(--text-muted); font-size:.875rem; margin-top:.25rem; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:fadeUp .3s ease both;
}

.card-header {
  padding:.9rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);
}

.card-title { font-size:.875rem; font-weight:700; }
.card-body  { padding:1.5rem; }

/* Player card */
.player-card {
  display:flex; align-items:center; gap:1.5rem; padding:1.5rem;
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card-alt) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); flex-wrap:wrap;
}

.player-avatar {
  width:80px; height:80px;
  border-radius:var(--radius-lg);
  border:2px solid var(--border-strong);
  background:var(--bg-card-alt);
  flex-shrink:0;
  image-rendering:pixelated;
  box-shadow:0 0 24px rgba(99,102,241,.18);
}

.player-info { flex:1; min-width:200px; }
.player-name { font-size:1.5rem; font-weight:900; letter-spacing:-.5px; margin-bottom:.4rem; }
.player-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.82rem; color:var(--text-muted); }
.player-meta span { display:flex; align-items:center; gap:.3rem; }

.copy-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); padding:.1rem .3rem;
  border-radius:4px; font-size:.72rem; font-family:inherit;
  transition:color var(--transition),background var(--transition);
}
.copy-btn:hover { color:var(--accent); background:var(--accent-subtle); }

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }

table { width:100%; border-collapse:collapse; font-size:.875rem; }

thead th {
  padding:.65rem 1.25rem;
  text-align:left;
  font-size:.67rem; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  background:rgba(255,255,255,.018);
}

tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--transition);
}
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(99,102,241,.045); }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover td:first-child { padding-left:calc(1.25rem - 3px); border-left:3px solid var(--accent); }

tbody td { padding:.85rem 1.25rem; vertical-align:middle; }
tbody td.muted { color:var(--text-muted); font-size:.82rem; }

.player-cell { display:flex; align-items:center; gap:.65rem; font-weight:600; }

.mini-avatar {
  width:28px; height:28px;
  border-radius:6px; image-rendering:pixelated;
  background:var(--bg-card-alt); flex-shrink:0;
  border:1px solid var(--border);
}

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.26rem;
  padding:.18rem .58rem;
  border-radius:20px;
  font-size:.67rem; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  white-space:nowrap; border:1px solid transparent;
}

.badge-ban     { background:var(--ban-bg);     color:var(--ban-fg);     border-color:var(--ban-border);     }
.badge-mute    { background:var(--mute-bg);    color:var(--mute-fg);    border-color:var(--mute-border);    }
.badge-kick    { background:var(--kick-bg);    color:var(--kick-fg);    border-color:var(--kick-border);    }
.badge-warn    { background:var(--warn-bg);    color:var(--warn-fg);    border-color:var(--warn-border);    }
.badge-active  { background:var(--active-bg);  color:var(--active-fg);  border-color:var(--active-border);  }
.badge-expired { background:var(--expired-bg); color:var(--expired-fg); border-color:var(--expired-border); }
.badge-removed { background:var(--removed-bg); color:var(--removed-fg); border-color:var(--removed-border); }
.badge-pending  { background:var(--pending-bg);  color:var(--pending-fg);  border-color:rgba(59,130,246,.22); }
.badge-approved { background:var(--approved-bg); color:var(--approved-fg); border-color:var(--active-border); }
.badge-denied   { background:var(--denied-bg);   color:var(--denied-fg);   border-color:var(--ban-border);    }

.badge::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.85; flex-shrink:0;
}

/* ── Stat cards ────────────────────────────────────────────────── */
.stats-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}

.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.1rem 1.25rem;
  display:flex; flex-direction:column; gap:.3rem;
  position:relative; overflow:hidden;
  transition:border-color var(--transition),transform var(--transition);
  animation:fadeUp .3s ease both;
}
.stat-card:hover { border-color:var(--border-strong); transform:translateY(-2px); }
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--stat-color, var(--accent));
}
/* Radial glow behind number */
.stat-card::after {
  content:'';
  position:absolute; top:0; right:0;
  width:80px; height:80px;
  background:radial-gradient(circle at 70% 20%, var(--stat-glow,rgba(99,102,241,.08)) 0%, transparent 70%);
  pointer-events:none;
}
.stat-card.stat-ban    { --stat-color:var(--ban-fg);   --stat-glow:rgba(239,68,68,.10); }
.stat-card.stat-mute   { --stat-color:var(--mute-fg);  --stat-glow:rgba(249,115,22,.10); }
.stat-card.stat-kick   { --stat-color:var(--kick-fg);  --stat-glow:rgba(168,85,247,.10); }
.stat-card.stat-warn   { --stat-color:var(--warn-fg);  --stat-glow:rgba(234,179,8,.10); }
.stat-card.stat-active { --stat-color:var(--active-fg);--stat-glow:rgba(34,197,94,.10); }

.stat-label {
  font-size:.67rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted);
}
.stat-value {
  font-size:2rem; font-weight:900; color:var(--text);
  line-height:1; letter-spacing:-1.5px;
}

/* ── Pagination ────────────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:.25rem; padding:1rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}

.page-btn {
  min-width:34px; height:34px; padding:0 .55rem;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); color:var(--text-muted);
  font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--transition); text-decoration:none;
}
.page-btn:hover { background:var(--bg-hover); border-color:var(--border-strong); color:var(--text); text-decoration:none; }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 14px var(--accent-glow); }
.page-btn:disabled,.page-btn[aria-disabled="true"] { opacity:.35; cursor:not-allowed; pointer-events:none; }
.pagination-info { font-size:.8rem; color:var(--text-muted); padding:0 .4rem; }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }

label {
  display:block;
  font-size:.8rem; font-weight:700;
  margin-bottom:.4rem; color:var(--text);
}
label .optional { color:var(--text-muted); font-weight:400; font-size:.75rem; }

.form-control {
  width:100%; padding:.65rem 1rem;
  background:var(--bg-input);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  color:var(--text); font-size:.9rem; font-family:inherit; outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
  -webkit-appearance:none;
}
.form-control:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:120px; line-height:1.6; }
.form-hint { font-size:.78rem; color:var(--text-muted); margin-top:.35rem; }

/* Search bar */
.search-bar { display:flex; gap:.5rem; align-items:center; }
.search-wrapper { position:relative; flex:1; }

.search-results-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  z-index:50; max-height:300px; overflow-y:auto; display:none;
}
.search-results-dropdown.open { display:block; }

.search-result-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; cursor:pointer;
  transition:background var(--transition);
  font-size:.875rem; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--border);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--bg-hover); text-decoration:none; color:var(--text); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.1rem;
  border-radius:var(--radius);
  font-size:.875rem; font-weight:600; font-family:inherit;
  cursor:pointer; border:1px solid transparent;
  transition:all var(--transition); text-decoration:none;
  white-space:nowrap; line-height:1;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }

.btn-primary {
  background:var(--grad-accent); color:#fff;
  box-shadow:0 0 18px rgba(99,102,241,.28);
}
.btn-primary:hover { filter:brightness(1.1); color:#fff; box-shadow:0 0 26px rgba(99,102,241,.45); }
.btn-secondary {
  background:rgba(255,255,255,.05); color:var(--text);
  border-color:var(--border-strong);
}
.btn-secondary:hover { background:rgba(255,255,255,.09); color:var(--text); }
.btn-danger {
  background:rgba(239,68,68,.10); color:#f87171;
  border-color:rgba(239,68,68,.28);
}
.btn-danger:hover { background:rgba(239,68,68,.20); color:#f87171; }
.btn-success {
  background:rgba(34,197,94,.10); color:#4ade80;
  border-color:rgba(34,197,94,.28);
}
.btn-success:hover { background:rgba(34,197,94,.20); color:#4ade80; }

.btn-sm { padding:.34rem .72rem; font-size:.8rem; }
.btn-block { width:100%; justify-content:center; }

/* ── Alerts ────────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem 1.1rem; border-radius:var(--radius);
  border-left:3px solid; margin-bottom:1.25rem; font-size:.875rem;
}
.alert-icon    { font-size:1rem; flex-shrink:0; line-height:1.5; }
.alert-content { flex:1; }
.alert-close {
  background:none; border:none; cursor:pointer; color:inherit;
  opacity:.5; padding:.1rem .3rem; border-radius:4px;
  font-size:.9rem; transition:opacity var(--transition); flex-shrink:0;
}
.alert-close:hover { opacity:1; }
.alert-success { background:var(--active-bg);  color:var(--active-fg);  border-color:var(--active-fg); }
.alert-error   { background:var(--ban-bg);     color:var(--ban-fg);     border-color:var(--ban-fg); }
.alert-info    { background:var(--pending-bg); color:var(--pending-fg); border-color:var(--pending-fg); }
.alert-warn    { background:var(--warn-bg);    color:var(--warn-fg);    border-color:var(--warn-fg); }

/* ── Flash toasts ──────────────────────────────────────────────── */
.flash-container {
  position:fixed; top:1.25rem; right:1.25rem; z-index:400;
  display:flex; flex-direction:column; gap:.5rem;
  max-width:360px; width:calc(100% - 2.5rem);
  pointer-events:none;
}
.flash {
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:.85rem 1rem;
  display:flex; align-items:center; gap:.65rem; font-size:.875rem;
  animation:slideIn .2s ease;
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:auto;
}
.flash.hiding { opacity:0; transform:translateX(16px); }
.flash-success { border-left:3px solid var(--active-fg);  color:var(--active-fg); }
.flash-error   { border-left:3px solid var(--ban-fg);     color:var(--ban-fg); }
.flash-info    { border-left:3px solid var(--pending-fg); color:var(--pending-fg); }

@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:0 .5rem;
}
.tabs::-webkit-scrollbar { display:none; }

.tab-btn {
  padding:.8rem 1.1rem;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--text-muted);
  font-size:.82rem; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:color var(--transition),border-color var(--transition);
  display:flex; align-items:center; gap:.4rem;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--accent); border-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Appeal status ─────────────────────────────────────────────── */
.status-card { text-align:center; padding:2.5rem 1.5rem; }
.status-icon  { font-size:3.5rem; margin-bottom:1rem; line-height:1; }
.status-title { font-size:1.6rem; font-weight:900; margin-bottom:.5rem; }
.status-sub   { color:var(--text-muted); font-size:.9rem; margin-bottom:1.5rem; }

.info-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.75rem; text-align:left; margin-top:1.5rem;
}
.info-item {
  background:var(--bg-card-alt); border:1px solid var(--border);
  border-radius:var(--radius); padding:.85rem 1rem;
}
.info-label {
  font-size:.67rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-muted); margin-bottom:.3rem;
}
.info-value { font-size:.9rem; color:var(--text); font-weight:500; word-break:break-all; }

.response-box {
  background:var(--bg-card-alt); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:1rem 1.25rem; margin-top:1rem;
}
.response-label {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-muted); margin-bottom:.4rem;
}

/* ── Admin ─────────────────────────────────────────────────────── */
.admin-action-row { display:flex; flex-direction:column; gap:.5rem; }
.admin-response-area {
  width:100%; min-height:56px; resize:vertical;
  padding:.5rem .75rem;
  background:var(--bg-input); border:1px solid var(--border-strong);
  border-radius:var(--radius); color:var(--text);
  font-size:.82rem; font-family:inherit; outline:none;
  transition:border-color var(--transition);
}
.admin-response-area:focus { border-color:var(--accent); }
.action-btns { display:flex; gap:.4rem; flex-wrap:wrap; }

.login-card { max-width:420px; margin:5rem auto; }
.login-header { text-align:center; padding:2rem 1.5rem 1.25rem; }
.login-logo {
  width:56px; height:56px;
  background:var(--grad-brand);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin:0 auto 1.25rem; color:#fff;
  box-shadow:0 0 30px rgba(99,102,241,.4);
}

/* ── Domain / SSL guide ────────────────────────────────────────── */
.guide-card {
  background:var(--bg-card-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem;
  margin-bottom:1rem;
}
.guide-card h4 { font-size:.875rem; font-weight:700; margin-bottom:.85rem; display:flex; align-items:center; gap:.5rem; }
.guide-card pre {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.9rem 1rem;
  overflow-x:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem; color:#a5b4fc; line-height:1.75;
  margin:.5rem 0; white-space:pre;
}
.guide-card code { background:none; border:none; padding:0; color:#a5b4fc; }

.guide-step { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.6rem; font-size:.875rem; }
.guide-step-num {
  width:22px; height:22px; min-width:22px;
  background:var(--accent-subtle); border:1px solid rgba(99,102,241,.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; color:var(--accent); margin-top:.15rem;
}

.method-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .55rem; border-radius:20px;
  font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
}
.method-recommended { background:rgba(34,197,94,.10); color:#4ade80; border:1px solid rgba(34,197,94,.22); }
.method-alternative  { background:var(--accent-subtle); color:var(--accent); border:1px solid rgba(99,102,241,.22); }

.config-display {
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  display:grid; grid-template-columns:auto 1fr;
  gap:.4rem .75rem; font-size:.82rem; margin-bottom:1rem;
  align-items:center;
}
.config-key { color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:.78rem; }
.config-val { color:var(--text); font-weight:600; font-family:'JetBrains Mono',monospace; font-size:.78rem; }

.ssl-status-indicator {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .75rem;
  border-radius:20px; font-size:.75rem; font-weight:700;
}
.ssl-on  { background:var(--active-bg);  color:var(--active-fg);  border:1px solid var(--active-border); }
.ssl-off { background:var(--expired-bg); color:var(--expired-fg); border:1px solid var(--expired-border); }
.ssl-on::before,.ssl-off::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }

/* ── Empty state ───────────────────────────────────────────────── */
.empty-state { text-align:center; padding:4rem 1.5rem; color:var(--text-muted); }
.empty-icon  { font-size:2.5rem; margin-bottom:.75rem; opacity:.3; }
.empty-text  { font-size:1rem; font-weight:700; }
.empty-sub   { font-size:.85rem; margin-top:.35rem; }

/* ── Token box ─────────────────────────────────────────────────── */
.token-box {
  background:var(--bg-input); border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
}
.token-text { font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--text); word-break:break-all; flex:1; }

/* ── Rate limit notice ─────────────────────────────────────────── */
.rate-notice {
  background:var(--warn-bg); border:1px solid var(--warn-border);
  border-radius:var(--radius); color:var(--warn-fg);
  font-size:.82rem; padding:.65rem 1rem;
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem;
}

/* ── Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px);
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:1rem; opacity:0; pointer-events:none;
  transition:opacity var(--transition);
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal {
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  max-width:440px; width:100%; padding:1.75rem;
  transform:translateY(12px) scale(.98);
  transition:transform .2s ease;
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-title  { font-size:1.1rem; font-weight:800; margin-bottom:.5rem; }
.modal-body   { color:var(--text-muted); font-size:.9rem; margin-bottom:1.5rem; }
.modal-footer { display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

/* ── Brand area (sidebar) ──────────────────────────────────────── */
.brand-logo-img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

.brand-text {
  display:flex;
  flex-direction:column;
  gap:.08rem;
  min-width:0;
}

.brand-tagline {
  font-size:.68rem;
  font-weight:400;
  color:var(--text-muted);
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* override gradient fill inherited from brand-wordmark sibling */
  -webkit-text-fill-color:var(--text-muted);
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}

/* ── Server pill ───────────────────────────────────────────────── */
.server-pill-info {
  display:flex;
  flex-direction:column;
  gap:.05rem;
  flex:1;
  min-width:0;
}

.server-pill-ip {
  font-size:.68rem;
  font-family:'JetBrains Mono','Fira Code',monospace;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Mobile server IP ──────────────────────────────────────────── */
.mobile-server-ip {
  font-size:.72rem;
  font-family:'JetBrains Mono','Fira Code',monospace;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:120px;
}

/* ── Site footer ───────────────────────────────────────────────── */
.site-footer {
  padding:1.25rem 1.5rem;
  color:var(--text-muted); font-size:.78rem;
  border-top:1px solid var(--border); margin-top:4rem;
}
.site-footer a { color:var(--text-muted); }
.site-footer a:hover { color:var(--accent); text-decoration:none; }

.footer-inner {
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
}

.footer-ip {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.72rem;
  font-family:'JetBrains Mono','Fira Code',monospace;
  color:var(--text-muted);
  font-weight:400;
}

.footer-links {
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  font-size:.78rem;
}

.footer-links a {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:var(--text-muted);
  text-decoration:none;
  transition:color var(--transition);
}
.footer-links a:hover { color:var(--accent); text-decoration:none; }

/* ── Breadcrumb ────────────────────────────────────────────────── */
.breadcrumb {
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:var(--text-muted);
  margin-bottom:.5rem;
}
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--accent); text-decoration:none; }

/* ── Filter pills ──────────────────────────────────────────────── */
.filter-pills {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.filter-pill {
  padding:.35rem .9rem;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-muted);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.filter-pill:hover { background:rgba(255,255,255,.06); color:var(--text); }
.filter-pill.active {
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:rgba(99,102,241,.35);
}

/* ── Utilities ─────────────────────────────────────────────────── */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.text-muted{color:var(--text-muted)}.text-center{text-align:center}.text-right{text-align:right}
.d-flex{display:flex}.d-none{display:none}.align-center{align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.flex-1{flex:1}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.divider{height:1px;background:var(--border);margin:1.5rem 0}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

.stats-row .stat-card:nth-child(1){animation-delay:.04s}
.stats-row .stat-card:nth-child(2){animation-delay:.08s}
.stats-row .stat-card:nth-child(3){animation-delay:.12s}
.stats-row .stat-card:nth-child(4){animation-delay:.16s}

/* ── Responsive — sidebar drawer on small screens ──────────────── */
@media(max-width:1024px) {
  .sidebar {
    position:fixed;
    left:0; top:0; bottom:0;
    transform:translateX(-100%);
    z-index:200;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    height:100%;
  }
  .sidebar.open {
    transform:translateX(0);
    box-shadow:var(--shadow-lg);
  }
  .mobile-topbar { display:flex; }
}

@media(max-width:768px) {
  h1 { font-size:1.4rem; }
  .page-hero { padding:1.5rem 0 1.25rem; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .player-card { flex-direction:column; align-items:flex-start; }
  .player-avatar { width:60px; height:60px; }
  thead th { font-size:.66rem; padding:.6rem .9rem; }
  tbody td { padding:.75rem .9rem; font-size:.85rem; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .info-grid { grid-template-columns:1fr; }
  .action-btns .btn { flex:1; justify-content:center; }
  .flash-container { top:66px; right:.75rem; max-width:calc(100% - 1.5rem); }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .footer-links { gap:.75rem; }
}

@media(max-width:480px) {
  .container { padding:0 1rem; }
  .card-body { padding:1rem; }
  .card-header { padding:.85rem 1rem; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .stat-value { font-size:1.6rem; }
}