/* ==========================================================================
   Discord Buddy design system
   --------------------------------------------------------------------------
   Every color lives in a token below and is defined twice: once for light
   mode and once for dark mode. The theme is chosen by the inline script in
   header.php (stored choice, else the visitor's OS setting) and applied as
   <html data-bs-theme="light|dark">, which Bootstrap 5.3 also understands.

   Rules for page code (see DESIGN.md next to this template):
   - Never hardcode hex colors in views; use a token or a Bootstrap utility
     that is theme-aware (text-body, text-body-secondary, bg-body-tertiary...).
   - Avoid .bg-dark / .text-white / .btn-outline-light / .table-dark for page
     chrome. They are remapped below as a safety net only.
   ========================================================================== */

/* Inter (variable, Latin), self-hosted so no font request goes to a third party before
   cookie consent. OFL licence: ../fonts/inter-license.txt. Keep the ?v= in sync with the
   <link rel="preload"> in header.php, or the browser fetches the file twice. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2?v=5.1.0") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Shape */
  --db-radius-xs: .25rem;
  --db-radius-sm: .375rem;
  --db-radius: .5rem;
  --db-radius-lg: .75rem;
  --db-radius-xl: 1rem;
  --db-radius-pill: 999px;
  /* Layout */
  --db-nav-height: 64px;
  --db-sidebar-icons: 72px;
  --db-sidebar-nav: 260px;
  --dashboard-rail-width: 332px;
  --db-container-max: 1240px;
  /* Motion */
  --db-transition-fast: .15s ease;
  --db-transition: .2s ease-in-out;
  /* Type */
  --db-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --db-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Brand (same in both themes) */
  --db-blurple: #5865f2;
  --db-blurple-600: #4752c4;
  --db-green: #23a55a;
  --db-on-accent: #ffffff;
}

/* ---------- Light theme (default) ---------- */
:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --db-bg: #f5f6fa;
  --db-bg-gradient: none;
  --db-surface: #ffffff;
  --db-surface-alt: #f3f4f8;
  --db-surface-raised: #eceef4;
  --db-surface-hover: #e6e9f1;
  --db-border: #e2e5ed;
  --db-border-strong: #cfd4df;
  --db-text: #3a4252;
  --db-text-strong: #0f1729;
  --db-text-muted: #5f6b7e;
  --db-accent: var(--db-blurple);
  --db-accent-hover: var(--db-blurple-600);
  --db-accent-soft: #4752c4;
  --db-accent-subtle: #eef0fe;
  --db-accent-border: #c5cafb;
  --db-glow: rgba(88, 101, 242, .12);
  --db-success: #177a41;
  --db-success-subtle: #e6f6ec;
  --db-warning: #a15c07;
  --db-warning-subtle: #fdf3e1;
  --db-danger: #c4314b;
  --db-danger-subtle: #fdecef;
  --db-premium-gold: #8a5700;
  --db-premium-teal: #0a6b56;
  --db-premium-border: #b9e4d8;
  --db-premium-bg: linear-gradient(135deg, #ecfaf5, #f4f6ff);
  --db-premium-surface: #f3fbf8;
  --db-premium-text: #134e40;
  --db-navbar-bg: rgba(255, 255, 255, .86);
  --db-shadow-xs: 0 1px 2px rgba(15, 23, 41, .05);
  --db-shadow-sm: 0 1px 2px rgba(15, 23, 41, .04), 0 2px 8px rgba(15, 23, 41, .06);
  --db-shadow-lg: 0 12px 32px rgba(15, 23, 41, .10);
  --db-overlay: rgba(245, 246, 250, .78);
  --db-code-bg: #f1f2f7;
  --db-scroll-thumb: #c9ceda;
}

/* ---------- Dark theme ---------- */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --db-bg: #0d0f14;
  --db-bg-gradient: none;
  --db-surface: #151821;
  --db-surface-alt: #11131a;
  --db-surface-raised: #1c202b;
  --db-surface-hover: #232836;
  --db-border: #252a36;
  --db-border-strong: #343b4b;
  --db-text: #c6ccd8;
  --db-text-strong: #f3f5f9;
  --db-text-muted: #8f98a9;
  --db-accent: var(--db-blurple);
  --db-accent-hover: #6b76f5;
  --db-accent-soft: #959dff;
  --db-accent-subtle: rgba(88, 101, 242, .16);
  --db-accent-border: #3e4697;
  --db-glow: rgba(88, 101, 242, .22);
  --db-success: #3ccf7e;
  --db-success-subtle: rgba(35, 165, 90, .15);
  --db-warning: #f0b429;
  --db-warning-subtle: rgba(240, 180, 41, .14);
  --db-danger: #f2697c;
  --db-danger-subtle: rgba(242, 63, 67, .15);
  --db-premium-gold: #ffd166;
  --db-premium-teal: #6ee7c8;
  --db-premium-border: #245145;
  --db-premium-bg: linear-gradient(135deg, #0f201d, #141a2a);
  --db-premium-surface: #101b1a;
  --db-premium-text: #d9f7ee;
  --db-navbar-bg: rgba(17, 19, 26, .82);
  --db-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --db-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --db-shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
  --db-overlay: rgba(8, 9, 13, .75);
  --db-code-bg: #1b1f2a;
  --db-scroll-thumb: #363d4d;
}

/* ---------- Bridge tokens into Bootstrap (both themes) ---------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--db-font-sans);
  --bs-font-monospace: var(--db-font-mono);
  --bs-body-bg: var(--db-bg);
  --bs-body-color: var(--db-text);
  --bs-emphasis-color: var(--db-text-strong);
  --bs-heading-color: var(--db-text-strong);
  --bs-secondary-color: var(--db-text-muted);
  --bs-secondary-bg: var(--db-surface-raised);
  --bs-tertiary-bg: var(--db-surface-alt);
  --bs-border-color: var(--db-border);
  --bs-border-color-translucent: var(--db-border);
  --bs-link-color: var(--db-accent-soft);
  --bs-link-hover-color: var(--db-accent-hover);
  --bs-primary: var(--db-accent);
  --bs-primary-rgb: 88, 101, 242;
  --bs-border-radius: var(--db-radius-sm);
  --bs-border-radius-lg: var(--db-radius);
  --bs-card-bg: var(--db-surface);
  --bs-code-color: var(--db-accent-soft);
  --bs-focus-ring-color: var(--db-glow);
}

[data-bs-theme="light"] {
  /* Bootstrap 5.3 colours links from these RGB values (4.5:1+ on light surfaces) */
  --bs-link-color-rgb: 71, 82, 196;
  --bs-link-hover-color-rgb: 53, 63, 168;
  --bs-primary-text-emphasis: #353fa8;
  --bs-primary-bg-subtle: var(--db-accent-subtle);
  --bs-primary-border-subtle: var(--db-accent-border);
}

[data-bs-theme="dark"] {
  /* Lighter accent for links on dark surfaces (4.5:1+) */
  --bs-link-color-rgb: 149, 157, 255;
  --bs-link-hover-color-rgb: 184, 190, 255;
  --bs-primary-text-emphasis: #aeb4ff;
  --bs-primary-bg-subtle: var(--db-accent-subtle);
  --bs-primary-border-subtle: var(--db-accent-border);
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  scroll-padding-top: calc(var(--db-nav-height) + 1rem);
}

body {
  padding-top: var(--db-nav-height);
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--db-bg-gradient), var(--db-bg);
  background-repeat: no-repeat;
  color: var(--db-text);
  font-family: var(--db-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body > .main-footer {
  margin-top: auto !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--db-text-strong);
  font-weight: 700;
  letter-spacing: -.01em;
}

.display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -.025em;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

a:link, a:visited, a:hover, a:active { text-decoration: none; }

a,
.btn,
.card,
.nav-link,
.dropdown-item {
  transition: color var(--db-transition), background-color var(--db-transition), border-color var(--db-transition), box-shadow var(--db-transition);
}

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

::selection {
  background: var(--db-accent-subtle);
}

code {
  background: var(--db-code-bg);
  border-radius: var(--db-radius-xs);
  padding: .1em .35em;
  font-size: .875em;
}

pre code {
  background: transparent;
  padding: 0;
}

hr {
  border-color: var(--db-border);
  opacity: 1;
}

.text-muted,
.text-body-secondary {
  color: var(--db-text-muted) !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--db-accent);
  color: var(--db-on-accent) !important;
  padding: .5rem 1rem;
  border-radius: var(--db-radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: .75rem;
}

.uc-active {
  background-color: var(--bs-body-bg);
  border-bottom-color: var(--bs-body-bg);
  border-left-color: var(--bs-border-color-translucent);
  border-right-color: var(--bs-border-color-translucent);
  border-top-color: var(--bs-border-color-translucent);
}

.uc-verified {
  color: var(--db-success);
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--db-scroll-thumb) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--db-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--db-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--db-text-muted);
}

/* ==========================================================================
   Bootstrap component theming
   ========================================================================== */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--db-radius-sm);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--db-glow);
}

.btn-lg {
  --bs-btn-border-radius: var(--db-radius);
}

.btn-primary {
  --bs-btn-bg: var(--db-accent);
  --bs-btn-border-color: var(--db-accent);
  --bs-btn-hover-bg: var(--db-accent-hover);
  --bs-btn-hover-border-color: var(--db-accent-hover);
  --bs-btn-active-bg: var(--db-accent-hover);
  --bs-btn-active-border-color: var(--db-accent-hover);
  --bs-btn-disabled-bg: var(--db-accent);
  --bs-btn-disabled-border-color: var(--db-accent);
  --bs-btn-color: var(--db-on-accent);
  --bs-btn-hover-color: var(--db-on-accent);
  --bs-btn-active-color: var(--db-on-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--db-accent-soft);
  --bs-btn-border-color: var(--db-accent-border);
  --bs-btn-hover-bg: var(--db-accent);
  --bs-btn-hover-border-color: var(--db-accent);
  --bs-btn-hover-color: var(--db-on-accent);
  --bs-btn-active-bg: var(--db-accent-hover);
  --bs-btn-active-border-color: var(--db-accent-hover);
  --bs-btn-active-color: var(--db-on-accent);
}

.btn-success {
  --bs-btn-bg: var(--db-green);
  --bs-btn-border-color: var(--db-green);
  --bs-btn-hover-bg: #1d8c4c;
  --bs-btn-hover-border-color: #1d8c4c;
  --bs-btn-active-bg: #1a7d44;
  --bs-btn-active-border-color: #1a7d44;
}

/* Neutral "secondary" outline used for most low-emphasis actions */
.btn-outline-secondary {
  --bs-btn-color: var(--db-text-strong);
  --bs-btn-border-color: var(--db-border-strong);
  --bs-btn-hover-bg: var(--db-surface-hover);
  --bs-btn-hover-border-color: var(--db-border-strong);
  --bs-btn-hover-color: var(--db-text-strong);
  --bs-btn-active-bg: var(--db-surface-hover);
  --bs-btn-active-border-color: var(--db-border-strong);
  --bs-btn-active-color: var(--db-text-strong);
}

.btn-ghost {
  --bs-btn-color: var(--db-text);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--db-surface-hover);
  --bs-btn-hover-color: var(--db-text-strong);
  --bs-btn-active-bg: var(--db-surface-hover);
  --bs-btn-active-color: var(--db-text-strong);
}

.card {
  --bs-card-bg: var(--db-surface);
  --bs-card-border-color: var(--db-border);
  --bs-card-border-radius: var(--db-radius);
  --bs-card-inner-border-radius: calc(var(--db-radius) - 1px);
  --bs-card-cap-bg: var(--db-surface-alt);
  --bs-card-color: var(--db-text);
}

.modal {
  --bs-modal-bg: var(--db-surface);
  --bs-modal-border-color: var(--db-border);
  --bs-modal-border-radius: var(--db-radius-lg);
  --bs-modal-header-border-color: var(--db-border);
  --bs-modal-footer-border-color: var(--db-border);
  --bs-modal-color: var(--db-text);
}

.modal-backdrop {
  --bs-backdrop-bg: #05060a;
  --bs-backdrop-opacity: .55;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--db-surface);
  --bs-dropdown-border-color: var(--db-border);
  --bs-dropdown-border-radius: var(--db-radius);
  --bs-dropdown-link-color: var(--db-text);
  --bs-dropdown-link-hover-bg: var(--db-surface-hover);
  --bs-dropdown-link-hover-color: var(--db-text-strong);
  --bs-dropdown-link-active-bg: var(--db-accent);
  --bs-dropdown-link-active-color: var(--db-on-accent);
  --bs-dropdown-header-color: var(--db-text-muted);
  --bs-dropdown-divider-bg: var(--db-border);
  --bs-dropdown-box-shadow: var(--db-shadow-lg);
  --bs-dropdown-item-border-radius: var(--db-radius-sm);
  padding: .4rem;
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  border-radius: var(--db-radius-sm);
  padding: .45rem .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.dropdown-item .bi {
  color: var(--db-text-muted);
  width: 1.1rem;
  text-align: center;
}

.dropdown-item.active .bi,
.dropdown-item:active .bi {
  color: inherit;
}

.offcanvas {
  --bs-offcanvas-bg: var(--db-surface);
  --bs-offcanvas-color: var(--db-text);
  --bs-offcanvas-border-color: var(--db-border);
}

.list-group {
  --bs-list-group-bg: var(--db-surface);
  --bs-list-group-color: var(--db-text);
  --bs-list-group-border-color: var(--db-border);
  --bs-list-group-action-hover-bg: var(--db-surface-hover);
  --bs-list-group-action-hover-color: var(--db-text-strong);
  --bs-list-group-active-bg: var(--db-accent);
  --bs-list-group-active-border-color: var(--db-accent);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--db-border);
  --bs-nav-tabs-link-hover-border-color: var(--db-border) var(--db-border) var(--db-border);
  --bs-nav-tabs-link-active-color: var(--db-text-strong);
  --bs-nav-tabs-link-active-bg: var(--db-surface);
  --bs-nav-tabs-link-active-border-color: var(--db-border) var(--db-border) var(--db-surface);
}

.nav-tabs .nav-link {
  color: var(--db-text-muted);
  font-weight: 500;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--db-accent);
  --bs-nav-pills-link-active-color: var(--db-on-accent);
}

.nav-pills .nav-link {
  color: var(--db-text-muted);
  font-weight: 500;
}

.nav-pills .nav-link:hover {
  color: var(--db-text-strong);
}

.pagination {
  --bs-pagination-bg: var(--db-surface);
  --bs-pagination-color: var(--db-text);
  --bs-pagination-border-color: var(--db-border);
  --bs-pagination-hover-bg: var(--db-surface-hover);
  --bs-pagination-hover-color: var(--db-text-strong);
  --bs-pagination-hover-border-color: var(--db-border);
  --bs-pagination-active-bg: var(--db-accent);
  --bs-pagination-active-border-color: var(--db-accent);
  --bs-pagination-disabled-bg: var(--db-surface-alt);
  --bs-pagination-disabled-color: var(--db-text-muted);
  --bs-pagination-disabled-border-color: var(--db-border);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--db-glow);
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination .page-link {
  border-radius: var(--db-radius-sm) !important;
  min-width: 2.4rem;
  text-align: center;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--db-text-muted);
  --bs-breadcrumb-item-active-color: var(--db-text-muted);
  font-size: .875rem;
}

.breadcrumb a {
  color: var(--db-text-muted);
}

.breadcrumb a:hover {
  color: var(--db-accent-soft);
}

.accordion {
  --bs-accordion-bg: var(--db-surface);
  --bs-accordion-color: var(--db-text);
  --bs-accordion-border-color: var(--db-border);
  --bs-accordion-btn-color: var(--db-text-strong);
  --bs-accordion-active-bg: var(--db-surface-alt);
  --bs-accordion-active-color: var(--db-text-strong);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--db-glow);
  --bs-accordion-border-radius: var(--db-radius);
  --bs-accordion-inner-border-radius: calc(var(--db-radius) - 1px);
}

.alert {
  --bs-alert-border-radius: var(--db-radius);
}

.badge {
  font-weight: 600;
  letter-spacing: .01em;
}

.tooltip {
  --bs-tooltip-bg: var(--db-text-strong);
  --bs-tooltip-color: var(--db-surface);
}

.popover {
  --bs-popover-bg: var(--db-surface);
  --bs-popover-border-color: var(--db-border);
  --bs-popover-header-bg: var(--db-surface-alt);
  --bs-popover-header-color: var(--db-text-strong);
  --bs-popover-body-color: var(--db-text);
}

.progress {
  --bs-progress-bg: var(--db-surface-raised);
  --bs-progress-bar-bg: var(--db-accent);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--db-surface);
  border-color: var(--db-border-strong);
  color: var(--db-text-strong);
  border-radius: var(--db-radius-sm);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--db-surface);
  border-color: var(--db-accent);
  color: var(--db-text-strong);
  box-shadow: 0 0 0 .25rem var(--db-glow);
}

.form-control::placeholder {
  color: var(--db-text-muted);
  opacity: .85;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--db-surface-alt);
}

.form-check-input {
  background-color: var(--db-surface);
  border-color: var(--db-border-strong);
}

.form-check-input:checked {
  background-color: var(--db-accent);
  border-color: var(--db-accent);
}

.form-check-input:focus {
  border-color: var(--db-accent);
  box-shadow: 0 0 0 .25rem var(--db-glow);
}

.form-range::-webkit-slider-thumb { background-color: var(--db-accent); }
.form-range::-moz-range-thumb { background-color: var(--db-accent); }

.input-group-text {
  background-color: var(--db-surface-alt);
  border-color: var(--db-border-strong);
  color: var(--db-text-muted);
}

.form-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--db-text-strong);
  margin-bottom: .35rem;
}

.form-text {
  color: var(--db-text-muted);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--db-text);
  --bs-table-border-color: var(--db-border);
  --bs-table-striped-bg: var(--db-surface-alt);
  --bs-table-striped-color: var(--db-text);
  --bs-table-hover-bg: var(--db-surface-hover);
  --bs-table-hover-color: var(--db-text-strong);
  --bs-table-active-bg: var(--db-surface-raised);
  border-color: var(--db-border);
}

.table > thead > tr > th,
.table > thead th {
  color: var(--db-text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--db-border-strong);
  white-space: nowrap;
}

.table > :not(caption) > * > * {
  padding: .7rem .75rem;
  vertical-align: middle;
}

.table-responsive {
  border-radius: var(--db-radius);
}

.sortable-header,
th.sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-header::after {
  content: "\2195";
  display: inline-block;
  margin-left: .35rem;
  opacity: .35;
  font-size: .8em;
}

.sortable-header.sorted-asc::after {
  content: "\2191";
  opacity: 1;
  color: var(--db-accent-soft);
}

.sortable-header.sorted-desc::after {
  content: "\2193";
  opacity: 1;
  color: var(--db-accent-soft);
}

/* ==========================================================================
   Legacy dark-only classes -> theme-aware (safety net)
   New code should not rely on these.
   ========================================================================== */
.bg-dark,
.bg-dark.bg-gradient {
  background-color: var(--db-surface) !important;
  background-image: none !important;
  color: var(--db-text);
}

.bg-black {
  background-color: var(--db-surface-alt) !important;
}

.bg-dark.border,
.bg-dark .border,
.bg-dark.border-bottom,
.bg-dark .border-bottom {
  border-color: var(--db-border) !important;
}

.bg-dark.rounded,
.bg-dark .rounded {
  border-radius: var(--db-radius) !important;
}

.shadow.bg-dark,
.shadow-sm.bg-dark {
  box-shadow: var(--db-shadow-sm) !important;
}

.bg-dark .card,
.bg-dark .card-body,
.bg-dark .list-group-item {
  background-color: transparent;
  color: inherit;
  border-color: var(--db-border);
}

[data-bs-theme="light"] .btn-outline-light {
  --bs-btn-color: var(--db-text-strong);
  --bs-btn-border-color: var(--db-border-strong);
  --bs-btn-hover-bg: var(--db-surface-hover);
  --bs-btn-hover-border-color: var(--db-border-strong);
  --bs-btn-hover-color: var(--db-text-strong);
  --bs-btn-active-bg: var(--db-surface-hover);
  --bs-btn-active-color: var(--db-text-strong);
}

[data-bs-theme="light"] .btn-light {
  --bs-btn-bg: var(--db-surface-raised);
  --bs-btn-border-color: var(--db-border-strong);
}

[data-bs-theme="light"] .btn-dark {
  --bs-btn-bg: var(--db-surface-raised);
  --bs-btn-border-color: var(--db-border);
  --bs-btn-color: var(--db-text-strong);
  --bs-btn-hover-bg: var(--db-surface-hover);
  --bs-btn-hover-color: var(--db-text-strong);
}

[data-bs-theme="light"] .btn-close-white {
  filter: none;
}

[data-bs-theme="light"] .link-light {
  color: var(--db-text-strong) !important;
}

.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--db-text);
  --bs-table-border-color: var(--db-border);
  --bs-table-striped-bg: var(--db-surface-alt);
  --bs-table-striped-color: var(--db-text);
  --bs-table-hover-bg: var(--db-surface-hover);
  --bs-table-hover-color: var(--db-text-strong);
  --bs-table-active-bg: var(--db-surface-raised);
  --bs-table-active-color: var(--db-text-strong);
  border-color: var(--db-border);
  color: var(--db-text);
}

/* .text-white / .text-light on headings or plain text inside surfaces */
[data-bs-theme="light"] :is(h1, h2, h3, h4, h5, h6, p, span, div, strong, small, label, li, td, th).text-white:not(.badge):not(.btn):not([class*="bg-"]),
[data-bs-theme="light"] :is(h1, h2, h3, h4, h5, h6, p, span, div, strong, small, label, li, td, th).text-light:not(.badge):not(.btn):not([class*="bg-"]) {
  color: var(--db-text-strong) !important;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.db-navbar {
  min-height: var(--db-nav-height);
  background: var(--db-navbar-bg);
  border-bottom: 1px solid var(--db-border);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  padding-top: .5rem;
  padding-bottom: .5rem;
  z-index: 1030;
}

.db-navbar .container-fluid {
  max-width: 1440px;
}

/* Dashboard (ManageDiscord) spans the full window, so the top bar does too. */
body.is-dashboard .db-navbar .container-fluid {
  max-width: none;
}

.db-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--db-text-strong) !important;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  margin-right: 1.25rem;
}

.db-brand img {
  height: 38px;
  width: 38px;
  object-fit: contain;
}

.db-brand span small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--db-text-muted);
  text-transform: uppercase;
  margin-top: -2px;
}

.db-navbar .navbar-nav .nav-link {
  color: var(--db-text);
  font-weight: 600;
  font-size: .94rem;
  padding: .45rem .75rem;
  border-radius: var(--db-radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.db-navbar .navbar-nav .nav-link:hover,
.db-navbar .navbar-nav .nav-link:focus-visible {
  color: var(--db-text-strong);
  background: var(--db-surface-hover);
}

.db-navbar .navbar-nav .nav-link.active {
  color: var(--db-accent-soft);
  background: var(--db-accent-subtle);
}

.db-navbar .navbar-toggler {
  border: 1px solid var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  padding: .35rem .55rem;
  color: var(--db-text-strong);
}

.db-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem var(--db-glow);
}

.db-navbar .navbar-toggler .bi {
  font-size: 1.4rem;
}

.db-nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.db-nav-actions .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.db-nav-search {
  position: relative;
  min-width: 240px;
  max-width: 340px;
  flex: 1 1 260px;
}

.db-nav-search .bi-search {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-text-muted);
  pointer-events: none;
}

.db-nav-search input {
  padding-left: 2.25rem;
  border-radius: var(--db-radius-pill);
  background: var(--db-surface-alt);
  border-color: var(--db-border);
  height: 38px;
  font-size: .92rem;
}

.db-nav-search input:focus {
  background: var(--db-surface);
}

.db-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--db-radius-pill);
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  color: var(--db-text);
  padding: 0;
}

.db-icon-btn:hover,
.db-icon-btn:focus-visible,
.db-icon-btn[aria-expanded="true"] {
  background: var(--db-surface-hover);
  color: var(--db-text-strong);
}

.db-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 3px 10px 3px 3px;
  border-radius: var(--db-radius-pill);
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  color: var(--db-text-strong) !important;
  font-weight: 600;
  font-size: .9rem;
}

.db-avatar-btn:hover,
.db-avatar-btn[aria-expanded="true"] {
  background: var(--db-surface-hover);
}

.db-avatar-btn img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.db-user-menu {
  min-width: 260px;
}

.db-user-menu .db-user-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem .7rem;
}

.db-user-menu .db-user-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.db-user-menu .db-user-head strong {
  display: block;
  color: var(--db-text-strong);
  line-height: 1.2;
}

.db-user-menu .db-user-head small {
  color: var(--db-text-muted);
}

/* Theme toggle menu: check mark on the active choice */
.db-theme-menu .dropdown-item .db-check {
  margin-left: auto;
  opacity: 0;
}

.db-theme-menu .dropdown-item.active .db-check {
  opacity: 1;
}

[data-bs-theme="light"] .db-theme-icon-dark,
[data-bs-theme="dark"] .db-theme-icon-light {
  display: none;
}

@media (max-width: 991.98px) {
  .db-navbar .navbar-collapse {
    margin-top: .5rem;
    padding: .75rem 0 .5rem;
    border-top: 1px solid var(--db-border);
    max-height: calc(100vh - var(--db-nav-height));
    overflow-y: auto;
  }

  .db-navbar .navbar-nav .nav-link {
    padding: .65rem .75rem;
    font-size: 1rem;
  }

  .db-nav-search {
    max-width: none;
    width: 100%;
    margin: .5rem 0;
  }

  .db-nav-actions {
    flex-wrap: wrap;
    padding-top: .5rem;
  }
}

/* Mega dropdown for "Bot features" */
.db-mega {
  min-width: 560px;
  padding: .75rem;
}

.db-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
}

.db-mega a.db-mega-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .6rem .7rem;
  border-radius: var(--db-radius-sm);
  color: var(--db-text);
}

.db-mega a.db-mega-item:hover {
  background: var(--db-surface-hover);
}

.db-mega a.db-mega-item strong {
  display: block;
  color: var(--db-text-strong);
  font-size: .92rem;
}

.db-mega a.db-mega-item small {
  display: block;
  color: var(--db-text-muted);
  line-height: 1.35;
}

.db-mega-foot {
  border-top: 1px solid var(--db-border);
  margin-top: .5rem;
  padding: .6rem .7rem 0;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .9rem;
}

@media (max-width: 991.98px) {
  .db-mega {
    min-width: 0;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 .5rem;
  }

  .db-mega-grid {
    grid-template-columns: 1fr;
  }
}

/* Site-wide notice bar (premium prompt) */
.premium-site-prompt {
  background: var(--db-premium-bg);
  border-bottom: 1px solid var(--db-premium-border);
  color: var(--db-premium-text);
  padding: .55rem 0;
  font-size: .9rem;
  position: relative;
  z-index: 2;
}

.premium-site-prompt i,
.premium-kicker {
  color: var(--db-premium-teal);
}

.premium-site-prompt .btn {
  --bs-btn-padding-y: .2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.main-footer {
  background-color: var(--db-surface);
  border-top: 1px solid var(--db-border);
  position: relative;
  z-index: 1000;
  color: var(--db-text-muted);
  font-size: .92rem;
}

.main-footer h2 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--db-text-strong);
  margin-bottom: .9rem;
}

.main-footer a {
  color: var(--db-text-muted);
}

.main-footer a:hover {
  color: var(--db-accent-soft);
}

.main-footer ul li {
  margin-bottom: .55rem;
}

.db-footer-brand p {
  max-width: 340px;
  line-height: 1.6;
}

.db-footer-bottom {
  border-top: 1px solid var(--db-border);
  margin-top: 2rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}

.db-social {
  display: flex;
  gap: .5rem;
}

.db-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--db-radius-pill);
  border: 1px solid var(--db-border);
  color: var(--db-text);
}

.db-social a:hover {
  background: var(--db-surface-hover);
  color: var(--db-text-strong);
}

.callout {
  padding: .85rem 1rem;
  border: 1px solid var(--db-border);
  border-left-width: 4px;
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-alt);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.db-container {
  width: 100%;
  max-width: var(--db-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Vertical padding only, so these can share an element with .container
   without removing its side gutters on phones. */
.db-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.db-section-sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.db-section-alt {
  background: var(--db-surface);
  border-top: 1px solid var(--db-border);
  border-bottom: 1px solid var(--db-border);
}

.db-section-head {
  max-width: 720px;
  margin-bottom: 1.75rem;
}

.db-section-head.text-center {
  margin-left: auto;
  margin-right: auto;
}

.db-section-head h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom: .5rem;
}

.db-section-head p {
  color: var(--db-text-muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}

.db-section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.db-section-head-row .db-section-head {
  margin-bottom: 0;
}

.db-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--db-accent-soft);
  margin-bottom: .6rem;
}

.db-lead {
  font-size: 1.125rem;
  color: var(--db-text-muted);
  line-height: 1.6;
}

.db-muted { color: var(--db-text-muted) !important; }
.db-strong { color: var(--db-text-strong) !important; }

.db-surface {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
}

/* Generic page header used by content pages */
.db-page-hero {
  padding-top: 2.25rem;
  padding-bottom: 1.5rem;
}

.db-page-hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  margin-bottom: .5rem;
}

.db-page-hero .db-lead {
  max-width: 720px;
  margin-bottom: 0;
}

.db-page-hero .breadcrumb {
  margin-bottom: .75rem;
}

/* ==========================================================================
   Design-system components
   ========================================================================== */
.fsg-title {
  color: var(--db-text-strong);
  font-weight: 700;
}

.fsg-underline {
  border-bottom: 1px solid var(--db-border);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}

.db-card {
  background-color: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-xs);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: border-color var(--db-transition), box-shadow var(--db-transition);
}

.db-card.card {
  padding: 0;
}

.db-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.db-card-head h2,
.db-card-head h3 {
  font-size: 1.1rem;
  margin-bottom: .2rem;
}

.db-card-head p {
  color: var(--db-text-muted);
  margin-bottom: 0;
  font-size: .92rem;
}

.db-card-link {
  display: block;
  color: inherit;
}

.db-card-link:hover .db-card,
.db-card-link:hover.db-card {
  border-color: var(--db-accent-border);
  box-shadow: var(--db-shadow-sm);
}

.db-page-header {
  margin-bottom: 1.25rem;
}

.db-page-header .breadcrumb {
  margin-bottom: .35rem;
  font-size: .85rem;
}

.db-page-header .breadcrumb a {
  color: var(--db-text-muted);
}

.db-page-header h1,
.db-page-header h2,
.db-page-header h3,
.db-page-header h4 {
  color: var(--db-text-strong);
  margin-bottom: .25rem;
}

.db-page-header p {
  color: var(--db-text-muted);
  margin-bottom: 0;
  max-width: 820px;
}

.db-empty-state {
  background: var(--db-surface);
  border: 1px dashed var(--db-border-strong);
  border-radius: var(--db-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.db-empty-state h3,
.db-empty-state h4,
.db-empty-state h5 {
  color: var(--db-text-strong);
}

.db-empty-state p {
  color: var(--db-text-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.db-empty-state .bi {
  font-size: 2rem;
  color: var(--db-accent-soft);
}

.db-save-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
  background-color: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-sm);
  padding: .75rem 1rem;
  margin-top: 1rem;
  /* Page-level save bars are usually the last child of their <form>, with the next card
     after the form, so a :last-child reset can't be used here. */
  margin-bottom: 1.5rem;
}

.db-card .db-save-bar {
  margin-bottom: 0;
}

/* Comment replies (helper.Comments.php): keep the reply boxes off the Reply/Delete/Report
   links above them; :not(:empty) so comments without replies don't gain a gap. */
.comment-replies:not(:empty) {
  margin-top: .5rem;
}

/* Label + help-tip row (`d-flex` > `label.form-label.mb-0` + popover) sat flush on its field */
.d-flex:has(> .form-label.mb-0) {
  margin-bottom: .375rem;
}

.db-save-bar .btn .loadingSpinner {
  margin-left: .4rem;
  vertical-align: -.125em;
}

.db-ad-block {
  position: relative;
  min-height: 120px;
  margin: 1rem 0;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background-color: var(--db-surface-alt);
  overflow: hidden;
}

.db-ad-block::before {
  content: "Advertisement";
  display: block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--db-text-muted);
  padding: 4px 8px;
}

.db-badge-premium {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--db-premium-bg);
  border: 1px solid var(--db-premium-border);
  border-radius: var(--db-radius-pill);
  color: var(--db-premium-gold);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  white-space: nowrap;
}

.db-badge-premium .bi {
  color: var(--db-premium-teal);
}

.db-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  padding: .35rem .6rem;
  border-radius: var(--db-radius-pill);
  border: 1px solid var(--db-border);
  background: var(--db-surface-alt);
  color: var(--db-text);
  white-space: nowrap;
}

.db-badge-accent {
  background: var(--db-accent-subtle);
  border-color: var(--db-accent-border);
  color: var(--db-accent-soft);
}

.db-badge-success {
  background: var(--db-success-subtle);
  border-color: transparent;
  color: var(--db-success);
}

.db-badge-warning {
  background: var(--db-warning-subtle);
  border-color: transparent;
  color: var(--db-warning);
}

.db-badge-danger {
  background: var(--db-danger-subtle);
  border-color: transparent;
  color: var(--db-danger);
}

/* Small helpers used across pages */
.min-w-0 { min-width: 0; }

.db-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--db-swatch, var(--db-text-muted));
  flex: 0 0 auto;
}

.db-danger-zone {
  border-color: var(--db-danger) !important;
}

.db-badge-verified {
  background: var(--db-accent-subtle);
  border-color: var(--db-accent-border);
  color: var(--db-accent-soft);
}

/* ==========================================================================
   Side nav layout: Admin, Account (sideNav.php, fixed sidebar + content)
   ========================================================================== */
.db-side-sidebar {
  position: fixed;
  left: 0;
  top: var(--db-nav-height);
  width: var(--db-sidebar-nav);
  height: calc(100vh - var(--db-nav-height));
  background: var(--db-surface);
  border-right: 1px solid var(--db-border);
  padding: 0 0 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  z-index: 1001;
}

.db-side-sidebar::-webkit-scrollbar {
  width: 4px;
}

.db-side-content {
  margin-left: var(--db-sidebar-nav);
  padding: 1.5rem 1.75rem 2rem;
  max-width: calc(1440px + var(--db-sidebar-nav));
}

body:has(.db-side-sidebar) > .main-footer {
  margin-left: var(--db-sidebar-nav);
  margin-top: 2rem !important;
}

@media (max-width: 767.98px) {
  .db-side-content {
    margin-left: 0;
    padding: 1rem;
  }

  body:has(.db-side-sidebar) > .main-footer {
    margin-left: 0;
  }

  .db-side-mobile {
    --bs-offcanvas-width: 300px;
    width: 300px;
    max-width: 100%;
  }
}

.db-side-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem 1.25rem .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--db-text-strong);
}

.db-side-title .bi {
  color: var(--db-accent-soft);
  font-size: 1.1rem;
}

.db-side-mobile .db-side-title {
  display: none;
}

.db-side-mobile .offcanvas-body > nav {
  padding-top: .5rem;
}

.db-side-mobile .db-nav-filter {
  margin-top: .25rem;
}

.db-nav-filter input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.db-nav-filter-key {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .05rem .4rem;
  font-size: .72rem;
  font-family: var(--db-font-mono);
  line-height: 1.4;
  color: var(--db-text-muted);
  background: var(--db-surface-raised);
  border: 1px solid var(--db-border-strong);
  border-radius: var(--db-radius-xs);
  box-shadow: none;
  pointer-events: none;
}

.db-nav-filter input:focus ~ .db-nav-filter-key {
  display: none;
}

.db-side-links {
  list-style: none;
  margin: 0;
  padding: 1px 10px;
}

.db-side-links li {
  padding: 1px 0;
}

.db-side-links .nav-link {
  color: var(--db-text);
  padding: .45rem .65rem;
  border-radius: var(--db-radius-sm);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--db-transition-fast), color var(--db-transition-fast);
}

.db-side-links .nav-link > .bi {
  color: var(--db-text-muted);
  font-size: 1rem;
  width: 1.15rem;
  text-align: center;
}

.db-side-links .nav-link:hover,
.db-side-links .nav-link:focus-visible {
  background: var(--db-surface-hover);
  color: var(--db-text-strong);
}

.db-side-links .active-nav .nav-link {
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--db-accent);
}

.db-side-links .active-nav .nav-link > .bi {
  color: var(--db-accent-soft);
}

.db-side-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .9rem 1.25rem .35rem;
  border: 0;
  background: transparent;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--db-text-muted);
  text-align: left;
}

.db-side-group-toggle:hover,
.db-side-group-toggle:focus-visible {
  color: var(--db-text-strong);
}

.db-side-group-toggle .bi {
  font-size: .75rem;
  transition: transform var(--db-transition-fast);
}

.db-side-group.is-collapsed .db-side-group-toggle .bi {
  transform: rotate(-90deg);
}

.db-side-group.is-collapsed:not(.is-filtering) .db-side-links {
  display: none;
}

.db-card .table {
  margin-bottom: 0;
}

/* ...but keep a gap when something follows the table inside the card */
.db-card .table:not(:last-child),
.db-card .table-responsive:not(:last-child) {
  margin-bottom: 1rem;
}

.db-card .table td,
.db-card .table th {
  border-color: var(--db-border);
}

/* Icon tile used by feature cards, steps, stats */
.db-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--db-radius);
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  font-size: 1.25rem;
}

.db-icon-tile.is-sm {
  width: 34px;
  height: 34px;
  border-radius: var(--db-radius-sm);
  font-size: 1rem;
}

.db-icon-tile.is-green { background: var(--db-success-subtle); color: var(--db-success); }
.db-icon-tile.is-amber { background: var(--db-warning-subtle); color: var(--db-warning); }
.db-icon-tile.is-red { background: var(--db-danger-subtle); color: var(--db-danger); }

.db-feature-card {
  height: 100%;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: var(--db-text);
  transition: border-color var(--db-transition-fast), box-shadow var(--db-transition-fast), transform var(--db-transition-fast);
}

a.db-feature-card:hover {
  border-color: var(--db-accent-border);
  box-shadow: var(--db-shadow-sm);
  color: var(--db-text);
}

.db-feature-card h3 {
  font-size: 1.05rem;
  margin: 0;
}

.db-feature-card p {
  color: var(--db-text-muted);
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
}

.db-feature-card .db-feature-more {
  margin-top: auto;
  font-size: .88rem;
  font-weight: 600;
  color: var(--db-accent-soft);
}

.db-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}

.db-check-list li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}

.db-check-list li::before {
  content: "\F26E"; /* bi-check-lg */
  font-family: "bootstrap-icons";
  color: var(--db-success);
  font-weight: 700;
  line-height: 1.5;
}

/* Numbered steps */
.db-steps {
  counter-reset: db-step;
  display: grid;
  gap: 1rem;
}

.db-step {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
}

.db-step::before {
  counter-increment: db-step;
  content: counter(db-step);
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--db-accent);
  color: var(--db-on-accent);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: .95rem;
}

.db-step h3 {
  font-size: 1.02rem;
  margin-bottom: .25rem;
}

.db-step p {
  color: var(--db-text-muted);
  margin: 0;
  font-size: .94rem;
}

/* Stats */
.db-stat {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 1rem 1.15rem;
  height: 100%;
}

.db-stat-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--db-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.db-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--db-text-strong);
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* CTA band */
.db-cta {
  background: #5865f2;
  color: #fff;
  border-radius: var(--db-radius-xl);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.db-cta h2 {
  color: #fff;
  margin-bottom: .5rem;
}

.db-cta p {
  color: rgba(255, 255, 255, .86);
  margin-bottom: 0;
  max-width: 620px;
}

.db-cta .btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #2b33a0;
  --bs-btn-hover-bg: #eef0ff;
  --bs-btn-hover-border-color: #eef0ff;
  --bs-btn-hover-color: #2b33a0;
}

.db-cta .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* Inline forms */
.inline-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}

.inline-form .form-control {
  width: auto;
  flex: 1;
  min-width: 180px;
}

.inline-form .form-label {
  white-space: nowrap;
}

/* Keyword tags input */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  border-radius: var(--db-radius-xs);
  margin: 2px;
  font-weight: 600;
  font-size: .875rem;
}

.tag .remove-tag {
  margin-left: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}

.tag button {
  background: none;
  border: none;
  color: inherit;
  margin-left: 0.5rem;
  cursor: pointer;
}

#tag-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--db-text-strong);
  flex-grow: 1;
  min-width: 120px;
}

/* ==========================================================================
   Chips (tags, quick links, filters)
   ========================================================================== */
.db-chip,
.tag-chip,
.search-quick-link,
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: var(--db-radius-pill);
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--db-transition-fast), border-color var(--db-transition-fast), color var(--db-transition-fast);
}

a.db-chip:hover,
.tag-chip:hover,
.search-quick-link:hover {
  background: var(--db-surface-hover);
  border-color: var(--db-border-strong);
  color: var(--db-text-strong);
}

.db-chip.active,
.tag-chip.active {
  background: var(--db-accent);
  border-color: var(--db-accent);
  color: var(--db-on-accent);
}

.db-chip .db-chip-count,
.tag-chip .tag-total {
  background: var(--db-surface-alt);
  border: 1px solid var(--db-border);
  color: var(--db-text-muted);
  border-radius: var(--db-radius-pill);
  padding: 0 .45rem;
  font-size: .75rem;
  font-weight: 700;
}

.db-chip.active .db-chip-count,
.tag-chip.active .tag-total {
  background: rgba(255, 255, 255, .2);
  border-color: transparent;
  color: #fff;
}

.db-chip-remove {
  color: inherit;
  opacity: .7;
}

.db-chip-remove:hover {
  opacity: 1;
}

/* ==========================================================================
   Home + directory
   ========================================================================== */
.db-hero {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}

.db-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
}

.db-hero h1 .db-hl {
  color: var(--db-accent-soft);
}

.db-hero .db-lead {
  max-width: 600px;
}

/* Big search */
.db-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--db-surface);
  border: 1px solid var(--db-border-strong);
  border-radius: var(--db-radius-pill);
  padding: .35rem .35rem .35rem 1.15rem;
  box-shadow: var(--db-shadow-sm);
  transition: border-color var(--db-transition-fast), box-shadow var(--db-transition-fast);
}

.db-search:focus-within {
  border-color: var(--db-accent);
  box-shadow: 0 0 0 .25rem var(--db-glow), var(--db-shadow-sm);
}

.db-search > .bi {
  color: var(--db-text-muted);
  font-size: 1.1rem;
}

.db-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--db-text-strong);
  padding: .55rem .75rem;
  font-size: 1.02rem;
}

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

.db-search .btn {
  border-radius: var(--db-radius-pill);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: nowrap;
}

/* Category tiles */
.db-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}

.db-category-tile {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  color: var(--db-text);
  transition: border-color var(--db-transition-fast), box-shadow var(--db-transition-fast), transform var(--db-transition-fast);
}

.db-category-tile:hover {
  border-color: var(--db-accent-border);
  box-shadow: var(--db-shadow-sm);
  color: var(--db-text);
}

.db-category-tile strong {
  display: block;
  color: var(--db-text-strong);
  font-size: .98rem;
}

.db-category-tile small {
  color: var(--db-text-muted);
}

.db-category-tile.active {
  border-color: var(--db-accent);
  box-shadow: 0 0 0 1px var(--db-accent) inset;
}

/* Directory layout */
.discord-directory .directory-hero,
.home-hero .directory-hero {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
}

.discord-directory .filter-card,
.db-filter-bar {
  background-color: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
}

.db-filter-bar {
  padding: 1rem;
}

.db-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.db-result-count {
  color: var(--db-text-muted);
  font-size: .92rem;
}

.db-result-count strong {
  color: var(--db-text-strong);
}

.db-sort {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.db-sort .form-select {
  width: auto;
  min-width: 170px;
  font-size: .9rem;
}

.discord-directory .sort-group .btn {
  color: var(--db-text);
  border-color: var(--db-border-strong);
}

.discord-directory .sort-group .btn.active {
  background-color: var(--db-accent);
  border-color: var(--db-accent);
  color: var(--db-on-accent);
}

.sort-direction-toggle {
  border-color: var(--db-border-strong);
  color: var(--db-text);
}

/* Server cards: compact listing card (icon, name, members, blurb, tags, join) like other server lists */
.db-server-card {
  position: relative;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--db-transition-fast), background var(--db-transition-fast);
}

.db-server-card:hover {
  border-color: var(--db-border-strong);
  background: var(--db-surface-hover);
}

.db-server-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}

.db-server-title {
  min-width: 0;
}

.db-server-card .db-server-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-server-card .db-server-name a {
  color: var(--db-text-strong);
}

/* Stretch the title link over the whole card for a big tap target */
.db-server-card .db-server-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.db-server-verified {
  color: var(--db-accent-soft);
  font-size: .85em;
  margin-left: .3rem;
}

.db-server-card .db-server-actions,
.db-server-card .db-server-tags a {
  position: relative;
  z-index: 2;
}

.db-server-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .75rem;
  color: var(--db-text-muted);
  font-size: .82rem;
  margin-top: .1rem;
}

.db-server-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.db-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--db-green);
  display: inline-block;
}

.db-server-card .db-server-summary,
.server-summary {
  color: var(--db-text-muted);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-server-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .85rem;
}

.db-server-tags a,
.db-server-tags span {
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: var(--db-radius-xs);
  background: var(--db-surface-raised);
  color: var(--db-text-muted);
}

.db-server-tags a.is-category {
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
}

.db-server-tags a:hover {
  color: var(--db-accent-soft);
}

.db-server-card .db-server-actions {
  margin-top: auto;
  display: flex;
  gap: .5rem;
}

.db-server-card .db-server-actions .btn {
  flex: 1 1 0;
}

.server-avatar {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--db-surface-raised);
  flex: 0 0 auto;
}

.placeholder-avatar {
  display: grid;
  place-items: center;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  font-size: 1.3rem;
  flex: 0 0 auto;
}

.server-name {
  color: var(--db-text-strong);
}

.icon-offset {
  position: static;
}

.discord-info {
  position: relative;
}

.discord-desc {
  height: 125px;
  overflow-x: hidden;
  overflow-y: auto;
}

.discord-tags {
  overflow: hidden;
}

.discord-tags .badge {
  border: 1px solid var(--db-border);
}

/* ==========================================================================
   Discord profile
   ========================================================================== */
.discord-profile .discord-profile-hero,
.db-profile-hero {
  background-color: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  overflow: hidden;
}

.discord-cover {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  background: var(--db-surface-raised);
}

.db-profile-head {
  padding: 0 1.5rem 1.5rem;
}

.db-profile-id {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: -44px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.server-avatar-lg {
  height: 96px;
  width: 96px;
  border-radius: 24px;
  object-fit: cover;
  border: 4px solid var(--db-surface) !important;
  background: var(--db-surface);
  box-shadow: var(--db-shadow-sm);
  flex: 0 0 auto;
  position: relative;
}

.server-avatar-lg.placeholder-avatar {
  display: grid;
  place-items: center;
  font-size: 2rem;
  border-radius: 24px;
}

.db-profile-title h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  margin-bottom: .35rem;
  /* The title overlaps the bottom of the banner image: outline it in the card colour (dark in
     dark mode, light in light mode) so it stays readable on any banner. paint-order puts the
     stroke behind the letters, so they keep their full weight. */
  -webkit-text-stroke: 6px var(--db-surface);
  paint-order: stroke fill;
}

.db-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.discord-meta-card {
  background-color: var(--db-surface);
  border: 1px solid var(--db-border);
}

.discord-meta-list .meta-row,
.db-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--db-border);
  font-size: .92rem;
}

.discord-meta-list .meta-row:last-child,
.db-meta-row:last-child {
  border-bottom: none;
}

.db-meta-row span:first-child {
  color: var(--db-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.db-meta-row strong {
  color: var(--db-text-strong);
  text-align: right;
}

.discord-preview-img {
  height: 140px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--db-border);
}

.db-prose {
  color: var(--db-text);
  line-height: 1.7;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.db-sticky {
  position: sticky;
  top: calc(var(--db-nav-height) + 1rem);
}

/* ==========================================================================
   Manage dashboard layout (sidebars + content)
   ========================================================================== */
#serverSidebar {
  position: fixed;
  left: 0;
  top: var(--db-nav-height);
  width: var(--db-sidebar-icons);
  height: calc(100vh - var(--db-nav-height));
  background: var(--db-surface-alt);
  border-right: 1px solid var(--db-border);
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: visible;
}

#serverSidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#serverSidebar .server-rail-sep {
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--db-border-strong);
  margin: 6px 0;
  flex: 0 0 auto;
}

#serverSidebar a.server-link {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 5px 0;
  position: relative;
  text-decoration: none;
}

#serverSidebar a.server-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--db-text-strong);
  opacity: 0;
  transition: height 0.18s ease-out, opacity 0.18s ease-out;
}

#serverSidebar a.server-link.active-server::before {
  height: 32px;
  opacity: 1;
}

#serverSidebar a.server-link:hover::before {
  height: 18px;
  opacity: 0.7;
}

#serverSidebar a.server-link.active-server .server-icon {
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--db-accent);
}

#serverSidebar a.server-link.server-link-add .server-icon {
  border: 1px dashed var(--db-border-strong);
  color: var(--db-success);
  background: var(--db-surface);
  font-size: 1.25rem;
}

#navSidebar {
  position: fixed;
  left: var(--db-sidebar-icons);
  top: var(--db-nav-height);
  width: var(--db-sidebar-nav);
  height: calc(100vh - var(--db-nav-height));
  background: var(--db-surface);
  border-right: 1px solid var(--db-border);
  padding: 0 0 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  z-index: 1001;
}

#navSidebar::-webkit-scrollbar {
  width: 4px;
}

#mainContent {
  margin-left: var(--dashboard-rail-width);
  padding: 1.5rem 1.75rem 2rem;
  max-width: calc(1280px + var(--dashboard-rail-width));
}

/* The footer sits after <main>, so offset it by body class rather than a sibling selector */
.manage-layout ~ .main-footer,
body.is-dashboard:has(#desktopSidebar) > .main-footer {
  margin-left: var(--dashboard-rail-width);
}

body.is-dashboard:has(#desktopSidebar) > .main-footer {
  margin-top: 2rem !important;
}

@media (max-width: 767.98px) {
  #mainContent {
    margin-left: 0;
    padding: 1rem;
  }

  .manage-layout ~ .main-footer,
  body.is-dashboard:has(#desktopSidebar) > .main-footer {
    margin-left: 0;
  }
}

.server-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--db-surface-raised);
  color: var(--db-text-strong);
  transition: border-radius .18s ease, box-shadow .18s ease;
}

#serverSidebar a.server-link:hover .server-icon {
  border-radius: 14px;
}

.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.server-icon .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  padding: 2px;
}

.server-icon.is-uninvited img,
.server-icon.is-uninvited .circle {
  filter: grayscale(100%);
  opacity: .55;
}

/* Active server card at the top of the nav sidebar */
.db-server-switch {
  padding: 1rem;
  border-bottom: 1px solid var(--db-border);
  margin-bottom: .5rem;
}

.db-server-switch .db-server-switch-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.db-server-switch img,
.db-server-switch .db-server-switch-fallback {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
}

.db-server-switch .db-server-switch-fallback {
  display: grid;
  place-items: center;
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  font-weight: 700;
}

.db-server-switch strong {
  display: block;
  color: var(--db-text-strong);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.db-server-switch small {
  color: var(--db-text-muted);
}

.db-server-switch .btn {
  font-size: .82rem;
}

.db-nav-filter {
  position: relative;
  margin: .25rem .75rem .5rem;
}

.db-nav-filter .bi {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-text-muted);
  font-size: .85rem;
  pointer-events: none;
}

.db-nav-filter input {
  padding-left: 2rem;
  font-size: .88rem;
  height: 34px;
  background: var(--db-surface-alt);
  border-color: var(--db-border);
}

.db-nav-empty {
  display: none;
  padding: .5rem 1.25rem;
  color: var(--db-text-muted);
  font-size: .85rem;
}

#navSidebar .list-group-item,
#mobileSidebar .list-group-item {
  background: transparent;
  border: 0;
  padding: 1px 10px;
}

#navSidebar .sidebar-section-title,
#mobileSidebar .sidebar-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--db-text-muted) !important;
  padding: .9rem 1.25rem .3rem;
}

#navSidebar .nav-link,
#mobileSidebar .nav-link {
  color: var(--db-text);
  padding: .42rem .65rem;
  border-radius: var(--db-radius-sm);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--db-transition-fast), color var(--db-transition-fast);
}

#navSidebar .nav-link > .bi,
#mobileSidebar .nav-link > .bi {
  color: var(--db-text-muted);
  font-size: 1rem;
  width: 1.15rem;
  text-align: center;
}

#navSidebar .nav-link:hover,
#navSidebar .nav-link:focus-visible,
#mobileSidebar .nav-link:hover {
  background: var(--db-surface-hover);
  color: var(--db-text-strong);
}

#navSidebar .list-group-item.active-nav .nav-link,
#mobileSidebar .list-group-item.active-nav .nav-link {
  background: var(--db-accent-subtle);
  color: var(--db-accent-soft);
  font-weight: 600;
}

#navSidebar .list-group-item.active-nav .nav-link > .bi,
#mobileSidebar .list-group-item.active-nav .nav-link > .bi {
  color: var(--db-accent-soft);
}

.db-nav-pill {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: var(--db-radius-pill);
  background: var(--db-premium-bg);
  border: 1px solid var(--db-premium-border);
  color: var(--db-premium-gold);
}

#navSidebar .nav-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--db-surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.db-mobile-dash-bar {
  position: sticky;
  top: var(--db-nav-height);
  z-index: 1010;
  background: var(--db-surface);
  border-bottom: 1px solid var(--db-border);
  padding: .5rem 1rem;
}

.db-mobile-dash-bar .btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
}

.db-mobile-dash-bar img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  #mobileSidebar {
    --bs-offcanvas-width: 340px;
    width: 340px;
    max-width: 100%;
  }

  #mobileSidebar #serverSidebar,
  #mobileSidebar #navSidebar {
    position: static;
    height: auto;
    width: auto;
  }

  #mobileSidebar nav {
    display: flex;
    min-height: 100%;
  }

  #mobileSidebar #serverSidebar {
    width: var(--db-sidebar-icons);
    flex: 0 0 var(--db-sidebar-icons);
  }

  #mobileSidebar #navSidebar {
    flex: 1 1 auto;
    border-right: 0;
  }
}

.server-tooltip {
  display: none;
}

.server-icon-tooltip .tooltip-inner {
  background-color: var(--db-text-strong);
  color: var(--db-surface);
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--db-radius-sm);
}

.server-icon-tooltip.bs-tooltip-end .tooltip-arrow::before,
.server-icon-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--db-text-strong);
}

.server-icon-tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--db-text-strong); }
.server-icon-tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--db-text-strong); }
.server-icon-tooltip.bs-tooltip-start .tooltip-arrow::before,
.server-icon-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--db-text-strong);
}

/* Dashboard page-level helpers */
.manage-layout .form-label,
.db-card .form-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--db-text-strong);
}

.manage-layout .form-text,
.db-card .form-text {
  color: var(--db-text-muted);
}

.db-help-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  font-weight: 600;
}

.db-dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .75rem;
}

.db-dash-tile {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  color: var(--db-text);
}

.db-dash-tile:hover {
  border-color: var(--db-accent-border);
  box-shadow: var(--db-shadow-sm);
  color: var(--db-text);
}

.db-dash-tile strong {
  display: block;
  color: var(--db-text-strong);
  font-size: .95rem;
}

.db-dash-tile small {
  color: var(--db-text-muted);
  display: block;
  line-height: 1.4;
}

/* ==========================================================================
   Premium pages
   ========================================================================== */
.premium-page h1,
.premium-page h2,
.account-premium h2,
.account-premium h3 {
  color: var(--db-text-strong);
}

.premium-kicker {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.premium-snapshot,
.premium-plan,
.premium-compare,
.premium-empty,
.premium-status-panel,
.premium-account-box,
.premium-upgrade-strip {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-sm);
}

.premium-snapshot {
  padding: 18px;
}

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

.premium-snapshot-row:last-child {
  border-bottom: 0;
}

.premium-snapshot-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--db-text);
}

.premium-snapshot-row strong {
  color: var(--db-premium-gold);
  white-space: nowrap;
}

.premium-band {
  padding: 18px 0;
  background: var(--db-surface-alt);
  border-bottom: 1px solid var(--db-border);
}

.premium-feature {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  padding: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--db-text);
}

.premium-feature i,
.premium-plan li i {
  color: var(--db-premium-teal);
}

.premium-plan {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.premium-plan.is-featured {
  border-color: var(--db-accent);
  box-shadow: 0 0 0 1px var(--db-accent), var(--db-shadow-lg);
}

.premium-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.premium-plan h3 {
  margin: 0;
}

.premium-price {
  color: var(--db-text-strong);
  font-size: 1.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.premium-price span {
  color: var(--db-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.premium-plan p {
  color: var(--db-text-muted);
  min-height: 48px;
}

.premium-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.premium-plan li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--db-text);
}

.premium-plan form,
.premium-plan .btn,
.premium-plan .alert {
  margin-top: auto;
}

.premium-compare,
.premium-empty,
.premium-account-box {
  padding: 18px;
}

.premium-checkout-success {
  background: var(--db-premium-surface);
  border: 1px solid var(--db-premium-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-sm);
  padding: 20px;
}

.premium-checkout-main {
  display: flex;
  gap: 14px;
}

.premium-checkout-main h2 {
  margin: 0 0 8px;
}

.premium-checkout-main p,
.premium-next-step p {
  color: var(--db-text);
}

.premium-checkout-icon {
  align-items: center;
  background: var(--db-success-subtle);
  border: 1px solid var(--db-premium-border);
  border-radius: var(--db-radius-sm);
  color: var(--db-premium-teal);
  display: flex;
  flex: 0 0 44px;
  font-size: 1.4rem;
  height: 44px;
  justify-content: center;
}

.premium-checkout-details {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
}

.premium-checkout-details div {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  padding: 12px;
}

.premium-checkout-details span {
  color: var(--db-text-muted);
  display: block;
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.premium-checkout-details strong {
  color: var(--db-text-strong);
}

.premium-next-step {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  padding: 16px;
}

.premium-next-step h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.premium-next-step ol {
  color: var(--db-text);
  margin-bottom: 12px;
  padding-left: 1.25rem;
}

.premium-next-step li {
  margin-bottom: 6px;
}

.premium-next-step code {
  color: var(--db-premium-gold);
}

.premium-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.premium-status-panel,
.premium-upgrade-strip {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.premium-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.premium-upgrade-strip {
  background: var(--db-premium-bg);
  border-color: var(--db-premium-border);
}

.premium-upgrade-strip h3,
.premium-upgrade-strip p {
  margin: 0;
}

.premium-upgrade-strip p {
  color: var(--db-text-muted);
}

.premium-feature-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.premium-feature-item {
  align-items: center;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  color: var(--db-text);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 12px;
}

.premium-feature-item:nth-child(even) {
  background: var(--db-surface-alt);
}

.premium-feature-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.premium-feature-value {
  background: var(--db-success-subtle);
  border: 1px solid var(--db-premium-border);
  border-radius: var(--db-radius-pill);
  color: var(--db-premium-teal);
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.premium-feature-group + .premium-feature-group {
  margin-top: 20px;
}

.premium-feature-group-title {
  color: var(--db-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.premium-feature-item.has-progress {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.premium-feature-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.premium-feature-progress {
  background: var(--db-surface-raised);
  border-radius: var(--db-radius-pill);
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.premium-feature-progress-bar {
  background: var(--db-premium-teal);
  height: 100%;
  transition: width 0.3s ease;
}

.premium-feature-progress-bar.is-high {
  background: var(--db-warning);
}

.premium-feature-progress-bar.is-full {
  background: var(--db-danger);
}

.premium-feature-upgrade {
  color: var(--db-warning);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 2px;
}

.premium-feature-upgrade i {
  margin-right: 4px;
}

@media (max-width: 767.98px) {
  .premium-status-panel,
  .premium-upgrade-strip,
  .premium-plan-head {
    align-items: stretch;
    flex-direction: column;
  }

  .premium-checkout-main,
  .premium-checkout-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .premium-checkout-details {
    grid-template-columns: 1fr;
  }

  .premium-status-actions {
    justify-content: flex-start;
  }

  .premium-feature-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   Select2 theme overrides (both themes)
   ========================================================================== */
.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--db-surface) !important;
  border-color: var(--db-border-strong) !important;
  color: var(--db-text-strong) !important;
  border-radius: var(--db-radius-sm) !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--db-accent) !important;
  box-shadow: 0 0 0 .25rem var(--db-glow) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--db-text-strong) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--db-text-muted) !important;
}

.select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--db-text-muted) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--db-surface) !important;
  border-color: var(--db-border-strong) !important;
  box-shadow: var(--db-shadow-lg) !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background-color: var(--db-surface-alt) !important;
  border-color: var(--db-border-strong) !important;
  color: var(--db-text-strong) !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--db-accent) !important;
  box-shadow: 0 0 0 .25rem var(--db-glow) !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--db-text-muted) !important;
}

.select2-container--bootstrap-5 .select2-results__option {
  background-color: transparent !important;
  color: var(--db-text) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--db-accent) !important;
  color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: var(--db-accent-subtle) !important;
  color: var(--db-accent-soft) !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected.select2-results__option--highlighted {
  background-color: var(--db-accent) !important;
  color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__group {
  background-color: var(--db-surface-alt) !important;
  color: var(--db-text-muted) !important;
  font-size: .8em;
  font-weight: 600;
}

.select2-container--bootstrap-5 .select2-results__option[aria-disabled=true] {
  color: var(--db-text-muted) !important;
  opacity: .6;
}

.select2-container--bootstrap-5 .select2-results__message {
  color: var(--db-text-muted) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--db-accent-subtle) !important;
  border-color: var(--db-accent-border) !important;
  color: var(--db-accent-soft) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  border-color: transparent !important;
  color: var(--db-accent-soft) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
  background-color: var(--db-accent) !important;
  color: #fff !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
  color: var(--db-text-strong) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--db-text-muted) !important;
}

/* Toastr follows the theme */
#toast-container > div {
  border-radius: var(--db-radius) !important;
  box-shadow: var(--db-shadow-lg) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Page navigation loading overlay
   ========================================================================== */
#page-loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--db-overlay);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#page-loading-overlay .plo-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--db-border);
  border-top-color: var(--db-accent);
  border-radius: 50%;
  animation: ploSpin 0.75s linear infinite;
}

#page-loading-overlay .plo-text {
  color: var(--db-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes ploSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Home v2: plainer, product-first (bot shown in a Discord-style chat)
   ========================================================================== */
.db-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 17em;
}

.db-hero-note {
  color: var(--db-text-muted);
  font-size: .92rem;
}

.db-link-arrow {
  font-weight: 600;
  color: var(--db-accent-soft);
}

.db-link-arrow:hover {
  text-decoration: underline;
}

.db-subhead {
  font-size: 1rem;
  font-weight: 700;
  color: var(--db-text-strong);
  margin: 1.5rem 0 .75rem;
}

.db-cta.db-cta-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.25rem;
}

.db-cta.db-cta-flex h2 {
  font-size: 1.5rem;
}

/* Feature list: plain columns instead of boxed cards */
.db-feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}

.db-feature-item {
  border-top: 2px solid var(--db-border);
  padding-top: 1rem;
}

.db-feature-item > .bi {
  font-size: 1.35rem;
  color: var(--db-accent-soft);
}

.db-feature-item h3 {
  font-size: 1.05rem;
  margin: .5rem 0 .35rem;
}

.db-feature-item h3 a {
  color: var(--db-text-strong);
}

.db-feature-item h3 a:hover {
  color: var(--db-accent-soft);
}

.db-feature-item p {
  margin: 0;
  color: var(--db-text-muted);
  line-height: 1.55;
}

/* Setup steps as a plain list */
.db-plain-steps {
  padding-left: 1.25rem;
  margin: 1.25rem 0;
}

.db-plain-steps li {
  margin-bottom: .75rem;
  padding-left: .25rem;
}

.db-plain-steps li::marker {
  font-weight: 700;
  color: var(--db-accent-soft);
}

/* Dashboard illustration */
.db-panel {
  background: var(--db-surface-alt);
  border: 1px solid var(--db-border-strong);
  border-radius: var(--db-radius-lg);
  overflow: hidden;
  box-shadow: var(--db-shadow-sm);
}

.db-panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .8rem 1.1rem;
  background: var(--db-surface-raised);
  border-bottom: 1px solid var(--db-border);
  font-weight: 700;
  color: var(--db-text-strong);
}

.db-panel-bar small {
  font-weight: 500;
  color: var(--db-text-muted);
}

.db-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.db-panel-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--db-border);
}

.db-panel-list li:last-child {
  border-bottom: 0;
}

.db-panel-list strong {
  display: block;
  color: var(--db-text-strong);
  font-size: .95rem;
}

.db-panel-list small {
  color: var(--db-text-muted);
}

.db-toggle {
  flex: 0 0 auto;
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--db-border-strong);
}

.db-toggle::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
}

.db-toggle.is-on {
  background: var(--db-green);
}

.db-toggle.is-on::after {
  left: auto;
  right: .2rem;
}

/* Discord-style message illustration (looks like Discord's dark UI in both themes, see DESIGN.md) */
.db-dc {
  background: #313338;
  color: #dbdee1;
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-lg);
  font-family: "gg sans", "Noto Sans", var(--db-font-sans);
  font-size: .95rem;
  line-height: 1.4;
  overflow: hidden;
}

.db-dc-channel {
  padding: .65rem 1rem;
  background: #2b2d31;
  border-bottom: 1px solid #1e1f22;
  font-weight: 600;
  color: #f2f3f5;
}

.db-dc-channel .bi {
  color: #80848e;
}

.db-dc-msg {
  display: flex;
  gap: .85rem;
  padding: .85rem 1rem;
}

.db-dc-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5865f2;
  object-fit: cover;
}

.db-dc-body {
  min-width: 0;
}

.db-dc-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

.db-dc-name {
  font-weight: 600;
  color: #f2f3f5;
}

.db-dc-tag {
  background: #5865f2;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: .05rem .3rem;
  border-radius: 3px;
}

.db-dc-time {
  font-size: .75rem;
  color: #949ba4;
}

.db-dc-mention {
  background: rgba(88, 101, 242, .3);
  color: #c9cdfb;
  border-radius: 3px;
  padding: 0 .15rem;
}

.db-dc-role {
  background: rgba(35, 165, 90, .25);
  color: #8be3b3;
  border-radius: 3px;
  padding: 0 .25rem;
}

.db-dc-embed {
  margin-top: .4rem;
  max-width: 28rem;
  background: #2b2d31;
  border-left: 4px solid #5865f2;
  border-radius: 4px;
  padding: .6rem .85rem .75rem;
}

.db-dc-embed-title {
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: .25rem;
}

.db-dc-embed-desc {
  font-size: .9rem;
}

.db-dc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
}

.db-dc-btn {
  padding: .25rem .8rem;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 500;
  background: #4e5058;
  color: #fff;
}

.db-dc-btn.is-primary {
  background: #5865f2;
}

@media (max-width: 575.98px) {
  .db-cta.db-cta-flex {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   Server list page: search, topic chips, sort tabs
   ========================================================================== */
.db-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
}

.db-filter-row .form-select {
  width: auto;
  min-width: 10rem;
}

.db-chip.is-tag {
  font-size: .8rem;
  padding: .2rem .6rem;
  background: transparent;
  color: var(--db-text-muted);
}

.db-sort-tabs {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  gap: .25rem;
  padding: .2rem;
  background: var(--db-surface-raised);
  border-radius: var(--db-radius);
}

.db-sort-tabs a {
  padding: .3rem .75rem;
  border-radius: var(--db-radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--db-text-muted);
}

.db-sort-tabs a:hover {
  color: var(--db-text-strong);
}

.db-sort-tabs a.active {
  background: var(--db-surface);
  color: var(--db-text-strong);
  box-shadow: var(--db-shadow-xs);
}

/* ==========================================================================
   Features, Premium and server list pages: Home v2 look (see DESIGN.md)
   ========================================================================== */
/* Inner pages reuse the home hero type scale, with breadcrumbs above the row. */
.db-hero-page {
  padding-top: 1.75rem;
}

.db-hero-page .breadcrumb {
  margin-bottom: 1.5rem;
}

.db-hero-compact {
  padding-bottom: 1.25rem;
}

.db-hero-compact h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

/* "Jump to" list beside the Features hero */
.db-jump-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .15rem 1rem;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 1rem 1.25rem;
}

.db-jump-card-title {
  grid-column: 1 / -1;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--db-text-muted);
  margin-bottom: .35rem;
}

.db-jump-card a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  font-weight: 600;
  color: var(--db-text-strong);
}

.db-jump-card a .bi {
  color: var(--db-accent-soft);
}

.db-jump-card a:hover {
  color: var(--db-accent-soft);
}

.db-feature-group {
  scroll-margin-top: var(--db-nav-height);
}

.db-feature-group h2 {
  margin-bottom: .5rem;
}

/* Extra pieces for the Discord-style illustrations */
.db-dc-embed.is-danger {
  border-left-color: #da373c;
}

.db-dc-channels {
  list-style: none;
  margin: 0;
  padding: .5rem .75rem .75rem;
}

.db-dc-channels li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: 4px;
  color: #949ba4;
  font-weight: 500;
}

.db-dc-channels li:first-child {
  background: #404249;
  color: #f2f3f5;
}

.premium-plan,
.premium-compare {
  box-shadow: none;
}

.premium-plan.is-featured {
  box-shadow: 0 0 0 1px var(--db-accent);
}

@media (max-width: 575.98px) {
  .db-sort-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .db-sort-tabs a {
    white-space: nowrap;
  }
}

/* Premium account pages: flat panels, plain checkout confirmation */
.premium-status-panel,
.premium-account-box,
.premium-upgrade-strip,
.premium-checkout-success {
  box-shadow: none;
}

.premium-upgrade-strip,
.premium-checkout-success {
  background: var(--db-surface);
  border-color: var(--db-border);
}

.premium-checkout-main h2 {
  font-size: 1.4rem;
}

.premium-next-step code {
  color: var(--db-accent-soft);
}

/* Dashboard: flat cards, plain shortcut links */
.db-card,
.db-save-bar {
  box-shadow: none;
}

.db-dash-tile {
  flex-direction: column;
  gap: .15rem;
}

.db-dash-tile:hover {
  background: var(--db-surface-hover);
  border-color: var(--db-border-strong);
  box-shadow: none;
}

.db-dash-tile strong {
  color: var(--db-accent-soft);
}

/* Empty states no longer carry a big icon: tighten them up */
.db-empty-state {
  padding: 2rem 1.5rem;
}

.db-empty-state > h3:first-child,
.db-empty-state > h4:first-child,
.db-empty-state > h5:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
   Readability fixes from the contrast audit
   ========================================================================== */
/* Bootstrap's status text colors are too dark on dark surfaces; use the theme tokens. */
[data-bs-theme="dark"] .text-danger { color: var(--db-danger) !important; }
[data-bs-theme="dark"] .text-success { color: var(--db-success) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--db-warning) !important; }

/* Long URLs, IDs and file names in help text wrap instead of widening the page on phones. */
.form-text,
.db-card p,
.db-card li {
  overflow-wrap: anywhere;
}

/* "?" help button next to form labels (Helpers\PageFunctions::displayPopover) */
.db-help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: .25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--db-text-muted);
  font-size: .95rem;
  line-height: 1;
  vertical-align: -.15em;
  cursor: help;
}

.db-help-tip:hover,
.db-help-tip:focus-visible {
  color: var(--db-accent-soft);
  background: var(--db-accent-subtle);
}