/* ThemeBuilder managed file. Re-generate from ThemeBuilder instead of editing directly. */
:root {
  --brand-primary-500: #ffc300;
  --brand-primary-rgb: 255, 195, 0;
  --brand-primary-600: #e6b000;
  --brand-primary-700: #cc9c00;
  --brand-secondary: #0fbbfa;
  --brand-secondary-rgb: 15, 187, 250;
  --brand-accent: #3f00eb;
  --brand-accent-rgb: 63, 0, 235;
  --brand-dark: #221f13;
  --brand-dark-rgb: 34, 31, 19;
  --brand-light: #f6f5f1;
  --brand-light-rgb: 255, 199, 15;
  --text-dark: #242421;
  --text-light: #f9f9f7;
  --neutral-50: #f9f9f7;
  --neutral-100: #f2f2ef;
  --neutral-200: #e4e5e0;
  --neutral-700: #616154;
  --neutral-900: #34352f;
  --surface-1: #f6f6f4;
  --surface-2: #f8f8f6;
  --surface-3: #ebece8;
  --surface-dark: #221f13;
  --surface-primary-tint-1: #f7eecf;
  --surface-primary-tint-2: #f9e7ae;
  --surface-secondary-tint-1: #d6edf2;
  --surface-secondary-tint-2: #b5e5f4;
  --surface-accent-tint-1: #dcd3f0;
  --surface-accent-tint-2: #c3b0ef;
  --border-default-source: brand-dark;
  --border-default-color: color-mix(in srgb, var(--brand-dark) 18%, var(--surface-3));
  --border-divider-source: match-default;
  --border-divider-color: var(--border-default-color);
  --focus-ring-color: var(--brand-primary-500);
  --focus-ring-shadow: 0 0 0 0.355rem color-mix(in srgb, var(--focus-ring-color) 13%, transparent);
  --btn-primary-base: var(--brand-primary-500);
  --btn-primary-text: #242421;
  --btn-secondary-base: var(--brand-secondary);
  --btn-secondary-text: #242421;
  --btn-accent-base: var(--brand-accent);
  --btn-accent-text: #f9f9f7;
  --btn-success-base: #0FEB6B;
  --btn-success-rgb: 15, 235, 107;
  --btn-info-base: #299AEB;
  --btn-info-rgb: 41, 154, 235;
  --btn-warning-base: #EBB73D;
  --btn-warning-rgb: 235, 183, 61;
  --btn-danger-base: #DB2B10;
  --btn-danger-rgb: 219, 43, 16;
  --btn-neutral-base: var(--neutral-700);
  --btn-dark-base: var(--brand-dark);
  --btn-light-base: var(--brand-light);
  --btn-success-text: #242421;
  --btn-info-text: #f9f9f7;
  --btn-warning-text: #242421;
  --btn-danger-text: #f9f9f7;
  --btn-neutral-text: #f9f9f7;
  --btn-dark-text: #f9f9f7;
  --btn-light-text: #242421;
  --button-radius: 0.75rem;
  --button-shadow: 0 8px 18px rgba(15, 23, 32, 0.12);
  --button-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --button-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --button-transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
  --button-hover-transform: translateY(-2px);
  --button-active-transform: translateY(0);
  --badge-radius: 999px;
  --badge-font-size: 0.75rem;
  --badge-font-weight: 700;
  --badge-padding-y: 0.35rem;
  --badge-padding-x: 0.65rem;
  --badge-primary-bg: var(--brand-primary-500);
  --badge-secondary-bg: var(--brand-secondary);
  --badge-accent-bg: var(--brand-accent);
  --badge-success-bg: var(--btn-success-base);
  --badge-info-bg: var(--btn-info-base);
  --badge-warning-bg: var(--btn-warning-base);
  --badge-danger-bg: var(--btn-danger-base);
  --badge-neutral-bg: var(--neutral-700);
  --badge-dark-bg: var(--brand-dark);
  --badge-light-bg: var(--brand-light);
  --badge-primary-text: #f9f9f7;
  --badge-secondary-text: #f9f9f7;
  --badge-accent-text: #f9f9f7;
  --badge-success-text: #f9f9f7;
  --badge-info-text: #f9f9f7;
  --badge-warning-text: #f9f9f7;
  --badge-danger-text: #f9f9f7;
  --badge-neutral-text: var(--btn-neutral-text);
  --badge-dark-text: #f9f9f7;
  --badge-light-text: #f9f9f7;
  --card-radius: 0.75rem;
  --card-surface: var(--surface-2);
  --card-border-color: var(--border-default-color);
  --card-shadow: 0px 8px 22px 0px rgba(36, 36, 33, 0.188), 0px 5px 6px 0px rgba(36, 36, 33, 0.228);
  --shadow-tight: 0px 1px 3px 0px rgba(36, 36, 33, 0.093), 0px 1px 3px 0px rgba(36, 36, 33, 0.134);
  --shadow-surface: var(--shadow-soft);
  --shadow-elevated: 0 28px 70px color-mix(in srgb, var(--text-dark) 22%, transparent);
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1rem;
  --table-bg: var(--surface-1);
  --table-text: var(--text-dark);
  --table-muted-text: color-mix(in srgb, var(--text-dark) 64%, transparent);
  --table-header-bg: var(--surface-2);
  --table-header-text: var(--text-dark);
  --table-border-color: color-mix(in srgb, var(--border-default-color) 68%, var(--table-bg));
  --table-column-border-color: transparent;
  --table-stripe-bg: color-mix(in srgb, var(--text-dark) 4%, transparent);
  --table-hover-bg: color-mix(in srgb, var(--brand-primary-500) 8%, var(--table-bg));
  --table-selected-bg: color-mix(in srgb, var(--brand-primary-500) 22%, var(--table-bg));
  --table-neutral-selected-bg: color-mix(in srgb, var(--neutral-700) 12%, var(--table-bg));
  --table-selected-text: var(--text-dark);
  --table-radius: 0.75rem;
  --table-shadow: none;
  --table-cell-padding-y: 0.75rem;
  --table-cell-padding-x: 0.95rem;
  --alert-padding-y: 0.9rem;
  --alert-padding-x: 1rem;
  --alert-gap: 0.8rem;
  --alert-radius: 0.75rem;
  --alert-bg-mix: 12%;
  --alert-border-mix: 38%;
  --alert-solid-text: var(--text-dark);
  --alert-success-text: var(--text-dark);
  --alert-info-text: var(--text-dark);
  --alert-warning-text: var(--text-dark);
  --alert-danger-text: var(--text-light);
  --alert-success-bg-mix: var(--alert-bg-mix);
  --alert-info-bg-mix: var(--alert-bg-mix);
  --alert-warning-bg-mix: var(--alert-bg-mix);
  --alert-danger-bg-mix: var(--alert-bg-mix);
  --alert-success-bg-base: var(--surface-2);
  --alert-info-bg-base: var(--surface-2);
  --alert-warning-bg-base: var(--surface-2);
  --alert-danger-bg-base: var(--surface-2);
  --alert-text-color: color-mix(in srgb, var(--alert-tone) var(--alert-text-mix), var(--text-dark));
  --alert-text-mix: 74%;
  --alert-icon-size: 2rem;
  --alert-icon-bg-opacity: 16%;
  --alert-link-decoration: none;
  --accordion-bg: var(--surface-2);
  --accordion-text: var(--text-dark);
  --accordion-muted-text: color-mix(in srgb, var(--text-dark) 64%, transparent);
  --accordion-header-bg: var(--surface-primary-tint-2);
  --accordion-header-text: var(--text-dark);
  --accordion-state-color: var(--brand-primary-500);
  --accordion-header-hover-bg: color-mix(in srgb, var(--accordion-state-color) 10%, var(--accordion-header-bg));
  --accordion-active-bg: color-mix(in srgb, var(--accordion-state-color) 18%, var(--accordion-header-bg));
  --accordion-active-text: var(--text-dark);
  --accordion-border-color: color-mix(in srgb, var(--border-default-color) 74%, var(--accordion-bg));
  --accordion-divider-color: transparent;
  --accordion-body-bg: var(--accordion-bg);
  --accordion-body-text: var(--accordion-text);
  --accordion-radius: 0.75rem;
  --accordion-padding-y: 0.8rem;
  --accordion-padding-x: 1rem;
  --accordion-body-padding-y: 0.95rem;
  --accordion-body-padding-x: 1rem;
  --accordion-item-gap: 0.75rem;
  --accordion-shadow: 0 12px 28px color-mix(in srgb, var(--text-dark) 12%, transparent);
  --accordion-icon-color: currentColor;
  --accordion-icon-bg: color-mix(in srgb, currentColor 10%, transparent);
  --list-bg: var(--surface-2);
  --list-text: var(--text-dark);
  --list-muted-text: color-mix(in srgb, var(--text-dark) 62%, transparent);
  --list-item-bg: var(--list-bg);
  --list-hover-bg: color-mix(in srgb, var(--brand-primary-500) 7%, var(--list-bg));
  --list-active-bg: color-mix(in srgb, var(--brand-primary-500) 22%, var(--list-bg));
  --list-neutral-active-bg: color-mix(in srgb, var(--neutral-700) 12%, var(--list-bg));
  --list-active-text: var(--list-text);
  --list-active-border: color-mix(in srgb, var(--brand-primary-500) 46%, var(--list-border-color));
  --list-border-color: color-mix(in srgb, var(--border-default-color) 74%, var(--list-bg));
  --list-border-width: 1px;
  --list-disabled-opacity: 0.56;
  --list-radius: 0.75rem;
  --list-item-gap: 0.65rem;
  --list-item-padding-y: 0.8rem;
  --list-item-padding-x: 1rem;
  --list-shadow: none;
  --content-block-bg: var(--list-bg);
  --content-block-text: var(--list-text);
  --content-block-muted-text: var(--list-muted-text);
  --content-block-padding: 1rem;
  --content-block-gap: 0.75rem;
  --separator-color: color-mix(in srgb, var(--list-text) 14%, var(--list-bg));
  --separator-width: 1px;
  --separator-style: solid;
  --separator-margin-y: 0.65rem;
  --progress-density: comfortable;
  --progress-surface-mode: surface-1;
  --progress-tone: primary;
  --progress-label-mode: inline;
  --progress-skeleton-animation: shimmer;
  --progress-surface: var(--surface-2);
  --progress-text: var(--text-dark);
  --progress-muted-text: color-mix(in srgb, var(--text-dark) 58%, transparent);
  --progress-track-bg: color-mix(in srgb, var(--text-dark) 8%, var(--progress-surface));
  --progress-bar-bg: var(--brand-primary-500);
  --progress-bar-text: var(--btn-primary-text);
  --progress-height: 0.75rem;
  --progress-gap: 0.7rem;
  --progress-radius: 0.75rem;
  --progress-border-color: color-mix(in srgb, var(--border-default-color) 76%, var(--progress-surface));
  --progress-stripe-color: color-mix(in srgb, var(--progress-bar-text) 28%, transparent);
  --spinner-color: var(--brand-primary-500);
  --spinner-muted-color: var(--progress-muted-text);
  --spinner-size: 1.5rem;
  --spinner-size-sm: 1.1rem;
  --spinner-size-lg: 2rem;
  --spinner-border-width: 0.18em;
  --spinner-gap: var(--progress-gap);
  --skeleton-bg: color-mix(in srgb, var(--text-dark) 9%, var(--progress-surface));
  --skeleton-highlight: color-mix(in srgb, var(--text-light) 72%, var(--progress-surface));
  --skeleton-line-height: 0.8rem;
  --skeleton-avatar-size: 2.5rem;
  --skeleton-animation-name: theme-skeleton-shimmer;
  --skeleton-animation-timing: linear;
  --skeleton-highlight-bg: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);
  --skeleton-animation-duration: 1.6s;
  --form-radius: 0.75rem;
  --form-bg: var(--surface-1);
  --form-border: color-mix(in srgb, var(--border-default-color) 100%, var(--form-bg));
  --form-text: var(--text-dark);
  --form-muted-text: color-mix(in srgb, var(--text-dark) 62%, transparent);
  --form-placeholder-text: color-mix(in srgb, var(--text-dark) 44%, transparent);
  --form-check-accent: var(--brand-primary-500);
  --dropdown-bg: var(--surface-1);
  --dropdown-border: color-mix(in srgb, var(--border-default-color) 78%, var(--dropdown-bg));
  --dropdown-radius: 0.75rem;
  --dropdown-border-width: 1px;
  --dropdown-shadow: var(--shadow-surface);
  --dropdown-item-text: color-mix(in srgb, var(--text-dark) 84%, transparent);
  --dropdown-hover-mode: soft;
  --dropdown-active-tone: primary;
  --dropdown-item-hover-bg: color-mix(in srgb, var(--brand-primary-500) 7%, var(--dropdown-bg));
  --dropdown-item-hover-text: var(--text-dark);
  --dropdown-item-active-bg: color-mix(in srgb, var(--brand-primary-500) 22%, var(--dropdown-bg));
  --dropdown-neutral-active-bg: color-mix(in srgb, var(--neutral-700) 12%, var(--dropdown-bg));
  --dropdown-item-active-text: var(--dropdown-item-text);
  --dropdown-item-disabled-text: color-mix(in srgb, var(--text-dark) 42%, transparent);
  --dropdown-divider-color: color-mix(in srgb, var(--border-divider-color) 74%, var(--dropdown-bg));
  --dropdown-label-text: color-mix(in srgb, var(--text-dark) 58%, transparent);
  --modal-bg: var(--surface-2);
  --modal-text: var(--text-dark);
  --modal-border: var(--border-default-color);
  --modal-radius: 1rem;
  --modal-shadow: 0px 28px 71px 0px rgba(36, 36, 33, 0.378), 0px 22px 22px 0px rgba(36, 36, 33, 0.277);
  --modal-header-bg: var(--surface-2);
  --modal-footer-bg: color-mix(in srgb, var(--surface-3) 54%, var(--modal-bg));
  --modal-backdrop-color: var(--brand-dark);
  --offcanvas-bg: var(--surface-2);
  --offcanvas-text: var(--text-dark);
  --offcanvas-border: var(--border-default-color);
  --offcanvas-shadow: var(--shadow-floating);
  --overlay-bg: var(--surface-2);
  --overlay-text: var(--text-dark);
  --overlay-border: var(--border-default-color);
  --overlay-radius: 1rem;
  --overlay-shadow: 0px 21px 52px 0px rgba(36, 36, 33, 0.315), 0px 15px 19px 0px rgba(36, 36, 33, 0.277);
  --navbar-bg: var(--surface-2);
  --navbar-shell-bg: var(--gradient-dark-neutral);
  --navbar-shell-border-width: 0 0 2px 0;
  --navbar-shell-border-color: var(--brand-primary-500);
  --navbar-shell-radius: 0;
  --navbar-shell-shadow: 0 5px 15px -7px rgba(36, 36, 33, 0.156);
  --navbar-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  --navbar-shell-backdrop-blur: 0px;
  --navbar-shell-topline: transparent;
  --navbar-shell-leftline: transparent;
  --navbar-link-radius: 0;
  --navbar-text: var(--text-light);
  --navbar-muted-text: color-mix(in srgb, var(--text-light) 88%, transparent);
  --navbar-muted: color-mix(in srgb, var(--text-light) 88%, transparent);
  --navbar-link-hover-bg: color-mix(in srgb, var(--brand-primary-500) 8%, var(--navbar-bg));
  --navbar-link-active-bg: color-mix(in srgb, var(--brand-primary-500) 18%, var(--navbar-bg));
  --navbar-border: var(--border-default-color);
  --navbar-radius: 0.75rem;
  --navbar-shadow: var(--shadow-tight);
  --nav-bg: var(--surface-1);
  --nav-text: var(--text-dark);
  --nav-accent: var(--brand-primary-500);
  --nav-accent-strong: var(--brand-primary-600);
  --nav-hover-bg: transparent;
  --nav-hover-text: var(--nav-accent-strong);
  --nav-active-bg: transparent;
  --nav-active-text: var(--nav-accent-strong);
  --nav-border: color-mix(in srgb, var(--text-dark) 12%, var(--surface-3));
  --nav-radius: 0.75rem;
  --nav-font-weight: var(--type-label-md-font-weight, var(--font-ui-weight));
  --gradient-page-bg: var(--gradient-page-neutral);
  --gradient-surface: var(--gradient-surface-neutral);
  --gradient-dark-nav: var(--gradient-dark-neutral);
  --gradient-brand: var(--gradient-brand-primary);
  --gradient-hero: var(--gradient-brand-primary);
  --gradient-header-bg: var(--gradient-brand-primary);
  --gradient-footer-bg: var(--gradient-dark-neutral);
  --gradient-card: var(--gradient-surface-neutral);
  --gradient-accent: var(--gradient-surface-accent);
  --gradient-chip: var(--gradient-brand-accent);
  --gradient-page-neutral: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--surface-3) 11%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--neutral-200) 11%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--surface-3) 4%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--neutral-200) 4%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 76%, #fff) 0%, color-mix(in srgb, var(--surface-1) 92%, #fff) 34%, color-mix(in srgb, var(--surface-1) 84%, #fff) 50%, color-mix(in srgb, var(--surface-1) 92%, #fff) 66%, color-mix(in srgb, var(--surface-1) 80%, #fff) 100%);
  --gradient-page-primary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-primary-500) 11%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-primary-tint-1) 11%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-primary-500) 4%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-primary-tint-1) 4%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 76%, #fff) 0%, color-mix(in srgb, var(--surface-1) 92%, #fff) 34%, color-mix(in srgb, var(--surface-1) 84%, #fff) 50%, color-mix(in srgb, var(--surface-1) 92%, #fff) 66%, color-mix(in srgb, var(--surface-1) 80%, #fff) 100%);
  --gradient-page-secondary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-secondary) 11%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-secondary-tint-1) 11%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-secondary) 4%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-secondary-tint-1) 4%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 76%, #fff) 0%, color-mix(in srgb, var(--surface-1) 92%, #fff) 34%, color-mix(in srgb, var(--surface-1) 84%, #fff) 50%, color-mix(in srgb, var(--surface-1) 92%, #fff) 66%, color-mix(in srgb, var(--surface-1) 80%, #fff) 100%);
  --gradient-page-accent: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-accent) 11%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-accent-tint-1) 11%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-accent) 4%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-accent-tint-1) 4%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 76%, #fff) 0%, color-mix(in srgb, var(--surface-1) 92%, #fff) 34%, color-mix(in srgb, var(--surface-1) 84%, #fff) 50%, color-mix(in srgb, var(--surface-1) 92%, #fff) 66%, color-mix(in srgb, var(--surface-1) 80%, #fff) 100%);
  --gradient-surface-neutral: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--surface-3) 42%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-2) 34%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--surface-3) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-2) 11%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 80%, #fff) 0%, color-mix(in srgb, var(--surface-2) 94%, #fff) 34%, color-mix(in srgb, var(--surface-2) 88%, #fff) 50%, color-mix(in srgb, var(--surface-2) 94%, #fff) 66%, color-mix(in srgb, var(--surface-2) 84%, #fff) 100%);
  --gradient-surface-primary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--surface-primary-tint-2) 42%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-primary-tint-1) 34%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--surface-primary-tint-2) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-primary-tint-1) 11%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 80%, #fff) 0%, color-mix(in srgb, var(--surface-2) 94%, #fff) 34%, color-mix(in srgb, var(--surface-2) 88%, #fff) 50%, color-mix(in srgb, var(--surface-2) 94%, #fff) 66%, color-mix(in srgb, var(--surface-2) 84%, #fff) 100%);
  --gradient-surface-secondary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--surface-secondary-tint-2) 42%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-secondary-tint-1) 34%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--surface-secondary-tint-2) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-secondary-tint-1) 11%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 80%, #fff) 0%, color-mix(in srgb, var(--surface-2) 94%, #fff) 34%, color-mix(in srgb, var(--surface-2) 88%, #fff) 50%, color-mix(in srgb, var(--surface-2) 94%, #fff) 66%, color-mix(in srgb, var(--surface-2) 84%, #fff) 100%);
  --gradient-surface-accent: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--surface-accent-tint-2) 42%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-accent-tint-1) 34%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--surface-accent-tint-2) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-accent-tint-1) 11%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 80%, #fff) 0%, color-mix(in srgb, var(--surface-2) 94%, #fff) 34%, color-mix(in srgb, var(--surface-2) 88%, #fff) 50%, color-mix(in srgb, var(--surface-2) 94%, #fff) 66%, color-mix(in srgb, var(--surface-2) 84%, #fff) 100%);
  --gradient-dark-neutral: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--neutral-800) 16%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--neutral-600) 12%, transparent), transparent 62%), linear-gradient(45deg, transparent 0%, color-mix(in srgb, var(--neutral-800) 4%, transparent) 26%, color-mix(in srgb, var(--neutral-800) 3%, transparent) 42%, color-mix(in srgb, var(--neutral-600) 3%, transparent) 58%, color-mix(in srgb, var(--neutral-600) 3%, transparent) 74%, transparent 100%), linear-gradient(45deg, color-mix(in srgb, var(--neutral-950) 82%, #000) 0%, color-mix(in srgb, var(--neutral-900) 92%, #000) 34%, var(--neutral-950) 50%, color-mix(in srgb, var(--neutral-900) 92%, #000) 66%, color-mix(in srgb, var(--neutral-950) 76%, #000) 100%);
  --gradient-dark-primary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-primary-800) 16%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-primary-600) 12%, transparent), transparent 62%), linear-gradient(45deg, transparent 0%, color-mix(in srgb, var(--brand-primary-800) 4%, transparent) 26%, color-mix(in srgb, var(--brand-primary-800) 3%, transparent) 42%, color-mix(in srgb, var(--brand-primary-600) 3%, transparent) 58%, color-mix(in srgb, var(--brand-primary-600) 3%, transparent) 74%, transparent 100%), linear-gradient(45deg, color-mix(in srgb, var(--neutral-950) 82%, #000) 0%, color-mix(in srgb, var(--neutral-900) 92%, #000) 34%, var(--neutral-950) 50%, color-mix(in srgb, var(--neutral-900) 92%, #000) 66%, color-mix(in srgb, var(--neutral-950) 76%, #000) 100%);
  --gradient-dark-secondary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-secondary-800) 16%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-secondary-600) 12%, transparent), transparent 62%), linear-gradient(45deg, transparent 0%, color-mix(in srgb, var(--brand-secondary-800) 4%, transparent) 26%, color-mix(in srgb, var(--brand-secondary-800) 3%, transparent) 42%, color-mix(in srgb, var(--brand-secondary-600) 3%, transparent) 58%, color-mix(in srgb, var(--brand-secondary-600) 3%, transparent) 74%, transparent 100%), linear-gradient(45deg, color-mix(in srgb, var(--neutral-950) 82%, #000) 0%, color-mix(in srgb, var(--neutral-900) 92%, #000) 34%, var(--neutral-950) 50%, color-mix(in srgb, var(--neutral-900) 92%, #000) 66%, color-mix(in srgb, var(--neutral-950) 76%, #000) 100%);
  --gradient-dark-accent: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-accent-800) 16%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-accent-600) 12%, transparent), transparent 62%), linear-gradient(45deg, transparent 0%, color-mix(in srgb, var(--brand-accent-800) 4%, transparent) 26%, color-mix(in srgb, var(--brand-accent-800) 3%, transparent) 42%, color-mix(in srgb, var(--brand-accent-600) 3%, transparent) 58%, color-mix(in srgb, var(--brand-accent-600) 3%, transparent) 74%, transparent 100%), linear-gradient(45deg, color-mix(in srgb, var(--neutral-950) 82%, #000) 0%, color-mix(in srgb, var(--neutral-900) 92%, #000) 34%, var(--neutral-950) 50%, color-mix(in srgb, var(--neutral-900) 92%, #000) 66%, color-mix(in srgb, var(--neutral-950) 76%, #000) 100%);
  --gradient-brand-neutral: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--neutral-500) 44%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--surface-3) 32%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--neutral-500) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--surface-3) 10%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--neutral-200) 68%, #fff) 0%, color-mix(in srgb, var(--neutral-200) 84%, #fff) 34%, color-mix(in srgb, var(--neutral-200) 76%, #fff) 50%, color-mix(in srgb, var(--neutral-200) 84%, #fff) 66%, color-mix(in srgb, var(--neutral-200) 72%, #fff) 100%);
  --gradient-brand-primary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-primary-500) 44%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-primary-300) 32%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-primary-500) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--brand-primary-300) 10%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-200) 68%, #fff) 0%, color-mix(in srgb, var(--brand-primary-200) 84%, #fff) 34%, color-mix(in srgb, var(--brand-primary-200) 76%, #fff) 50%, color-mix(in srgb, var(--brand-primary-200) 84%, #fff) 66%, color-mix(in srgb, var(--brand-primary-200) 72%, #fff) 100%);
  --gradient-brand-secondary: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-secondary) 44%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-secondary-300) 32%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-secondary) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--brand-secondary-300) 10%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary-200) 68%, #fff) 0%, color-mix(in srgb, var(--brand-secondary-200) 84%, #fff) 34%, color-mix(in srgb, var(--brand-secondary-200) 76%, #fff) 50%, color-mix(in srgb, var(--brand-secondary-200) 84%, #fff) 66%, color-mix(in srgb, var(--brand-secondary-200) 72%, #fff) 100%);
  --gradient-brand-accent: radial-gradient(68rem 68rem at 95% 4%, color-mix(in srgb, var(--brand-accent) 44%, transparent), transparent 58%), radial-gradient(60rem 60rem at 4% 96%, color-mix(in srgb, var(--brand-accent-300) 32%, transparent), transparent 60%), linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--brand-accent) 14%, transparent) 18%, transparent 42%, color-mix(in srgb, var(--brand-accent-300) 10%, transparent) 82%, transparent 100%), linear-gradient(135deg, color-mix(in srgb, var(--brand-accent-200) 68%, #fff) 0%, color-mix(in srgb, var(--brand-accent-200) 84%, #fff) 34%, color-mix(in srgb, var(--brand-accent-200) 76%, #fff) 50%, color-mix(in srgb, var(--brand-accent-200) 84%, #fff) 66%, color-mix(in srgb, var(--brand-accent-200) 72%, #fff) 100%);
  --font-pairing-key: oswald-montserrat;
  --font-display: "Oswald", "Trebuchet MS", sans-serif;
  --font-body: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
  --type-scale-mode: balanced;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-display: 3.5rem;
  --font-size-title: 1.25rem;
  --font-line-height-body: 1.5;
  --font-line-height-heading: 1.2;
  --heading-tone-mode: balanced;
  --font-heading-weight: 600;
  --font-heading-tracking: -0.01em;
  --ui-label-style: quiet;
  --font-ui-weight: 500;
  --font-ui-tracking: 0em;
  --font-ui-transform: none;
  --btn-outline-primary-text: #242421;
  --btn-outline-primary-border: var(--brand-primary-500);
  --btn-outline-primary-surface-dark-text: #ffc300;
  --btn-outline-primary-surface-dark-border: #ffc300;
  --btn-outline-secondary-text: #242421;
  --btn-outline-secondary-border: var(--brand-secondary);
  --btn-outline-secondary-surface-dark-text: #0fbbfa;
  --btn-outline-secondary-surface-dark-border: #0fbbfa;
  --btn-outline-accent-text: #3f00eb;
  --btn-outline-accent-border: var(--brand-accent);
  --btn-outline-accent-surface-dark-text: #f9f9f7;
  --btn-outline-accent-surface-dark-border: #f9f9f7;
  --btn-outline-success-text: #242421;
  --btn-outline-success-border: #0FEB6B;
  --btn-outline-success-surface-dark-text: #0FEB6B;
  --btn-outline-success-surface-dark-border: #0FEB6B;
  --btn-outline-info-text: #242421;
  --btn-outline-info-border: #299AEB;
  --btn-outline-info-surface-dark-text: #299AEB;
  --btn-outline-info-surface-dark-border: #299AEB;
  --btn-outline-warning-text: #242421;
  --btn-outline-warning-border: #EBB73D;
  --btn-outline-warning-surface-dark-text: #EBB73D;
  --btn-outline-warning-surface-dark-border: #EBB73D;
  --btn-outline-danger-text: #242421;
  --btn-outline-danger-border: #DB2B10;
  --btn-outline-danger-surface-dark-text: #f9f9f7;
  --btn-outline-danger-surface-dark-border: #DB2B10;
  --btn-outline-neutral-text: #616154;
  --btn-outline-neutral-border: var(--neutral-700);
  --btn-outline-neutral-surface-dark-text: #f9f9f7;
  --btn-outline-neutral-surface-dark-border: #f9f9f7;
  --btn-outline-dark-text: #221f13;
  --btn-outline-dark-border: var(--brand-dark);
  --btn-outline-dark-surface-text: #f9f9f7;
  --btn-outline-dark-surface-border: #f9f9f7;
  --btn-outline-light-text: #242421;
  --btn-outline-light-border: var(--brand-light);
  --btn-outline-light-surface-dark-text: #f6f5f1;
  --btn-outline-light-surface-dark-border: #f6f5f1;
  --form-control-accent: var(--brand-primary-500);
  --form-control-accent-strong: var(--brand-primary-600);
  --form-disabled-bg: color-mix(in srgb, var(--form-bg) 72%, var(--text-dark));
  --form-disabled-text: color-mix(in srgb, var(--form-text) 44%, transparent);
  --nav-accent-mode: primary;
  --nav-accent-text: var(--text-dark);
  --nav-item-style: accent-text;
  --nav-tabs-active-border: transparent;
  --nav-tabs-active-shadow: none;
  --nav-mobile-hover-bg: transparent;
  --nav-mobile-hover-text: var(--nav-hover-text);
  --nav-mobile-hover-border: transparent;
  --nav-mobile-hover-shadow: none;
  --nav-mobile-active-bg: var(--nav-active-bg);
  --nav-mobile-active-border: var(--nav-tabs-active-border);
  --nav-mobile-active-shadow: var(--nav-tabs-active-shadow);
  --nav-mobile-active-indicator-width: 0;
  --nav-mobile-active-indicator-thickness: 0;
  --nav-mobile-active-indicator-offset-x: 0.75rem;
  --nav-mobile-active-indicator-offset-y: 0.35rem;
  --nav-mobile-text-decoration-line: none;
  --nav-mobile-text-decoration-thickness: 0;
  --nav-mobile-text-underline-offset: 0.35rem;
  --footer-bg: var(--gradient-dark-neutral);
  --footer-text: var(--text-light);
  --footer-muted: color-mix(in srgb, var(--text-light) 68%, transparent);
  --footer-link: var(--brand-primary-500);
  --footer-link-hover: color-mix(in srgb, var(--footer-link) 78%, var(--footer-text));
  --footer-link-decoration: none;
  --footer-link-hover-decoration: underline;
  --footer-link-underline-offset: 0.28em;
  --footer-link-accent-bar-display: none;
  --footer-divider: color-mix(in srgb, var(--footer-text) 13%, transparent);
  --page-background-type: gradient;
  --page-background-surface: surface-1;
  --page-background-gradient: gradient-page-neutral;
  --page-text-tone: auto;
  --page-content-surface: surface-primary-tint-1;
  --theme-page-background: var(--surface-1);
  --theme-page-solid-background: var(--surface-1);
  --theme-page-gradient-background: var(--gradient-page-bg);
  --theme-page-solid-text: var(--text-dark);
  --theme-page-text: var(--text-dark);
  --theme-page-muted-text: color-mix(in srgb, var(--text-dark) 64%, transparent);
  --theme-page-content-surface: var(--surface-primary-tint-1);
  --theme-mode-dark-page-background: var(--gradient-dark-neutral);
  --theme-mode-dark-page-text: var(--text-light);
  --theme-mode-dark-page-muted-text: var(--neutral-300);
  --theme-mode-dark-content-surface: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-surface-1: color-mix(in srgb, var(--neutral-950) 88%, var(--brand-dark));
  --theme-mode-dark-surface-2: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-surface-3: color-mix(in srgb, var(--neutral-800) 82%, var(--brand-dark));
  --theme-mode-dark-border: color-mix(in srgb, var(--text-light) 16%, transparent);
  --theme-mode-dark-divider: color-mix(in srgb, var(--text-light) 11%, transparent);
  --theme-mode-dark-card-surface: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-card-text: var(--text-light);
  --theme-mode-dark-card-muted-text: var(--neutral-300);
  --theme-mode-dark-card-border: color-mix(in srgb, var(--text-light) 14%, transparent);
  --theme-mode-dark-form-bg: color-mix(in srgb, var(--neutral-950) 88%, var(--brand-dark));
  --theme-mode-dark-form-text: var(--text-light);
  --theme-mode-dark-form-muted-text: var(--neutral-300);
  --theme-mode-dark-form-placeholder-text: var(--neutral-400);
  --theme-mode-dark-form-border: color-mix(in srgb, var(--text-light) 18%, transparent);
  --theme-mode-dark-form-disabled-bg: color-mix(in srgb, var(--neutral-800) 82%, var(--brand-dark));
  --theme-mode-dark-form-disabled-text: var(--neutral-500);
  --theme-mode-dark-table-bg: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-table-text: var(--text-light);
  --theme-mode-dark-table-muted-text: var(--neutral-300);
  --theme-mode-dark-table-border: color-mix(in srgb, var(--text-light) 13%, transparent);
  --theme-mode-dark-dropdown-bg: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-dropdown-text: var(--neutral-100);
  --theme-mode-dark-dropdown-disabled-text: var(--neutral-500);
  --theme-mode-dark-modal-bg: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-modal-text: var(--text-light);
  --theme-mode-dark-nav-bg: color-mix(in srgb, var(--neutral-900) 88%, var(--brand-dark));
  --theme-mode-dark-nav-text: var(--neutral-100);
  --theme-mode-dark-nav-muted-text: var(--neutral-300);
  --theme-mode-dark-nav-hover-bg: color-mix(in srgb, var(--text-light) 9%, transparent);
  --theme-mode-dark-nav-hover-text: var(--text-light);
  --theme-mode-dark-nav-active-bg: color-mix(in srgb, var(--brand-primary-500) 28%, transparent);
  --theme-mode-dark-nav-active-text: var(--text-light);
  --brand-primary-50: #fffaeb;
  --brand-primary-100: #fff5d6;
  --brand-primary-200: #ffedb2;
  --brand-primary-300: #ffe285;
  --brand-primary-400: #ffd54d;
  --brand-primary-800: #a88100;
  --brand-primary-900: #8a6900;
  --brand-primary-950: #614a00;
  --brand-secondary-50: #ecfaff;
  --brand-secondary-100: #d9f4fe;
  --brand-secondary-200: #b7ebfe;
  --brand-secondary-300: #8cdefd;
  --brand-secondary-400: #57cffc;
  --brand-secondary-500: #0fbbfa;
  --brand-secondary-600: #0ea8e1;
  --brand-secondary-700: #0c96c8;
  --brand-secondary-800: #0a7ba5;
  --brand-secondary-900: #086587;
  --brand-secondary-950: #06475f;
  --brand-accent-50: #f0ebfd;
  --brand-accent-100: #e0d6fc;
  --brand-accent-200: #c5b2f9;
  --brand-accent-300: #a385f5;
  --brand-accent-400: #794df1;
  --brand-accent-500: #3f00eb;
  --brand-accent-600: #3900d4;
  --brand-accent-700: #3200bc;
  --brand-accent-800: #2a009b;
  --brand-accent-900: #22007f;
  --brand-accent-950: #180059;
  --neutral-300: #cfcfc8;
  --neutral-400: #b2b3a6;
  --neutral-500: #969883;
  --neutral-600: #7a7b68;
  --neutral-800: #4a4b41;
  --neutral-950: #242421;
  --semantic-success: #0FEB6B;
  --semantic-warning: #EBB73D;
  --semantic-danger: #DB2B10;
  --semantic-info: #299AEB;
  --theme-name: ProjectNotChat.Website;
  --harmony-mode: split-complementary;
  --brand-auto-harmony: true;
  --button-personality: prominent;
  --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-primary-base) 82%, #fff) 42%, var(--btn-primary-base) 100%);
  --btn-primary-border: color-mix(in srgb, var(--btn-primary-base) 84%, #000);
  --btn-primary-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-primary-hover-border: #3a4149;
  --btn-primary-hover-text: var(--text-light);
  --btn-primary-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-primary-active-border: color-mix(in srgb, var(--btn-primary-base) 48%, #3a4149);
  --btn-primary-active-text: var(--text-light);
  --btn-primary-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-primary-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-secondary-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-secondary-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-secondary-base) 82%, #fff) 42%, var(--btn-secondary-base) 100%);
  --btn-secondary-border: color-mix(in srgb, var(--btn-secondary-base) 84%, #000);
  --btn-secondary-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-secondary-hover-border: #3a4149;
  --btn-secondary-hover-text: var(--text-light);
  --btn-secondary-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-secondary-active-border: color-mix(in srgb, var(--btn-secondary-base) 48%, #3a4149);
  --btn-secondary-active-text: var(--text-light);
  --btn-secondary-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-secondary-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-accent-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-accent-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-accent-base) 82%, #fff) 42%, var(--btn-accent-base) 100%);
  --btn-accent-border: color-mix(in srgb, var(--btn-accent-base) 84%, #000);
  --btn-accent-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-accent-hover-border: #3a4149;
  --btn-accent-hover-text: var(--text-light);
  --btn-accent-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-accent-active-border: color-mix(in srgb, var(--btn-accent-base) 48%, #3a4149);
  --btn-accent-active-text: var(--text-light);
  --btn-accent-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-accent-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-success-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-success-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-success-base) 82%, #fff) 42%, var(--btn-success-base) 100%);
  --btn-success-border: color-mix(in srgb, var(--btn-success-base) 84%, #000);
  --btn-success-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-success-hover-border: #3a4149;
  --btn-success-hover-text: var(--text-light);
  --btn-success-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-success-active-border: color-mix(in srgb, var(--btn-success-base) 48%, #3a4149);
  --btn-success-active-text: var(--text-light);
  --btn-success-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-success-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-info-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-info-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-info-base) 82%, #fff) 42%, var(--btn-info-base) 100%);
  --btn-info-border: color-mix(in srgb, var(--btn-info-base) 84%, #000);
  --btn-info-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-info-hover-border: #3a4149;
  --btn-info-hover-text: var(--text-light);
  --btn-info-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-info-active-border: color-mix(in srgb, var(--btn-info-base) 48%, #3a4149);
  --btn-info-active-text: var(--text-light);
  --btn-info-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-info-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-warning-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-warning-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-warning-base) 82%, #fff) 42%, var(--btn-warning-base) 100%);
  --btn-warning-border: color-mix(in srgb, var(--btn-warning-base) 84%, #000);
  --btn-warning-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-warning-hover-border: #3a4149;
  --btn-warning-hover-text: var(--text-light);
  --btn-warning-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-warning-active-border: color-mix(in srgb, var(--btn-warning-base) 48%, #3a4149);
  --btn-warning-active-text: var(--text-light);
  --btn-warning-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-warning-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-danger-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-danger-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-danger-base) 82%, #fff) 42%, var(--btn-danger-base) 100%);
  --btn-danger-border: color-mix(in srgb, var(--btn-danger-base) 84%, #000);
  --btn-danger-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-danger-hover-border: #3a4149;
  --btn-danger-hover-text: var(--text-light);
  --btn-danger-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-danger-active-border: color-mix(in srgb, var(--btn-danger-base) 48%, #3a4149);
  --btn-danger-active-text: var(--text-light);
  --btn-danger-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-danger-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-neutral-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-neutral-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-neutral-base) 82%, #fff) 42%, var(--btn-neutral-base) 100%);
  --btn-neutral-border: color-mix(in srgb, var(--btn-neutral-base) 84%, #000);
  --btn-neutral-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-neutral-hover-border: #3a4149;
  --btn-neutral-hover-text: var(--text-light);
  --btn-neutral-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-neutral-active-border: color-mix(in srgb, var(--btn-neutral-base) 48%, #3a4149);
  --btn-neutral-active-text: var(--text-light);
  --btn-neutral-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-neutral-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-dark-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-dark-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-dark-base) 82%, #fff) 42%, var(--btn-dark-base) 100%);
  --btn-dark-border: color-mix(in srgb, var(--btn-dark-base) 84%, #000);
  --btn-dark-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-dark-hover-border: #3a4149;
  --btn-dark-hover-text: var(--text-light);
  --btn-dark-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-dark-active-border: color-mix(in srgb, var(--btn-dark-base) 48%, #3a4149);
  --btn-dark-active-text: var(--text-light);
  --btn-dark-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-dark-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --btn-light-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-light-base) 58%, #fff) 0%, color-mix(in srgb, var(--btn-light-base) 82%, #fff) 42%, var(--btn-light-base) 100%);
  --btn-light-border: color-mix(in srgb, var(--btn-light-base) 84%, #000);
  --btn-light-hover-bg: linear-gradient(180deg, var(--neutral-800) 0%, #424a52 100%);
  --btn-light-hover-border: #3a4149;
  --btn-light-hover-text: var(--text-light);
  --btn-light-active-bg: linear-gradient(180deg, #49515a 0%, #3d444c 100%);
  --btn-light-active-border: color-mix(in srgb, var(--btn-light-base) 48%, #3a4149);
  --btn-light-active-text: var(--text-light);
  --btn-light-hover-shadow: 0 12px 24px rgba(15, 23, 32, 0.18);
  --btn-light-active-shadow: 0 0 0 1px color-mix(in srgb, var(--button-current-base, currentColor) 16%, transparent), 0 10px 22px rgba(15, 23, 32, 0.18);
  --nav-surface-mode: surface-1;
  --nav-text-mode: auto;
  --nav-hover-text-mode: auto;
  --navbar-shell-bg-mode: gradient-dark-neutral;
  --navbar-shell-border-width-mode: medium;
  --navbar-shell-border-color-mode: primary;
  --navbar-shell-shadow-mode: soft;
  --nav-font-weight-mode: regular;
  --nav-muted: color-mix(in srgb, var(--text-dark) 68%, transparent);
  --footer-bg-mode: gradient-dark-neutral;
  --footer-text-mode: auto;
  --footer-link-mode: primary;
  --footer-link-style: underline;
  --footer-divider-mode: soft;
  --dropdown-surface-mode: surface-1;
  --dropdown-border-mode: standard;
  --dropdown-shadow-mode: soft;
  --dropdown-divider-mode: soft;
  --surface-0: #f6f5f1;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --border-default: color-mix(in srgb, var(--brand-dark) 18%, var(--surface-3));
  --focus-ring: #ffd54d;
  --border-success-color: color-mix(in srgb, var(--btn-success-base) 72%, var(--surface-3));
  --border-danger-color: color-mix(in srgb, var(--btn-danger-base) 76%, var(--surface-3));
  --border-warning-color: color-mix(in srgb, var(--btn-warning-base) 72%, var(--surface-3));
  --border-info-color: color-mix(in srgb, var(--btn-info-base) 72%, var(--surface-3));
  --shadow-style-mode: soft;
  --shadow-intensity: 50;
  --shadow-softness: 50;
  --shadow-spread: 50;
  --shadow-offset-x: 50;
  --shadow-offset-y: 50;
  --shadow-tight-intensity: 50;
  --shadow-tight-softness: 50;
  --shadow-tight-spread: 50;
  --shadow-tight-offset-x: 50;
  --shadow-tight-offset-y: 50;
  --shadow-soft-intensity: 50;
  --shadow-soft-softness: 50;
  --shadow-soft-spread: 50;
  --shadow-soft-offset-x: 50;
  --shadow-soft-offset-y: 50;
  --shadow-lifted-intensity: 50;
  --shadow-lifted-softness: 50;
  --shadow-lifted-spread: 50;
  --shadow-lifted-offset-x: 50;
  --shadow-lifted-offset-y: 50;
  --shadow-floating-intensity: 50;
  --shadow-floating-softness: 50;
  --shadow-floating-spread: 50;
  --shadow-floating-offset-x: 50;
  --shadow-floating-offset-y: 50;
  --shadow-color-mode: auto;
  --shadow-color: #000000;
  --card-shadow-mode: soft;
  --overlay-shadow-mode: lifted;
  --modal-shadow-mode: floating;
  --offcanvas-shadow-mode: floating;
  --form-shadow-mode: none;
  --shadow-soft: 0px 8px 22px 0px rgba(36, 36, 33, 0.188), 0px 5px 6px 0px rgba(36, 36, 33, 0.228);
  --shadow-lifted: 0px 16px 40px 0px rgba(36, 36, 33, 0.281), 0px 11px 14px 0px rgba(36, 36, 33, 0.248);
  --shadow-floating: 0px 28px 71px 0px rgba(36, 36, 33, 0.378), 0px 22px 22px 0px rgba(36, 36, 33, 0.277);
  --form-shadow: none;
  --focus-ring-source: primary;
  --focus-ring-size-intensity: 84;
  --focus-ring-offset-intensity: 0;
  --focus-ring-strength-intensity: 18;
  --focus-ring-border-emphasis: 58;
  --focus-ring-size: 0.355rem;
  --focus-ring-offset: 0rem;
  --focus-ring-edge-color: color-mix(in srgb, var(--focus-ring-color) 70%, transparent);
  --form-focus-ring-color: var(--focus-ring-edge-color);
  --form-focus-ring-shadow: var(--focus-ring-shadow);
  --card-border-mode: standard;
  --card-border-width: 1px;
  --card-border-style: solid;
  --card-border-mix: 72%;
  --card-title-color: #222421;
  --card-text-color: color-mix(in srgb, var(--text-dark) 86%, #ffffff);
  --card-footer-text-color: color-mix(in srgb, var(--text-dark) 70%, #ffffff);
  --form-control-accent-source: primary;
  --btn-primary-base-source: brand-primary-500;
  --btn-secondary-base-source: brand-secondary;
  --btn-accent-base-source: brand-accent;
  --btn-neutral-base-source: neutral-400;
  --btn-dark-base-source: brand-dark;
  --btn-light-base-source: brand-light;
  --table-border-mode: rows;
  --accordion-border-mode: separated;
  --list-border-mode: separated;
  --form-border-mode: strong;
  --table-header-tone: surface-2;
  --table-selected-tone: primary;
  --accordion-header-tone: primary-tint-2;
  --list-active-tone: primary;
  --progress-spinner-tone: primary;
  --dropdown-tone-mode: primary;
  --type-heading-tone: balanced;
  --badge-padding: 0.35rem 0.65rem;
  --table-density: comfortable;
  --table-surface-mode: surface-1;
  --table-stripe-mode: subtle;
  --table-shadow-mode: none;
  --alert-density: comfortable;
  --alert-surface-mode: soft;
  --alert-emphasis: standard;
  --alert-icon-style: badge;
  --accordion-density: comfortable;
  --accordion-surface-mode: surface-2;
  --accordion-icon-style: chevron;
  --accordion-shadow-mode: soft;
  --list-density: comfortable;
  --list-surface-mode: surface-2;
  --list-separator-style: subtle;
  --list-shadow-mode: none;
  --form-surface-mode: surface-1;
  --overlay-surface-style: surface-2;
  --overlay-shadow-style: lifted;
  --overlay-arrow-style: integrated;
  --gradient-personality: bold-brand;
  --gradient-composition: ambient-corners;
  --selected-gradient-key: page;
  --selected-gradient-preview-mode: context;
  --theme-mode-dark-enabled: true;
  --theme-mode-dark-selector: common;
  --theme-mode-dark-page-background-mode: gradient-dark-neutral;
  --theme-mode-dark-content-surface-mode: neutral-900;
  --theme-mode-dark-card-surface-mode: neutral-900;
  --theme-mode-dark-form-surface-mode: neutral-950;
  --theme-mode-dark-nav-surface-mode: neutral-900;
  --theme-mode-dark-page-text-mode: text-light;
  --theme-mode-dark-muted-text-mode: neutral-300;
  --theme-mode-dark-placeholder-text-mode: neutral-400;
  --theme-mode-dark-disabled-text-mode: neutral-500;
  --theme-mode-dark-nav-text-mode: neutral-100;
  --form-placeholder: color-mix(in srgb, var(--text-dark) 55%, transparent);
  --type-display-font-family: var(--font-display);
  --type-display-font-size: 3.5rem;
  --type-display-font-weight: 640;
  --type-display-line-height: 1.16;
  --type-display-letter-spacing: -0.02em;
  --type-display-text-transform: none;
  --type-headline-xl-font-family: var(--font-display);
  --type-headline-xl-font-size: 2.5rem;
  --type-headline-xl-font-weight: 600;
  --type-headline-xl-line-height: 1.2;
  --type-headline-xl-letter-spacing: -0.01em;
  --type-headline-xl-text-transform: none;
  --type-headline-lg-font-family: var(--font-display);
  --type-headline-lg-font-size: 2rem;
  --type-headline-lg-font-weight: 600;
  --type-headline-lg-line-height: 1.2;
  --type-headline-lg-letter-spacing: -0.01em;
  --type-headline-lg-text-transform: none;
  --type-headline-md-font-family: var(--font-body);
  --type-headline-md-font-size: 1.75rem;
  --type-headline-md-font-weight: 580;
  --type-headline-md-line-height: 1.22;
  --type-headline-md-letter-spacing: -0.004em;
  --type-headline-md-text-transform: none;
  --type-title-font-family: var(--font-body);
  --type-title-font-size: 1.25rem;
  --type-title-font-weight: 560;
  --type-title-line-height: 1.28;
  --type-title-letter-spacing: 0em;
  --type-title-text-transform: none;
  --type-body-lg-font-family: var(--font-body);
  --type-body-lg-font-size: 1.25rem;
  --type-body-lg-font-weight: 500;
  --type-body-lg-line-height: 1.45;
  --type-body-lg-letter-spacing: 0em;
  --type-body-lg-text-transform: none;
  --type-body-md-font-family: var(--font-body);
  --type-body-md-font-size: 1rem;
  --type-body-md-font-weight: 400;
  --type-body-md-line-height: 1.5;
  --type-body-md-letter-spacing: 0em;
  --type-body-md-text-transform: none;
  --type-body-sm-font-family: var(--font-body);
  --type-body-sm-font-size: 0.875rem;
  --type-body-sm-font-weight: 400;
  --type-body-sm-line-height: 1.5;
  --type-body-sm-letter-spacing: 0em;
  --type-body-sm-text-transform: none;
  --type-label-lg-font-family: var(--font-body);
  --type-label-lg-font-size: 1rem;
  --type-label-lg-font-weight: 500;
  --type-label-lg-line-height: 1.15;
  --type-label-lg-letter-spacing: 0em;
  --type-label-lg-text-transform: none;
  --type-label-md-font-family: var(--font-body);
  --type-label-md-font-size: 0.875rem;
  --type-label-md-font-weight: 500;
  --type-label-md-line-height: 1.15;
  --type-label-md-letter-spacing: 0em;
  --type-label-md-text-transform: none;
  --type-label-sm-font-family: var(--font-body);
  --type-label-sm-font-size: 0.75rem;
  --type-label-sm-font-weight: 500;
  --type-label-sm-line-height: 1.15;
  --type-label-sm-letter-spacing: 0em;
  --type-label-sm-text-transform: none;
  --type-mono-font-family: var(--font-mono);
  --type-mono-font-size: 0.875rem;
  --type-mono-font-weight: 500;
  --type-mono-line-height: 1.4;
  --type-mono-letter-spacing: 0em;
  --type-mono-text-transform: none;
}

:root {
  --bs-primary: var(--brand-primary-500);
  --bs-primary-rgb: var(--brand-primary-rgb, 13, 110, 253);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--brand-primary-500) 68%, var(--text-dark));
  --bs-primary-bg-subtle: color-mix(in srgb, var(--brand-primary-500) 12%, var(--surface-2));
  --bs-primary-border-subtle: color-mix(in srgb, var(--brand-primary-500) 38%, var(--border-default-color));
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: var(--brand-secondary-rgb, 108, 117, 125);
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--brand-secondary) 68%, var(--text-dark));
  --bs-secondary-bg-subtle: color-mix(in srgb, var(--brand-secondary) 12%, var(--surface-2));
  --bs-secondary-border-subtle: color-mix(in srgb, var(--brand-secondary) 38%, var(--border-default-color));
  --bs-success: var(--btn-success-base);
  --bs-success-rgb: var(--btn-success-rgb, 25, 135, 84);
  --bs-success-text-emphasis: color-mix(in srgb, var(--btn-success-base) 68%, var(--text-dark));
  --bs-success-bg-subtle: color-mix(in srgb, var(--btn-success-base) 12%, var(--surface-2));
  --bs-success-border-subtle: color-mix(in srgb, var(--btn-success-base) 38%, var(--border-default-color));
  --bs-info: var(--btn-info-base);
  --bs-info-rgb: var(--btn-info-rgb, 13, 202, 240);
  --bs-info-text-emphasis: color-mix(in srgb, var(--btn-info-base) 68%, var(--text-dark));
  --bs-info-bg-subtle: color-mix(in srgb, var(--btn-info-base) 12%, var(--surface-2));
  --bs-info-border-subtle: color-mix(in srgb, var(--btn-info-base) 38%, var(--border-default-color));
  --bs-warning: var(--btn-warning-base);
  --bs-warning-rgb: var(--btn-warning-rgb, 255, 193, 7);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--btn-warning-base) 68%, var(--text-dark));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--btn-warning-base) 12%, var(--surface-2));
  --bs-warning-border-subtle: color-mix(in srgb, var(--btn-warning-base) 38%, var(--border-default-color));
  --bs-danger: var(--btn-danger-base);
  --bs-danger-rgb: var(--btn-danger-rgb, 220, 53, 69);
  --bs-danger-text-emphasis: color-mix(in srgb, var(--btn-danger-base) 68%, var(--text-dark));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--btn-danger-base) 12%, var(--surface-2));
  --bs-danger-border-subtle: color-mix(in srgb, var(--btn-danger-base) 38%, var(--border-default-color));
  --bs-light: var(--brand-light);
  --bs-light-rgb: var(--brand-light-rgb, 248, 249, 250);
  --bs-light-text-emphasis: color-mix(in srgb, var(--brand-light) 68%, var(--text-dark));
  --bs-light-bg-subtle: color-mix(in srgb, var(--brand-light) 12%, var(--surface-2));
  --bs-light-border-subtle: color-mix(in srgb, var(--brand-light) 38%, var(--border-default-color));
  --bs-dark: var(--brand-dark);
  --bs-dark-rgb: var(--brand-dark-rgb, 33, 37, 41);
  --bs-dark-text-emphasis: color-mix(in srgb, var(--brand-dark) 68%, var(--text-dark));
  --bs-dark-bg-subtle: color-mix(in srgb, var(--brand-dark) 12%, var(--surface-2));
  --bs-dark-border-subtle: color-mix(in srgb, var(--brand-dark) 38%, var(--border-default-color));
  --bs-body-color: var(--text-dark);
  --bs-body-bg: var(--surface-1);
  --bs-border-color: var(--border-default-color);
  --bs-link-color: var(--brand-primary-500);
  --bs-link-color-rgb: var(--brand-primary-rgb, 13, 110, 253);
  --bs-link-hover-color: var(--brand-primary-700);
}

.text-primary { color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-primary { color: var(--btn-primary-text) !important; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.text-secondary { color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-secondary { border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-secondary { color: var(--btn-secondary-text) !important; background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.text-success { color: rgba(var(--bs-success-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-success { border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-success { color: var(--btn-success-text) !important; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.text-info { color: rgba(var(--bs-info-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-info { background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-info { border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-info { color: var(--btn-info-text) !important; background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.text-warning { color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-warning { border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-warning { color: var(--btn-warning-text) !important; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.text-danger { color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-danger { border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-danger { color: var(--btn-danger-text) !important; background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.text-light { color: rgba(var(--bs-light-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-light { background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-light { border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-light { color: var(--btn-light-text) !important; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.text-dark { color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-dark { background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-dark { border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity, 1)) !important; }
.text-bg-dark { color: var(--btn-dark-text) !important; background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }
.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

.text-accent { color: rgba(var(--brand-accent-rgb, 111, 66, 193), var(--bs-text-opacity, 1)) !important; }
.bg-accent { background-color: rgba(var(--brand-accent-rgb, 111, 66, 193), var(--bs-bg-opacity, 1)) !important; }
.border-accent { border-color: rgba(var(--brand-accent-rgb, 111, 66, 193), var(--bs-border-opacity, 1)) !important; }
.text-bg-accent { color: var(--btn-accent-text) !important; background-color: rgba(var(--brand-accent-rgb, 111, 66, 193), var(--bs-bg-opacity, 1)) !important; }
.alert-accent {
  --bs-alert-color: color-mix(in srgb, var(--brand-accent) 68%, var(--text-dark));
  --bs-alert-bg: color-mix(in srgb, var(--brand-accent) 12%, var(--surface-2));
  --bs-alert-border-color: color-mix(in srgb, var(--brand-accent) 38%, var(--border-default-color));
  --bs-alert-link-color: color-mix(in srgb, var(--brand-accent) 68%, var(--text-dark));
}

        .theme-builder-scope.theme-mode-dark,
        .theme-builder-scope[data-theme-mode="dark"],
        .theme-builder-scope[data-bs-theme="dark"],
        body.theme-builder-scope.theme-mode-dark,
        body.theme-builder-scope[data-theme-mode="dark"],
        body.theme-builder-scope[data-bs-theme="dark"],
        html[data-bs-theme="dark"] .theme-builder-scope,
        body[data-bs-theme="dark"] .theme-builder-scope,
        [data-bs-theme="dark"] .theme-builder-scope,
        .dark-theme .theme-builder-scope,
        .theme-builder-scope.dark-theme {
  color-scheme: dark;
  --theme-page-background: var(--theme-mode-dark-page-background);
  --theme-page-solid-background: var(--theme-mode-dark-page-background);
  --theme-page-gradient-background: var(--theme-mode-dark-page-background);
  --theme-page-solid-text: var(--theme-mode-dark-page-text);
  --theme-page-text: var(--theme-mode-dark-page-text);
  --theme-page-muted-text: var(--theme-mode-dark-page-muted-text);
  --theme-page-content-surface: var(--theme-mode-dark-content-surface);
  --surface-1: var(--theme-mode-dark-surface-1);
  --surface-2: var(--theme-mode-dark-surface-2);
  --surface-3: var(--theme-mode-dark-surface-3);
  --border-default-color: var(--theme-mode-dark-border);
  --border-divider-color: var(--theme-mode-dark-divider);
  --card-surface: var(--theme-mode-dark-card-surface);
  --card-text-color: var(--theme-mode-dark-card-text);
  --card-footer-text-color: var(--theme-mode-dark-card-muted-text);
  --card-border-color: var(--theme-mode-dark-card-border);
  --form-bg: var(--theme-mode-dark-form-bg);
  --form-text: var(--theme-mode-dark-form-text);
  --form-muted-text: var(--theme-mode-dark-form-muted-text);
  --form-placeholder-text: var(--theme-mode-dark-form-placeholder-text);
  --form-placeholder: var(--theme-mode-dark-form-placeholder-text);
  --form-border: var(--theme-mode-dark-form-border);
  --form-disabled-bg: var(--theme-mode-dark-form-disabled-bg);
  --form-disabled-text: var(--theme-mode-dark-form-disabled-text);
  --table-bg: var(--theme-mode-dark-table-bg);
  --table-text: var(--theme-mode-dark-table-text);
  --table-muted-text: var(--theme-mode-dark-table-muted-text);
  --table-border-color: var(--theme-mode-dark-table-border);
  --dropdown-bg: var(--theme-mode-dark-dropdown-bg);
  --dropdown-item-text: var(--theme-mode-dark-dropdown-text);
  --dropdown-item-disabled-text: var(--theme-mode-dark-dropdown-disabled-text);
  --modal-bg: var(--theme-mode-dark-modal-bg);
  --modal-text: var(--theme-mode-dark-modal-text);
  --offcanvas-bg: var(--theme-mode-dark-modal-bg);
  --offcanvas-text: var(--theme-mode-dark-modal-text);
  --overlay-bg: var(--theme-mode-dark-modal-bg);
  --overlay-text: var(--theme-mode-dark-modal-text);
  --navbar-bg: var(--theme-mode-dark-nav-bg);
  --navbar-shell-bg: var(--theme-mode-dark-nav-bg);
  --navbar-text: var(--theme-mode-dark-nav-text);
  --navbar-muted-text: var(--theme-mode-dark-nav-muted-text);
  --navbar-muted: var(--theme-mode-dark-nav-muted-text);
  --nav-bg: var(--theme-mode-dark-nav-bg);
  --nav-text: var(--theme-mode-dark-nav-text);
  --nav-muted: var(--theme-mode-dark-nav-muted-text);
  --nav-hover-bg: var(--theme-mode-dark-nav-hover-bg);
  --nav-hover-text: var(--theme-mode-dark-nav-hover-text);
  --nav-active-bg: var(--theme-mode-dark-nav-active-bg);
  --nav-active-text: var(--theme-mode-dark-nav-active-text);
  --bs-body-color: var(--theme-mode-dark-page-text);
  --bs-body-bg: var(--theme-mode-dark-surface-1);
  --bs-border-color: var(--theme-mode-dark-border);
}

        .theme-builder-scope.theme-mode-dark .text-muted,
        .theme-builder-scope[data-theme-mode="dark"] .text-muted,
        .theme-builder-scope[data-bs-theme="dark"] .text-muted,
        body.theme-builder-scope.theme-mode-dark .text-muted,
        body.theme-builder-scope[data-theme-mode="dark"] .text-muted,
        body.theme-builder-scope[data-bs-theme="dark"] .text-muted,
        html[data-bs-theme="dark"] .theme-builder-scope .text-muted,
        body[data-bs-theme="dark"] .theme-builder-scope .text-muted,
        [data-bs-theme="dark"] .theme-builder-scope .text-muted,
        .dark-theme .theme-builder-scope .text-muted,
        .theme-builder-scope.dark-theme .text-muted {
  color: var(--theme-page-muted-text) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-primary,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-primary,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-primary,
        body.theme-builder-scope.theme-mode-dark .btn-outline-primary,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-primary,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-primary,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-primary,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-primary,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-primary,
        .dark-theme .theme-builder-scope .btn-outline-primary,
        .theme-builder-scope.dark-theme .btn-outline-primary {
  --bs-btn-color: var(--btn-outline-primary-surface-dark-text, var(--btn-primary-base));
  --bs-btn-border-color: var(--btn-outline-primary-surface-dark-border, var(--btn-primary-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-primary-surface-dark-text, var(--btn-primary-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-primary-surface-dark-border, var(--btn-primary-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-secondary,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-secondary,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-secondary,
        body.theme-builder-scope.theme-mode-dark .btn-outline-secondary,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-secondary,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-secondary,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-secondary,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-secondary,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-secondary,
        .dark-theme .theme-builder-scope .btn-outline-secondary,
        .theme-builder-scope.dark-theme .btn-outline-secondary {
  --bs-btn-color: var(--btn-outline-secondary-surface-dark-text, var(--btn-secondary-base));
  --bs-btn-border-color: var(--btn-outline-secondary-surface-dark-border, var(--btn-secondary-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-secondary-surface-dark-text, var(--btn-secondary-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-secondary-surface-dark-border, var(--btn-secondary-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-accent,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-accent,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-accent,
        body.theme-builder-scope.theme-mode-dark .btn-outline-accent,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-accent,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-accent,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-accent,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-accent,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-accent,
        .dark-theme .theme-builder-scope .btn-outline-accent,
        .theme-builder-scope.dark-theme .btn-outline-accent,
        .theme-builder-scope.theme-mode-dark .btn-outline-tertiary,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-tertiary,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-tertiary,
        body.theme-builder-scope.theme-mode-dark .btn-outline-tertiary,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-tertiary,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-tertiary,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-tertiary,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-tertiary,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-tertiary,
        .dark-theme .theme-builder-scope .btn-outline-tertiary,
        .theme-builder-scope.dark-theme .btn-outline-tertiary {
  --bs-btn-color: var(--btn-outline-accent-surface-dark-text, var(--btn-accent-base));
  --bs-btn-border-color: var(--btn-outline-accent-surface-dark-border, var(--btn-accent-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-accent-surface-dark-text, var(--btn-accent-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-accent-surface-dark-border, var(--btn-accent-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-success,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-success,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-success,
        body.theme-builder-scope.theme-mode-dark .btn-outline-success,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-success,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-success,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-success,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-success,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-success,
        .dark-theme .theme-builder-scope .btn-outline-success,
        .theme-builder-scope.dark-theme .btn-outline-success {
  --bs-btn-color: var(--btn-outline-success-surface-dark-text, var(--btn-success-base));
  --bs-btn-border-color: var(--btn-outline-success-surface-dark-border, var(--btn-success-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-success-surface-dark-text, var(--btn-success-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-success-surface-dark-border, var(--btn-success-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-info,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-info,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-info,
        body.theme-builder-scope.theme-mode-dark .btn-outline-info,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-info,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-info,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-info,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-info,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-info,
        .dark-theme .theme-builder-scope .btn-outline-info,
        .theme-builder-scope.dark-theme .btn-outline-info {
  --bs-btn-color: var(--btn-outline-info-surface-dark-text, var(--btn-info-base));
  --bs-btn-border-color: var(--btn-outline-info-surface-dark-border, var(--btn-info-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-info-surface-dark-text, var(--btn-info-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-info-surface-dark-border, var(--btn-info-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-warning,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-warning,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-warning,
        body.theme-builder-scope.theme-mode-dark .btn-outline-warning,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-warning,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-warning,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-warning,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-warning,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-warning,
        .dark-theme .theme-builder-scope .btn-outline-warning,
        .theme-builder-scope.dark-theme .btn-outline-warning {
  --bs-btn-color: var(--btn-outline-warning-surface-dark-text, var(--btn-warning-base));
  --bs-btn-border-color: var(--btn-outline-warning-surface-dark-border, var(--btn-warning-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-warning-surface-dark-text, var(--btn-warning-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-warning-surface-dark-border, var(--btn-warning-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-danger,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-danger,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-danger,
        body.theme-builder-scope.theme-mode-dark .btn-outline-danger,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-danger,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-danger,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-danger,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-danger,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-danger,
        .dark-theme .theme-builder-scope .btn-outline-danger,
        .theme-builder-scope.dark-theme .btn-outline-danger {
  --bs-btn-color: var(--btn-outline-danger-surface-dark-text, var(--btn-danger-base));
  --bs-btn-border-color: var(--btn-outline-danger-surface-dark-border, var(--btn-danger-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-danger-surface-dark-text, var(--btn-danger-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-danger-surface-dark-border, var(--btn-danger-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-neutral,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-neutral,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-neutral,
        body.theme-builder-scope.theme-mode-dark .btn-outline-neutral,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-neutral,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-neutral,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-neutral,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-neutral,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-neutral,
        .dark-theme .theme-builder-scope .btn-outline-neutral,
        .theme-builder-scope.dark-theme .btn-outline-neutral {
  --bs-btn-color: var(--btn-outline-neutral-surface-dark-text, var(--btn-neutral-base));
  --bs-btn-border-color: var(--btn-outline-neutral-surface-dark-border, var(--btn-neutral-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-neutral-surface-dark-text, var(--btn-neutral-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-neutral-surface-dark-border, var(--btn-neutral-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-dark,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-dark,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-dark,
        body.theme-builder-scope.theme-mode-dark .btn-outline-dark,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-dark,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-dark,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-dark,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-dark,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-dark,
        .dark-theme .theme-builder-scope .btn-outline-dark,
        .theme-builder-scope.dark-theme .btn-outline-dark {
  --bs-btn-color: var(--btn-outline-dark-surface-text, var(--btn-dark-base));
  --bs-btn-border-color: var(--btn-outline-dark-surface-border, var(--btn-dark-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-dark-surface-text, var(--btn-dark-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-dark-surface-border, var(--btn-dark-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

        .theme-builder-scope.theme-mode-dark .btn-outline-light,
        .theme-builder-scope[data-theme-mode="dark"] .btn-outline-light,
        .theme-builder-scope[data-bs-theme="dark"] .btn-outline-light,
        body.theme-builder-scope.theme-mode-dark .btn-outline-light,
        body.theme-builder-scope[data-theme-mode="dark"] .btn-outline-light,
        body.theme-builder-scope[data-bs-theme="dark"] .btn-outline-light,
        html[data-bs-theme="dark"] .theme-builder-scope .btn-outline-light,
        body[data-bs-theme="dark"] .theme-builder-scope .btn-outline-light,
        [data-bs-theme="dark"] .theme-builder-scope .btn-outline-light,
        .dark-theme .theme-builder-scope .btn-outline-light,
        .theme-builder-scope.dark-theme .btn-outline-light {
  --bs-btn-color: var(--btn-outline-light-surface-dark-text, var(--btn-light-base));
  --bs-btn-border-color: var(--btn-outline-light-surface-dark-border, var(--btn-light-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-light-surface-dark-text, var(--btn-light-base)) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-light-surface-dark-border, var(--btn-light-base)) 30%, transparent);
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}


.theme-builder-scope {
  font-family: var(--font-body);
  color: var(--theme-page-text, var(--text-dark));
}

.theme-page {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--theme-page-solid-text, var(--theme-page-text, var(--text-dark)));
  background: var(--theme-page-solid-background, var(--surface-1));
}

.theme-page--gradient {
  color: var(--theme-page-text, var(--text-dark));
  background: var(--theme-page-gradient-background, var(--gradient-page-bg, var(--surface-1)));
}

.theme-builder-scope h1, .theme-builder-scope .h1 {
  font-family: var(--type-headline-xl-font-family, var(--font-display));
  font-size: var(--type-headline-xl-font-size, var(--font-size-display));
  font-weight: var(--type-headline-xl-font-weight, var(--font-heading-weight));
  line-height: var(--type-headline-xl-line-height, var(--font-line-height-heading));
  letter-spacing: var(--type-headline-xl-letter-spacing, var(--font-heading-tracking));
  text-transform: var(--type-headline-xl-text-transform, none);
}

.theme-builder-scope h2, .theme-builder-scope .h2 {
  font-family: var(--type-headline-lg-font-family, var(--font-display));
  font-size: var(--type-headline-lg-font-size, var(--font-size-title));
  font-weight: var(--type-headline-lg-font-weight, var(--font-heading-weight));
  line-height: var(--type-headline-lg-line-height, var(--font-line-height-heading));
  letter-spacing: var(--type-headline-lg-letter-spacing, var(--font-heading-tracking));
  text-transform: var(--type-headline-lg-text-transform, none);
}

.theme-builder-scope h3, .theme-builder-scope .h3 {
  font-family: var(--type-headline-md-font-family, var(--font-display));
  font-size: var(--type-headline-md-font-size, var(--font-size-title));
  font-weight: var(--type-headline-md-font-weight, var(--font-heading-weight));
  line-height: var(--type-headline-md-line-height, var(--font-line-height-heading));
  letter-spacing: var(--type-headline-md-letter-spacing, var(--font-heading-tracking));
  text-transform: var(--type-headline-md-text-transform, none);
}

.theme-builder-scope h4, .theme-builder-scope h5, .theme-builder-scope h6, .theme-builder-scope .h4, .theme-builder-scope .h5, .theme-builder-scope .h6 {
  font-family: var(--type-title-font-family, var(--font-display));
  font-size: var(--type-title-font-size, var(--font-size-title));
  font-weight: var(--type-title-font-weight, var(--font-heading-weight));
  line-height: var(--type-title-line-height, var(--font-line-height-heading));
  letter-spacing: var(--type-title-letter-spacing, var(--font-heading-tracking));
  text-transform: var(--type-title-text-transform, none);
}

.theme-builder-scope p, .theme-builder-scope li, .theme-builder-scope dd, .theme-builder-scope dt {
  font-family: var(--type-body-md-font-family, var(--font-body));
  font-size: var(--type-body-md-font-size, var(--font-size-body));
  font-weight: var(--type-body-md-font-weight, 400);
  line-height: var(--type-body-md-line-height, var(--font-line-height-body));
  letter-spacing: var(--type-body-md-letter-spacing, 0);
  text-transform: var(--type-body-md-text-transform, none);
}

.theme-builder-scope .lead {
  font-family: var(--type-body-lg-font-family, var(--font-body));
  font-size: var(--type-body-lg-font-size, 1.125rem);
  font-weight: var(--type-body-lg-font-weight, 400);
  line-height: var(--type-body-lg-line-height, var(--font-line-height-body));
  letter-spacing: var(--type-body-lg-letter-spacing, 0);
  text-transform: var(--type-body-lg-text-transform, none);
}

.theme-builder-scope small, .theme-builder-scope .small {
  font-family: var(--type-body-sm-font-family, var(--font-body));
  font-size: var(--type-body-sm-font-size, var(--font-size-small));
  font-weight: var(--type-body-sm-font-weight, 400);
  line-height: var(--type-body-sm-line-height, var(--font-line-height-body));
  letter-spacing: var(--type-body-sm-letter-spacing, 0);
  text-transform: var(--type-body-sm-text-transform, none);
}

.theme-builder-scope .btn, .theme-builder-scope .nav-link, .theme-builder-scope label, .theme-builder-scope .form-label {
  font-family: var(--type-label-md-font-family, var(--font-body));
  font-size: var(--type-label-md-font-size, 0.95rem);
  font-weight: var(--type-label-md-font-weight, var(--font-ui-weight));
  line-height: var(--type-label-md-line-height, 1.2);
  letter-spacing: var(--type-label-md-letter-spacing, var(--font-ui-tracking));
  text-transform: var(--type-label-md-text-transform, var(--font-ui-transform));
}

.theme-page-surface {
  color: var(--text-dark);
  background: var(--theme-page-content-surface, var(--surface-2));
  border: 1px solid var(--border-default-color);
  border-radius: var(--border-radius-lg);
}

.btn {
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);
  transition: var(--button-transition);
}

.theme-builder-scope .btn.rounded-0 {
  border-radius: var(--button-radius) !important;
}

.btn:hover {
  transform: var(--button-hover-transform);
  box-shadow: var(--button-hover-shadow);
}

.btn:active, .btn.active {
  transform: var(--button-active-transform);
  box-shadow: var(--button-active-shadow);
}

.btn-primary {
  --bs-btn-bg: var(--btn-primary-bg, var(--btn-primary-base));
  --bs-btn-border-color: var(--btn-primary-border, var(--btn-primary-base));
  --bs-btn-color: var(--btn-primary-text);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg, color-mix(in srgb, var(--btn-primary-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-primary-hover-border, color-mix(in srgb, var(--btn-primary-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-primary-hover-text, var(--btn-primary-text));
  --bs-btn-active-bg: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-primary-active-border, color-mix(in srgb, var(--btn-primary-base) 72%, #000));
  --bs-btn-active-color: var(--btn-primary-active-text, var(--btn-primary-text));
  --bs-btn-disabled-bg: var(--btn-primary-bg, var(--btn-primary-base));
  --bs-btn-disabled-border-color: var(--btn-primary-border, var(--btn-primary-base));
  --bs-btn-disabled-color: var(--btn-primary-text);
  background: var(--btn-primary-bg, var(--btn-primary-base));
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--btn-primary-hover-bg, color-mix(in srgb, var(--btn-primary-base) 88%, #000));
}

.btn-primary:active, .btn-primary.active, .btn-primary:first-child:active {
  background: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
}

.btn-primary:disabled, .btn-primary.disabled {
  background: var(--btn-primary-bg, var(--btn-primary-base));
}

.btn-secondary {
  --bs-btn-bg: var(--btn-secondary-bg, var(--btn-secondary-base));
  --bs-btn-border-color: var(--btn-secondary-border, var(--btn-secondary-base));
  --bs-btn-color: var(--btn-secondary-text);
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg, color-mix(in srgb, var(--btn-secondary-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border, color-mix(in srgb, var(--btn-secondary-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-secondary-hover-text, var(--btn-secondary-text));
  --bs-btn-active-bg: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-secondary-active-border, color-mix(in srgb, var(--btn-secondary-base) 72%, #000));
  --bs-btn-active-color: var(--btn-secondary-active-text, var(--btn-secondary-text));
  --bs-btn-disabled-bg: var(--btn-secondary-bg, var(--btn-secondary-base));
  --bs-btn-disabled-border-color: var(--btn-secondary-border, var(--btn-secondary-base));
  --bs-btn-disabled-color: var(--btn-secondary-text);
  background: var(--btn-secondary-bg, var(--btn-secondary-base));
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--btn-secondary-hover-bg, color-mix(in srgb, var(--btn-secondary-base) 88%, #000));
}

.btn-secondary:active, .btn-secondary.active, .btn-secondary:first-child:active {
  background: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
}

.btn-secondary:disabled, .btn-secondary.disabled {
  background: var(--btn-secondary-bg, var(--btn-secondary-base));
}

.btn-accent, .btn-tertiary {
  --bs-btn-bg: var(--btn-accent-bg, var(--btn-accent-base));
  --bs-btn-border-color: var(--btn-accent-border, var(--btn-accent-base));
  --bs-btn-color: var(--btn-accent-text);
  --bs-btn-hover-bg: var(--btn-accent-hover-bg, color-mix(in srgb, var(--btn-accent-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-accent-hover-border, color-mix(in srgb, var(--btn-accent-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-accent-hover-text, var(--btn-accent-text));
  --bs-btn-active-bg: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-accent-active-border, color-mix(in srgb, var(--btn-accent-base) 72%, #000));
  --bs-btn-active-color: var(--btn-accent-active-text, var(--btn-accent-text));
  --bs-btn-disabled-bg: var(--btn-accent-bg, var(--btn-accent-base));
  --bs-btn-disabled-border-color: var(--btn-accent-border, var(--btn-accent-base));
  --bs-btn-disabled-color: var(--btn-accent-text);
  background: var(--btn-accent-bg, var(--btn-accent-base));
}

.btn-accent:hover, .btn-tertiary:hover, .btn-accent:focus-visible, .btn-tertiary:focus-visible {
  background: var(--btn-accent-hover-bg, color-mix(in srgb, var(--btn-accent-base) 88%, #000));
}

.btn-accent:active, .btn-tertiary:active, .btn-accent.active, .btn-tertiary.active, .btn-accent:first-child:active, .btn-tertiary:first-child:active {
  background: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
}

.btn-accent:disabled, .btn-tertiary:disabled, .btn-accent.disabled, .btn-tertiary.disabled {
  background: var(--btn-accent-bg, var(--btn-accent-base));
}

.btn-success {
  --bs-btn-bg: var(--btn-success-bg, var(--btn-success-base));
  --bs-btn-border-color: var(--btn-success-border, var(--btn-success-base));
  --bs-btn-color: var(--btn-success-text);
  --bs-btn-hover-bg: var(--btn-success-hover-bg, color-mix(in srgb, var(--btn-success-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-success-hover-border, color-mix(in srgb, var(--btn-success-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-success-hover-text, var(--btn-success-text));
  --bs-btn-active-bg: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-success-active-border, color-mix(in srgb, var(--btn-success-base) 72%, #000));
  --bs-btn-active-color: var(--btn-success-active-text, var(--btn-success-text));
  --bs-btn-disabled-bg: var(--btn-success-bg, var(--btn-success-base));
  --bs-btn-disabled-border-color: var(--btn-success-border, var(--btn-success-base));
  --bs-btn-disabled-color: var(--btn-success-text);
  background: var(--btn-success-bg, var(--btn-success-base));
}

.btn-success:hover, .btn-success:focus-visible {
  background: var(--btn-success-hover-bg, color-mix(in srgb, var(--btn-success-base) 88%, #000));
}

.btn-success:active, .btn-success.active, .btn-success:first-child:active {
  background: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
}

.btn-success:disabled, .btn-success.disabled {
  background: var(--btn-success-bg, var(--btn-success-base));
}

.btn-info {
  --bs-btn-bg: var(--btn-info-bg, var(--btn-info-base));
  --bs-btn-border-color: var(--btn-info-border, var(--btn-info-base));
  --bs-btn-color: var(--btn-info-text);
  --bs-btn-hover-bg: var(--btn-info-hover-bg, color-mix(in srgb, var(--btn-info-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-info-hover-border, color-mix(in srgb, var(--btn-info-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-info-hover-text, var(--btn-info-text));
  --bs-btn-active-bg: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-info-active-border, color-mix(in srgb, var(--btn-info-base) 72%, #000));
  --bs-btn-active-color: var(--btn-info-active-text, var(--btn-info-text));
  --bs-btn-disabled-bg: var(--btn-info-bg, var(--btn-info-base));
  --bs-btn-disabled-border-color: var(--btn-info-border, var(--btn-info-base));
  --bs-btn-disabled-color: var(--btn-info-text);
  background: var(--btn-info-bg, var(--btn-info-base));
}

.btn-info:hover, .btn-info:focus-visible {
  background: var(--btn-info-hover-bg, color-mix(in srgb, var(--btn-info-base) 88%, #000));
}

.btn-info:active, .btn-info.active, .btn-info:first-child:active {
  background: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
}

.btn-info:disabled, .btn-info.disabled {
  background: var(--btn-info-bg, var(--btn-info-base));
}

.btn-warning {
  --bs-btn-bg: var(--btn-warning-bg, var(--btn-warning-base));
  --bs-btn-border-color: var(--btn-warning-border, var(--btn-warning-base));
  --bs-btn-color: var(--btn-warning-text);
  --bs-btn-hover-bg: var(--btn-warning-hover-bg, color-mix(in srgb, var(--btn-warning-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-warning-hover-border, color-mix(in srgb, var(--btn-warning-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-warning-hover-text, var(--btn-warning-text));
  --bs-btn-active-bg: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-warning-active-border, color-mix(in srgb, var(--btn-warning-base) 72%, #000));
  --bs-btn-active-color: var(--btn-warning-active-text, var(--btn-warning-text));
  --bs-btn-disabled-bg: var(--btn-warning-bg, var(--btn-warning-base));
  --bs-btn-disabled-border-color: var(--btn-warning-border, var(--btn-warning-base));
  --bs-btn-disabled-color: var(--btn-warning-text);
  background: var(--btn-warning-bg, var(--btn-warning-base));
}

.btn-warning:hover, .btn-warning:focus-visible {
  background: var(--btn-warning-hover-bg, color-mix(in srgb, var(--btn-warning-base) 88%, #000));
}

.btn-warning:active, .btn-warning.active, .btn-warning:first-child:active {
  background: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
}

.btn-warning:disabled, .btn-warning.disabled {
  background: var(--btn-warning-bg, var(--btn-warning-base));
}

.btn-danger {
  --bs-btn-bg: var(--btn-danger-bg, var(--btn-danger-base));
  --bs-btn-border-color: var(--btn-danger-border, var(--btn-danger-base));
  --bs-btn-color: var(--btn-danger-text);
  --bs-btn-hover-bg: var(--btn-danger-hover-bg, color-mix(in srgb, var(--btn-danger-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-danger-hover-border, color-mix(in srgb, var(--btn-danger-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-danger-hover-text, var(--btn-danger-text));
  --bs-btn-active-bg: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-danger-active-border, color-mix(in srgb, var(--btn-danger-base) 72%, #000));
  --bs-btn-active-color: var(--btn-danger-active-text, var(--btn-danger-text));
  --bs-btn-disabled-bg: var(--btn-danger-bg, var(--btn-danger-base));
  --bs-btn-disabled-border-color: var(--btn-danger-border, var(--btn-danger-base));
  --bs-btn-disabled-color: var(--btn-danger-text);
  background: var(--btn-danger-bg, var(--btn-danger-base));
}

.btn-danger:hover, .btn-danger:focus-visible {
  background: var(--btn-danger-hover-bg, color-mix(in srgb, var(--btn-danger-base) 88%, #000));
}

.btn-danger:active, .btn-danger.active, .btn-danger:first-child:active {
  background: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
}

.btn-danger:disabled, .btn-danger.disabled {
  background: var(--btn-danger-bg, var(--btn-danger-base));
}

.btn-neutral {
  --bs-btn-bg: var(--btn-neutral-bg, var(--btn-neutral-base));
  --bs-btn-border-color: var(--btn-neutral-border, var(--btn-neutral-base));
  --bs-btn-color: var(--btn-neutral-text);
  --bs-btn-hover-bg: var(--btn-neutral-hover-bg, color-mix(in srgb, var(--btn-neutral-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-neutral-hover-border, color-mix(in srgb, var(--btn-neutral-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-neutral-hover-text, var(--btn-neutral-text));
  --bs-btn-active-bg: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-neutral-active-border, color-mix(in srgb, var(--btn-neutral-base) 72%, #000));
  --bs-btn-active-color: var(--btn-neutral-active-text, var(--btn-neutral-text));
  --bs-btn-disabled-bg: var(--btn-neutral-bg, var(--btn-neutral-base));
  --bs-btn-disabled-border-color: var(--btn-neutral-border, var(--btn-neutral-base));
  --bs-btn-disabled-color: var(--btn-neutral-text);
  background: var(--btn-neutral-bg, var(--btn-neutral-base));
}

.btn-neutral:hover, .btn-neutral:focus-visible {
  background: var(--btn-neutral-hover-bg, color-mix(in srgb, var(--btn-neutral-base) 88%, #000));
}

.btn-neutral:active, .btn-neutral.active, .btn-neutral:first-child:active {
  background: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
}

.btn-neutral:disabled, .btn-neutral.disabled {
  background: var(--btn-neutral-bg, var(--btn-neutral-base));
}

.btn-dark {
  --bs-btn-bg: var(--btn-dark-bg, var(--btn-dark-base));
  --bs-btn-border-color: var(--btn-dark-border, var(--btn-dark-base));
  --bs-btn-color: var(--btn-dark-text);
  --bs-btn-hover-bg: var(--btn-dark-hover-bg, color-mix(in srgb, var(--btn-dark-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-dark-hover-border, color-mix(in srgb, var(--btn-dark-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-dark-hover-text, var(--btn-dark-text));
  --bs-btn-active-bg: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-dark-active-border, color-mix(in srgb, var(--btn-dark-base) 72%, #000));
  --bs-btn-active-color: var(--btn-dark-active-text, var(--btn-dark-text));
  --bs-btn-disabled-bg: var(--btn-dark-bg, var(--btn-dark-base));
  --bs-btn-disabled-border-color: var(--btn-dark-border, var(--btn-dark-base));
  --bs-btn-disabled-color: var(--btn-dark-text);
  background: var(--btn-dark-bg, var(--btn-dark-base));
}

.btn-dark:hover, .btn-dark:focus-visible {
  background: var(--btn-dark-hover-bg, color-mix(in srgb, var(--btn-dark-base) 88%, #000));
}

.btn-dark:active, .btn-dark.active, .btn-dark:first-child:active {
  background: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
}

.btn-dark:disabled, .btn-dark.disabled {
  background: var(--btn-dark-bg, var(--btn-dark-base));
}

.btn-light {
  --bs-btn-bg: var(--btn-light-bg, var(--btn-light-base));
  --bs-btn-border-color: var(--btn-light-border, var(--btn-light-base));
  --bs-btn-color: var(--btn-light-text);
  --bs-btn-hover-bg: var(--btn-light-hover-bg, color-mix(in srgb, var(--btn-light-base) 88%, #000));
  --bs-btn-hover-border-color: var(--btn-light-hover-border, color-mix(in srgb, var(--btn-light-base) 84%, #000));
  --bs-btn-hover-color: var(--btn-light-hover-text, var(--btn-light-text));
  --bs-btn-active-bg: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-light-active-border, color-mix(in srgb, var(--btn-light-base) 72%, #000));
  --bs-btn-active-color: var(--btn-light-active-text, var(--btn-light-text));
  --bs-btn-disabled-bg: var(--btn-light-bg, var(--btn-light-base));
  --bs-btn-disabled-border-color: var(--btn-light-border, var(--btn-light-base));
  --bs-btn-disabled-color: var(--btn-light-text);
  background: var(--btn-light-bg, var(--btn-light-base));
}

.btn-light:hover, .btn-light:focus-visible {
  background: var(--btn-light-hover-bg, color-mix(in srgb, var(--btn-light-base) 88%, #000));
}

.btn-light:active, .btn-light.active, .btn-light:first-child:active {
  background: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
}

.btn-light:disabled, .btn-light.disabled {
  background: var(--btn-light-bg, var(--btn-light-base));
}

.btn-outline-primary {
  --bs-btn-color: var(--btn-outline-primary-text, var(--btn-primary-base));
  --bs-btn-border-color: var(--btn-outline-primary-border, var(--btn-primary-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-primary-hover-text, var(--btn-primary-text));
  --bs-btn-hover-bg: var(--btn-primary-hover-bg, var(--btn-primary-base));
  --bs-btn-hover-border-color: var(--btn-primary-hover-border, var(--btn-primary-base));
  --bs-btn-active-color: var(--btn-primary-active-text, var(--btn-primary-text));
  --bs-btn-active-bg: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-primary-active-border, var(--btn-primary-base));
  --bs-btn-disabled-color: var(--btn-outline-primary-text, var(--btn-primary-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-primary-border, var(--btn-primary-base));
  background: transparent;
}

.btn-outline-primary-surface-dark {
  --bs-btn-color: var(--btn-outline-primary-surface-dark-text, var(--btn-primary-base));
  --bs-btn-border-color: var(--btn-outline-primary-surface-dark-border, var(--btn-primary-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-primary-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-primary-hover-text, var(--btn-primary-text));
  --bs-btn-hover-bg: var(--btn-primary-hover-bg, var(--btn-primary-base));
  --bs-btn-hover-border-color: var(--btn-outline-primary-surface-dark-border, var(--btn-primary-base));
  --bs-btn-active-color: var(--btn-primary-active-text, var(--btn-primary-text));
  --bs-btn-active-bg: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-primary-active-border, var(--btn-primary-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-primary-surface-dark-text, var(--btn-primary-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-primary-surface-dark-border, var(--btn-primary-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-primary-base) 12%, transparent);
}

.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
  background: var(--btn-primary-hover-bg, var(--btn-primary-base));
}

.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary:first-child:active {
  background: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  background: transparent;
}

.btn-outline-primary-surface-dark:hover, .btn-outline-primary-surface-dark:focus-visible {
  background: var(--btn-primary-hover-bg, var(--btn-primary-base));
}

.btn-outline-primary-surface-dark:active, .btn-outline-primary-surface-dark.active, .btn-outline-primary-surface-dark:first-child:active {
  background: var(--btn-primary-active-bg, color-mix(in srgb, var(--btn-primary-base) 76%, #000));
}

.btn-outline-primary-surface-dark:disabled, .btn-outline-primary-surface-dark.disabled {
  background: transparent;
}

.btn-outline-secondary {
  --bs-btn-color: var(--btn-outline-secondary-text, var(--btn-secondary-base));
  --bs-btn-border-color: var(--btn-outline-secondary-border, var(--btn-secondary-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-secondary-hover-text, var(--btn-secondary-text));
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg, var(--btn-secondary-base));
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border, var(--btn-secondary-base));
  --bs-btn-active-color: var(--btn-secondary-active-text, var(--btn-secondary-text));
  --bs-btn-active-bg: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-secondary-active-border, var(--btn-secondary-base));
  --bs-btn-disabled-color: var(--btn-outline-secondary-text, var(--btn-secondary-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-secondary-border, var(--btn-secondary-base));
  background: transparent;
}

.btn-outline-secondary-surface-dark {
  --bs-btn-color: var(--btn-outline-secondary-surface-dark-text, var(--btn-secondary-base));
  --bs-btn-border-color: var(--btn-outline-secondary-surface-dark-border, var(--btn-secondary-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-secondary-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-secondary-hover-text, var(--btn-secondary-text));
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg, var(--btn-secondary-base));
  --bs-btn-hover-border-color: var(--btn-outline-secondary-surface-dark-border, var(--btn-secondary-base));
  --bs-btn-active-color: var(--btn-secondary-active-text, var(--btn-secondary-text));
  --bs-btn-active-bg: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-secondary-active-border, var(--btn-secondary-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-secondary-surface-dark-text, var(--btn-secondary-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-secondary-surface-dark-border, var(--btn-secondary-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-secondary-base) 12%, transparent);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
  background: var(--btn-secondary-hover-bg, var(--btn-secondary-base));
}

.btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary:first-child:active {
  background: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
}

.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  background: transparent;
}

.btn-outline-secondary-surface-dark:hover, .btn-outline-secondary-surface-dark:focus-visible {
  background: var(--btn-secondary-hover-bg, var(--btn-secondary-base));
}

.btn-outline-secondary-surface-dark:active, .btn-outline-secondary-surface-dark.active, .btn-outline-secondary-surface-dark:first-child:active {
  background: var(--btn-secondary-active-bg, color-mix(in srgb, var(--btn-secondary-base) 76%, #000));
}

.btn-outline-secondary-surface-dark:disabled, .btn-outline-secondary-surface-dark.disabled {
  background: transparent;
}

.btn-outline-accent, .btn-outline-tertiary {
  --bs-btn-color: var(--btn-outline-accent-text, var(--btn-accent-base));
  --bs-btn-border-color: var(--btn-outline-accent-border, var(--btn-accent-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-accent-hover-text, var(--btn-accent-text));
  --bs-btn-hover-bg: var(--btn-accent-hover-bg, var(--btn-accent-base));
  --bs-btn-hover-border-color: var(--btn-accent-hover-border, var(--btn-accent-base));
  --bs-btn-active-color: var(--btn-accent-active-text, var(--btn-accent-text));
  --bs-btn-active-bg: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-accent-active-border, var(--btn-accent-base));
  --bs-btn-disabled-color: var(--btn-outline-accent-text, var(--btn-accent-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-accent-border, var(--btn-accent-base));
  background: transparent;
}

.btn-outline-accent-surface-dark, .btn-outline-tertiary-surface-dark {
  --bs-btn-color: var(--btn-outline-accent-surface-dark-text, var(--btn-accent-base));
  --bs-btn-border-color: var(--btn-outline-accent-surface-dark-border, var(--btn-accent-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-accent-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-accent-hover-text, var(--btn-accent-text));
  --bs-btn-hover-bg: var(--btn-accent-hover-bg, var(--btn-accent-base));
  --bs-btn-hover-border-color: var(--btn-outline-accent-surface-dark-border, var(--btn-accent-base));
  --bs-btn-active-color: var(--btn-accent-active-text, var(--btn-accent-text));
  --bs-btn-active-bg: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-accent-active-border, var(--btn-accent-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-accent-surface-dark-text, var(--btn-accent-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-accent-surface-dark-border, var(--btn-accent-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-accent-base) 12%, transparent);
}

.btn-outline-accent:hover, .btn-outline-tertiary:hover, .btn-outline-accent:focus-visible, .btn-outline-tertiary:focus-visible {
  background: var(--btn-accent-hover-bg, var(--btn-accent-base));
}

.btn-outline-accent:active, .btn-outline-tertiary:active, .btn-outline-accent.active, .btn-outline-tertiary.active, .btn-outline-accent:first-child:active, .btn-outline-tertiary:first-child:active {
  background: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
}

.btn-outline-accent:disabled, .btn-outline-tertiary:disabled, .btn-outline-accent.disabled, .btn-outline-tertiary.disabled {
  background: transparent;
}

.btn-outline-accent-surface-dark:hover, .btn-outline-tertiary-surface-dark:hover, .btn-outline-accent-surface-dark:focus-visible, .btn-outline-tertiary-surface-dark:focus-visible {
  background: var(--btn-accent-hover-bg, var(--btn-accent-base));
}

.btn-outline-accent-surface-dark:active, .btn-outline-tertiary-surface-dark:active, .btn-outline-accent-surface-dark.active, .btn-outline-tertiary-surface-dark.active, .btn-outline-accent-surface-dark:first-child:active, .btn-outline-tertiary-surface-dark:first-child:active {
  background: var(--btn-accent-active-bg, color-mix(in srgb, var(--btn-accent-base) 76%, #000));
}

.btn-outline-accent-surface-dark:disabled, .btn-outline-tertiary-surface-dark:disabled, .btn-outline-accent-surface-dark.disabled, .btn-outline-tertiary-surface-dark.disabled {
  background: transparent;
}

.btn-outline-success {
  --bs-btn-color: var(--btn-outline-success-text, var(--btn-success-base));
  --bs-btn-border-color: var(--btn-outline-success-border, var(--btn-success-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-success-hover-text, var(--btn-success-text));
  --bs-btn-hover-bg: var(--btn-success-hover-bg, var(--btn-success-base));
  --bs-btn-hover-border-color: var(--btn-success-hover-border, var(--btn-success-base));
  --bs-btn-active-color: var(--btn-success-active-text, var(--btn-success-text));
  --bs-btn-active-bg: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-success-active-border, var(--btn-success-base));
  --bs-btn-disabled-color: var(--btn-outline-success-text, var(--btn-success-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-success-border, var(--btn-success-base));
  background: transparent;
}

.btn-outline-success-surface-dark {
  --bs-btn-color: var(--btn-outline-success-surface-dark-text, var(--btn-success-base));
  --bs-btn-border-color: var(--btn-outline-success-surface-dark-border, var(--btn-success-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-success-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-success-hover-text, var(--btn-success-text));
  --bs-btn-hover-bg: var(--btn-success-hover-bg, var(--btn-success-base));
  --bs-btn-hover-border-color: var(--btn-outline-success-surface-dark-border, var(--btn-success-base));
  --bs-btn-active-color: var(--btn-success-active-text, var(--btn-success-text));
  --bs-btn-active-bg: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-success-active-border, var(--btn-success-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-success-surface-dark-text, var(--btn-success-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-success-surface-dark-border, var(--btn-success-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-success-base) 12%, transparent);
}

.btn-outline-success:hover, .btn-outline-success:focus-visible {
  background: var(--btn-success-hover-bg, var(--btn-success-base));
}

.btn-outline-success:active, .btn-outline-success.active, .btn-outline-success:first-child:active {
  background: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
}

.btn-outline-success:disabled, .btn-outline-success.disabled {
  background: transparent;
}

.btn-outline-success-surface-dark:hover, .btn-outline-success-surface-dark:focus-visible {
  background: var(--btn-success-hover-bg, var(--btn-success-base));
}

.btn-outline-success-surface-dark:active, .btn-outline-success-surface-dark.active, .btn-outline-success-surface-dark:first-child:active {
  background: var(--btn-success-active-bg, color-mix(in srgb, var(--btn-success-base) 76%, #000));
}

.btn-outline-success-surface-dark:disabled, .btn-outline-success-surface-dark.disabled {
  background: transparent;
}

.btn-outline-info {
  --bs-btn-color: var(--btn-outline-info-text, var(--btn-info-base));
  --bs-btn-border-color: var(--btn-outline-info-border, var(--btn-info-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-info-hover-text, var(--btn-info-text));
  --bs-btn-hover-bg: var(--btn-info-hover-bg, var(--btn-info-base));
  --bs-btn-hover-border-color: var(--btn-info-hover-border, var(--btn-info-base));
  --bs-btn-active-color: var(--btn-info-active-text, var(--btn-info-text));
  --bs-btn-active-bg: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-info-active-border, var(--btn-info-base));
  --bs-btn-disabled-color: var(--btn-outline-info-text, var(--btn-info-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-info-border, var(--btn-info-base));
  background: transparent;
}

.btn-outline-info-surface-dark {
  --bs-btn-color: var(--btn-outline-info-surface-dark-text, var(--btn-info-base));
  --bs-btn-border-color: var(--btn-outline-info-surface-dark-border, var(--btn-info-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-info-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-info-hover-text, var(--btn-info-text));
  --bs-btn-hover-bg: var(--btn-info-hover-bg, var(--btn-info-base));
  --bs-btn-hover-border-color: var(--btn-outline-info-surface-dark-border, var(--btn-info-base));
  --bs-btn-active-color: var(--btn-info-active-text, var(--btn-info-text));
  --bs-btn-active-bg: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-info-active-border, var(--btn-info-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-info-surface-dark-text, var(--btn-info-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-info-surface-dark-border, var(--btn-info-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-info-base) 12%, transparent);
}

.btn-outline-info:hover, .btn-outline-info:focus-visible {
  background: var(--btn-info-hover-bg, var(--btn-info-base));
}

.btn-outline-info:active, .btn-outline-info.active, .btn-outline-info:first-child:active {
  background: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
}

.btn-outline-info:disabled, .btn-outline-info.disabled {
  background: transparent;
}

.btn-outline-info-surface-dark:hover, .btn-outline-info-surface-dark:focus-visible {
  background: var(--btn-info-hover-bg, var(--btn-info-base));
}

.btn-outline-info-surface-dark:active, .btn-outline-info-surface-dark.active, .btn-outline-info-surface-dark:first-child:active {
  background: var(--btn-info-active-bg, color-mix(in srgb, var(--btn-info-base) 76%, #000));
}

.btn-outline-info-surface-dark:disabled, .btn-outline-info-surface-dark.disabled {
  background: transparent;
}

.btn-outline-warning {
  --bs-btn-color: var(--btn-outline-warning-text, var(--btn-warning-base));
  --bs-btn-border-color: var(--btn-outline-warning-border, var(--btn-warning-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-warning-hover-text, var(--btn-warning-text));
  --bs-btn-hover-bg: var(--btn-warning-hover-bg, var(--btn-warning-base));
  --bs-btn-hover-border-color: var(--btn-warning-hover-border, var(--btn-warning-base));
  --bs-btn-active-color: var(--btn-warning-active-text, var(--btn-warning-text));
  --bs-btn-active-bg: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-warning-active-border, var(--btn-warning-base));
  --bs-btn-disabled-color: var(--btn-outline-warning-text, var(--btn-warning-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-warning-border, var(--btn-warning-base));
  background: transparent;
}

.btn-outline-warning-surface-dark {
  --bs-btn-color: var(--btn-outline-warning-surface-dark-text, var(--btn-warning-base));
  --bs-btn-border-color: var(--btn-outline-warning-surface-dark-border, var(--btn-warning-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-warning-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-warning-hover-text, var(--btn-warning-text));
  --bs-btn-hover-bg: var(--btn-warning-hover-bg, var(--btn-warning-base));
  --bs-btn-hover-border-color: var(--btn-outline-warning-surface-dark-border, var(--btn-warning-base));
  --bs-btn-active-color: var(--btn-warning-active-text, var(--btn-warning-text));
  --bs-btn-active-bg: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-warning-active-border, var(--btn-warning-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-warning-surface-dark-text, var(--btn-warning-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-warning-surface-dark-border, var(--btn-warning-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-warning-base) 12%, transparent);
}

.btn-outline-warning:hover, .btn-outline-warning:focus-visible {
  background: var(--btn-warning-hover-bg, var(--btn-warning-base));
}

.btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning:first-child:active {
  background: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
}

.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  background: transparent;
}

.btn-outline-warning-surface-dark:hover, .btn-outline-warning-surface-dark:focus-visible {
  background: var(--btn-warning-hover-bg, var(--btn-warning-base));
}

.btn-outline-warning-surface-dark:active, .btn-outline-warning-surface-dark.active, .btn-outline-warning-surface-dark:first-child:active {
  background: var(--btn-warning-active-bg, color-mix(in srgb, var(--btn-warning-base) 76%, #000));
}

.btn-outline-warning-surface-dark:disabled, .btn-outline-warning-surface-dark.disabled {
  background: transparent;
}

.btn-outline-danger {
  --bs-btn-color: var(--btn-outline-danger-text, var(--btn-danger-base));
  --bs-btn-border-color: var(--btn-outline-danger-border, var(--btn-danger-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-danger-hover-text, var(--btn-danger-text));
  --bs-btn-hover-bg: var(--btn-danger-hover-bg, var(--btn-danger-base));
  --bs-btn-hover-border-color: var(--btn-danger-hover-border, var(--btn-danger-base));
  --bs-btn-active-color: var(--btn-danger-active-text, var(--btn-danger-text));
  --bs-btn-active-bg: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-danger-active-border, var(--btn-danger-base));
  --bs-btn-disabled-color: var(--btn-outline-danger-text, var(--btn-danger-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-danger-border, var(--btn-danger-base));
  background: transparent;
}

.btn-outline-danger-surface-dark {
  --bs-btn-color: var(--btn-outline-danger-surface-dark-text, var(--btn-danger-base));
  --bs-btn-border-color: var(--btn-outline-danger-surface-dark-border, var(--btn-danger-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-danger-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-danger-hover-text, var(--btn-danger-text));
  --bs-btn-hover-bg: var(--btn-danger-hover-bg, var(--btn-danger-base));
  --bs-btn-hover-border-color: var(--btn-outline-danger-surface-dark-border, var(--btn-danger-base));
  --bs-btn-active-color: var(--btn-danger-active-text, var(--btn-danger-text));
  --bs-btn-active-bg: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-danger-active-border, var(--btn-danger-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-danger-surface-dark-text, var(--btn-danger-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-danger-surface-dark-border, var(--btn-danger-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-danger-base) 12%, transparent);
}

.btn-outline-danger:hover, .btn-outline-danger:focus-visible {
  background: var(--btn-danger-hover-bg, var(--btn-danger-base));
}

.btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger:first-child:active {
  background: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
}

.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  background: transparent;
}

.btn-outline-danger-surface-dark:hover, .btn-outline-danger-surface-dark:focus-visible {
  background: var(--btn-danger-hover-bg, var(--btn-danger-base));
}

.btn-outline-danger-surface-dark:active, .btn-outline-danger-surface-dark.active, .btn-outline-danger-surface-dark:first-child:active {
  background: var(--btn-danger-active-bg, color-mix(in srgb, var(--btn-danger-base) 76%, #000));
}

.btn-outline-danger-surface-dark:disabled, .btn-outline-danger-surface-dark.disabled {
  background: transparent;
}

.btn-outline-neutral {
  --bs-btn-color: var(--btn-outline-neutral-text, var(--btn-neutral-base));
  --bs-btn-border-color: var(--btn-outline-neutral-border, var(--btn-neutral-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-neutral-hover-text, var(--btn-neutral-text));
  --bs-btn-hover-bg: var(--btn-neutral-hover-bg, var(--btn-neutral-base));
  --bs-btn-hover-border-color: var(--btn-neutral-hover-border, var(--btn-neutral-base));
  --bs-btn-active-color: var(--btn-neutral-active-text, var(--btn-neutral-text));
  --bs-btn-active-bg: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-neutral-active-border, var(--btn-neutral-base));
  --bs-btn-disabled-color: var(--btn-outline-neutral-text, var(--btn-neutral-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-neutral-border, var(--btn-neutral-base));
  background: transparent;
}

.btn-outline-neutral-surface-dark {
  --bs-btn-color: var(--btn-outline-neutral-surface-dark-text, var(--btn-neutral-base));
  --bs-btn-border-color: var(--btn-outline-neutral-surface-dark-border, var(--btn-neutral-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-neutral-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-neutral-hover-text, var(--btn-neutral-text));
  --bs-btn-hover-bg: var(--btn-neutral-hover-bg, var(--btn-neutral-base));
  --bs-btn-hover-border-color: var(--btn-outline-neutral-surface-dark-border, var(--btn-neutral-base));
  --bs-btn-active-color: var(--btn-neutral-active-text, var(--btn-neutral-text));
  --bs-btn-active-bg: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-neutral-active-border, var(--btn-neutral-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-neutral-surface-dark-text, var(--btn-neutral-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-neutral-surface-dark-border, var(--btn-neutral-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-neutral-base) 12%, transparent);
}

.btn-outline-neutral:hover, .btn-outline-neutral:focus-visible {
  background: var(--btn-neutral-hover-bg, var(--btn-neutral-base));
}

.btn-outline-neutral:active, .btn-outline-neutral.active, .btn-outline-neutral:first-child:active {
  background: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
}

.btn-outline-neutral:disabled, .btn-outline-neutral.disabled {
  background: transparent;
}

.btn-outline-neutral-surface-dark:hover, .btn-outline-neutral-surface-dark:focus-visible {
  background: var(--btn-neutral-hover-bg, var(--btn-neutral-base));
}

.btn-outline-neutral-surface-dark:active, .btn-outline-neutral-surface-dark.active, .btn-outline-neutral-surface-dark:first-child:active {
  background: var(--btn-neutral-active-bg, color-mix(in srgb, var(--btn-neutral-base) 76%, #000));
}

.btn-outline-neutral-surface-dark:disabled, .btn-outline-neutral-surface-dark.disabled {
  background: transparent;
}

.btn-outline-dark {
  --bs-btn-color: var(--btn-outline-dark-text, var(--btn-dark-base));
  --bs-btn-border-color: var(--btn-outline-dark-border, var(--btn-dark-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-dark-hover-text, var(--btn-dark-text));
  --bs-btn-hover-bg: var(--btn-dark-hover-bg, var(--btn-dark-base));
  --bs-btn-hover-border-color: var(--btn-dark-hover-border, var(--btn-dark-base));
  --bs-btn-active-color: var(--btn-dark-active-text, var(--btn-dark-text));
  --bs-btn-active-bg: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-dark-active-border, var(--btn-dark-base));
  --bs-btn-disabled-color: var(--btn-outline-dark-text, var(--btn-dark-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-dark-border, var(--btn-dark-base));
  background: transparent;
}

.btn-outline-dark-surface {
  --bs-btn-color: var(--btn-outline-dark-surface-text, var(--btn-dark-base));
  --bs-btn-border-color: var(--btn-outline-dark-surface-border, var(--btn-dark-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-dark-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-dark-hover-text, var(--btn-dark-text));
  --bs-btn-hover-bg: var(--btn-dark-hover-bg, var(--btn-dark-base));
  --bs-btn-hover-border-color: var(--btn-outline-dark-surface-border, var(--btn-dark-base));
  --bs-btn-active-color: var(--btn-dark-active-text, var(--btn-dark-text));
  --bs-btn-active-bg: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-dark-active-border, var(--btn-dark-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-dark-surface-text, var(--btn-dark-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-dark-surface-border, var(--btn-dark-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-dark-base) 12%, transparent);
}

.btn-outline-dark:hover, .btn-outline-dark:focus-visible {
  background: var(--btn-dark-hover-bg, var(--btn-dark-base));
}

.btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark:first-child:active {
  background: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
}

.btn-outline-dark:disabled, .btn-outline-dark.disabled {
  background: transparent;
}

.btn-outline-dark-surface:hover, .btn-outline-dark-surface:focus-visible {
  background: var(--btn-dark-hover-bg, var(--btn-dark-base));
}

.btn-outline-dark-surface:active, .btn-outline-dark-surface.active, .btn-outline-dark-surface:first-child:active {
  background: var(--btn-dark-active-bg, color-mix(in srgb, var(--btn-dark-base) 76%, #000));
}

.btn-outline-dark-surface:disabled, .btn-outline-dark-surface.disabled {
  background: transparent;
}

.btn-outline-light {
  --bs-btn-color: var(--btn-outline-light-text, var(--btn-light-base));
  --bs-btn-border-color: var(--btn-outline-light-border, var(--btn-light-base));
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--btn-light-hover-text, var(--btn-light-text));
  --bs-btn-hover-bg: var(--btn-light-hover-bg, var(--btn-light-base));
  --bs-btn-hover-border-color: var(--btn-light-hover-border, var(--btn-light-base));
  --bs-btn-active-color: var(--btn-light-active-text, var(--btn-light-text));
  --bs-btn-active-bg: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-light-active-border, var(--btn-light-base));
  --bs-btn-disabled-color: var(--btn-outline-light-text, var(--btn-light-base));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-outline-light-border, var(--btn-light-base));
  background: transparent;
}

.btn-outline-light-surface-dark {
  --bs-btn-color: var(--btn-outline-light-surface-dark-text, var(--btn-light-base));
  --bs-btn-border-color: var(--btn-outline-light-surface-dark-border, var(--btn-light-base));
  --bs-btn-bg: color-mix(in srgb, var(--btn-light-base) 12%, transparent);
  --bs-btn-hover-color: var(--btn-light-hover-text, var(--btn-light-text));
  --bs-btn-hover-bg: var(--btn-light-hover-bg, var(--btn-light-base));
  --bs-btn-hover-border-color: var(--btn-outline-light-surface-dark-border, var(--btn-light-base));
  --bs-btn-active-color: var(--btn-light-active-text, var(--btn-light-text));
  --bs-btn-active-bg: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
  --bs-btn-active-border-color: var(--btn-light-active-border, var(--btn-light-base));
  --bs-btn-disabled-color: color-mix(in srgb, var(--btn-outline-light-surface-dark-text, var(--btn-light-base)) 55%, transparent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-outline-light-surface-dark-border, var(--btn-light-base)) 30%, transparent);
  background: color-mix(in srgb, var(--btn-light-base) 12%, transparent);
}

.btn-outline-light:hover, .btn-outline-light:focus-visible {
  background: var(--btn-light-hover-bg, var(--btn-light-base));
}

.btn-outline-light:active, .btn-outline-light.active, .btn-outline-light:first-child:active {
  background: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
}

.btn-outline-light:disabled, .btn-outline-light.disabled {
  background: transparent;
}

.btn-outline-light-surface-dark:hover, .btn-outline-light-surface-dark:focus-visible {
  background: var(--btn-light-hover-bg, var(--btn-light-base));
}

.btn-outline-light-surface-dark:active, .btn-outline-light-surface-dark.active, .btn-outline-light-surface-dark:first-child:active {
  background: var(--btn-light-active-bg, color-mix(in srgb, var(--btn-light-base) 76%, #000));
}

.btn-outline-light-surface-dark:disabled, .btn-outline-light-surface-dark.disabled {
  background: transparent;
}

.card, .theme-card {
  color: var(--card-text-color, var(--text-dark));
  background: var(--card-surface);
  border-color: var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.theme-surface, .theme-panel {
  color: var(--theme-page-text, var(--text-dark));
  background: var(--theme-page-content-surface, var(--surface-2));
  border: 1px solid var(--border-default-color);
  border-radius: var(--border-radius-md);
}

.theme-surface-primary { background: var(--surface-primary-tint-1); }
.theme-surface-secondary { background: var(--surface-secondary-tint-1); }
.theme-surface-accent { background: var(--surface-accent-tint-1); }
.theme-surface-dark { color: var(--text-light); background: var(--surface-dark); }
.theme-gradient-page { background: var(--gradient-page-bg); }
.theme-gradient-surface { background: var(--gradient-surface); }
.theme-gradient-brand { color: var(--text-light); background: var(--gradient-brand); }
.theme-gradient-dark { color: var(--text-light); background: var(--gradient-dark-nav); }

.theme-text-display { font-family: var(--font-display); color: var(--text-dark); }
.theme-text-body { font-family: var(--font-body); color: var(--text-dark); }
.theme-text-muted { color: color-mix(in srgb, var(--text-dark) 62%, transparent); }
.theme-text-on-dark { color: var(--text-light); }
.theme-border { border: 1px solid var(--border-default-color); }
.theme-border-divider { border-color: var(--border-divider-color); }
.theme-rounded-sm { border-radius: var(--border-radius-sm); }
.theme-rounded-md { border-radius: var(--border-radius-md); }
.theme-rounded-lg { border-radius: var(--border-radius-lg); }
.theme-shadow-tight { box-shadow: var(--shadow-tight); }
.theme-shadow-surface { box-shadow: var(--shadow-surface); }
.theme-shadow-elevated { box-shadow: var(--shadow-elevated); }

.theme-badge, .badge.theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--badge-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  background: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

.theme-badge--primary, .badge.text-bg-primary { background: var(--badge-primary-bg) !important; color: var(--badge-primary-text) !important; }
.theme-badge--secondary, .badge.text-bg-secondary { background: var(--badge-secondary-bg) !important; color: var(--badge-secondary-text) !important; }
.theme-badge--accent, .badge.text-bg-accent { background: var(--badge-accent-bg) !important; color: var(--badge-accent-text) !important; }
.theme-badge--success, .badge.text-bg-success { background: var(--badge-success-bg) !important; color: var(--badge-success-text) !important; }
.theme-badge--info, .badge.text-bg-info { background: var(--badge-info-bg) !important; color: var(--badge-info-text) !important; }
.theme-badge--warning, .badge.text-bg-warning { background: var(--badge-warning-bg) !important; color: var(--badge-warning-text) !important; }
.theme-badge--danger, .badge.text-bg-danger { background: var(--badge-danger-bg) !important; color: var(--badge-danger-text) !important; }
.theme-badge--neutral, .badge.text-bg-neutral { background: var(--badge-neutral-bg) !important; color: var(--badge-neutral-text) !important; }
.theme-badge--dark, .badge.text-bg-dark { background: var(--badge-dark-bg) !important; color: var(--badge-dark-text) !important; }
.theme-badge--light, .badge.text-bg-light { background: var(--badge-light-bg) !important; color: var(--badge-light-text) !important; }
.theme-badge--accent, .badge.text-bg-accent, .theme-badge--tertiary, .badge.text-bg-tertiary { background: var(--badge-accent-bg) !important; color: var(--badge-accent-text) !important; }

.theme-table-shell {
  overflow-x: auto;
  background: var(--table-bg);
  border: 1px solid var(--table-border-color);
  border-radius: var(--table-radius);
  box-shadow: var(--table-shadow);
}

.theme-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--table-text);
  --bs-table-border-color: var(--table-border-color);
  --bs-table-striped-bg: var(--table-stripe-bg);
  --bs-table-hover-bg: var(--table-hover-bg);
  margin-bottom: 0;
  color: var(--table-text);
}

.theme-table > :not(caption) > * > * {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-color: var(--table-border-color);
  border-inline-start: 1px solid var(--table-column-border-color);
}

.theme-table > :not(caption) > * > *:first-child {
  border-inline-start-color: transparent;
}

.theme-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
}

.theme-table tbody tr:nth-child(even) > * {
  background: var(--table-stripe-bg);
}

.theme-table tbody tr:hover > * {
  background: var(--table-hover-bg);
}

.theme-table-row-selected > * {
  background: var(--table-selected-bg) !important;
  color: var(--table-selected-text) !important;
}

.theme-table-empty {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--table-text);
}

.theme-table-empty p {
  max-width: 24rem;
  margin: 0;
  color: var(--table-muted-text);
}

.theme-alert {
  --alert-tone: var(--brand-primary-500);
  --alert-contrast-text: var(--alert-solid-text);
  --alert-tone-bg-mix: var(--alert-bg-mix);
  --alert-tone-bg-base: var(--surface-2);
  display: flex;
  gap: var(--alert-gap);
  align-items: flex-start;
  padding: var(--alert-padding-y) var(--alert-padding-x);
  color: var(--alert-text-color);
  background: color-mix(in srgb, var(--alert-tone) var(--alert-tone-bg-mix), var(--alert-tone-bg-base));
  border: solid color-mix(in srgb, var(--alert-tone) var(--alert-border-mix), transparent);
  border-radius: var(--alert-radius);
}

.theme-alert-primary { --alert-tone: var(--brand-primary-500); --alert-contrast-text: var(--btn-primary-text); }
.theme-alert-secondary { --alert-tone: var(--brand-secondary); --alert-contrast-text: var(--btn-secondary-text); }
.theme-alert-accent { --alert-tone: var(--brand-accent); --alert-contrast-text: var(--btn-accent-text); }
.theme-alert-success { --alert-tone: var(--btn-success-base); --alert-contrast-text: var(--alert-success-text); --alert-tone-bg-mix: var(--alert-success-bg-mix); --alert-tone-bg-base: var(--alert-success-bg-base); color: var(--alert-success-text); }
.theme-alert-info { --alert-tone: var(--btn-info-base); --alert-contrast-text: var(--alert-info-text); --alert-tone-bg-mix: var(--alert-info-bg-mix); --alert-tone-bg-base: var(--alert-info-bg-base); color: var(--alert-info-text); }
.theme-alert-warning { --alert-tone: var(--btn-warning-base); --alert-contrast-text: var(--alert-warning-text); --alert-tone-bg-mix: var(--alert-warning-bg-mix); --alert-tone-bg-base: var(--alert-warning-bg-base); color: var(--alert-warning-text); }
.theme-alert-danger { --alert-tone: var(--btn-danger-base); --alert-contrast-text: var(--alert-danger-text); --alert-tone-bg-mix: var(--alert-danger-bg-mix); --alert-tone-bg-base: var(--alert-danger-bg-base); color: var(--alert-danger-text); }

.theme-alert__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
  border-radius: 999px;
  background: color-mix(in srgb, var(--alert-tone) var(--alert-icon-bg-opacity), transparent);
  color: currentColor;
}

.theme-alert__content {
  display: grid;
  gap: 0.2rem;
}

.theme-alert__content p {
  margin: 0;
}

.theme-alert a {
  color: currentColor;
  font-weight: 700;
  text-decoration: var(--alert-link-decoration);
  text-underline-offset: 0.16em;
}

.theme-alert .btn-close {
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.62;
}

.theme-accordion {
  display: grid;
  gap: var(--accordion-item-gap);
}

.theme-accordion .accordion-item {
  overflow: hidden;
  color: var(--accordion-text);
  background: var(--accordion-bg);
  border: 1px solid var(--accordion-border-color);
  border-radius: var(--accordion-radius);
  box-shadow: var(--accordion-shadow);
}

.theme-accordion.accordion-flush {
  gap: 0;
}

.theme-accordion.accordion-flush .accordion-item {
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0;
  box-shadow: none;
}

.theme-accordion.accordion-flush .accordion-item:first-child {
  border-top-width: 0;
}

.theme-accordion.accordion-flush .accordion-item:last-child {
  border-bottom-width: 0;
}

.theme-accordion .accordion-button {
  gap: 0.75rem;
  padding: var(--accordion-padding-y) var(--accordion-padding-x);
  color: var(--accordion-header-text);
  background: var(--accordion-header-bg);
  border: 0;
  box-shadow: none;
}

.theme-accordion .accordion-button:hover {
  background: var(--accordion-header-hover-bg);
}

.theme-accordion .accordion-button:focus {
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring-shadow);
}

.theme-accordion .accordion-button:not(.collapsed) {
  color: var(--accordion-active-text);
  background: var(--accordion-active-bg);
  box-shadow: inset 0 -1px 0 var(--accordion-divider-color);
}

.theme-accordion .accordion-button::after {
  display: var(--accordion-icon-display, block);
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--accordion-icon-color);
  background-image: none;
  color: var(--accordion-icon-color);
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

.theme-accordion .accordion-button:not(.collapsed)::after {
  background-color: var(--accordion-icon-color);
  background-image: none;
}

.theme-accordion--plus .accordion-button::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  background-image: none;
  background-color: transparent;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.theme-accordion--plus .accordion-button:not(.collapsed)::after {
  content: "-";
  background-color: transparent;
}

.theme-accordion--no-icon .accordion-button::after {
  display: none;
}

.theme-accordion .accordion-body {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-body-text);
  background: var(--accordion-body-bg);
}

.theme-accordion .accordion-body p {
  margin: 0;
  color: var(--accordion-muted-text);
}

.theme-list-group {
  display: grid;
  gap: var(--list-item-gap);
  color: var(--list-text);
  background: var(--list-bg);
  border-radius: var(--list-radius);
  box-shadow: var(--list-shadow);
}

.theme-list-group .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--list-item-padding-y) var(--list-item-padding-x);
  color: var(--list-text);
  background: var(--list-item-bg);
  border-color: var(--list-border-color);
  border-width: var(--list-border-width);
}

.theme-list-group .list-group-item:first-child { border-top-left-radius: var(--list-radius); border-top-right-radius: var(--list-radius); }
.theme-list-group .list-group-item:last-child { border-bottom-right-radius: var(--list-radius); border-bottom-left-radius: var(--list-radius); }

.theme-list-group.list-group-flush {
  gap: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.theme-list-group.list-group-flush .list-group-item {
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0;
}

.theme-list-group.list-group-flush .list-group-item:first-child {
  border-top-width: 0;
}

.theme-list-group.list-group-flush .list-group-item:last-child {
  border-bottom-width: 0;
}

.theme-list-group .list-group-item small {
  display: block;
  margin-top: 0.2rem;
  color: var(--list-muted-text);
}

.theme-list-group .list-group-item-action:hover,
.theme-list-group .list-group-item-action:focus {
  color: var(--list-text);
  background: var(--list-hover-bg);
}

.theme-list-group .list-group-item.active {
  color: var(--list-active-text);
  background: var(--list-active-bg);
  border-color: var(--list-active-border);
}

.theme-list-group .list-group-item.disabled,
.theme-list-group .list-group-item:disabled {
  color: var(--list-muted-text);
  background: var(--list-item-bg);
  opacity: var(--list-disabled-opacity);
}

.theme-list-group .list-group-item-primary,
.theme-list-group .list-group-item-secondary,
.theme-list-group .list-group-item-accent,
.theme-list-group .list-group-item-success,
.theme-list-group .list-group-item-danger,
.theme-list-group .list-group-item-warning,
.theme-list-group .list-group-item-info,
.theme-list-group .list-group-item-light,
.theme-list-group .list-group-item-dark {
  color: var(--list-context-text, var(--list-text));
  background: color-mix(in srgb, var(--list-context-tone) 14%, var(--list-bg));
  border-color: color-mix(in srgb, var(--list-context-tone) 44%, var(--list-border-color));
}

.theme-list-group .list-group-item-primary { --list-context-tone: var(--brand-primary-500); }
.theme-list-group .list-group-item-secondary { --list-context-tone: var(--brand-secondary); }
.theme-list-group .list-group-item-accent { --list-context-tone: var(--brand-accent); }
.theme-list-group .list-group-item-success { --list-context-tone: var(--btn-success-base); }
.theme-list-group .list-group-item-danger { --list-context-tone: var(--btn-danger-base); }
.theme-list-group .list-group-item-warning { --list-context-tone: var(--btn-warning-base); }
.theme-list-group .list-group-item-info { --list-context-tone: var(--btn-info-base); }
.theme-list-group .list-group-item-light { --list-context-tone: var(--surface-3); background: color-mix(in srgb, var(--surface-1) 78%, var(--list-bg)); }
.theme-list-group .list-group-item-dark { --list-context-tone: var(--brand-dark); --list-context-text: var(--text-light); background: color-mix(in srgb, var(--brand-dark) 84%, var(--list-bg)); }

.theme-list-group .list-group-item-primary small,
.theme-list-group .list-group-item-secondary small,
.theme-list-group .list-group-item-accent small,
.theme-list-group .list-group-item-success small,
.theme-list-group .list-group-item-danger small,
.theme-list-group .list-group-item-warning small,
.theme-list-group .list-group-item-info small,
.theme-list-group .list-group-item-light small,
.theme-list-group .list-group-item-dark small {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.theme-list-group .list-group-item-action:not(.active).list-group-item-primary:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-primary:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-secondary:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-secondary:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-accent:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-accent:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-success:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-success:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-danger:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-danger:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-warning:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-warning:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-info:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-info:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-light:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-light:focus,
.theme-list-group .list-group-item-action:not(.active).list-group-item-dark:hover,
.theme-list-group .list-group-item-action:not(.active).list-group-item-dark:focus {
  color: var(--list-context-text, var(--list-text));
  background: color-mix(in srgb, var(--list-context-tone) 22%, var(--list-bg));
}

.theme-list-group__meta {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.72;
}

.theme-content-block {
  display: grid;
  gap: var(--content-block-gap);
  padding: var(--content-block-padding);
  color: var(--content-block-text);
  background: var(--content-block-bg);
  border: var(--list-border-width) solid var(--list-border-color);
  border-radius: var(--list-radius);
  box-shadow: var(--list-shadow);
}

.theme-content-block__header,
.theme-content-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.theme-content-block__header { font-weight: 800; }
.theme-content-block p { margin: 0; color: var(--content-block-muted-text); }

.theme-separator {
  width: 100%;
  margin: var(--separator-margin-y) 0;
  color: var(--separator-color);
  border: 0;
  border-top: var(--separator-width) var(--separator-style) currentColor;
  opacity: 1;
}

.theme-progress-stack {
  display: grid;
  gap: var(--progress-gap);
  color: var(--progress-text);
}

.theme-progress-row {
  display: grid;
  gap: 0.45rem;
}

.theme-progress-row__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--progress-muted-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.theme-progress {
  height: var(--progress-height);
  background: var(--progress-track-bg);
  border: 1px solid var(--progress-border-color);
  border-radius: var(--progress-radius);
  overflow: hidden;
}

.theme-progress-bar {
  color: var(--progress-bar-text);
  background-color: var(--progress-bar-bg);
  font-weight: 800;
}

.theme-progress .progress-bar-striped {
  background-image: linear-gradient(45deg, var(--progress-stripe-color) 25%, transparent 25%, transparent 50%, var(--progress-stripe-color) 50%, var(--progress-stripe-color) 75%, transparent 75%, transparent);
}

.theme-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--spinner-gap);
  color: var(--progress-text);
  font-weight: 700;
}

.theme-spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  color: var(--spinner-color);
  border-width: var(--spinner-border-width);
}

.theme-spinner--muted { color: var(--spinner-muted-color); }
.theme-spinner--sm { width: var(--spinner-size-sm); height: var(--spinner-size-sm); }
.theme-spinner--lg { width: var(--spinner-size-lg); height: var(--spinner-size-lg); }

.theme-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg);
  border-radius: 0.25rem;
}

.theme-skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--skeleton-highlight-bg);
  animation: var(--skeleton-animation-name) var(--skeleton-animation-duration) var(--skeleton-animation-timing) infinite;
}

.placeholder.theme-skeleton,
.theme-skeleton.placeholder {
  cursor: wait;
  opacity: 1;
  background-color: var(--skeleton-bg);
}

.placeholder.theme-skeleton::before,
.theme-skeleton.placeholder::before {
  display: none;
}

.placeholder-glow .theme-skeleton.placeholder,
.placeholder-wave .theme-skeleton.placeholder {
  animation: none;
}

.theme-skeleton--line { height: var(--skeleton-line-height); border-radius: 999px; }
.theme-skeleton--label { width: 34%; height: var(--skeleton-line-height); border-radius: 999px; }
.theme-skeleton--control { width: 100%; height: 2.45rem; border-radius: var(--form-radius, 0.75rem); }
.theme-skeleton--button { width: 7rem; height: 2.35rem; border-radius: var(--button-radius, var(--form-radius, 0.75rem)); }
.theme-skeleton--wide { width: 82%; }
.theme-skeleton--short { width: 46%; }
.theme-skeleton--avatar { width: var(--skeleton-avatar-size); height: var(--skeleton-avatar-size); border-radius: 999px; }

@keyframes theme-skeleton-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes theme-skeleton-pulse {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.74; }
}

.form-control, .form-select {
  background-color: var(--form-bg);
  border-color: var(--form-border);
  border-radius: var(--form-radius);
  color: var(--form-text);
}

.form-control::placeholder {
  color: var(--form-placeholder-text);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--form-disabled-bg);
  color: var(--form-disabled-text);
  border-color: var(--form-border);
  opacity: 1;
}

.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring-shadow);
}

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

.form-check-input:focus, .form-range:focus::-webkit-slider-thumb, .form-range:focus::-moz-range-thumb {
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring-shadow);
}

.form-range::-webkit-slider-thumb { background-color: var(--form-control-accent, var(--form-check-accent)); border-color: var(--form-control-accent, var(--form-check-accent)); }
.form-range::-moz-range-thumb { background-color: var(--form-control-accent, var(--form-check-accent)); border-color: var(--form-control-accent, var(--form-check-accent)); }
.form-range:active::-webkit-slider-thumb, .form-range:focus-visible::-webkit-slider-thumb { background-color: var(--form-control-accent-strong, var(--form-control-accent, var(--form-check-accent))); border-color: var(--form-control-accent-strong, var(--form-control-accent, var(--form-check-accent))); box-shadow: var(--focus-ring-shadow); }
.form-range:active::-moz-range-thumb, .form-range:focus-visible::-moz-range-thumb { background-color: var(--form-control-accent-strong, var(--form-control-accent, var(--form-check-accent))); border-color: var(--form-control-accent-strong, var(--form-control-accent, var(--form-check-accent))); box-shadow: var(--focus-ring-shadow); }
.form-text { color: var(--form-muted-text); }

.navbar-theme {
  position: relative;
  overflow: visible;
  background: var(--navbar-shell-bg, var(--navbar-bg));
  color: var(--navbar-text, var(--nav-text));
  border-style: solid;
  border-color: var(--navbar-shell-border-color, var(--navbar-border));
  border-width: var(--navbar-shell-border-width, 1px);
  border-radius: var(--navbar-shell-radius, var(--navbar-radius));
  box-shadow: var(--navbar-shell-shadow, var(--navbar-shadow)), var(--navbar-shell-inset-shadow, none);
  backdrop-filter: blur(var(--navbar-shell-backdrop-blur, 0px));
  -webkit-backdrop-filter: blur(var(--navbar-shell-backdrop-blur, 0px));
}

.navbar-theme::before, .navbar-theme::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.navbar-theme::before {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navbar-shell-topline, transparent);
}

.navbar-theme::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--navbar-shell-leftline, transparent);
}

.navbar-theme .navbar-brand, .navbar-theme .nav-link {
  color: var(--navbar-text, var(--nav-text));
}

.navbar-theme .navbar-brand {
  font-family: var(--type-title-font-family, var(--font-display));
  font-size: var(--type-title-font-size, 1.125rem);
  font-weight: var(--type-title-font-weight, var(--font-heading-weight));
  line-height: var(--type-title-line-height, var(--font-line-height-heading));
  letter-spacing: var(--type-title-letter-spacing, var(--font-heading-tracking));
  text-transform: var(--type-title-text-transform, none);
}

.navbar-theme .nav-link {
  position: relative;
  color: var(--navbar-muted, var(--navbar-muted-text));
  border: 1px solid transparent;
  border-radius: var(--navbar-link-radius, var(--nav-radius));
  font-weight: var(--nav-font-weight, inherit);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.navbar-theme .navbar-text { color: var(--navbar-muted-text); }
.navbar-theme .nav-link:hover, .navbar-theme .nav-link:focus-visible { color: var(--nav-hover-text, var(--text-dark)); background: var(--nav-hover-bg, var(--navbar-link-hover-bg)); border-color: var(--nav-tabs-active-border, transparent); box-shadow: var(--nav-tabs-active-shadow, none); }
.navbar-theme .nav-link.active, .navbar-theme .navbar-nav .nav-link.show { color: var(--nav-active-text, var(--text-dark)); background: var(--nav-active-bg, var(--navbar-link-active-bg)); border-color: var(--nav-tabs-active-border, transparent); box-shadow: var(--nav-tabs-active-shadow, none); }
.navbar-theme .navbar-toggler { color: var(--navbar-text, var(--nav-text)); border-color: color-mix(in srgb, var(--navbar-text, var(--nav-text)) 16%, transparent); border-radius: var(--nav-radius); }
.navbar-theme .navbar-toggler:hover, .navbar-theme .navbar-toggler:focus-visible { border-color: color-mix(in srgb, var(--navbar-text, var(--nav-text)) 28%, transparent); background: color-mix(in srgb, var(--nav-hover-bg) 72%, transparent); }
.navbar-theme .navbar-toggler-icon { background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0); background-position: center calc(50% - 0.36rem), center, center calc(50% + 0.36rem); background-repeat: no-repeat; background-size: 100% 2px; }
@media (min-width: 992px) { .navbar-theme.navbar-expand-lg .navbar-nav { gap: 0.35rem; } }
@media (max-width: 991.98px) { .navbar-theme .navbar-collapse.show { padding-top: 0.75rem; } .navbar-theme .navbar-collapse.show .navbar-nav { gap: 0.35rem; } .navbar-theme .navbar-collapse.show .navbar-nav .nav-link:hover, .navbar-theme .navbar-collapse.show .navbar-nav .nav-link:focus-visible { color: var(--nav-mobile-hover-text, var(--nav-hover-text, var(--text-dark))); background: var(--nav-mobile-hover-bg, var(--nav-hover-bg)); border-color: var(--nav-mobile-hover-border, var(--nav-tabs-active-border)); box-shadow: var(--nav-mobile-hover-shadow, var(--nav-tabs-active-shadow)); text-decoration-line: var(--nav-mobile-text-decoration-line, none); text-decoration-thickness: var(--nav-mobile-text-decoration-thickness, 0); text-underline-offset: var(--nav-mobile-text-underline-offset, 0.35rem); } .navbar-theme .navbar-collapse.show .navbar-nav .nav-link.active, .navbar-theme .navbar-collapse.show .navbar-nav .nav-link.show { color: var(--nav-active-text, var(--text-dark)); background: var(--nav-mobile-active-bg, var(--nav-active-bg)); border-color: var(--nav-mobile-active-border, var(--nav-tabs-active-border)); box-shadow: var(--nav-mobile-active-shadow, var(--nav-tabs-active-shadow)); text-decoration-line: var(--nav-mobile-text-decoration-line, none); text-decoration-thickness: var(--nav-mobile-text-decoration-thickness, 0); text-underline-offset: var(--nav-mobile-text-underline-offset, 0.35rem); } .navbar-theme .navbar-collapse.show form[role="search"] { margin-top: 0.85rem; } }

.theme-footer {
  background: var(--footer-bg, var(--gradient-dark-neutral));
  color: var(--footer-text, var(--text-light));
  border-top: 1px solid var(--footer-divider, color-mix(in srgb, currentColor 14%, transparent));
}

.theme-footer p, .theme-footer small, .theme-footer .text-muted {
  color: var(--footer-muted, color-mix(in srgb, var(--footer-text, currentColor) 68%, transparent));
}

.theme-footer a {
  color: var(--footer-link, currentColor);
  text-decoration-line: var(--footer-link-decoration, none);
  text-underline-offset: var(--footer-link-underline-offset, 0.28em);
  transition: color 160ms ease, opacity 160ms ease;
}

.theme-footer a::before {
  content: "";
  display: var(--footer-link-accent-bar-display, none);
  width: 0.22rem;
  height: 0.86em;
  margin-inline-end: 0.42rem;
  border-radius: 999px;
  background: var(--footer-link);
  vertical-align: -0.08em;
}

.theme-footer a:hover, .theme-footer a:focus-visible {
  color: var(--footer-link-hover, var(--footer-link, currentColor));
  text-decoration-line: var(--footer-link-hover-decoration, underline);
}

.theme-footer a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--footer-link, currentColor) 42%, transparent);
  outline-offset: 0.25rem;
}

.navigation-theme {
  --bs-nav-link-color: var(--nav-text);
  --bs-nav-link-hover-color: var(--nav-text);
  --bs-nav-pills-link-active-color: var(--text-light);
  --bs-nav-pills-link-active-bg: var(--nav-accent);
  --bs-pagination-color: var(--nav-text);
  --bs-pagination-hover-color: var(--nav-text);
  --bs-pagination-hover-bg: var(--nav-hover-bg);
  --bs-pagination-active-bg: var(--nav-accent);
  --bs-pagination-active-border-color: var(--nav-accent);
  --bs-pagination-border-color: var(--nav-border);
  color: var(--nav-text);
}

.theme-nav-surface {
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  padding: 0.5rem;
}

.navigation-theme .nav-link { border-radius: var(--nav-radius); }
.navigation-theme .nav-link:hover, .navigation-theme .nav-link:focus-visible { background: var(--nav-hover-bg); }
.navigation-theme .nav-link.active { background: var(--nav-active-bg); color: var(--nav-text); }
.navigation-theme .breadcrumb { --bs-breadcrumb-divider-color: color-mix(in srgb, var(--nav-text) 42%, transparent); }
.navigation-theme .breadcrumb-item.active { color: color-mix(in srgb, var(--nav-text) 68%, transparent); }

.dropdown-menu.dropdown-theme, .dropdown-theme .dropdown-menu {
  --bs-dropdown-bg: var(--dropdown-bg);
  --bs-dropdown-color: var(--dropdown-item-text);
  --bs-dropdown-link-color: var(--dropdown-item-text);
  --bs-dropdown-link-hover-color: var(--dropdown-item-hover-text);
  --bs-dropdown-link-hover-bg: var(--dropdown-item-hover-bg);
  --bs-dropdown-link-active-color: var(--dropdown-item-active-text);
  --bs-dropdown-link-active-bg: var(--dropdown-item-active-bg);
  --bs-dropdown-link-disabled-color: var(--dropdown-item-disabled-text);
  --bs-dropdown-border-color: var(--dropdown-border);
  --bs-dropdown-divider-bg: var(--dropdown-divider-color);
  background: var(--dropdown-bg);
  color: var(--dropdown-item-text);
  border: var(--dropdown-border-width) solid var(--dropdown-border);
  border-color: var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow: var(--dropdown-shadow);
}

.dropdown-theme .dropdown-header {
  color: var(--dropdown-label-text);
}

.dropdown-theme .dropdown-item {
  color: var(--dropdown-item-text);
}

.dropdown-theme .dropdown-item:hover,
.dropdown-theme .dropdown-item:focus-visible {
  color: var(--dropdown-item-hover-text);
  background: var(--dropdown-item-hover-bg);
}

.dropdown-theme .dropdown-item.active,
.dropdown-theme .dropdown-item:active {
  color: var(--dropdown-item-active-text);
  background: var(--dropdown-item-active-bg);
}

.dropdown-theme .dropdown-item.disabled,
.dropdown-theme .dropdown-item:disabled {
  color: var(--dropdown-item-disabled-text);
  background: transparent;
  opacity: 1;
}

.dropdown-theme .dropdown-divider {
  border-top-color: var(--dropdown-divider-color);
}

.modal-content, .modal.theme-modal .modal-content {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-color: var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
}

.theme-modal .modal-header, .modal .modal-header {
  background: var(--modal-header-bg);
  border-bottom-color: var(--modal-border);
}

.theme-modal .modal-footer, .modal .modal-footer {
  background: var(--modal-footer-bg);
  border-top-color: var(--modal-border);
}

.modal-backdrop.show {
  background-color: var(--modal-backdrop-color);
}

.offcanvas.theme-offcanvas, .theme-offcanvas .offcanvas {
  background: var(--offcanvas-bg);
  color: var(--offcanvas-text);
  border-color: var(--offcanvas-border);
  box-shadow: var(--offcanvas-shadow);
}

.theme-offcanvas .offcanvas-header, .offcanvas.theme-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--offcanvas-border);
}

.popover.theme-popover, .theme-popover .popover, .tooltip.theme-tooltip .tooltip-inner, .theme-tooltip .tooltip-inner {
  color: var(--overlay-text);
  background: var(--overlay-bg);
  border-color: var(--overlay-border);
  border-radius: var(--overlay-radius);
  box-shadow: var(--overlay-shadow);
}

.theme-popover .popover-header {
  color: var(--overlay-text);
  background: color-mix(in srgb, var(--surface-3) 56%, var(--overlay-bg));
  border-bottom-color: var(--overlay-border);
}

.theme-popover .popover-body {
  color: var(--overlay-text);
}