:root {
  --bg: #0b0708;
  --bg-alt: #1c1013;
  --bg-card: #150d0f;
  --border: #3d1f22;
  --text: #f2e8e8;
  --text-dim: #b89a9c;
  --accent: #e0293d;
  --accent-rgb: 224, 41, 61;
  --accent-hover: #b91f2f;
  /* Kept a distinct orange-red (not the crimson --accent) so destructive actions and errors
     still read as a different signal from ordinary active/on states. */
  --danger: #ff6b35;
  --success: #2ecc71;
}

* {
  box-sizing: border-box;
}

/* Same dark color as the body gradient's base tone — covers the earliest paint (and any
   overscroll/URL-bar-tinted area on mobile) before the gradient itself has painted. Paired
   with <meta name="color-scheme"> in head.ejs, which covers the paint before this stylesheet
   has even loaded — this covers native form-control/scrollbar theming once it has. */
html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  background: linear-gradient(160deg, #1a0a0c 0%, #0b0708 55%, #0d0608 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'gg sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  display: flex;
  align-items: center;
}

.topbar-brand-mark {
  height: 28px;
  width: auto;
  display: block;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-username {
  color: var(--text-dim);
}

.topbar-admin-link {
  color: var(--accent);
  font-weight: 600;
}

.topbar-admin-link:hover {
  color: var(--accent-hover);
}

.topbar-logout button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.topbar-logout button:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.topbar-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  margin-right: 8px;
  flex-shrink: 0;
}

.topbar-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Hidden/collapsed by default; only shown (and made interactive) under the mobile breakpoint
   below, and only on pages that actually render a .sidebar. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 61px 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 55;
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  text-align: center;
  padding: 40px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  max-width: 380px;
}

.login-card p {
  color: var(--text-dim);
  margin-bottom: 24px;
}

.login-alt {
  margin: 16px 0 0;
  font-size: 13px;
}

.guild-picker-add {
  display: inline-block;
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.guild-picker-add:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

/* Glowing red wordmark, branded onto metal — a hot red-to-dark gradient fill (via
   background-clip: text) with a bright top edge suggesting an embossed/polished bevel, and a
   strong multi-layer red glow behind it through text-shadow (which reads the glyph shapes
   independently of the transparent fill color, so the glow still traces the letterforms). */
.brand-glow,
.settings-page::before {
  background: linear-gradient(180deg, #ff8a94 0%, var(--accent) 18%, var(--accent) 72%, #8c1420 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 -1px 2px rgba(0, 0, 0, 0.65),
    0 0 8px rgba(var(--accent-rgb), 0.35),
    0 0 24px rgba(var(--accent-rgb), 0.4),
    0 0 48px rgba(var(--accent-rgb), 0.25);
}

.brand-glow {
  font-family: 'Kaushan Script', 'Brush Script MT', cursive;
  display: inline-block;
  font-size: 44px;
  margin: 0 0 8px;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.button-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
}

.button-primary:hover {
  background: var(--accent-hover);
}

.page {
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.guild-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 480px;
}

.guild-list-item a {
  display: block;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.guild-list-item a:hover {
  border-color: var(--accent);
}

.empty-state {
  color: var(--text-dim);
}

.layout {
  display: flex;
  min-height: calc(100vh - 61px);
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.sidebar-guild-switcher {
  position: relative;
  padding: 0 20px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-guild-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.sidebar-guild-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-guild-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.sidebar-guild-switcher.open .sidebar-guild-chevron {
  transform: rotate(180deg);
}

.sidebar-guild-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  z-index: 20;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sidebar-guild-switcher.open .sidebar-guild-menu {
  display: block;
}

.sidebar-guild-menu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-guild-menu-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.sidebar-guild-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.sidebar-guild-menu-add {
  color: var(--accent);
  font-weight: 600;
}

.sidebar-featured-link {
  position: relative;
  display: block;
  margin: 0 20px 4px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  text-align: center;
}

.sidebar-featured-link:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.sidebar-featured-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: transparent;
}

/* Marks the pinned Overview link as its own thing, separate from the collapsible groups below —
   previously that separation came from a second pinned button (Quick Setup) plus a hint paragraph
   underneath both; removing them left Overview sitting almost flush against the first group label,
   reading as if it were part of that group instead of a standalone top-level link. */
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 20px 12px;
}

.sidebar-groups {
  flex: 1;
}

.sidebar-group {
  margin-bottom: 6px;
}

.sidebar-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.sidebar-group-label:hover {
  color: var(--accent-hover);
}

.sidebar-group-chevron {
  font-size: 9px;
  transition: transform 0.15s ease;
}

.sidebar-group.collapsed .sidebar-group-chevron {
  transform: rotate(-90deg);
}

.sidebar-group.collapsed .sidebar-nav {
  display: none;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  position: relative;
}

.sidebar-nav a {
  display: block;
  padding: 10px 20px;
  color: var(--text-dim);
}

.sidebar-nav a:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.sidebar-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}

/* Hoverable "sneak peek" tooltip, shared by sidebar-nav links and the featured Overview link —
   floats to the right of the sidebar since there's no room inside it. */
.sidebar-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 30;
  width: 220px;
  margin-left: 8px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

a:hover > .sidebar-tooltip,
a:focus-visible > .sidebar-tooltip {
  display: flex;
}

.sidebar-tooltip-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.3;
}

.sidebar-tooltip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-dim);
}

.sidebar-tooltip-text strong {
  color: var(--text);
  font-size: 13px;
}

.settings-page {
  flex: 1;
  max-width: none;
  position: relative;
  overflow: hidden;
}

.settings-page::before {
  font-family: 'Great Vibes', cursive;
  content: 'ariOS';
  /* Fixed, not absolute: .settings-page is a flex child of .layout, which stretches every
     column to match whichever is tallest (sidebar or content) — so a size centered via
     absolute+top:50% shifted every time the sidebar's expanded/collapsed groups changed its
     own stretched height. Anchoring to the viewport instead makes it immune to either
     column's height, and to how far the page scrolls. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 240px;
  line-height: 1;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* Keeps real content painting above the watermark regardless of DOM/stacking order. */
.settings-page > * {
  position: relative;
  z-index: 1;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.settings-header h1 {
  margin: 0;
  font-size: 22px;
}

.save-indicator {
  font-size: 13px;
  color: var(--success);
  background: rgba(46, 204, 113, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
}

.save-indicator.save-error {
  color: var(--danger);
  background: rgba(255, 107, 53, 0.12);
}

.settings-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

/* One zone's card grid on the per-section detail-page (section.ejs) — previously relied on
   display:grid cascading down from the shared .settings-form rule when both classes lived on the
   same <form> element; now applied to each zone <div> on its own (see .settings-form-zones
   below), so it needs its own display:grid rather than inheriting one. */
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  max-width: none;
  align-items: start;
}

/* The outer <form> on section.ejs: a plain vertical stack of zone grids (each its own
   .settings-form-grid below), not a grid itself — a toggle field and a text field never share a
   row because they're rendered into separate zone containers whenever the field type changes. */
.settings-form-zones {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: none;
}

/* Past this width there's room for a 4th+ column of 260px cards — instead of packing more
   in per row, lock to 3 and let those columns grow wider to fill the space. */
@media (min-width: 900px) {
  .settings-form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.settings-form-grid .field-textarea,
.settings-form-grid .field-file {
  grid-column: 1 / -1;
}

.field {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.field-boolean {
  display: flex;
  align-items: center;
  gap: 14px;
}

.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.field-boolean .field-label {
  margin-bottom: 2px;
}

.range-field-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-slider {
  flex: 1;
  accent-color: var(--accent);
}

/* Extra specificity (not just .range-number) is load-bearing: input[type='number'] below sets
   width:100% at equal specificity to a bare .range-number, and since that generic rule comes
   later in the file it would otherwise win the tie — ballooning this to fill the row and
   squeezing .range-slider down to almost nothing. */
.range-field-controls .range-number {
  width: 80px;
  flex-shrink: 0;
}

.category-group {
  margin-bottom: 20px;
}

.category-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  margin-bottom: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.category-label:hover {
  color: var(--accent);
}

.category-chevron {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.category-group.collapsed .category-chevron {
  transform: rotate(-90deg);
}

.category-group.collapsed .category-body {
  display: none;
}

/* While a search is active, a matching row inside a manually-collapsed category must still be
   reachable — see commands.js's `isSearching` branch, which toggles this class independently of
   the user's own .collapsed choice (left untouched so it's restored once the search is cleared). */
.category-group.collapsed.force-expanded .category-body {
  display: grid;
}

.toggle-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-card-row .field-text {
  flex: 1;
}

.toggle-card-row .field-label {
  margin-bottom: 2px;
}

.cog-button {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.cog-button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.cog-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 5, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.toggle-modal-backdrop[hidden] {
  display: none;
}

.toggle-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
}

.toggle-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.toggle-modal-header h2 {
  margin: 0;
  font-size: 17px;
}

.toggle-modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.toggle-modal-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

.toggle-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-modal-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.field-help {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
}

.icon-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-upload-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.icon-upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

input[type='text'],
input[type='number'],
input[type='search'],
select,
textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-with-create {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-with-create select,
.field-with-create input {
  flex: 1;
}

.button-create-entity {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-dim);
}

.button-create-entity:hover {
  color: var(--text);
  border-color: var(--accent);
}

.button-create-entity:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button-create-entity:disabled {
  opacity: 0.5;
  cursor: default;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.15s;
}

.switch-track::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}

.switch input:checked + .switch-track {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: var(--accent);
}

.switch input:checked + .switch-track::before {
  transform: translateX(18px);
  background: #fff;
}

.section-help {
  color: var(--text-dim);
  margin: -8px 0 20px;
  max-width: 640px;
}

.list-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}

.list-table th,
.list-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.list-table tr:last-child td {
  border-bottom: none;
}

.list-table th {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

.list-add-heading {
  font-size: 16px;
  margin: 0 0 14px;
}

.list-add-form {
  max-width: 640px;
}

.list-add-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.button-danger {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger);
}

.button-danger:hover {
  border-color: var(--danger);
  background: rgba(255, 107, 53, 0.12);
}

.button-danger:disabled {
  opacity: 0.5;
  cursor: default;
}

.file-field-status {
  margin-bottom: 10px;
}

.file-field-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  color: var(--success);
  background: rgba(46, 204, 113, 0.12);
}

.file-field-badge-default {
  color: var(--text-dim);
  background: var(--bg-alt);
}

.welcome-bg-preview {
  display: block;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}

.file-field-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.file-field-actions input[type='file'] {
  flex: 1;
  min-width: 180px;
  color: var(--text-dim);
  font-size: 13px;
}

.webhook-field {
  margin-bottom: 20px;
}

.webhook-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.webhook-value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.webhook-value code {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
}

.code-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
}

.emoji-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emoji-field-row input {
  flex: 1;
}

.emoji-preview {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  font-size: 18px;
}

.emoji-preview img {
  width: 22px;
  height: 22px;
}

.emoji-picker-modal {
  max-width: 480px;
}

.emoji-picker-search {
  margin-bottom: 12px;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.emoji-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--bg-alt);
  cursor: pointer;
}

.emoji-picker-item:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}

.emoji-picker-item img {
  width: 24px;
  height: 24px;
}

.emoji-picker-glyph {
  font-size: 20px;
  line-height: 1;
}

.emoji-picker-item[hidden] {
  display: none;
}

.admin-page .settings-header {
  margin-top: 28px;
}

.admin-page .settings-header:first-child {
  margin-top: 0;
}

.admin-page h2 {
  font-size: 16px;
  margin: 0;
}

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

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.category-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.category-tab:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.category-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: transparent;
}

.category-block {
  margin-bottom: 24px;
}

.category-block-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  color: var(--text);
}

.feature-card:hover {
  border-color: var(--accent);
}

.feature-card-icon {
  font-size: 22px;
  margin-bottom: 4px;
}

.feature-card-title {
  font-weight: 700;
}

.feature-card-blurb {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}

.feature-card-action {
  margin-top: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.admin-guild-search {
  width: 100%;
  max-width: 360px;
  margin-bottom: 12px;
}

.admin-entitlements-blurb {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 640px;
  margin: 0 0 16px;
}

.admin-entitlements-defaults-note {
  color: var(--accent, #e0293d);
  font-weight: 600;
}

.admin-entitlements-master {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
}

.admin-entitlements-section-heading {
  font-size: 18px;
  margin: 28px 0 8px;
}

.admin-entitlements-section-heading:first-of-type {
  margin-top: 0;
}

.admin-entitlements-group {
  margin-bottom: 20px;
}

.admin-entitlements-group h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.admin-entitlements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.admin-entitlements-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.admin-entitlements-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.admin-entitlements-status {
  color: var(--text-dim);
  font-size: 13px;
}

.logs-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.logs-tabs a {
  padding: 8px 14px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
}

.logs-tabs a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.logs-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  color: var(--text-dim);
}

.release-note-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.release-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}

.release-note-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.release-note-date {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.release-note-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.release-note-tag-new {
  color: var(--success);
  background: rgba(46, 204, 113, 0.12);
}

.release-note-tag-improved {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}

.release-note-tag-fixed {
  color: var(--text-dim);
  background: var(--bg-alt);
}

.release-note-title {
  margin: 0 0 6px;
  font-size: 17px;
}

.release-note-description {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---- Collectr Portfolio ---- */
.binder-page {
  max-width: 1400px;
}

.binder-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.binder-disconnect-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

.binder-disconnect-link:hover {
  color: var(--accent);
}

.binder-refresh-status {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.binder-connect-card {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.binder-connect-card label {
  font-weight: 600;
  font-size: 13px;
}

.binder-connect-status {
  font-size: 13px;
  color: var(--text-dim);
}

.binder-value-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}

.binder-value-amount {
  font-size: 36px;
  font-weight: 700;
}

.binder-value-delta {
  font-size: 14px;
  font-weight: 600;
}

.binder-value-up {
  color: var(--success);
}

.binder-value-down {
  color: var(--danger);
}

.binder-chart {
  width: 100%;
  height: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
}

.binder-chart-line {
  stroke: var(--accent);
}

.binder-chart-range {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.binder-holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.binder-holding-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.binder-holding-image {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 4px;
}

.binder-holding-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.binder-holding-meta {
  color: var(--text-dim);
  font-size: 12px;
}

.binder-holding-price {
  color: var(--success);
  font-weight: 700;
  font-size: 13px;
}

.binder-movers-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.binder-movers-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.binder-movers-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.binder-mover-name {
  font-size: 13px;
  font-weight: 600;
}

.binder-mover-change {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Mobile (<=860px) ----
   The sidebar's fixed 220px column has no room to coexist with content below this width, so it
   becomes an off-canvas drawer toggled by the hamburger button (public/js/sidebar.js), rather
   than squeezing .settings-page down further. Grids elsewhere (.stat-grid, .card-grid,
   .settings-form-grid, .toggle-modal-body) already use auto-fill/auto-fit minmax() tracks and
   collapse to a single column on their own — no override needed for those. */
@media (max-width: 860px) {
  body:has(.sidebar) .topbar-menu-toggle {
    display: flex;
  }

  /* Grid instead of flex+space-between: with the hamburger now visible, space-between pins the
     brand off-center (unevenly offset by the hamburger vs. topbar-user's differing widths).
     Explicit 1fr/auto/1fr columns keep the two flanking tracks equal width regardless of either
     side's actual content width, so the brand column is always true-centered in the bar. Desktop
     keeps its original flex+space-between layout untouched — this is mobile-only. */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 14px 16px;
  }

  .topbar-menu-toggle {
    grid-column: 1;
    justify-self: start;
  }

  .topbar-brand {
    grid-column: 2;
    justify-self: center;
  }

  .topbar-user {
    grid-column: 3;
    justify-self: end;
  }

  .topbar-username {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 61px;
    left: 0;
    bottom: 0;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.open {
    display: block;
  }

  /* The "sneak peek" tooltip only exists because the desktop sidebar has no room for inline
     blurbs — on mobile there's no real :hover, and a tapped link's :focus-visible state can
     stick, popping the tooltip open. Since .sidebar is position:fixed here (for the drawer), it
     becomes the tooltip's containing block instead of the link, so an open tooltip renders as
     part of the sidebar's own scrollable content and widens it. Simplest correct fix: tooltips
     just don't apply to touch, so disable the trigger entirely under this breakpoint. */
  a:hover > .sidebar-tooltip,
  a:focus-visible > .sidebar-tooltip {
    display: none;
  }

  .page,
  .settings-page {
    padding: 20px 16px;
  }

  .settings-page::before {
    font-size: 130px;
  }

  /* overflow-x doesn't take effect on a display:table box in most engines — display:block makes
     the table itself a scroll container, while tr/td (still table-row/table-cell by UA default)
     get fixed up into an anonymous table so the grid layout is unaffected. white-space inherits
     into th/td, forcing content to its natural width instead of wrapping cramped columns. */
  .list-table,
  .admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ── Announcements builder ──────────────────────────────────────────────── */

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.announcement-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 24px;
  align-items: start;
}

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

.announcement-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.announce-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announce-color-row input[type='color'] {
  width: 44px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
}

.announce-color-row input[type='text'] {
  width: 100px;
}

.announce-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.announce-field-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.announcement-preview-wrap {
  position: sticky;
  top: 16px;
}

.announcement-preview-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* A close visual match to Discord's own dark-mode embed rendering — deliberately its own fixed
   palette (not this dashboard's --bg/--accent theme vars), since that's what it'll actually look
   like once posted, regardless of which theme the person building it is viewing the dashboard in. */
.discord-embed-preview {
  display: flex;
  background: #2b2d31;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'gg sans', 'Segoe UI', sans-serif;
  max-width: 432px;
}

.discord-embed-bar {
  width: 4px;
  flex-shrink: 0;
  background: #5865f2;
}

.discord-embed-body {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  position: relative;
}

.discord-embed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f2f3f5;
}

.discord-embed-author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.discord-embed-title {
  font-size: 16px;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 8px;
}

.discord-embed-description {
  font-size: 14px;
  line-height: 1.4;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}

.discord-embed-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.discord-embed-field {
  grid-column: 1 / -1;
}

.discord-embed-field-inline {
  grid-column: span 1;
}

.discord-embed-field-name {
  font-size: 13px;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 2px;
}

.discord-embed-field-value {
  font-size: 13px;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}

.discord-embed-image {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  margin-top: 12px;
}

.discord-embed-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin: 12px 16px 0 0;
  align-self: flex-start;
}

.discord-embed-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: #dbdee1;
}

.discord-embed-footer img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.announcements-scheduled-heading {
  margin-top: 32px;
  margin-bottom: 12px;
}