/* banlist-v2.css */
:root {
  /* Amber CRT-inspired palette */
  --bg: #050308;
  --bg-elevated: #101018;
  --bg-elevated-soft: #181824;
  --border-soft: rgba(134, 125, 111, 0.5);
  --border-mid: rgba(249, 180, 94, 0.5);  
  --border-bright: rgba(249, 180, 94, 0.9);

  --crt-amber: #f9b45e;
  --crt-amber-soft: #ffd89a;
  --crt-amber-dim: #c78a3d;

  --crt-green: #8edb7b;   /* lifted / clear */
  --crt-red: #ff6b6b;     /* active bans */
  --crt-yellow: #facc6b;  /* mixed / temp */

  --text-main: #f4f0e6;
  --text-muted: #b1a79a;
  --text-soft: #827a6d;
  --text-faded: rgba(134, 125, 111, 0.5);
  
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);
  --shadow-subtle: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Global */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #16121e 0, #050308 55%);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  padding: 6px 16px;
}

/* Base link styling (unclassed <a>) */
a {
    color: var(--crt-amber-soft);         /* warm amber link color */
    text-decoration: none;                /* no underline by default */
    transition: color 0.20s ease,
                text-shadow 0.20s ease;
}

a:hover,
a:focus {
    color: var(--crt-amber);              /* brighter amber highlight */
    text-shadow: 0 0 6px rgba(249,180,94,0.65);
    text-decoration: underline;
}

a:active {
    color: var(--crt-amber-dim);          /* slight darkening on click */
    text-shadow: 0 0 2px rgba(249,180,94,0.4);
}
.dimmed a {
    color: var(--crt-amber-dim);
    text-shadow: none;
}
a.blocklink {
    display: inline-block;
    padding: 3px 4px;
    border-radius: 2px;
    background: var(--bg-elevated);
}


.page {
  width: 100%;
  max-width: 1100px;
}
.header-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}

.header-bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.module-tabs {
  display: flex;
  justify-content:space-evenly;
  gap: 0.5em;
  width:100%;
  max-width: 1100px;
  padding: 0 em 0 1em;
}

.tab {
  padding: 3px 1em 3px 1em;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: var(--border-dim);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
  text-decoration:none;
}

.tab:hover {
  color: var(--crt-amber);
  text-decoration:none;  
}

.tab-active {
  color: var(--crt-amber-soft);
}

/* WebKit-based browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--crt-amber-dim);
  border-radius: 4px;
  border: 1px solid var(--crt-amber);
  box-shadow: 0 0 5px rgba(255,200,120,0.25);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--crt-amber);
  box-shadow: 0 0 8px rgba(255,200,120,0.45);
}


.module-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Mobile: stack stuff vertically */
@media (max-width: 720px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .module-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Header shell */

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin:0px 1em 6px;
}

.title-block h1 {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--crt-amber-soft);
  text-shadow: 0 0 16px rgba(249, 180, 94, 0.7);
}

.title-block .subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.meta-block {
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    135deg,
    rgba(249, 180, 94, 0.25),
    rgba(16, 16, 24, 0.96)
  );
  color: var(--crt-amber-soft);
  margin-bottom: 4px;
}

.meta-pill span {
  opacity: 0.85;
}

/* General panel container */

.container {
  background:
    radial-gradient(circle at top left, rgba(249, 180, 94, 0.15), transparent 60%),
    radial-gradient(circle at bottom right, rgba(249, 180, 94, 0.08), transparent 55%),
    var(--bg-elevated);
  border-radius: 20px;
  padding: 16px 16px 10px;
  box-shadow: var(--shadow-soft), var(--shadow-subtle);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Toolbar shared */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badges / chips / pills */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  background: rgba(8, 6, 14, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}

.badge strong {
  color: var(--crt-amber-soft);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 8, 20, 0.96);
  color: var(--text-soft);
}

.tag-chip strong {
  color: var(--crt-amber-soft);
  margin-right: 4px;
}

/* Buttons */

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.btn {
  border-radius: 10px;   /* was var(--radius-pill) */
  padding: 6px 14px;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(8, 6, 14, 0.98);
  color: var(--text-main);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease,
              background 0.12s ease, box-shadow 0.12s ease;
}


.btn:hover {
  border-color: var(--crt-amber-soft);
  color: var(--crt-amber-soft);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.4);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-accent {
  background: linear-gradient(
    135deg,
    rgba(249, 180, 94, 0.35),
    rgba(8, 6, 14, 0.98)
  );
  border-color: rgba(249, 180, 94, 0.9);
  color: var(--crt-amber-soft);
}

.password {
  text-align:center;
  background: var(--bg-elevated-soft);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);  
  color: var(--text-main);
  padding: 3px 6px;
}

/* Search */

.search-input {
  background: var(--bg-elevated-soft);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--text-main);
  min-width: 240px;
  outline: none;
  margin-left:0.5em;
}

.search-input::placeholder {
  color: var(--text-soft);
}

.search-input:focus {
  border-color: var(--crt-amber-soft);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.7);
}

/* UUID / ID pills */

.uuid-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.76rem;
  padding: 2px 8px;
  margin-top: 10px; /* keep if you like this spacing */
  border-radius: var(--radius-pill);
  background: rgba(7, 5, 12, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--crt-amber-soft);
  cursor: pointer;
}


.alt-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(9, 8, 20, 0.98);
  border: 1px solid rgba(249, 180, 94, 0.6);
  color: var(--crt-amber-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;        /* <-- add this */
}

/* Footer */

.footer {
  font-size: 0.72rem;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.footer a {
  color: var(--crt-amber-soft);
  text-decoration: none;
  opacity: 0.85;
}

.footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* =========================
   INDEX PAGE (profiles list)
   ========================= */

.table-wrapper {
  max-height: calc(100vh - 210px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at top, rgba(249, 180, 94, 0.08), transparent 60%);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  table-layout: fixed;
}

thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 12, 0.99),
    rgba(5, 5, 12, 0.96)
  );
  backdrop-filter: blur(10px);
}

th,
td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* Relative widths per column */
.index th:nth-child(1),
.index td:nth-child(1) {
  width: 3%;
}

.index th:nth-child(2),
.index td:nth-child(2) {
  width: 17%;
}

.index th:nth-child(3),
.index td:nth-child(3) {
  width: 32%;
}

.index th:nth-child(4),
.index td:nth-child(4) {
  width: 16%;
}

.index th:nth-child(5),
.index td:nth-child(5) {
  width: 17%;
}

.index th:nth-child(6),
.index td:nth-child(6) {
  width: 10%;
}

tbody tr {
  background: radial-gradient(circle at right, rgba(249, 180, 94, 0.08), transparent 70%);
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
  cursor: pointer;
}

tbody tr:nth-child(even) {
  background: radial-gradient(circle at left, rgba(249, 180, 94, 0.06), transparent 70%);
}

tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(249, 180, 94, 0.26),
    rgba(249, 180, 94, 0.18)
  );
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.4);
}
.index-category-pill {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.65rem;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(249, 180, 94, 0.08);
  border: 1px solid rgba(249, 180, 94, 0.35);
  color: var(--crt-amber-soft, #ffd89a);
  margin-right: 3px;
}

.index-category-none {
  opacity: 0.4;
  font-style: italic;
}

/* Name link inside row */

.name-link {
  color: var(--text-main);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.name-link:hover {
  color: var(--crt-amber-soft);
}

/* Status pills (shared) */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
/* Row dim for profiles with no active bans */
.profile-row.profile-row-clear {
  opacity: 0.35;
}

.profile-row.profile-row-clear:hover {
  opacity: 0.55;
}

/* Status LED */

.status-cell {
  text-align: center;
  width: 40px;
}

.status-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(249, 180, 94, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

/* Base colors (use the existing palette vars) */
.status-led-active {
  background: rgb(255,15,15);
}

.status-led-appeal {
  background: rgb(100,100,250);
}

.status-led-denied {
  background: #facc6b;
  opacity: 0.5;
}

.status-led-temp {
  background: var(--crt-green);
}

.status-led-clear {
  background: var(--crt-green);
  opacity: 0.9;
}

.status-led-mixed {
  background: var(--crt-yellow);
}

/* Appeal pending: yellow, slightly brighter */
.status-led-pending {
  background: var(--crt-yellow);
  box-shadow: 0 0 8px rgba(250, 204, 107, 0.9);
}

/* Flags column */

.flags-cell {
  text-align: center;
}

.flag-icons {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 8, 20, 0.9);
  color: var(--crt-amber-soft);
  text-transform: uppercase;
}

/* Per-flag nuance if you want it */
.flag-icon.flag-related {
  border-color: rgba(250, 204, 107, 0.9);
}

.flag-icon.flag-temp {
  border-color: rgba(142, 219, 123, 0.9);
}

.flag-icon.flag-multi {
  border-color: rgba(255, 107, 107, 0.9);
}

.flag-icon.flag-appeal {
  border-color: rgba(150, 150, 250, 0.9);
  opacity: 0.9;
}

/* Active: red-amber */
.status-active {
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.75);
  color: #ffc4c4;
}

/* Clear: green */
.status-clear {
  background: rgba(142, 219, 123, 0.16);
  border-color: rgba(142, 219, 123, 0.8);
  color: var(--crt-green);
}

/* Mixed: yellow */
.status-mixed {
  background: rgba(250, 204, 107, 0.18);
  border-color: rgba(250, 204, 107, 0.8);
  color: var(--crt-yellow);
}

/* Responsive tweaks */

@media (max-width: 780px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .meta-block {
    text-align: left;
  }

  th:nth-child(4),
  th:nth-child(5),
  td:nth-child(4),
  td:nth-child(5) {
    display: none;
  }
}

/* =========================
   PROFILE PAGE
   ========================= */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panels */

.panel {
  background:
    radial-gradient(circle at top left, rgba(249, 180, 94, 0.18), transparent 60%),
    radial-gradient(circle at bottom right, rgba(249, 180, 94, 0.12), transparent 55%),
    var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 14px 14px 10px;
  box-shadow: var(--shadow-soft), var(--shadow-subtle);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.panel h2 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 8px;
  color: var(--text-muted);
}

.panel h2 span {
  color: var(--crt-amber-soft);
}

/* Profile header bits */

.uuid-line {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.meta-line {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Profile meta row */

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-soft);
  align-items:center;
  justify-content:space-between;
}

.meta-chip {
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 6, 14, 0.98);
}

.meta-chip strong {
  color: var(--crt-amber-soft);
}

.profile-toolbar {
  margin: 1.45em 1.1em 0 1em;
}
/* Related UUIDs */

.alt-list {
  margin: 6px 0 2px;
  font-size: 0.78rem;
}

.alt-list ul {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 0;
}

.alt-list li {
  margin-bottom: 2px;
}

.alt-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(9, 8, 20, 0.98);
  border: 1px solid rgba(249, 180, 94, 0.6);
  color: var(--crt-amber-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Notes blocks */

.notes-block {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-soft);
  border-top: 1px dashed var(--border-soft);
  padding-top: 6px;
}

.notes-block .label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.notes-block .empty {
  font-style: italic;
}

.notes-list {
  margin-top: 4px;
  padding-left: 0;
  list-style: none;
  font-size: 0.76rem;
}

.notes-list li {
  margin-bottom: 3px;
}

/* Ban cards */

.ban-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.ban-list-header .summary {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.ban-card {
  border-radius: 12px;
  padding: 10px 10px 8px;
  background: linear-gradient(
    135deg,
    rgba(9, 6, 16, 0.98),
    rgba(16, 14, 26, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.ban-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(249, 180, 94, 0.36),
    transparent 40%,
    rgba(249, 180, 94, 0.25)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  mix-blend-mode: soft-light;
}

.ban-card:hover::before {
  opacity: 0.6;
}

.ban-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.ban-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-main);
}

.ban-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.7rem;
  opacity: 0.85;
}

.ban-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
}

.ban-body {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.ban-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
  justify-content:space-evenly;
  text-align:center;
}

.ban-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.ban-value {
  color: var(--text-main);
}

.ban-value .status-pill + .status-pill {
  margin-left: 0.25rem;
}

/* Ban state variants reuse status-pill colors */

.status-lifted {
  background: rgba(142, 219, 123, 0.16);
  border-color: rgba(142, 219, 123, 0.9);
  color: var(--crt-green);
}

.status-expired {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(148, 163, 184, 0.85);
  color: #d2d9f0;
}

.status-temp {
  background: rgba(250, 204, 107, 0.18);
  border-color: rgba(250, 204, 107, 0.85);
  color: var(--crt-yellow);
}

/* Reason / evidence */

.ban-reason {
  margin: 2em 1em;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(10, 8, 20, 0.98);
  border: 1px solid var(--border-mid);
}

.link-list {
  margin-top: 4px;
  font-size: 0.78rem;
}

.link-list a {
  color: var(--crt-amber-soft);
  text-decoration: none;
  margin-right: 8px;
}

.link-list a:hover {
  text-decoration: underline;
}
/* CRT-Amber Link */
.link-amber {
  color: var(--crt-amber-soft);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.15s ease, text-shadow 0.15s ease;
}

.link-amber:hover {
  opacity: 1;
  text-shadow: 0 0 6px rgba(249, 180, 94, 0.6);
}

.link-amber:active {
  opacity: 0.75;
}

/* Appeal info */

.appeal-block {
  margin-top: 25px;
  padding: 5px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.appeal-block:hover {
  background: linear-gradient(
    90deg,
    rgba(249, 180, 94, 0.26),
    rgba(249, 180, 94, 0.18)
  );
  transform: translateY(-1px);
  border-radius:10px;
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.4);
}

.inline-login-form {
  display:inline;
  margin-left:2em;
}

.appeal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 6, 16, 0.98);
}

.appeal-status-badge strong {
  color: var(--crt-amber-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

.appeal-comment {
  margin-top: 3px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(9, 8, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.staff-lift-reason {
  border-radius: 12px;
  padding: 8px 8px;
  border: 1px dashed var(--border-soft);
}
.votes-line {
  margin: 0 10px;
  display:inline;
  font-size:1.1em;
  font-weight:900;
  float:right;
}

/* Appeal layout: two-column on wide screens, stacked on mobile */

.appeal-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 6px;
  margin-bottom:0.5em;
}

/* Left box: metadata – subtle amber panel */

.appeal-meta-box {
  flex: 0 0 230px;
  max-width: 260px;
  padding: 8px 9px 6px;
  border-radius: 10px;
  background:
    radial-gradient(circle at top left, rgba(249, 180, 94, 0.20), transparent 65%),
    rgba(10, 8, 20, 0.98);
  border: 1px solid var(--border-soft);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  font-size: 0.78rem;
}

/* Right box: appellant + staff comments – slightly stronger amber focus */
.appeal-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  width: 100%;
}

.appeal-meta-grid .label {
  text-align: left;
  white-space: nowrap;
}

.appeal-meta-grid .value {
  text-align: right;
  white-space: nowrap;
}

.appeal-detail-box {
  flex: 1 1 0;
  padding: 8px 10px 6px;
  border-radius: 10px;
  background:
    radial-gradient(circle at top right, rgba(249, 180, 94, 0.24), transparent 60%),
    rgba(12, 9, 22, 0.98);
  border: 1px solid var(--border-soft);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.22);
  font-size: 0.8rem;
  overflow-y:auto;
  word-wrap: break-word;
}

/* Appellant primary comment */

.appeal-comment-primary {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-muted);
  margin-bottom: 6px;
  position:relative;
}
.appeal-comment-label {
    position:absolute; 
    right: 0; 
    bottom:-3em;
    font-size:0.85em;
    padding: 2px 5px;
    background-color:#000;
    border-radius: 10px;
    border: 1px solid var(--border-mid);    
}
.appeal-comment-empty {
  font-style: italic;
  color: var(--text-soft);
}

/* Future staff vote comments list */

.appeal-staff-notes {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 0;
  font-size: 0.78rem;
}

.appeal-staff-notes li + li {
  margin-top: 3px;
}

.appeal-staff-note-meta {
  opacity: 0.7;
  margin-left: 4px;
}

/* Keep existing status / badge styles; just add a tiny nudge here */

.appeal-status-badge {
  margin-bottom: 4px;
}

/* Mobile: stack panels vertically */

@media (max-width: 780px) {
  .appeal-meta-box,
  .appeal-detail-box {
    flex: 1 1 100%;
  }
}

/* ----------------------------------------
   Profile Identity Block
   ---------------------------------------- */

.profile-identity-block {
  margin-bottom: 1.1rem;     /* space before "Profile Overview" section title */
  border-radius: 12px;
  padding: 10px 10px 8px;
  background: linear-gradient(
    135deg,
    rgba(9, 6, 16, 0.98),
    rgba(16, 14, 26, 0.98)
  );
  border: 1px solid var(--border-mid);
}

.profile-name-line,
.profile-uuid-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  justify-content:center; 
 }

/* Label text (“Profile”, “UUID”) */
.profile-name-line .label,
.profile-uuid-line .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0.5;
}

/* Profile display name */
.profile-name-line .value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--crt-amber-soft);
  text-transform:uppercase;
}

/* UUID pill (already a class, but styling it here if needed) */
.profile-uuid-line .uuid-pill {
  background: rgba(255, 200, 120, 0.07);
  border: 1px solid rgba(255, 200, 120, 0.15);
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 1.0rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text-soft);
  font-weight:900;
}

.profile-uuid-line .uuid-pill:hover {
  background: rgba(255, 200, 120, 0.15);
  border-color: rgba(255, 200, 120, 0.25);
}

.copied {
  color: var(--crt-amber-soft) !important;
  text-shadow: 0 0 6px rgba(249,180,94,0.8);
  letter-spacing: 0.05em;
}


/* ----------------------------------------
   Edit Modal
   ---------------------------------------- */
.profile-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(249, 180, 94, 0.22), transparent 60%)
              , rgba(5, 3, 8, 0.88);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.profile-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.profile-modal-panel {
  position: relative;
  min-width: min(520px, 96vw);
  max-width: 640px;
  background: var(--bg-elevated-soft, #181824);
  border: 1px solid var(--border-soft, #26263a);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.12),
              0 18px 40px rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 1.5rem 1.75rem 1.25rem;
  color: var(--crt-amber-soft, #ffd89a);
  transform: translateY(4px) scale(0.98);
  opacity: 0;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.profile-modal-overlay.is-visible .profile-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.profile-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  color: var(--crt-amber-dim, #c78a3d);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
}

.profile-modal-close:hover {
  color: var(--crt-amber-soft, #ffd89a);
}

.profile-modal-card {
  display: none;
}

.profile-modal-card.is-active {
  display: block;
}

.profile-modal-panel h2 {
  font-size: 1.1rem;
  margin: 0 0 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crt-amber, #f9b45e);
}

.profile-modal-panel h2 span {
  color: var(--crt-amber-soft, #ffd89a);
}

.profile-modal-panel .form-row {
  margin-bottom: 2rem;
}

.form-row .help-text {
  margin-bottom: 0px;
}

.profile-modal-panel label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  color: var(--crt-amber-dim, #c78a3d);
}

.profile-modal-panel input[type="text"],
.profile-modal-panel input[type="url"],
.profile-modal-panel textarea {
  width: 100%;
  background: var(--bg-elevated, #101018);
  color: var(--crt-amber-soft, #ffd89a);
  border: 1px solid var(--border-soft, #26263a);
  border-radius: 4px;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
}

.profile-modal-panel textarea {
  resize: vertical;
}

.profile-modal-panel .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

/* notes list small styling */
.profile-notes-ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.profile-note-row {
  position: relative;
  padding: 0.45rem 0.6rem 0.4rem;
  border: 1px solid rgba(249, 180, 94, 0.18);
  border-radius: 4px;
  margin-bottom: 0.4rem;
  background: rgba(16, 16, 24, 0.8);
}

.profile-note-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--crt-amber-dim, #c78a3d);
  margin-bottom: 0.15rem;
}

.profile-note-body {
  font-size: 0.8rem;
}

.profile-note-delete-form {
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
}

.profile-modal-subheading {
  font-size: 0.9rem;
  margin: 0.85rem 0 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crt-amber-dim, #c78a3d);
}

.profile-modal-separator {
  border: 0;
  border-top: 1px solid rgba(249, 180, 94, 0.18);
  margin: 0.9rem 0 0.7rem;
}

/* =========================
   Profile category strip
   ========================= */

.profile-category-strip {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;  
  gap: 6px;
}

.profile-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  background: rgba(249, 180, 94, 0.08); /* soft amber wash */
  border: 1px solid rgba(249, 180, 94, 0.35);
  color: var(--crt-amber-soft, #ffd89a);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6),
              0 0 6px rgba(249, 180, 94, 0.25);
}

/* =========================
   Per-ban category pill
   ========================= */

.ban-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  background: rgba(249, 180, 94, 0.06);
  border: 1px solid rgba(249, 180, 94, 0.4);
  color: var(--crt-amber, #f9b45e);
}

.ban-category-uncat {
  background: rgba(120, 120, 120, 0.12);
  border-color: rgba(140, 140, 140, 0.7);
  color: #aaa;
  font-style: italic;
}
/* Pill container already added earlier */
.category-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: space-evenly;
}

.index-category-pill.js-category-pill {
  cursor: pointer;
  margin-bottom: 4px;
}

/* Explicitly selected by staff */
.index-category-pill.is-selected {
  background: rgba(249, 180, 94, 0.35);
  border-color: rgba(249, 180, 94, 0.9);
  color: var(--text-main);
}

/* Suggested by auto-classifier (not necessarily clicked) */
.index-category-pill.is-suggested {
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.6);
  border-color: rgba(249, 180, 94, 0.7);
}

/* Suggested + selected — slightly stronger background */
.index-category-pill.is-selected.is-suggested {
  background: rgba(249, 180, 94, 0.5);
}


/* Tiny asterisk for required fields */
.required-indicator {
  color: var(--crt-amber-soft, #ffd89a);
  font-size: 0.8em;
  margin-left: 4px;
}
.optional-indicator {
  color: var(--text-muted, #ffd89a);
  font-size: 0.8em;
  margin-left: 4px;
}
.help-text {
  color: var(--text-muted);
  font-size:0.8em;
  margin: 0 1em 2em;
}

.duration-section {
    margin-top: 0;
    padding: 0.25rem 1rem 0 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-elevated-soft);
}

.duration-mode {
    display: flex;
    gap: 1rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--crt-amber-soft);
    justify-content: space-evenly;
}

.duration-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

/* Hide the actual radio button */
.duration-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Base style for pills */
.duration-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 180, 94, 0.05);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 4px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
    user-select: none;
}

/* Text inside */
.duration-pill span {
    color: var(--crt-amber-dim);
    transition: color 0.15s ease;
}

/* Hover state for unselected option */
.duration-pill:hover {
    background: rgba(249, 180, 94, 0.12);
}

/* SELECTED STATE — via input:checked */
.duration-pill input[type="radio"]:checked + span {
    color: var(--crt-amber);
    font-weight: 600;
}

/* SELECTED STATE — style the pill container itself */
.duration-pill input[type="radio"]:checked ~ * {
    background: rgba(249, 180, 94, 0.22);
    border-color: var(--crt-amber);
    box-shadow: 0 0 8px rgba(249, 180, 94, 0.35);
}


.duration-controls {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-evenly;
    text-align:center;
    gap: 2em;  
    transition: max-height 0.25s ease, opacity 0.25s ease;
}

/* Active = visible */
.duration-controls.active {
    max-height: 200px;  /* adjust if needed */
    opacity: 1;
    display: flex;
    justify-content: space-evenly;
    text-align:center;
    gap: 2em;
    margin: 1em;
    pointer-events: auto;
    transition: max-height 0.28s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease;
    
}


.duration-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.duration-quick-btn {
    border: 1px solid var(--border-soft);
    background: rgba(249, 180, 94, 0.08);
    color: var(--crt-amber-soft);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
}
.duration-quick-btn:hover {
  border-color: var(--crt-amber);
  color: var(--crt-amber);
}
.duration-quick-btn.active {
    background: rgba(249, 180, 94, 0.16);
    border-color: var(--crt-amber);
    color: var(--crt-amber);
}

.duration-custom {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 140px;
}

.duration-custom-label {
    font-size: 0.75rem;
    color: var(--crt-amber-dim);
}

.duration-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--crt-amber-soft);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.duration-section {
    transition: padding-bottom 0.25s ease;
}

.duration-section.showing-duration {
    padding-bottom: 1.5rem;
}
/* =========================
   Category pill styling
   ========================= */
.category-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 5, 12, 0.9);
  color: var(--crt-amber-soft);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;

  transition:
    background 0.12s ease-out,
    color 0.12s ease-out,
    border-color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.06s ease-out;
}

.category-pill:hover {
  border-color: var(--crt-amber-dim);
  color: var(--crt-amber);
  background: rgba(10, 10, 20, 0.9);
  transform: translateY(-0.5px);
}

.category-pill:active {
  transform: translateY(0.5px) scale(0.99);
}

/* Selected (explicitly chosen by staff) */
.category-pill.is-selected {
  border-color: var(--crt-amber);
  background: rgba(249, 180, 94, 0.14);
  color: var(--crt-amber);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.35);
}

/* Suggested (from category API) but not manually selected yet */
.category-pill.is-suggested:not(.is-selected) {
  border-style: dashed;
  border-color: var(--crt-amber-dim);
  color: var(--crt-amber-dim);
  background: rgba(15, 10, 4, 0.6);
}

/* Keyboard focus */
.category-pill:focus-visible {
  outline: 1px dashed var(--crt-amber-soft);
  outline-offset: 2px;
}

/* ----- Evidence: input + Add on one line ----- */
.evidence-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.evidence-add-row input[type="url"] {
  flex: 1 1 auto;
}

/* ----- Ban notes list ----- */
.ban-notes-list {
  list-style: none;
  margin: 0.35rem 0 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ban-note-row {
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-soft);
  background: rgba(10, 8, 16, 0.95);
  font-size: 0.78rem;
}

/* Header: name + timestamp on left, Delete on right */
.ban-note-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.ban-note-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.ban-note-author {
  font-weight: 600;
  color: var(--crt-amber-soft);
}

.ban-note-ts {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.ban-note-body {
  white-space: pre-wrap;        /* keep screenshot-style line breaks */
  color: var(--text-soft);
}

.ban-note-empty {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Delete button stays small and inline in header */
.ban-note-remove-btn {
  flex: 0 0 auto;
  font-size: 0.7rem;
  padding-inline: 0.55rem;
}

/* ----- Add-note row: textarea + Add Note inline ----- */
.ban-notes-add-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ban-notes-add-row textarea {
  flex: 1 1 auto;
  min-height: 2.4rem;
  resize: vertical;
}

.ban-notes-add-row .btn {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
/* Evidence link row */
.evidence-link-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Make evidence delete match Add button */
.evidence-remove-btn {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.evidence-remove-btn:hover {
  background: rgba(255, 200, 120, 0.08);
  border-color: var(--crt-amber);
  color: var(--crt-amber);
}

/* Container */

.logs-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.logs-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.logfilename{
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius:8px;
  color: var(--crt-amber);
  padding: 0.15em 1em;
}

/* Alerts */

.logs-alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--crt-red, #ff5c5c);
  background: rgba(60, 10, 10, 0.8);
  font-size: 0.9rem;
}

.logs-alert-error {
  /* uses default colors above */
}

/* List */

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Individual log card */

.log-entry {
  background: var(--bg-elevated-soft, #181824);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem 0.6rem;
  border-left: 3px solid var(--border-soft, #26263a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.log-entry-header {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.log-ts {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  opacity: 0.9;
}

.log-source {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.log-level-pill {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  border: 1px solid var(--border-soft, #26263a);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Message */

.log-message {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--crt-amber-soft, #ffd89a);
  word-break: break-word;
}

/* Details/extra fields */

.log-extra {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

.log-extra summary {
  cursor: pointer;
  opacity: 0.9;
}

.log-extra summary::-webkit-details-marker {
  color: var(--crt-amber, #f9b45e);
}

.log-extra dl {
  margin: 0.25rem 0 0;
}

.log-extra-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
}

.log-extra-row dt {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-transform: lowercase;
  opacity: 0.75;
}

.log-extra-row dd {
  margin: 0;
  word-break: break-word;
}

/* Empty state */

.logs-empty {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Level-based coloring: left border + pill */

.log-level-info {
  border-left-color: var(--crt-amber, #f9b45e);
}

.log-level-warning {
  border-left-color: #f4d35e;
}

.log-level-error {
  border-left-color: var(--crt-red, #ff5c5c);
}

.log-level-unknown {
  border-left-color: #666666;
  opacity: 0.85;
}

.log-level-info .log-level-pill {
  border-color: var(--crt-amber-dim, #c78a3d);
}

.log-level-warning .log-level-pill {
  border-color: #f4d35e;
}

.log-level-error .log-level-pill {
  border-color: var(--crt-red, #ff5c5c);
}

.log-level-unknown .log-level-pill {
  border-color: #666666;
}

.logs-mode-toggle {
  display: inline-flex;
  gap: 0.25rem;
}

.logs-mode-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft, #26263a);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.logs-mode-active {
  opacity: 1;
  border-color: var(--crt-amber, #f9b45e);
  box-shadow: 0 0 0 1px rgba(249, 180, 94, 0.2);
}

.logs-raw-block {
  background: #050308;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border-soft, #26263a);
}

/* add into banlist-v2.css somewhere near other layout rules */

.enforcement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

@media (min-width: 960px) {
  .enforcement-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.panel-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.enforcement-form .form-row {
  margin-bottom: 10px;
}

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

.queue-table th,
.queue-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.queue-table th {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
}

.queue-table-2 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.queue-table-2 th,
.queue-table td {
  padding: 6px 8px;
  width: 33%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.queue-table-2 th {
  text-align: center;
  font-weight: 600;
  width: 33%;
  color: var(--text-muted);
}

.uuid-cell {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.empty-state {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 6px 0;
}
.enforcement-panel h2 {
  margin-bottom: 10px;
}

.enforcement-intro {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.enforcement-intro.staff-note {
  color: var(--crt-amber-soft);
}

.enforcement-portal {
  margin-top: 10px;
}

.enforcement-block {
  background: var(--bg-elevated-soft);
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  margin-bottom: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.enforcement-block-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
}

.enforcement-block-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.enforcement-block-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.enforcement-block-title {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crt-amber-soft);
}

.enforcement-block-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.enforcement-block-chevron {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--crt-amber-dim);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.4, 0.08, 0.2, 1.0), color 0.15s;
}

.enforcement-block-header:hover .enforcement-block-chevron {
  color: var(--crt-amber-soft);
}


.enforcement-block.is-open .enforcement-block-chevron {
  transform: rotate(180deg);
}

.enforcement-block-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 14px;
  transition:
    max-height 0.3s ease,
    opacity 0.25s ease,
    padding 0.3s ease;
}

.enforcement-block.is-open .enforcement-block-body {
  max-height: 900px; /* large enough to fit any form */
  opacity: 1;
  padding: 10px 14px 12px;
}

/* Enforcement forms: overall layout */
.enforcement-form {
  max-width: 760px;
  margin: 8px auto 2em auto;
}

/* Each row */
.enforcement-form .form-row {
  margin-bottom: 9px;
}

/* Labels + indicators */
.enforcement-form label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crt-amber-soft);
}

/* Required / optional badges */
.enforcement-form .required-indicator,
.enforcement-form .optional-indicator {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

.enforcement-form .required-indicator {
  color: var(--crt-amber-soft);
}

.enforcement-form .optional-indicator {
  color: var(--text-muted);
}

.enforcement-form input[type="text"],
.enforcement-form input[type="url"],
.enforcement-form textarea,
.enforcement-form select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;

  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 5px 7px;

  font-size: 0.82rem;
  color: #fdf5e4;
  font-family: inherit;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.enforcement-form input::placeholder,
.enforcement-form textarea::placeholder {
  color: rgba(255, 239, 210, 0.45);
}

/* Focus glow */
.enforcement-form input[type="text"]:focus,
.enforcement-form input[type="url"]:focus,
.enforcement-form textarea:focus,
.enforcement-form select:focus {
  outline: none;
  border-color: var(--crt-amber-soft);
  box-shadow:
    0 0 0 1px var(--crt-amber-soft),
    0 0 8px rgba(249, 180, 94, 0.35);
  background: #09060f;
}

/* Textarea sizing */
.enforcement-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select styling */
.enforcement-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--crt-amber-soft) 50%),
    linear-gradient(135deg, var(--crt-amber-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 26px;
}

.enforcement-form .checkbox-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Slightly larger checkbox for readability */
.enforcement-form .checkbox-inline input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
}
.enforcement-form .form-actions {
  margin-top: 6px;
  justify-self:center;
}

/* Reuse your .btn / .btn-accent, just give a slightly crisper hover */
.enforcement-form .btn.btn-accent {
  padding: 5px 16px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enforcement-form .btn.btn-accent:hover {
  box-shadow: 0 0 10px rgba(249, 180, 94, 0.45);
  transform: translateY(-0.5px);
}

.enforcement-form .btn.btn-accent:active {
  transform: translateY(0);
  box-shadow: 0 0 4px rgba(249, 180, 94, 0.3);
}

.automation-panel h2 {
  margin-bottom: 10px;
}

.automation-intro {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.automation-intro.staff-note {
  color: var(--crt-amber-soft);
  margin-bottom: 10px;
}

.automation-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 12px;
  margin-bottom: 8px;
}

.automation-status-item .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.automation-status-item .value {
  font-size: 0.9rem;
  color: #fdf5e4;
}

.automation-status-text {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Log output */

.automation-log {
  background: #05040b;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  padding: 6px 8px;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.automation-log-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 1px 0;
}

.automation-log-prefix {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crt-amber-dim);
}

.automation-log-line code {
  white-space: pre;
  color: #fcebd0;
}

/* Slight tint differences if you want: */
.automation-log--smartbot {
  border-color: rgba(142, 219, 123, 0.4);
}

.automation-log--helpdesk {
  border-color: rgba(249, 180, 94, 0.4);
}
.enforcement-alert {
  margin: 6px 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight:700;
  font-size: 1.5rem;
  text-align:center;
}

.enforcement-alert-success {
  background: rgba(142, 219, 123, 0.08);
  border: 1px solid rgba(142, 219, 123, 0.5);
  color: #bff3a8;
}
.queue-table .queue-row {
  cursor: pointer;
}

.queue-table .queue-row:hover {
  background: rgba(249, 180, 94, 0.06);
}
.report-meta-grid {
  display: grid;
  grid-template-columns: 2fr 2fr auto;
  gap: 8px 14px;
  margin: 0 0 2em 0;
}

.report-meta-item .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.report-meta-item .value {
  font-size: 0.88rem;
  color: #fdf5e4;
}

.report-meta-item .value.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
}

.report-verification {
  margin: 2em 0 12px;
}

.verification-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verification-badge--ok {
  background: rgba(142, 219, 123, 0.1);
  border: 1px solid rgba(142, 219, 123, 0.6);
  color: #bff3a8;
}

.verification-badge--warn {
  background: rgba(249, 180, 94, 0.1);
  border: 1px solid rgba(249, 180, 94, 0.7);
  color: var(--crt-amber-soft);
}

.verification-list {
  margin-top: 6px;
  padding-left: 0;
  list-style: none;
  font-size: 0.8rem;
}

.verification-list li {
  margin-bottom: 2px;
}

.verification-list .mono {
  font-family: var(--font-mono);
}

.report-details-block {
  margin-top: 2em;
}

.report-details-block h3 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--crt-amber-soft);
}

.report-details-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #fdf5e4;
}
.profile-reports-panel {
  margin-top: 10px;
}

.profile-reports-table td.mono.small {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-all;
}

.report-status-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
}

.report-status-new {
  background: rgba(249, 180, 94, 0.12);
  border: 1px solid rgba(249, 180, 94, 0.7);
  color: #000000;
}

.report-status-triaged {
  background: rgba(249, 180, 94, 0.08);
  border: 1px solid rgba(249, 180, 94, 0.5);
  color: var(--crt-amber-dim);
}

.report-status-valid {
  background: rgba(142, 219, 123, 0.12);
  border: 1px solid rgba(142, 219, 123, 0.7);
  color: #bff3a8;
}

.report-status-invalid,
.report-status-closed {
  background: rgba(132, 132, 160, 0.12);
  border: 1px solid rgba(132, 132, 160, 0.7);
  color: #d0d0f0;
}
.profile-reports-table th.col-report-id,
.profile-reports-table td.col-report-id { width: 6%; }

.profile-reports-table th.col-report-category,
.profile-reports-table td.col-report-category { width: 30%; }

.profile-reports-table th.col-report-date,
.profile-reports-table td.col-report-date { width: 45%; }

.profile-reports-table th.col-report-status,
.profile-reports-table td.col-report-status { width: 25%; }

.profile-reports-table th.col-report-contact,
.profile-reports-table td.col-report-contact { width: 15%; }

/* AND — resizable cell treatment */
.profile-reports-table td,
.profile-reports-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.report-detail-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1em;
}

.report-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.report-id {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crt-amber-soft);
  justify-self: stretch
}

.report-detail-header-category {
  flex: 0 0 auto;
}

.report-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--crt-amber-dim);
  background: rgba(249, 180, 94, 0.08);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.report-detail-header-status {
}

/* Base pill styling (you likely already have something similar) */
.report-status-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: text-top;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--crt-amber-dim);
  background: transparent;
  color: var(--text-main);
}

/* NEW = amber background, white text */
.report-status-pill.status-new {
  border-color: var(--crt-amber);
  background: var(--crt-amber);
  font-weight:900;
  color: #000000;
}

/* OPEN = bright amber text, subtle amber background */
.report-status-pill.status-open {
  border-color: var(--crt-amber-soft);
  color: var(--crt-amber-soft);
  background: rgba(249, 180, 94, 0.18); /* soft amber wash */
}

/* UNASSIGNED = dim amber, bg = var(--bg) */
.report-status-pill.status-unassigned {
  border-color: var(--crt-amber-dim);
  color: var(--crt-amber-dim);
  background: var(--bg);
}

/* CLOSED = soft border, faded text */
.report-status-pill.status-closed {
  border-color: var(--border-soft);
  color: var(--text-faded);
  background: transparent;
}

.meta-useragent {
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.85;
  word-break: break-word;
}
.report-notes-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-notes-form textarea {
  width: 100%;
  resize: vertical;
  color: var(--text-mid);
  background: var(--bg);
  padding: 1em 1em;
}

.report-notes-actions {
  display: flex;
  justify-content: flex-end;
}

.report-controls-gutter {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.report-controls-left,
.report-controls-right {
  display: flex;
  gap: 0.75rem;
}
.report-assigned-line {
  margin-right:auto;
  font-size: 1rem;
  opacity: 0.9;
  color: var(--crt-amber-soft);
}
.assigned-info-line {
  position: absolute;
  left: 9.5em;
  top: 2.4em;
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.95;
}
/* ================================================
   FOOTER
   ================================================ */

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px;
  font-family: 'VT323', monospace;
  letter-spacing: 2px;

}

.footer-brand {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 15px;
  color: var(--text-faded);
}

.footer-links {
  display: flex;
  justify-content: flex-start;
  gap: 22px;
}

.right-links {
  justify-content: flex-end;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 100;
  cursor: pointer;
}

.footer-links a:hover {
  color: var(--crt-amber);
  font-weight: 600;
  text-decoration: none;
}

/* =========================
   Appeal History List
   ========================= */

.appeal-history-list {
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-soft);
}

.appeal-history-item {
  display: flex;
  align-items: center;
  justify-content:space-between;
  font-size: 0.78rem;
  padding: 0.35em 0.4em;
  margin: 0;
  color: var(--text-muted);
  border-bottom: 1px dotted var(--border-soft);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.appeal-history-item:hover {
  background: rgba(255, 215, 140, 0.06);
  color: var(--crt-amber);
}

.appeal-history-item .status-pill {
  font-size: 0.65rem;
  color: var(--text-main);
  padding: 0.2em 0.4em;
}

.appeal-history-item .appeal-id {
  font-family: monospace;
  opacity: 0.9;
}

.appeal-history-item .dates {
  opacity: 0.6;
  font-size: 0.70rem;
}

.appeal-history-item .btn {
  font-size: 0.65rem;
  opacity: 0.8;
}

.appeal-history-item .btn:hover {
  opacity: 1;
}
/* =========================
   Appeal detail layout
   ========================= */

.appeal {
  margin-top: 0.5rem;
}

.appeal-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.appeal-header-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.appeal-header-status {
  margin-left: auto;
}

.appeal-header-meta {
  font-size: 0.8rem;
  color: var(--text-soft);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Status pill for appeal status */
.appeal-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  background: radial-gradient(circle at 30% 0%, rgba(249,180,94,0.25), transparent),
              rgba(10,10,18,0.9);
}

/* Status color variants (tweak to taste) */
.appeal-status-pill.status-open,
.appeal-status-pill.status-pending {
  color: var(--crt-amber-soft);
  border-color: rgba(249,180,94,0.4);
}

.appeal-status-pill.status-granted {
  color: var(--crt-green);
  border-color: rgba(142,219,123,0.45);
  box-shadow: 0 0 6px rgba(142,219,123,0.35);
}

.appeal-status-pill.status-denied,
.appeal-status-pill.status-closed {
  color: var(--crt-red);
  border-color: rgba(255,92,92,0.5);
}

/* Main two-column layout */

.appeal-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.appeal-column {
  flex: 1 1 0;
  min-width: 0;
}

.appeal-column-left {
  max-width: 48%;
}

.appeal-column-right {
  max-width: 52%;
}

/* Appellant statement */

.appeal-comment-block {
  background: radial-gradient(circle at 0 0, rgba(249,180,94,0.08), transparent),
              var(--bg-elevated-soft);
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

.appeal-text {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align:center;
  margin: 0.25em 2em;
}

/* Staff votes list */

.appeal-votes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.appeal-vote {
  border-radius: 0.8rem;
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg,
              rgba(12,12,20,0.95),
              rgba(18,18,30,0.98));
  padding: 0.6rem 0.75rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.45);
}

.appeal-vote.approve {
  border: 1px solid rgba(40, 110, 70, 0.95);  /* darker, deeper green border */
  background: linear-gradient(
    135deg,
    rgba(28, 80, 52, 0.35),   /* brighter soft green glow */
    rgba(14, 35, 20, 0.85)    /* dark emerald base */
  );
  box-shadow: inset 0 0 4px rgba(78, 194, 127, 0.25);
}

.appeal-vote.deny {
  border: 1px solid rgba(110, 45, 45, 0.95);  /* dark red/brown border */
  background: linear-gradient(
    135deg,
    rgba(120, 40, 40, 0.35),  /* brighter blood-red glow */
    rgba(50, 18, 18, 0.85)    /* deep red shadow base */
  );
  box-shadow: inset 0 0 4px rgba(200, 60, 60, 0.22);
}


.appeal-vote-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.vote-staff {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--crt-amber-soft);
}

/* Vote pill variants */

.vote-pill {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vote-pill.vote-grant {
  color: var(--crt-green);
  border-color: rgba(142,219,123,0.5);
}

.vote-pill.vote-deny {
  color: var(--crt-red);
  border-color: rgba(255,92,92,0.5);
}

.vote-pill.vote-abstain {
  color: var(--text-faded);
  border-color: rgba(150,150,180,0.6);
}

.vote-timestamp {
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-left:2em;
}

/* Vote comment text */

.appeal-vote-comment {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 1.5em;
  color: var(--text-muted);
  white-space: pre-line;
}

/* Responsive: stack columns on narrow viewports */

@media (max-width: 900px) {
  .appeal-layout {
    flex-direction: column;
  }
  .appeal-column-left,
  .appeal-column-right {
    max-width: 100%;
  }
}
/* Ban summary + cluster section on appeal detail */

.appeal-ban-summary {
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 0 0, rgba(249,180,94,0.12), transparent),
    var(--bg-elevated-soft);
}

.appeal-ban-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 0.75rem 1.5rem;
}

.appeal-evidence {
  margin-top: 0.75rem;
}

.appeal-evidence-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.appeal-evidence-list li {
  font-size: 0.8rem;
  word-break: break-all;
}

.appeal-cluster {
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.appeal-cluster .cluster-uuids {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Linked reports section on appeal detail */

.appeal-linked-reports {
  margin-top: 1.5rem;
}

.appeal-linked-reports .panel-subtitle {
  margin-bottom: 0.5rem;
}
/* =========================
   Appeal header insights
   ========================= */

.appeal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0;
}

.appeal-header-name .appeal-profile-name {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.appeal-header-insights {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.appeal-insight-card {
  min-width: 9rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-soft);
  background: radial-gradient(circle at 0 0,
              rgba(249,180,94,0.10),
              transparent),
              rgba(10,10,18,0.96);
  font-size: 0.75rem;
  text-align: center;
}

.appeal-insight-label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faded);
  margin-bottom: 0.1rem;
}

.appeal-insight-value {
  font-family: "VT323", monospace;
  font-size: 0.95rem;
  color: var(--crt-amber-soft);
}

.appeal-countdown-expired .appeal-insight-value {
  color: var(--crt-red);
}

/* =========================
   Appeal vote form
   ========================= */

.appeal-vote-form-block {
  margin-top: 1.25rem;
}

.appeal-vote-form {
  border-radius: 0.9rem;
  border: 1px solid var(--border-soft);
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg,
              rgba(12,12,20,0.95),
              rgba(18,18,30,0.98));
}

.appeal-vote-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.appeal-vote-choice {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.appeal-vote-choice input[type="radio"] {
  accent-color: var(--crt-amber);
}

.vote-comment-input {
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  font-size: 0.85rem;
  margin-top:0.5em;
  border-radius:7px;
}
/* two-button appeal selector */
.appeal-vote-2btn-row {
  display: flex;
  justify-content:space-evenly;
  gap: 1rem;
  margin-top: 0.4rem;
}

/* hide the actual radio inputs */
.appeal-vote-2btn-row input[type="radio"] {
  display: none;
}

/* button appearance */
.appeal-vote-btn {
  padding: 0.55rem 1.4rem;
  font-size: 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  letter-spacing: 0.05em;
  transition: all .18s ease-in-out;
  background: rgba(16,16,24,0.86);
  width:45%;
  text-align:center;
  text-transform:uppercase;
}

/* approve normal */
.approve-btn {
  border: 1px solid rgba(80,180,80,0.3);
  color: var(--crt-green);
}

/* deny normal */
.deny-btn {
  border: 1px solid rgba(180,80,80,0.3);
  color: var(--crt-red);
}

/* approve selected */
input#vote_grant:checked + label {
  background: linear-gradient(135deg,
      rgba(40,100,40,0.22),
      rgba(10,40,10,0.38));
  border: 1px solid var(--crt-green);
  color: var(--crt-green);
}

/* deny selected */
input#vote_deny:checked + label {
  background: linear-gradient(135deg,
      rgba(120,30,30,0.24),
      rgba(60,10,10,0.38));
  border: 1px solid var(--crt-red);
  color: var(--crt-red);
}

/* hover — small glow */
.appeal-vote-btn:hover {
  filter: brightness(125%);
  transform: translateY(-2px);
  text-shadow: 0 0 6px rgba(249,180,94,0.65);
}
.vote-comment-input {
  padding: 0 1em;
  background: var(--bg);
  color: var(--text-main);
}

.btn-primary {
  margin:0.5em 0 0 0.5em;
  border-radius: 7px;
  text-transform:uppercase;
  font-weight:900;
}

/* --- enforcement pending attention pulse --- */
.module-tabs .tab.pending {
    position: relative;
    color: var(--text-muted);
    text-shadow: 0 0 6px rgba(249,180,94,0.75);
    animation: enforcementPulse 1.5s ease-in-out infinite;
}

@keyframes enforcementPulse {
    0% {
        text-shadow: 0 0 4px rgba(249,180,94, 0.50),
                     0 0 8px rgba(249,180,94, 0.30);
        box-shadow: 0 0 2px rgba(249,180,94, 0.25),
                    0 0 4px rgba(249,180,94, 0.15);
        color: var(--text-muted);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 200,100, 1),
                     0 0 20px rgba(255,200,100, 0.8);
        box-shadow: 0 0 6px rgba(255, 200,100, 0.60),
                    0 0 12px rgba(255,200,100, 0.40);
        color: var(--text-main);
    }
    100% {
        text-shadow: 0 0 4px rgba(249,180,94, 0.50),
                     0 0 8px rgba(249,180,94, 0.30);
        box-shadow: 0 0 2px rgba(249,180,94, 0.25),
                    0 0 4px rgba(249,180,94, 0.15);
        color: var(--text-muted);
    }
}
.cluster-grid {
  list-style: none;
  padding: 0;
  margin: 0.25em 0;
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 6px;
}

.cluster-item {
  display: contents;
}

.alt-pill {
  grid-column: 1;
}

.alt-name {
  grid-column: 2;
  text-align: right;
  color: var(--crt-amber);
  opacity: 0.85;
  font-size: 0.65rem;
  text-transform:uppercase;
}
/******************************
 *  STATS MODULE
 ******************************/

.stats-module {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    width: 100%;
    padding-bottom: 2rem;
}

/* Panels like Officers / Deputies / Former Staff */
.stats-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}

/* Header bar for each panel */
.stats-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 193, 99, 0.04);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.6rem 0.9rem;
    text-transform:uppercase;
}

.stats-panel .panel-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08rem;
    color: var(--crt-amber);
    margin: 0;
    text-transform:uppercase;
}

.stats-panel .panel-header-meta {
    color: var(--crt-amber-dim);
    opacity: 0.85;
    font-size: 0.75rem;
    text-transform:uppercase;
}

/* Table body area */
.stats-panel .panel-body {
    padding: 0.5rem 0.75rem;
}

/* Table layouts */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.stats-table thead tr {
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.03);
}

.stats-table thead th {
    text-align: center;
    padding: 0.4rem 0.4rem;
    color: var(--crt-amber);
    font-weight: 600;
}

.stats-table th.align-right,
.stats-table td.align-right {
    text-align: right;
}

.stats-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.stats-table tbody tr:hover {
    background: rgba(255,193,99,0.06);
    transition: background 0.2s ease-in-out;
}

.stats-table tbody td {
    padding: 0.35rem 0.4rem;
    color: var(--crt-amber-soft);
    vertical-align: middle;
}

/* Row for empty / none found */
.stats-table .empty-row {
    text-align: center;
    color: var(--crt-amber-dim);
    font-style: italic;
    padding: 1rem 0;
}

/******************************
 * CATEGORY TILES
 ******************************/

.stats-panel--tiles {
}

.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.7rem;
    padding: 0.8rem;
}

.category-tile {
    border: 1px solid var(--border-soft);
    background: rgba(255,193,99,0.04);
    border-radius: 4px;
    padding: 0.6rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align:center;
}

.category-tile:hover {
    border-color: var(--crt-amber);
    background: rgba(255,193,99,0.08);
}

.category-tile-label {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04rem;
    color: var(--crt-amber);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.category-tile-main {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    justify-content:center;
}

.category-tile-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--crt-amber-soft);
}

.category-tile-meta {
    font-size: 0.75rem;
    color: var(--crt-amber-dim);
    opacity: 0.9;
}

/* ===========================================================
   Former Staff Toggle — CRT Amber Vertical Switch
   =========================================================== */

.panel-toggle {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,190,90,0.5);
    border-radius: 10px;
    background: rgba(40,35,25,0.9);
    box-shadow:
        0 0 6px rgba(255,200,120,0.2),
        inset 0 0 8px rgba(255,200,120,0.15);
    cursor: pointer;
    padding: 1px;
    color: var(--crt-amber);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* ===========================
   LOGS: unified audit view
   =========================== */

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Base card */
.log-entry {
  position: relative;
  padding: 0.75rem 0.9rem 0.6rem;
  border-radius: 10px;
  background: #101010;
  border-left: 3px solid #3a3a3a;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 18px rgba(0, 0, 0, 0.55);
}

/* Timestamp + pill row */
.log-entry-header {
  display: flex;
  flex-wrap: nowrap;        /* keep everything on one line */
  align-items: center;      /* 'right' isn't valid here */
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.log-ts {
  min-width: 8.5rem;
  color: #aaaaaa;
  font-family: var(--mono-font, "JetBrains Mono", "Fira Code", monospace);
  align-self: left;
}

/* Message text */
.log-message {
  font-size: 0.86rem;
  line-height: 1.35;
  color: #eeeeee;
  margin-bottom: 0.2rem;
}

/* Target / ban row */
.log-meta-line {
  margin-top: 0.12rem;
  font-size: 0.75rem;
  color: #c0c7c7;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.log-meta-label {
  text-transform: uppercase;
  opacity: 0.8;
  margin-right: 0.25rem;
}

.log-meta-value {
  font-family: var(--mono-font, "JetBrains Mono", "Fira Code", monospace);
  background: rgba(249, 177, 92, 0.06);    /* soft amber */
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(249, 177, 92, 0.35);
}

/* ---------------------------
   Pills (source / action / staff)
   --------------------------- */

.log-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.14rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f5f5;
  white-space: nowrap;
}

.log-pill-source {
  letter-spacing: 0.08em;
  color: #f9b15c;
  border-color: rgba(249, 177, 92, 0.55);
  align: left; 
}

.log-pill-action {
  color: #9be7ff;
  border-color: rgba(155, 231, 255, 0.55);
  text-transform:uppercase;
}

.log-pill-staff {
  color: #f9b15c;
  border-color: rgba(249, 177, 92, 0.55);
  align: left;  
}

.log-pill-role {
  opacity: 0.75;
  margin-left: 0.25rem;
  font-weight: 400;
}

.log-pill-legacy {
  color: #ff9cb5;
  border-color: rgba(255, 156, 181, 0.85);
  background: rgba(255, 156, 181, 0.12);
}

.log-pill-meta {
  color: #b9ffb0;
  border-color: rgba(185, 255, 176, 0.7);
}

/* ---------------------------
   Extra JSON block
   --------------------------- */
.log-extra {
  display: inline-flex;          /* sits in the header row */
  margin-left: 0.5rem;
  font-size: 0.75rem;
  align-items: center;
}

/* Make "DETAILS" look like a pill */
.log-extra {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.log-extra > summary {
  cursor: pointer;
  color: #f9b15c;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* JSON panel below the header line, full card width */
.log-extra-json {
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.07);
  max-height: 18rem;
  overflow: auto;
  font-size: 0.65rem;
}
/* DETAILS pill button */
.log-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.14rem 0.6rem;;
  background: rgba(0, 0, 0, 0.0);
  color: #f9b15c;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
}

.log-details-btn::after {
  content: "▶";
  font-size: 0.65rem;
}

.log-details-btn.is-open::after {
  content: "▼";
}
/* Floating JSON popover */
.log-extra-popover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-radius:15px;
  border: 2px solid var(--border-mid);
  box-shadow: 0 24px 28px 10px rgba(0, 0, 0, 0.85),0 44px 48px 20px rgba(0, 0, 0, 0.85);  
  margin-top: 0.4rem;
  z-index: 40;
  display: none;                          /* hidden by default */
  max-width: min(52rem, calc(100% - 2rem));
}

/* Visible state */
.log-extra-popover.is-open {
  display: block;
}

/* Keep your existing JSON panel look, maybe just tweak font size */
.log-extra-json {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 7px;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.07);
  max-height: 18rem;
  font-size: 0.65rem;
  font-family: var(--mono-font, "JetBrains Mono", "Fira Code", monospace);
}

/* ---------------------------
   Raw log lines (unchanged behavior)
   --------------------------- */

.logs-raw-block {
  margin-top: 2rem;
}

.logs-raw-block > details > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: #63d0ff;
}

.logs-raw {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.3;
  background: #050505;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-height: 18rem;
  overflow: auto;
}

/* ===========================
   Border-left color by source
   =========================== */

/* Profile / bans (default amber) */
.log-entry.log-source-profile {
  border-left-color: #f9b15c;
}

/* Appeals-related events (cyan edge) */
.log-entry.log-source-appeals {
  border-left-color: #63d0ff;
}

/* Staff / system meta events (magenta edge) */
.log-entry.log-source-staff {
  border-left-color: #f78fb3;
}

/* Generic / audit / unknown */
.log-entry.log-source-audit,
.log-entry.log-source-unknown {
  border-left-color: #999999;
}

/* Legacy imported events from v1 */
.log-entry.log-entry-legacy {
  border-left-style: dashed;
  border-left-color: #ff9cb5;
}

.log-entry.log-entry-legacy age,
{
  filter: opacity(100%);
}

/* Optional: subtle emphasis by severity if you ever set e.level */
.log-entry.log-level-warning {
  box-shadow:
    0 0 0 1px rgba(249, 177, 92, 0.25),
    0 10px 18px rgba(0, 0, 0, 0.6);
}

.log-entry.log-level-error {
  border-left-color: #ff6b6b;
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.35),
    0 12px 20px rgba(0, 0, 0, 0.7);
}

.muted-text {
  color: var(--text-muted);
}
/* Drilldown table — isolated */
table.drill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,200,0,0.12);
}

table.drill-table th,
table.drill-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,200,0,0.08);
}

table.drill-table tr:hover {
    background-color: rgba(255,200,0,0.06);
    cursor: pointer;
}

table.drill-table th:nth-child(1),
table.drill-table td:nth-child(1) {
  width: 24%;
}

table.drill-table th:nth-child(2),
table.drill-table td:nth-child(2) {
  width: 30%;
}

table.drill-table th:nth-child(3),
table.drill-table td:nth-child(3) {
  width: 16%;
}

table.drill-table th:nth-child(4),
table.drill-table td:nth-child(4) {
  width: 30%;
}


.uuid-pill {
    font-family: monospace;
    background: rgba(255,150,0,0.12);
    border: 1px solid rgba(255,150,0,0.25);
    padding: 3px 5px;
    border-radius: 3px;
}
/* Category tiles as links */
.category-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.category-tile-link .category-tile {
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}

.category-tile-link:hover .category-tile {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.35),
                0 0 10px rgba(255, 200, 120, 0.15);
    border-color: rgba(255, 200, 120, 0.8);
}

/* Clickable staff rows */
.stats-row--staff {
    cursor: pointer;
}

.stats-row--staff:hover {
    background-color: rgba(255, 200, 100, 0.06);
}