/* RootDesign Dashboard — Modern Violet Circuit Theme */

:root {
  color-scheme: dark;
  /* Shared design tokens — mirrors the Embed Creator's flat card look
     (dashboard-wide as of the top-bar/profile/theme redesign). */
  --ac: #8b5cf6;
  --ac-soft: rgba(139, 92, 246, 0.16);
  --ac-line: rgba(139, 92, 246, 0.30);
  --card: #181a18;
  --input: #0c0e0c;
  --line: rgba(255, 255, 255, 0.08);
  --muted: #8b909a;
  --text: #f1f5f2;
  --bad: #ff6b6b;
  --warn: #ffd166;
}

/* The [hidden] attribute only beats a class's own `display` rule when
   specificity/source-order favor it — several classes here (.overlay,
   .btn, .emoji-picker-panel, .font-gallery) set `display` unconditionally
   and were winning that fight, so `hidden` was silently doing nothing on
   them. !important guarantees hidden always wins, for every element,
   permanently — never toggle visibility via inline style="display" on
   these, only the hidden property/attribute. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top left, #000 0%, #0a0a0a 100%);
  color: #e8e8ff;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

header {
  background: #0e100e;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  position: relative;
  z-index: 100;
}

.logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.45));
}

/* The header's brand title only — scoped so the page-content h1s (.ec-title
   and friends, which fully define their own look) aren't dragged along. */
header h1 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 22px 24px 24px;
  margin: 20px;
  border-radius: 14px;
  width: 320px;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ac-line);
}

h2 {
  margin-top: 0;
  color: var(--ac);
  font-weight: 600;
  font-size: 19px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.info p {
  margin: 8px 0;
}

strong {
  color: #8b5cf6;
}

span {
  color: #e8e8ff;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s ease;
}

li:hover {
  color: #8b5cf6;
}

footer {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #8b5cf6;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 -5px 15px rgba(139, 92, 246, 0.1);
}

/* ---------------------------------- */
/* Login Page                         */
/* ---------------------------------- */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.login-card {
  background: #0c0a10;
  border: 2px solid #8b5cf6;
  border-radius: 16px;
  padding: 45px 40px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.5);
}

/* Icon + wordmark as two separate elements (not one flattened image) so the
   mark always blends into the card — no image background to ever mismatch
   the card's own dark fill. */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26px;
}

.login-mark {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.45));
}

.login-wordmark {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}

/* Matches the icon's own purple-to-blue gradient, left to right. */
.login-wordmark span {
  background: linear-gradient(90deg, #8b5cf6, #4cc9f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8b5cf6; /* fallback for browsers without background-clip: text */
}

.login-title, .login-subtitle {
  /* The logo image already carries the wordmark — no separate title/subtitle text alongside it. */
  display: none;
}

.login-error {
  background: rgba(255, 64, 64, 0.12);
  border: 1px solid rgba(255, 64, 64, 0.4);
  color: #ff9d9d;
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 20px;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(139, 92, 246, 0.1);
  border: 2px solid #8b5cf6;
  color: #c9b3ff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  background: rgba(139, 92, 246, 0.18);
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.5);
}

.discord-icon {
  width: 20px;
  height: 20px;
}

.login-card .login-footer {
  margin-top: 30px;
  padding: 0;
  border-top: none;
  box-shadow: none;
  font-size: 12px;
  color: #8b909a;
}

/* ---------------------------------- */
/* Dashboard header account controls  */
/* ---------------------------------- */

.account-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logout-link {
  color: #cfdcee;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.logout-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.account-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8e8ff;
  font-weight: 600;
  font-size: 13px;
}

.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.3);
}

/* ---- account dropdown ---- */
.acct { position: relative; }

.acct-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  color: #e8e8ff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.acct-trigger:hover, .acct-trigger.active {
  border-color: var(--ac-line);
  background: rgba(139, 92, 246, 0.08);
}

.acct-chevron { font-size: 9px; opacity: 0.7; margin-left: -2px; }

.acct-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background: #120c22;
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  padding: 16px;
  z-index: 400;
  color: #e8e8ff;
  scrollbar-width: thin;
  scrollbar-color: #2c2c40 transparent;
}

.acct-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.acct-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--ac-line);
  flex-shrink: 0;
}

.acct-panel-id strong { font-size: 16px; color: #fff; }

.acct-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.acct-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
}

.acct-badge.owner { background: rgba(255, 209, 102, 0.18); color: #ffd166; }
.acct-badge.admin { background: var(--ac-soft); color: var(--ac); }
.acct-badge.member { background: rgba(255, 255, 255, 0.08); color: #cfd2d8; }
.acct-badge.server { background: rgba(88, 101, 242, 0.18); color: #aab4ff; text-transform: none; letter-spacing: 0; }

.acct-info-list { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--line); }

.acct-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
}

.acct-info-label { color: var(--muted); flex: 0 0 auto; min-width: 92px; }
.acct-info-value { color: #e8e8ff; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-info-value.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.acct-info-row .btn-sm { flex: 0 0 auto; min-height: 26px; padding: 2px 10px; font-size: 11px; }

.acct-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac);
  margin: 14px 0 8px;
}

.acct-roles { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.acct-role-chip {
  --rc: #99aab5;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--rc);
  background: color-mix(in srgb, var(--rc) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}

.acct-settings .toggle-row { padding: 9px 0; }
.acct-settings .toggle-row select { min-height: 32px; padding: 4px 8px; font-size: 12.5px; }

.acct-actions { display: flex; gap: 8px; margin-top: 14px; }
.acct-actions .btn { flex: 1 1 0; min-height: 36px; font-size: 12.5px; padding: 6px 10px; }

.acct-logout {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

/* ---------------------------------- */
/* Nav                                 */
/* ---------------------------------- */

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: 8px;
  position: relative;
}

.main-nav a,
.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  color: #9fb4d9;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 7px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover,
.nav-group-trigger:hover {
  background: rgba(139, 92, 246, 0.08);
  color: #e8e8ff;
}

.main-nav a.active,
.nav-group-trigger.active {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}

.nav-group-trigger::after {
  content: "▾";
  font-size: 8px;
  margin-left: 6px;
  opacity: 0.75;
}

.nav-group {
  position: relative;
}

.nav-group-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #120c22;
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group-panel a {
  padding: 8px 10px;
  border-radius: 6px;
  color: #cfdcee;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-group-panel a:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.nav-group-panel a.active {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.08);
}

/* ---------------------------------- */
/* Page layout / stat tiles           */
/* ---------------------------------- */

main.page {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 24px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ac);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.stat-delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-delta.up { color: var(--ac); }
.stat-delta.down { color: var(--bad); }
.stat-delta.flat { color: var(--muted); font-weight: 500; }

.stat-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-top: 8px;
}

.stat-spark i {
  flex: 1;
  min-width: 2px;
  background: var(--ac-line);
  border-radius: 1px;
}

.card.wide {
  width: auto;
  max-width: none;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------------------------- */
/* Bar chart                          */
/* ---------------------------------- */

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding-top: 10px;
  overflow-x: auto;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
  flex: 1;
  height: 100%;
}

.bar {
  width: 100%;
  max-width: 22px;
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.bar-count {
  font-size: 11px;
  color: #8b5cf6;
  margin-top: 4px;
}

.bar-label {
  font-size: 10px;
  color: #7f8fae;
  margin-top: 2px;
  white-space: nowrap;
}

/* ---------------------------------- */
/* Tables                             */
/* ---------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.ticket-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ticket-table th {
  text-align: left;
  color: #8b5cf6;
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  padding: 8px 10px;
  white-space: nowrap;
}

.ticket-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #e8e8ff;
}

.ticket-table tbody tr {
  cursor: default;
  transition: background 0.12s ease;
}

.ticket-table tbody tr:hover {
  background: rgba(139, 92, 246, 0.06);
}

.ticket-table tbody tr.row-active {
  background: rgba(139, 92, 246, 0.16);
}

.ticket-table tbody tr.row-active td {
  border-bottom-color: rgba(139, 92, 246, 0.25);
}

.actions-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------------------------------- */
/* Badges                             */
/* ---------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-open { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.badge-claimed { background: rgba(255, 200, 0, 0.15); color: #ffc800; }
.badge-closed { background: rgba(255, 85, 85, 0.15); color: #ff8080; }

/* ---------------------------------- */
/* Buttons                            */
/* ---------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  background: #101210;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: none; border-color: var(--ac-line); background: #141814; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-sm { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }

.btn-primary { background: #1c1033; border-color: var(--ac); color: #d8e6ff; box-shadow: 0 0 10px rgba(139, 92, 246, 0.18); }
.btn-primary:hover { background: #2a1a4d; box-shadow: 0 0 14px rgba(139, 92, 246, 0.3); }
.btn-secondary { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: #e8e8ff; }
.btn-danger { background: rgba(255, 90, 90, 0.12); border-color: rgba(255, 90, 90, 0.45); color: #ffb3b3; }
.btn-danger:hover { background: #2a1111; border-color: var(--bad); }

/* ---------------------------------- */
/* Forms                              */
/* ---------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
  margin-top: 16px;
  align-items: stretch;
}

/* Labels with a hint wrap to different heights depending on how long the
   hint text is, which used to leave their input/select floating higher
   or lower than same-row siblings. Stretching the label to the row's
   full height and pinning the field to the bottom (instead of letting it
   sit right under whatever height the text happens to be) keeps every
   field in a row bottom-aligned regardless of hint length. */
.form-grid > label > input,
.form-grid > label > select {
  margin-top: auto;
}

/* A textarea's height varies with content and shouldn't force short
   sibling fields into its row — give it the full row to itself. */
.form-grid > label:has(textarea) {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-grid.nested {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 10px;
}

.form-fields-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Some pages (e.g. the Members detail card) stack these blocks directly in
   a plain section rather than inside a .form-grid, so there's no grid gap
   to rely on for spacing between them — without their own margin, blocks
   and the action row after them end up flush against each other. */
.form-actions {
  margin-top: 8px;
}

.time-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.time-picker-row select {
  flex: 1 1 0;
  min-width: 64px;
  padding: 10px 6px;
}

.block-label {
  font-weight: 600;
  color: #8b5cf6;
  font-size: 14px;
}

.form-section-label {
  grid-column: 1 / -1;
  font-weight: 700;
  color: #8b5cf6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.form-section-label:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.hint {
  font-weight: 400;
  color: #7f8fae;
  font-size: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #b6cfff;
  font-weight: 600;
}

input[type="text"],
input[type="number"],
select,
textarea {
  background: var(--input);
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
}

/* A selected option longer than the closed <select>'s width otherwise gets
   hard-clipped mid-character with no indication anything's missing —
   ellipsis it instead. */
select {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Color swatches don't take padding like text does — the browser's own
   swatch stays a fixed size regardless, so text-input padding just made
   the box disproportionately large next to it. Contained size instead. */
input[type="color"] {
  background: var(--input);
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  padding: 4px;
  width: 56px;
  height: 42px;
  box-sizing: border-box;
  cursor: pointer;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

/* The dropdown popup renders as its own native layer and ignores a
   translucent parent background, so it needs a solid color of its own —
   plus explicit <option> styling, since browsers otherwise default the
   popup list to a light theme regardless of the closed <select>'s look. */
select {
  background-color: var(--input);
}

select option {
  background-color: var(--input);
  color: var(--text);
}

select option:checked,
select option:hover,
select option:focus {
  background-color: #2a1a45;
  color: #ffffff;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--ac-soft);
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  background: var(--input);
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 42px;
  box-sizing: border-box;
  cursor: pointer;
}

/* ---------------------------------- */
/* Toggle switch (shared component)   */
/* ---------------------------------- */

input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: #3b3f3c;
  border: 1px solid #4a4f4b;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

input[type="checkbox"].switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4e6e4;
  transition: transform 0.18s, background 0.18s;
}

input[type="checkbox"].switch:checked {
  background: #241542;
  border-color: var(--ac);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.28);
}

input[type="checkbox"].switch:checked::after {
  transform: translateX(20px);
  background: var(--ac);
}

input[type="checkbox"].switch:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

input[type="checkbox"].switch.mini { width: 36px; height: 20px; }
input[type="checkbox"].switch.mini::after { width: 14px; height: 14px; }
input[type="checkbox"].switch.mini:checked::after { transform: translateX(16px); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.toggle-row:last-child { border-bottom: none; }
.toggle-row .toggle-title { font-size: 14px; font-weight: 600; color: #fff; }
.toggle-row .toggle-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* A checkbox-label sitting directly in a form grid (no surrounding label
   text) would otherwise stretch to match a taller same-row sibling like a
   labeled select — hugging its own height instead looks right here. Scoped
   to direct grid children only: one nested inside a .form-fields-block
   (a flex column) should still stretch to the full row width, as normal. */
.form-grid > .checkbox-label {
  align-self: start;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label.small {
  font-size: 12px;
  min-height: 0;
  padding: 6px 10px;
  background: none;
  border: none;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.role-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px;
}

.form-field-row {
  display: grid;
  grid-template-columns: 2fr 140px auto auto;
  gap: 8px;
  align-items: center;
}

/* Reaction-role option rows have a different field shape (emoji, role,
   label, remove) than the ticket-question rows above — a wider emoji
   column (input + picker button + custom-emoji thumbnail) and a role
   column that also carries a "create new role" shortcut. */
.rr-option-row {
  grid-template-columns: 160px 1fr 1fr auto;
}

.rr-emoji-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rr-emoji-cell .opt-emoji {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  min-width: 0;
}

.rr-emoji-cell .opt-emoji-pick {
  flex-shrink: 0;
  padding: 6px 8px;
}

.opt-emoji-thumb {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.rr-role-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rr-role-cell .opt-role {
  flex: 1;
  min-width: 0;
}

.rr-role-cell .opt-role-new {
  flex-shrink: 0;
  padding: 6px 10px;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

/* ---------------------------------- */
/* Overview page extras               */
/* ---------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

.member-list, .feed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  max-height: 360px;
  overflow-y: auto;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.member-rank {
  color: #8b5cf6;
  font-weight: 700;
  width: 24px;
}

.member-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.member-name {
  color: #e8e8ff;
  font-weight: 600;
  flex: 1;
}

.member-count {
  color: #7f8fae;
  font-size: 12px;
}

.role-color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  margin-top: 16px;
  padding-bottom: 22px;
  position: relative;
}

.bar-chart-col {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  cursor: default;
}

.bar-chart-bar {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  border-radius: 3px 3px 0 0;
  transition: opacity 0.15s ease;
}

.bar-chart-col:hover .bar-chart-bar {
  opacity: 0.75;
}

.bar-chart-label {
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  color: #7f8fae;
  white-space: nowrap;
}

.role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #cfdcee;
}

.feed-icon {
  font-size: 14px;
  margin-top: 2px;
}

.feed-body {
  flex: 1;
}

.feed-time {
  color: #7f8fae;
  font-size: 11px;
  margin-top: 2px;
}

/* ---------------------------------- */
/* Overview: Find a Member            */
/* ---------------------------------- */

.finder-row { position: relative; }

.finder-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #170f2c;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.finder-results button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: none;
  border: none;
  color: #e8e8ff;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
}

.finder-results button:hover { background: #2a1a45; }
.finder-results img { width: 26px; height: 26px; border-radius: 50%; }
.finder-empty { padding: 8px; color: var(--muted); font-size: 12.5px; }

.finder-profile {
  margin-top: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.finder-profile img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ac-line); flex-shrink: 0; }
.finder-profile-body { flex: 1; min-width: 0; }
.finder-profile-name { font-size: 16px; font-weight: 700; color: #fff; }
.finder-profile-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.finder-profile-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------------------------------- */
/* Members                            */
/* ---------------------------------- */

.member-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 20px;
}

.member-detail-header .account-avatar {
  width: 48px;
  height: 48px;
}

.mod-note-row {
  display: grid;
  grid-template-columns: 60px 140px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
}

.mod-note-text {
  color: #e8e8ff;
}

.poll-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

/* ---------------------------------- */
/* Embed Creator                      */
/* ---------------------------------- */

.embed-preview {
  display: flex;
  margin-top: 14px;
  background: #1a1d21;
  border-radius: 6px;
  overflow: hidden;
  max-width: 480px;
}

.embed-preview-bar {
  width: 4px;
  flex-shrink: 0;
  background: #8b5cf6;
}

.embed-preview-body {
  padding: 12px 16px;
  color: #dcddde;
  font-size: 14px;
  line-height: 1.4;
}

.embed-preview-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.embed-preview-author img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.embed-preview-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.embed-preview-description {
  white-space: pre-wrap;
  margin-bottom: 8px;
}

.embed-preview-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.embed-preview-field {
  flex: 1 1 100%;
}

.embed-preview-field.inline {
  flex: 1 1 auto;
  min-width: 120px;
}

.embed-preview-field-name {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
}

.embed-preview-field-value {
  font-size: 13px;
}

.embed-preview-thumb {
  max-width: 80px;
  max-height: 80px;
  border-radius: 6px;
  float: right;
  margin: 0 0 8px 8px;
}

.embed-preview-image {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 8px;
  display: block;
}

.embed-preview-footer {
  margin-top: 8px;
  font-size: 12px;
  color: #a0a3a8;
}

/* ---------------------------------- */
/* Automation Engine                  */
/* ---------------------------------- */

.automation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.automation-cat-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.automation-cat-group .form-section-label {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.automation-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  padding: 12px 16px;
}

/* ---------------------------------- */
/* Feed Library — categories + inline template editing */
/* ---------------------------------- */

.lib-cat-manager {
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.lib-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.lib-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  color: var(--ac);
  background: var(--ac-soft);
  border: 1px solid var(--ac-line);
}

.lib-cat-chip.builtin {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

.lib-cat-chip .lib-cat-count {
  opacity: 0.7;
  font-weight: 500;
}

.lib-cat-chip .lib-cat-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  font-size: 13px;
}

.lib-cat-chip .lib-cat-del:hover {
  opacity: 1;
  background: rgba(255, 90, 90, 0.2);
  color: var(--bad);
}

.lib-cat-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lib-cat-add-form input[type="text"] {
  padding: 6px 10px;
  font-size: 13px;
}

.lib-entry.lib-entry-editing {
  /* .automation-history-row (the parent class) is itself a 3-column grid (90px 160px 1fr) —
     span all of it so the edit form gets the full row width to lay itself out in, instead of
     being squeezed into a single ~90-160px track. */
  grid-column: 1 / -1;
  display: block;
  background: var(--ac-soft);
  border-radius: 8px;
  padding: 10px;
}

.lib-edit-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.lib-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.lib-edit-form .lib-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
}

.automation-card.automation-disabled {
  opacity: 0.6;
}

.automation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.automation-expand-btn {
  background: none;
  border: none;
  color: #8b5cf6;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
}

.automation-name {
  color: #e8e8ff;
}

.automation-meta {
  font-size: 12px;
}

.automation-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: #b6cfff;
  cursor: pointer;
}

.automation-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  color: #7f8fae;
}

.automation-cat-badge.cat-moderation { background: rgba(255, 85, 85, 0.15); color: #ff8080; }
.automation-cat-badge.cat-engagement { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.automation-cat-badge.cat-maintenance { background: rgba(255, 200, 0, 0.15); color: #ffc800; }
.automation-cat-badge.cat-logging { background: rgba(100, 180, 255, 0.15); color: #8ec9ff; }
.automation-cat-badge.cat-intelligence { background: rgba(232, 121, 249, 0.15); color: #f0abfc; }

.automation-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.automation-settings-form {
  margin-top: 10px;
}

.automation-history {
  margin-top: 16px;
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  overflow-x: auto;
}

.heatmap-row {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 3px;
  min-width: 640px;
}

.heatmap-label {
  font-size: 11px;
  color: #7f8fae;
  display: flex;
  align-items: center;
}

.heatmap-hour-label {
  font-size: 9px;
  color: #7f8fae;
  text-align: center;
}

.heatmap-cell {
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.automation-history-row {
  display: grid;
  grid-template-columns: 90px 160px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
}

/* ---------------------------------- */
/* Server Designer                    */
/* ---------------------------------- */

.designer-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mode-toggle, .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar-actions select {
  padding: 6px 10px;
  font-size: 13px;
}

.designer-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}

.designer-category {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  padding: 14px;
}

.designer-category.drag-over {
  border-color: #8b5cf6;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
}

.designer-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: default;
}

.designer-category-header.draggable {
  cursor: grab;
}

.designer-category-name {
  font-weight: 700;
  color: #8b5cf6;
  font-size: 15px;
  flex: 1;
}

.designer-category-name.editable {
  cursor: pointer;
}

.designer-category-name.editable:hover {
  text-decoration: underline;
}

.designer-channel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 20px;
  padding: 4px;
  border-radius: 8px;
}

.designer-channel-list.drag-over {
  background: rgba(139, 92, 246, 0.08);
}

.designer-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 20, 10, 0.85);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.designer-channel.draggable {
  cursor: grab;
}

.designer-channel-icon {
  color: #7f8fae;
  width: 16px;
  text-align: center;
}

.designer-channel-name {
  flex: 1;
  color: #e8e8ff;
}

.designer-channel-name.editable {
  cursor: pointer;
}

.designer-channel-name.editable:hover {
  text-decoration: underline;
}

.designer-add-btn {
  margin-top: 8px;
}

/* Overlay / style editor */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.overlay-card {
  background: #120c22;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 14px;
  padding: 28px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.25);
}

.overlay-card h2 {
  margin-top: 0;
  color: #8b5cf6;
}

.howto-card {
  border-left: 4px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}

.howto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.howto-header h2 {
  flex: 1;
}

.howto-toggle {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #cfdcee;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}

.howto-toggle:hover {
  background: rgba(139, 92, 246, 0.15);
}

.howto-list {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: #cfdcee;
  line-height: 1.5;
}

.howto-list strong {
  color: #8b5cf6;
}

.howto-list a {
  color: #8b5cf6;
}

.style-preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  color: #e8e8ff;
  word-break: break-word;
}

/* Style editor pickers */

.se-name-label {
  margin-bottom: 18px;
}

.se-name-input {
  font-size: 20px !important;
  padding: 14px 16px !important;
}

.se-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}

.se-picker-row.single-row {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .se-picker-row { grid-template-columns: 1fr; }
}

.se-picker-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 16px;
  cursor: pointer;
}

/* Shared emoji picker (emoji-picker.js) — used inline in the Server
   Designer and as a floating popover on the Reaction Roles page. */
.emoji-picker-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}

.ep-popover {
  position: absolute;
  z-index: 1200;
  width: 320px;
  max-width: 90vw;
  background: #120c22;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.25);
}

.ep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.ep-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 999px;
  color: #cfdcee;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}

.ep-tab.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.ep-search {
  margin-bottom: 8px;
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.ep-grid p.hint {
  grid-column: 1 / -1;
  margin: 4px;
}

.ep-emoji-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-emoji-btn:hover {
  background: rgba(139, 92, 246, 0.15);
}

.ep-emoji-btn.ep-custom img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ep-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.perm-role-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.perm-role-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  padding: 10px 12px;
}

.perm-role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #8b5cf6;
}

.perm-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.perm-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #7f8fae;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
}

.perm-toggle.perm-allow {
  background: rgba(139, 92, 246, 0.18);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.perm-toggle.perm-deny {
  background: rgba(255, 85, 85, 0.18);
  border-color: #ff5555;
  color: #ff8080;
}

.se-bracket-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.se-bracket-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  color: #e8e8ff;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.se-bracket-btn.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.font-gallery {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.font-gallery-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: #e8e8ff;
}

.font-gallery-item:hover {
  border-color: rgba(139, 92, 246, 0.5);
}

.font-gallery-item.active {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.font-gallery-label {
  font-size: 11px;
  color: #7f8fae;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.font-gallery-preview {
  font-size: 15px;
  word-break: break-word;
}

/* ---------------------------------- */
/* Dashboard settings: compact + motion */
/* ---------------------------------- */

body.reduce-motion,
body.reduce-motion * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

body.compact main.page { padding: 18px; gap: 16px; }
body.compact .card { padding: 14px 16px 16px; margin: 12px; }
body.compact .card.wide { margin: 0; }
body.compact h2 { font-size: 16px; padding-bottom: 7px; margin-bottom: 4px; }
body.compact .stat-tile { padding: 12px 14px; }
body.compact .stat-value { font-size: 22px; }
body.compact .form-grid { gap: 12px 16px; margin-top: 10px; }
body.compact .ticket-table th, body.compact .ticket-table td { padding: 6px 8px; }
body.compact .automation-card { padding: 8px 12px; }
body.compact .ec-page .card.ec-card { padding: 16px 18px 18px; }
body.compact .ec-layout, body.compact .ec-main, body.compact .ec-side { gap: 14px; }