/* Theme settings */
:root,
[data-theme="light"] {
  /* Palette */
  --blue-100: #f5f9ff;
  --blue-400: #edf5fe;
  --blue-500: #0d6efd;
  --blue-600: #0b5ed7;
  --blue-700: #0a58ca;
  --gray-100: #f7f9fd;
  --gray-150: #eef0f5;
  --gray-200: #e7ebef;
  --gray-300: #d5dbe2;
  --gray-400: #b7c0ca;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;

  --dark-500: #212529;
  --dark-900: #000;
  --green-100: #17b5481f;
  --green-500: #17b548;
  --green-600: #12963c;
  --green-700: #0d7a31;
  --orange-100: #f59e0b1f;
  --orange-500: #f59e0b;
  --red-100: #fb490a12;
  --red-500: #fb490a;
  --red-600: #e64008;
  --red-700: #c93706;
  --white-700: #e9edf1;
  --white-800: #f4f6f8;
  --white-900: #fff;
  --light-900: #fff;
  /* Main colors */

  --color-primary: var(--blue-500);
  --color-secondary: var(--gray-200);
  --color-white: var(--light-900);
  --color-red: var(--red-500);
  --color-green: var(--green-500);
  --color-gray: var(--gray-500);
  --color-dark: var(--dark-900);
  --color-surface-overlay: var(--white-900);
  --color-overlay-backdrop: rgba(15, 23, 42, 0.48);

  /* Text and background */
  --title-color: var(--dark-900);
  --text-color: var(--dark-500);
  --body-bg: var(--gray-100);
  --card-bg: var(--white-900);
  --card-box-shadow: 0 5px 20px rgba(15, 23, 42, 0.06);
  --card-border-color: #eef0f5;
  --border-color: var(--gray-200);
  --content-item-hover-bg: var(--gray-100);
  --ignore-list-item-bg: var(--gray-100);
  --ignore-list-item-hover-bg: var(--gray-150);
  /* Interface */
  --shadow-sm: 0 0.125rem 0.25rem rgb(15 23 42 / 8%);
  --shadow-md: 0 5px 20px rgb(15 23 42 / 6%);
  --shadow-lg: 0 12px 32px rgb(15 23 42 / 12%);
  --header-height: 70px;
  --header-offset: 20px;
  --container: 1120px;
  --main-gap: 20px;
  --form-control-height: 2.75rem;
  --font-system:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
    "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Roboto", var(--font-system);
  --font-secondary: "Inter", var(--font-system);
  --font-accent: "Special Gothic Expanded One", var(--font-system);
}

[data-theme="dark"] {
  /* Dark palette */
  --blue-100: #111e33;
  --blue-400: #172b4d;
  --blue-500: #2f80ff;
  --blue-600: #2472eb;
  --blue-700: #1b63d4;
  --gray-100: #15181f;
  --gray-150: #1b1f27;
  --gray-200: #232833;
  --gray-300: #303744;
  --gray-400: #465062;
  --gray-500: #8d98aa;
  --gray-600: #b3bdca;
  --gray-700: #d6dce5;

  --dark-500: #c4cbd5;
  --dark-900: #f7f9fc;
  --green-100: #22c55e1f;
  --green-500: #22c55e;
  --green-600: #1daf52;
  --green-700: #189447;
  --orange-100: #f7b9551f;
  --orange-500: #f7b955;
  --red-100: #ff65571f;
  --red-500: #ff6557;
  --red-600: #ed5145;
  --red-700: #d43f36;
  --white-700: #303744;
  --white-800: #1b1f27;
  --white-900: #15181f;
  --light-900: #fff;

  /* Main colors */
  --color-primary: var(--blue-500);
  --color-secondary: var(--gray-200);
  --color-white: var(--light-900);
  --color-red: var(--red-500);
  --color-green: var(--green-500);
  --color-gray: var(--gray-500);
  --color-dark: #07080b;
  --color-surface-overlay: #1b1f27;
  --color-overlay-backdrop: rgba(0, 0, 0, 0.72);

  /* Text and background */
  --title-color: var(--dark-900);
  --text-color: var(--dark-500);
  --body-bg: #0b0d12;
  --card-bg: var(--gray-100);
  --card-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  --card-border-color: transparent;
  --border-color: var(--gray-200);
  --content-item-hover-bg: var(--gray-200);
  --ignore-list-item-bg: var(--gray-200);
  --ignore-list-item-hover-bg: var(--gray-300);

  /* Interface */
  --shadow-sm: 0 0.125rem 0.25rem rgb(0 0 0 / 24%);
  --shadow-md: 0 5px 20px rgb(0 0 0 / 28%);
  --shadow-lg: 0 14px 36px rgb(0 0 0 / 42%);
}

/* Fonts */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Special Gothic Expanded One";
  src: url("../fonts/Special_Gothic_Expanded_One/SpecialGothicExpandedOne-Regular.woff2")
    format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-block-start: 0;
  margin-block-end: 0.5em;
  color: var(--text-color);
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: clamp(1.5rem, 1.435rem + 0.326vw, 1.6875rem);
  line-height: 1.2;
}

h2,
.h2 {
  font-size: clamp(1.375rem, 1.332rem + 0.217vw, 1.5rem);
  line-height: 1.2;
}

h3,
.h3 {
  font-size: clamp(1.25rem, 1.207rem + 0.217vw, 1.375rem);
  line-height: 1.2;
}

h4,
.h4 {
  font-size: clamp(1.125rem, 1.082rem + 0.217vw, 1.25rem);
}

h5,
.h5 {
  font-size: clamp(1.0625rem, 1.041rem + 0.109vw, 1.125rem);
}

h6,
.h6 {
  font-size: 1rem;
}

/* Lists */
ul {
  padding-left: 17px;
  margin: 0;
}
ul li::marker {
  color: var(--color-primary);
}
/* Utilities */
.text-center {
  text-align: center;
}

small,
.small {
  font-size: 0.8rem;
}

.text-clamp-1,
.text-clamp-2,
.text-clamp-3,
.text-clamp-4,
.text-clamp-5 {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--text-clamp-lines);
  line-clamp: var(--text-clamp-lines);
}

.text-clamp-1 {
  --text-clamp-lines: 1;
}

.text-clamp-2 {
  --text-clamp-lines: 2;
}

.text-clamp-3 {
  --text-clamp-lines: 3;
}

.text-clamp-4 {
  --text-clamp-lines: 4;
}

.text-clamp-5 {
  --text-clamp-lines: 5;
}

/* Text trimming */
.trim {
  --trim-lines: 3;
}

.trim:not(.is-expanded) .trim__content {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--trim-lines);
  line-clamp: var(--trim-lines);
}

.trim__toggle {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 0;
  padding: 0;
  gap: 4px;
  border: 0;
  outline: 0;
  color: var(--color-primary);
  background: transparent;
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.trim__toggle[hidden] {
  display: none !important;
}

.trim__toggle:hover,
.trim__toggle:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.trim__toggle:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.trim__toggle svg {
  display: block;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.trim__toggle.show svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .trim__toggle svg {
    transition: none;
  }
}

.link,
.link-accent {
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.link-accent {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.link:hover,
.link:focus-visible,
.link-accent:hover,
.link-accent:focus-visible {
  text-decoration-line: underline;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 10px;
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.color-primary {
  color: var(--color-primary) !important;
}

.color-secondary {
  color: var(--color-secondary) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-red {
  color: var(--color-red) !important;
}

.color-green {
  color: var(--color-green) !important;
}

.color-gray {
  color: var(--color-gray) !important;
}

.color-dark {
  color: var(--color-dark) !important;
}

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

.color-title {
  color: var(--title-color) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-red {
  background-color: var(--color-red) !important;
}

.bg-green {
  background-color: var(--color-green) !important;
}

.bg-gray {
  background-color: var(--color-gray) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

/* Form fields */
.form-group {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--form-control-height);
  padding-inline: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.75rem;
  outline: 0;
  color: var(--text-color);
  background-color: var(--color-surface-overlay);
  box-shadow: 0 2px 3px rgb(15 23 42 / 4%);
  font: inherit;
  line-height: 1.25;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):hover {
  border-color: var(--gray-400);
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):is(:focus, :active) {
  border-color: var(--color-primary);
  box-shadow:
    0 2px 3px rgb(15 23 42 / 4%),
    0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 12%, transparent);
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
)::placeholder {
  color: var(--title-color);
  opacity: 0.8;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):disabled {
  color: var(--gray-500);
  background-color: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  appearance: none;
}

:is(select[multiple], select[size]:not([size="1"])) {
  height: auto;
  min-height: 150px;
  padding: 0.5rem;
  background-image: none;
  background-position: initial;
  background-size: initial;
  appearance: auto;
}

textarea {
  height: auto;
  min-height: 100px !important;
  padding-block: 0.75rem;
  overflow-y: hidden !important;
  line-height: 1.5;
  resize: none !important;
}

.form-attachments {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--form-control-height);
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 0.75rem;
  outline: 0;
  color: var(--color-gray);
  background-color: var(--color-surface-overlay);
  box-shadow: 0 2px 3px rgb(15 23 42 / 4%);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.form-attachments::file-selector-button {
  height: 100%;
  margin: 0 0.875rem 0 0;
  padding-inline: 1rem;
  border: 0;
  border-right: 1px solid var(--gray-300);
  color: var(--color-gray);
  background-color: var(--gray-100);
  font-family: var(--font-secondary);
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.form-attachments:hover {
  border-color: var(--gray-400);
}

.form-attachments:hover::file-selector-button {
  border-color: var(--gray-300);
  background-color: var(--gray-200);
}

.form-attachments:active::file-selector-button {
  border-color: var(--gray-400);
  background-color: var(--gray-300);
}

.form-attachments:focus-visible {
  border-color: var(--color-primary);
  box-shadow:
    0 2px 3px rgb(15 23 42 / 4%),
    0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.form-attachments:disabled {
  color: var(--gray-500);
  background-color: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-attachments:disabled::file-selector-button {
  cursor: not-allowed;
}

/* Checkboxes */
:is(.checkbox, .comment__admin) {
  --checkbox-size: 18px;
  --checkbox-radius: 6px;
  --checkbox-border-color: var(--gray-300);
  --checkbox-hover-border-color: var(--gray-400);
  --checkbox-active-color: var(--color-primary);

  width: fit-content;
  max-width: 100%;
}

:is(.checkbox, .comment__admin) .form-check-label {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}

:is(.checkbox, .comment__admin) .form-check-input {
  appearance: none;
  position: relative;
  display: inline-block;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-width: var(--checkbox-size);
  margin: 0;
  flex: 0 0 var(--checkbox-size);
  border: 1px solid var(--checkbox-border-color);
  border-radius: var(--checkbox-radius);
  outline: 0;
  background-color: var(--color-surface-overlay);
  box-shadow: 0 2px 3px rgb(15 23 42 / 4%);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

:is(.checkbox, .comment__admin) .form-check-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background-color: var(--color-white);
  clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 20%, 84% 5%, 38% 71%);
  translate: -50% -50%;
  scale: 0;
  transition: scale 0.16s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}

:is(.checkbox, .comment__admin)
  .form-check-label:hover
  .form-check-input:not(:checked):not(:indeterminate) {
  border-color: var(--checkbox-hover-border-color);
  box-shadow: 0 2px 5px rgb(15 23 42 / 8%);
}

:is(.checkbox, .comment__admin) .form-check-input:checked,
:is(.checkbox, .comment__admin) .form-check-input:indeterminate {
  border-color: var(--checkbox-active-color);
  background-color: var(--checkbox-active-color);
  box-shadow: 0 2px 5px
    color-mix(in srgb, var(--checkbox-active-color) 24%, transparent);
}

:is(.checkbox, .comment__admin) .form-check-input:checked::before {
  scale: 1;
}

:is(.checkbox, .comment__admin) .form-check-input:indeterminate::before {
  width: 10px;
  height: 2px;
  border-radius: 999px;
  clip-path: none;
  scale: 1;
}

:is(.checkbox, .comment__admin) .form-check-input:focus-visible {
  border-color: var(--checkbox-active-color);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--checkbox-active-color) 16%, transparent);
}

:is(.checkbox, .comment__admin) .form-check-input:active {
  transform: scale(0.9);
}

:is(.checkbox, .comment__admin) .form-check-input:disabled,
:is(.checkbox, .comment__admin) .form-check-input:disabled + span {
  cursor: not-allowed;
  opacity: 0.6;
}

:is(.checkbox, .comment__admin)
  .form-check-label:has(.form-check-input:disabled) {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :is(.checkbox, .comment__admin) .form-check-input,
  :is(.checkbox, .comment__admin) .form-check-input::before {
    transition: none;
  }
}

/* DLE switches */
.dle-switch {
  --switch-width: 36px;
  --switch-height: 20px;
  --switch-thumb-size: 14px;
  --switch-padding: 3px;
  --switch-bg: var(--gray-300);
  --switch-checked-bg: var(--color-primary);
  --switch-thumb-bg: var(--color-white);
  --switch-focus-ring: color-mix(
    in srgb,
    var(--color-primary) 20%,
    transparent
  );

  display: block;
  width: 100%;
  line-height: 0;
}

.dle-switch .form-check-label {
  display: inline-flex;
  max-width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-color);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

.dle-switch .form-check-input {
  appearance: none;
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
  min-width: var(--switch-width);
  margin: 0;
  flex: 0 0 var(--switch-width);
  border: 0;
  border-radius: calc(var(--switch-height) / 2);
  outline: 0;
  background-color: var(--switch-bg);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 6%);
  vertical-align: top;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

.dle-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: var(--switch-padding);
  left: var(--switch-padding);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: 50%;
  background-color: var(--switch-thumb-bg);
  box-shadow: 0 1px 3px rgb(15 23 42 / 22%);
  translate: 0 0;
  transition: translate 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dle-switch .form-check-input:checked {
  background-color: var(--switch-checked-bg);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 4%);
}

.dle-switch .form-check-input:checked::before {
  translate: calc(
      var(--switch-width) - var(--switch-thumb-size) -
        (var(--switch-padding) * 2)
    )
    0;
}

.dle-switch .form-check-input:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--switch-focus-ring);
}

.dle-switch .form-check-input:active:not(:disabled) {
  transform: scale(0.94);
}

.dle-switch .form-check-label:has(.form-check-input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.dle-switch .form-check-input:disabled {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .dle-switch .form-check-input,
  .dle-switch .form-check-input::before {
    transition: none;
  }
}

/* Buttons and components */

.btn {
  --btn-size: 40px;
  --btn-padding-x: 1rem;
  --btn-padding-y: 0;
  --btn-font-family: var(--font-secondary);
  --btn-font-size: 0.86rem;
  --btn-font-weight: 600;
  --btn-line-height: 1.25;
  --btn-color: var(--text-color);
  --btn-bg: transparent;
  --btn-hover-color: var(--btn-color);
  --btn-hover-bg: var(--btn-bg);
  --btn-active-color: var(--btn-hover-color);
  --btn-active-bg: var(--btn-hover-bg);
  --btn-disabled-color: var(--btn-color);
  --btn-disabled-bg: var(--btn-bg);
  --btn-border-width: 0;
  --btn-border-color: transparent;
  --btn-hover-border-color: var(--btn-border-color);
  --btn-active-border-color: var(--btn-hover-border-color);
  --btn-disabled-border-color: var(--btn-border-color);
  --btn-border-radius: 0.75rem;
  --btn-focus-ring-color: color-mix(in srgb, var(--btn-bg) 35%, transparent);
  --btn-transition:
    color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-size);
  gap: 0.5rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  color: var(--btn-color);
  background-color: var(--btn-bg);
  border: var(--btn-border-width) solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  appearance: none;
  transition: var(--btn-transition);
}
.btn:hover {
  color: var(--btn-hover-color);
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-border-color);
}
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--btn-focus-ring-color);
}
.btn:active {
  color: var(--btn-active-color);
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-border-color);
  transform: translateY(1px);
}
.btn:disabled,
.btn.disabled {
  color: var(--btn-disabled-color);
  background-color: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border-color);
  pointer-events: none;
  opacity: 0.6;
}

.btn-xs {
  --btn-size: 20px;
  --btn-padding-x: 0.6rem;
  --btn-font-size: 0.8rem;
  --btn-border-radius: 0.625rem;
}
.btn-sm {
  --btn-size: 28px;
  --btn-padding-x: 0.75rem;
  --btn-font-size: 0.8rem;
  --btn-border-radius: 0.625rem;
}
.btn-md {
  --btn-size: 34px;
  --btn-padding-x: 0.875rem;
  --btn-font-size: 0.86rem;
  --btn-border-radius: 0.6875rem;
}
.btn-lg {
  --btn-size: 46px;
  --btn-padding-x: 1.25rem;
  --btn-font-size: 0.86rem;
  --btn-border-radius: 0.875rem;
}
.btn-xl {
  --btn-size: 50px;
  --btn-padding-x: 1.25rem;
  --btn-font-size: 0.86rem;
  --btn-border-radius: 0.875rem;
}
.btn-circle,
.btn-square {
  --btn-padding-x: 0;
  width: var(--btn-size);
  min-width: var(--btn-size);
  flex: 0 0 var(--btn-size);
}
.btn-circle {
  --btn-border-radius: 50%;
}
.btn-rounded {
  --btn-border-radius: 999px;
}
.btn-full {
  width: 100%;
}

.btn-primary {
  --btn-color: var(--color-white);
  --btn-bg: var(--color-primary);
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--blue-600);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--blue-700);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: var(--color-primary);
}

.btn-primary-soft {
  --btn-color: var(--gray-500);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-primary);
  --btn-hover-bg: var(--blue-100);
  --btn-active-color: var(--color-primary);
  --btn-active-bg: var(--blue-400);
  --btn-disabled-color: var(--gray-400);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 20%,
    transparent
  );
}

.btn-secondary {
  --btn-color: var(--dark-500);
  --btn-bg: var(--gray-200);
  --btn-hover-color: var(--dark-500);
  --btn-hover-bg: var(--gray-300);
  --btn-active-color: var(--dark-500);
  --btn-active-bg: var(--gray-400);
  --btn-disabled-color: var(--gray-500);
  --btn-disabled-bg: var(--gray-200);
}

.btn-red {
  --btn-color: var(--color-white);
  --btn-bg: var(--color-red);
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--red-600);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--red-700);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: var(--color-red);
}

.btn-green {
  --btn-color: var(--color-white);
  --btn-bg: var(--color-green);
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--green-600);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--green-700);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: var(--color-green);
}

.btn-gray {
  --btn-color: var(--color-white);
  --btn-bg: var(--color-gray);
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--gray-600);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--gray-700);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: var(--color-gray);
}

.btn-white {
  --btn-color: var(--dark-500);
  --btn-bg: var(--white-900);
  --btn-hover-color: var(--dark-500);
  --btn-hover-bg: var(--white-800);
  --btn-active-color: var(--dark-500);
  --btn-active-bg: var(--white-700);
  --btn-disabled-color: var(--gray-500);
  --btn-disabled-bg: var(--white-900);
}

/* Ghost buttons */
.btn-primary-ghost {
  --btn-color: var(--color-primary);
  --btn-bg: transparent;
  --btn-hover-color: var(--blue-600);
  --btn-hover-bg: var(--blue-400);
  --btn-active-color: var(--blue-700);
  --btn-active-bg: color-mix(in srgb, var(--color-primary) 16%, transparent);
  --btn-disabled-color: var(--color-primary);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 25%,
    transparent
  );
}

.btn-secondary-ghost {
  --btn-color: var(--gray-500);
  --btn-bg: transparent;
  --btn-hover-color: var(--gray-600);
  --btn-hover-bg: var(--gray-200);
  --btn-active-color: var(--gray-700);
  --btn-active-bg: var(--gray-150);
  --btn-disabled-color: var(--gray-400);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-gray) 22%,
    transparent
  );
}

.btn-white-ghost {
  --btn-color: var(--color-white);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: rgb(255 255 255 / 12%);
  --btn-active-color: var(--color-white);
  --btn-active-bg: rgb(255 255 255 / 18%);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: rgb(255 255 255 / 25%);
}

.btn-red-ghost {
  --btn-color: var(--color-red);
  --btn-bg: transparent;
  --btn-hover-color: var(--red-600);
  --btn-hover-bg: var(--red-100);
  --btn-active-color: var(--red-700);
  --btn-active-bg: color-mix(in srgb, var(--color-red) 16%, transparent);
  --btn-disabled-color: var(--color-red);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(in srgb, var(--color-red) 25%, transparent);
}

.btn-green-ghost {
  --btn-color: var(--color-green);
  --btn-bg: transparent;
  --btn-hover-color: var(--green-600);
  --btn-hover-bg: var(--green-100);
  --btn-active-color: var(--green-700);
  --btn-active-bg: color-mix(in srgb, var(--color-green) 16%, transparent);
  --btn-disabled-color: var(--color-green);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-green) 25%,
    transparent
  );
}

.btn-gray-ghost {
  --btn-color: var(--color-gray);
  --btn-bg: transparent;
  --btn-hover-color: var(--gray-600);
  --btn-hover-bg: var(--gray-150);
  --btn-active-color: var(--gray-700);
  --btn-active-bg: var(--gray-200);
  --btn-disabled-color: var(--gray-400);
  --btn-disabled-bg: transparent;
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-gray) 25%,
    transparent
  );
}

/* Outline buttons */
.btn-outline-primary,
.btn-primary-outline {
  --btn-color: var(--color-primary);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--color-primary);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--blue-600);
  --btn-disabled-color: var(--color-primary);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: var(--color-primary);
  --btn-hover-border-color: var(--color-primary);
  --btn-active-border-color: var(--blue-600);
  --btn-disabled-border-color: var(--color-primary);
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 25%,
    transparent
  );
}

.btn-outline-secondary,
.btn-secondary-outline {
  --btn-color: var(--gray-600);
  --btn-bg: transparent;
  --btn-hover-color: var(--gray-600);
  --btn-hover-bg: transparent;
  --btn-active-color: var(--dark-500);
  --btn-active-bg: var(--gray-200);
  --btn-disabled-color: var(--gray-400);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: var(--gray-300);
  --btn-hover-border-color: var(--gray-400);
  --btn-active-border-color: var(--gray-500);
  --btn-disabled-border-color: var(--gray-300);
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-gray) 22%,
    transparent
  );
}

.btn-outline-white,
.btn-white-outline {
  --btn-color: var(--color-white);
  --btn-bg: transparent;
  --btn-hover-color: var(--dark-500);
  --btn-hover-bg: var(--color-white);
  --btn-active-color: var(--dark-500);
  --btn-active-bg: var(--white-800);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: rgb(255 255 255 / 65%);
  --btn-hover-border-color: var(--color-white);
  --btn-active-border-color: var(--white-800);
  --btn-disabled-border-color: rgb(255 255 255 / 45%);
  --btn-focus-ring-color: rgb(255 255 255 / 25%);
}

.btn-outline-red,
.btn-red-outline {
  --btn-color: var(--color-red);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--color-red);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--red-600);
  --btn-disabled-color: var(--color-red);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: var(--color-red);
  --btn-hover-border-color: var(--color-red);
  --btn-active-border-color: var(--red-600);
  --btn-disabled-border-color: var(--color-red);
  --btn-focus-ring-color: color-mix(in srgb, var(--color-red) 25%, transparent);
}

.btn-outline-green,
.btn-green-outline {
  --btn-color: var(--color-green);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--color-green);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--green-600);
  --btn-disabled-color: var(--color-green);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: var(--color-green);
  --btn-hover-border-color: var(--color-green);
  --btn-active-border-color: var(--green-600);
  --btn-disabled-border-color: var(--color-green);
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-green) 25%,
    transparent
  );
}

.btn-outline-gray,
.btn-gray-outline {
  --btn-color: var(--color-gray);
  --btn-bg: transparent;
  --btn-hover-color: var(--color-white);
  --btn-hover-bg: var(--color-gray);
  --btn-active-color: var(--color-white);
  --btn-active-bg: var(--gray-600);
  --btn-disabled-color: var(--gray-400);
  --btn-disabled-bg: transparent;
  --btn-border-width: 1px;
  --btn-border-color: var(--color-gray);
  --btn-hover-border-color: var(--color-gray);
  --btn-active-border-color: var(--gray-600);
  --btn-disabled-border-color: var(--gray-400);
  --btn-focus-ring-color: color-mix(
    in srgb,
    var(--color-gray) 25%,
    transparent
  );
}

/* Dropdown */
.dropdown {
  --dropdown-width: 160px;
  --dropdown-offset: 8px;
  --dropdown-z-index: 1000;
  --dropdown-menu-padding: 6px;
  --dropdown-menu-gap: 2px;
  --dropdown-menu-radius: 16px;
  --dropdown-menu-bg: var(--color-surface-overlay);
  --dropdown-menu-border-color: var(--border-color);
  --dropdown-menu-shadow: var(--shadow-lg);
  --dropdown-menu-duration: 160ms;
  --dropdown-item-min-height: 36px;
  --dropdown-item-padding-x: 10px;
  --dropdown-item-gap: 10px;
  --dropdown-item-radius: 11px;
  --dropdown-item-icon-size: 20px;
  --dropdown-item-font-family: var(--font-primary);
  --dropdown-item-font-size: 0.875rem;
  --dropdown-item-font-weight: 400;
  --dropdown-item-line-height: 1;
  --dropdown-item-color: var(--text-color);
  --dropdown-item-bg: transparent;
  --dropdown-item-count-size: 18px;
  --dropdown-item-count-padding-x: 5px;
  --dropdown-item-count-font-size: 0.6875rem;
  --dropdown-item-hover-color: var(--title-color);
  --dropdown-item-hover-bg: var(--gray-100);
  --dropdown-item-active-color: var(--title-color);
  --dropdown-item-active-bg: var(--gray-200);
  --dropdown-item-current-color: var(--color-primary);
  --dropdown-item-current-bg: var(--blue-400);
  --dropdown-item-disabled-color: var(--gray-400);
  --dropdown-item-danger-color: var(--red-500);
  --dropdown-item-danger-hover-color: var(--red-600);
  --dropdown-item-danger-hover-bg: var(--red-100);
  --dropdown-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 28%,
    transparent
  );

  position: relative;
  display: inline-flex;
}
.btn-link {
  display: flex;
  cursor: pointer;
  width: max-content;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--color-primary);
}

.dropdown-sm {
  --dropdown-width: 120px;
}

.dropdown-md {
  --dropdown-width: 210px;
}

.dropdown-lg {
  --dropdown-width: 230px;
}

.dropdown-menu {
  --dropdown-menu-left: 0;
  --dropdown-menu-right: auto;
  --dropdown-menu-translate-x: 0;

  position: absolute;
  z-index: var(--dropdown-z-index);
  top: calc(100% + var(--dropdown-offset));
  left: var(--dropdown-menu-left);
  right: var(--dropdown-menu-right);
  display: flex;
  flex-direction: column;
  width: min(var(--dropdown-width), calc(100vw - 20px));
  margin: 0;
  padding: var(--dropdown-menu-padding);
  gap: var(--dropdown-menu-gap);
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--dropdown-menu-border-color);
  border-radius: var(--dropdown-menu-radius);
  background: var(--dropdown-menu-bg);
  box-shadow: var(--dropdown-menu-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(var(--dropdown-menu-translate-x), -4px, 0);
  transform-origin: top;
  transition:
    opacity var(--dropdown-menu-duration) ease,
    visibility var(--dropdown-menu-duration) ease,
    transform var(--dropdown-menu-duration) ease;
}

.dropdown-menu-center {
  --dropdown-menu-left: 50%;
  --dropdown-menu-translate-x: -50%;
}

.dropdown-menu-end {
  --dropdown-menu-left: auto;
  --dropdown-menu-right: 0;
}

.dropup > .dropdown-menu {
  top: auto;
  bottom: calc(100% + var(--dropdown-offset));
  transform: translate3d(var(--dropdown-menu-translate-x), 4px, 0);
  transform-origin: bottom;
}

.dropdown:is(.is-open, .show) > .dropdown-menu,
.dropdown > .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(var(--dropdown-menu-translate-x), 0, 0);
}

.dropdown-menu-item {
  display: flex;
  width: 100%;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-menu-title {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 10px 5px;
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  list-style: none;
}

.dropdown-menu-item-sm {
  --dropdown-item-min-height: 35px;
  --dropdown-item-padding-x: 10px;
  --dropdown-item-gap: 9px;
  --dropdown-item-radius: 11px;
  --dropdown-item-icon-size: 19px;
  --dropdown-item-font-size: 0.85rem;
  --dropdown-item-count-size: 17px;
  --dropdown-item-count-padding-x: 4px;
  --dropdown-item-count-font-size: 0.65625rem;
}

.dropdown-menu-item-md {
  --dropdown-item-min-height: 36px;
  --dropdown-item-padding-x: 10px;
  --dropdown-item-gap: 10px;
  --dropdown-item-radius: 11px;
  --dropdown-item-icon-size: 20px;
  --dropdown-item-font-size: 0.875rem;
  --dropdown-item-count-size: 18px;
  --dropdown-item-count-padding-x: 5px;
  --dropdown-item-count-font-size: 0.6875rem;
}

.dropdown-menu-item-lg {
  --dropdown-item-min-height: 38px;
  --dropdown-item-padding-x: 12px;
  --dropdown-item-gap: 12px;
  --dropdown-item-radius: 11px;
  --dropdown-item-icon-size: 20px;
  --dropdown-item-font-size: 0.875rem;
  --dropdown-item-count-size: 18px;
  --dropdown-item-count-padding-x: 5px;
  --dropdown-item-count-font-size: 0.6875rem;
}

.dropdown-menu-item > :is(a, button) {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: var(--dropdown-item-min-height);
  margin: 0;
  padding: 0 var(--dropdown-item-padding-x);
  gap: var(--dropdown-item-gap);
  border: 0;
  border-radius: var(--dropdown-item-radius);
  outline: 0;
  color: var(--dropdown-item-color);
  background: var(--dropdown-item-bg);
  font-family: var(--dropdown-item-font-family);
  font-size: var(--dropdown-item-font-size);
  font-weight: var(--dropdown-item-font-weight);
  line-height: var(--dropdown-item-line-height);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.dropdown-menu-item > :is(a, button) > svg {
  display: block;

  flex: 0 0 var(--dropdown-item-icon-size);
  align-self: center;
}

.dropdown-menu-item > :is(a, button) > :not(svg) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu-count {
  --dropdown-count-color: var(--color-white);
  --dropdown-count-bg: var(--color-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dropdown-item-count-size);
  height: var(--dropdown-item-count-size);
  margin-left: auto;
  padding: 1px var(--dropdown-item-count-padding-x) 0;
  flex: 0 0 auto;
  border-radius: calc(var(--dropdown-item-count-size) / 2);
  color: var(--dropdown-count-color);
  background: var(--dropdown-count-bg);
  font-size: var(--dropdown-item-count-font-size);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dropdown-menu-count--red {
  --dropdown-count-bg: var(--color-red);
}

.dropdown-menu-item:is(:hover, :focus-within) > :is(a, button) {
  color: var(--dropdown-item-hover-color);
  background: var(--dropdown-item-hover-bg);
}

.dropdown-menu-item > :is(a, button):focus-visible {
  color: var(--dropdown-item-hover-color);
  background: var(--dropdown-item-hover-bg);
  box-shadow: inset 0 0 0 2px var(--dropdown-focus-ring-color);
}

.dropdown-menu-item:active > :is(a, button) {
  color: var(--dropdown-item-active-color);
  background: var(--dropdown-item-active-bg);
}

.dropdown-menu-item.is-active > :is(a, button),
.dropdown-menu-item > :is(a, button)[aria-current] {
  color: var(--dropdown-item-current-color);
  background: var(--dropdown-item-current-bg);
}

.dropdown-menu-item.is-danger > :is(a, button) {
  color: var(--dropdown-item-danger-color);
}

.dropdown-menu-item.is-danger:is(:hover, :focus-within) > :is(a, button) {
  color: var(--dropdown-item-danger-hover-color);
  background: var(--dropdown-item-danger-hover-bg);
}

.dropdown-menu-item:is(.is-disabled, [aria-disabled="true"]) > :is(a, button),
.dropdown-menu-item > :is(a, button):disabled,
.dropdown-menu-item > :is(a, button)[aria-disabled="true"] {
  color: var(--dropdown-item-disabled-color);
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu,
  .dropdown-menu-item > :is(a, button) {
    transition: none;
  }
}

/* Menu */
.menu {
  --menu-gap: 2px;
  --menu-item-min-height: 38px;
  --menu-item-padding-x: 12px;
  --menu-item-gap: 12px;
  --menu-item-radius: 11px;
  --menu-icon-size: 20px;
  --menu-item-hover-color: var(--title-color);
  --menu-item-hover-bg: var(--gray-100);
  --menu-item-active-color: var(--title-color);
  --menu-item-active-bg: var(--gray-200);
  --menu-item-current-color: var(--color-primary);
  --menu-item-current-bg: var(--blue-400);
  --menu-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 28%,
    transparent
  );

  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__profile-item,
.menu__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__profile {
  padding: 8px var(--menu-item-padding-x) 12px;
  border-radius: var(--menu-item-radius);
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.menu__profile:is(:hover, :focus-visible) {
  background-color: var(--menu-item-hover-bg);
}

.menu__profile:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--menu-focus-ring-color);
}

.menu__profile .name {
  max-width: 100%;
}

.menu__profile .meta {
  color: var(--color-gray);
}

.menu__divider {
  height: 1px;
  margin: 5px var(--menu-item-padding-x);
  background-color: var(--border-color);
  list-style: none;
}

.menu__link {
  display: flex;
  width: 100%;
  min-height: var(--menu-item-min-height);
  align-items: center;
  gap: var(--menu-item-gap);
  margin: 0;
  padding: 0 var(--menu-item-padding-x);
  border: 0;
  border-radius: var(--menu-item-radius);
  outline: 0;
  color: var(--text-color);
  background: transparent;
  font: inherit;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.menu__icon {
  display: block;
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  flex: 0 0 var(--menu-icon-size);
  color: var(--color-gray);
  transition: color 140ms ease;
}

.menu__link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__item:is(:hover, :focus-within)
  > .menu__link:not(.is-active):not([aria-selected="true"]) {
  color: var(--menu-item-hover-color);
  background-color: var(--menu-item-hover-bg);
}

.menu__item:active > .menu__link:not(.is-active):not([aria-selected="true"]) {
  color: var(--menu-item-active-color);
  background-color: var(--menu-item-active-bg);
}

.menu__link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--menu-focus-ring-color);
}

.menu__item > .menu__link:is(.is-active, [aria-selected="true"]) {
  color: var(--menu-item-current-color);
  background-color: var(--menu-item-current-bg);
}

.menu__link:is(.is-active, [aria-selected="true"]) .menu__icon {
  color: var(--color-primary) !important;
}

.menu__item--danger > .menu__link,
.menu__item--danger .menu__icon {
  color: var(--red-500);
}

.menu__item--danger:is(:hover, :focus-within)
  > .menu__link:not(.is-active):not([aria-selected="true"]) {
  color: var(--red-600);
  background-color: var(--red-100);
}

@media (prefers-reduced-motion: reduce) {
  .menu__link,
  .menu__profile,
  .menu__icon {
    transition: none;
  }
}

/* Tabs */
.tabs,
.tabs-nav {
  --tabs-gap: 8px;
  --tabs-button-padding-bottom: 10px;
  --tabs-label-padding-x: 15px;
  --tabs-label-padding-y: 8px;
  --tabs-label-radius: 10px;
  --tabs-button-color: var(--color-gray);
  --tabs-button-hover-color: var(--color-primary);
  --tabs-button-hover-bg: var(--blue-100);
  --tabs-button-active-color: var(--color-primary);
  --tabs-button-border-size: 2px;
  --tabs-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary) 28%,
    transparent
  );
}

.tabs-nav {
  display: flex;
  align-items: center;
  gap: var(--tabs-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar {
  display: none;
}

.tabs-nav__button {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0 var(--tabs-button-padding-bottom);
  border: 0;
  border-bottom: var(--tabs-button-border-size) solid transparent;
  border-radius: 0;
  outline: 0;
  color: var(--tabs-button-color);
  background: transparent;
  font: inherit;
  font-weight: 400;
  line-height: 1.25;
  cursor: pointer;
  appearance: none;
  transition:
    color 140ms ease,
    border-color 140ms ease;
}

.tabs-nav__button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tabs-label-padding-y) var(--tabs-label-padding-x);
  border-radius: var(--tabs-label-radius);
  background-color: transparent;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.tabs-nav__button:hover {
  color: var(--tabs-button-hover-color);
}

.tabs-nav__button:hover > span,
.tabs-nav__button:focus-visible > span {
  background-color: var(--tabs-button-hover-bg);
}

.tabs-nav__button:focus-visible > span {
  box-shadow: 0 0 0 2px var(--tabs-focus-ring-color);
}

.tabs-nav__button.is-active,
.tabs-nav__button[aria-selected="true"] {
  border-bottom-color: var(--tabs-button-active-color);
  color: var(--tabs-button-active-color);
  font-weight: 500;
}

.tabs-nav__button:disabled,
.tabs-nav__button[aria-disabled="true"] {
  color: var(--gray-400);
  border-bottom-color: transparent;
  pointer-events: none;
  cursor: default;
}

.tabs-content,
.tabs-sidebar,
.tabs-panel {
  min-width: 0;
}

.tabs-panel[hidden] {
  display: none !important;
}

.tabs-panel:focus {
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tabs-nav__button,
  .tabs-nav__button > span {
    transition: none;
  }
}

/* Tab menus keep the menu style. */
.menu.tabs-nav {
  flex-direction: column;
  align-items: stretch;
  gap: var(--menu-gap);
  overflow: visible;
}

.menu__link.tabs-nav__button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--menu-item-min-height);
  justify-content: flex-start;
  padding: 0 var(--menu-item-padding-x);
  gap: var(--menu-item-gap);
  border: 0;
  border-radius: var(--menu-item-radius);
  color: var(--text-color);
  font-weight: inherit;
  line-height: 1;
}

.menu__link.tabs-nav__button > span {
  display: block;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.menu__link.tabs-nav__button:is(:hover, :focus-visible) > span {
  background-color: transparent;
}

.menu__item:is(:hover, :focus-within) > .menu__link.tabs-nav__button {
  color: var(--title-color);
  background-color: var(--gray-100);
}

.menu__item:active > .menu__link.tabs-nav__button {
  color: var(--title-color);
  background-color: var(--gray-200);
}

.menu__item
  > .menu__link.tabs-nav__button:is(.is-active, [aria-selected="true"]) {
  border-bottom-color: transparent;
  color: var(--color-primary);
  background-color: var(--blue-400);
  font-weight: inherit;
}

.menu__item--danger > .menu__link.tabs-nav__button,
.menu__item--danger
  > .menu__link.tabs-nav__button:is(.is-active, [aria-selected="true"]) {
  color: var(--red-500);
}

.menu__item--danger
  > .menu__link.tabs-nav__button:is(.is-active, [aria-selected="true"]) {
  background-color: var(--red-100);
}

.menu__item--danger
  > .menu__link:is(.is-active, [aria-selected="true"])
  .menu__icon {
  color: var(--red-500) !important;
}

.menu__item--danger:is(:hover, :focus-within) > .menu__link.tabs-nav__button {
  color: var(--red-600);
  background-color: var(--red-100);
}

/* Side panel */

.is-side-panel-open {
  overflow: hidden;
}

.side-panel {
  --side-panel-width: 360px;
  --side-panel-duration: 240ms;

  position: fixed;
  z-index: 1100;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--side-panel-duration);
}

.side-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  transition:
    background-color var(--side-panel-duration) ease,
    backdrop-filter var(--side-panel-duration) ease,
    opacity var(--side-panel-duration) ease;
}

.side-panel__dialog {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  display: flex;
  width: min(var(--side-panel-width), calc(100vw - 20px));
  max-width: 100%;
  flex-direction: column;
  background-color: var(--body-bg);
  box-shadow: var(--shadow-lg);
  outline: 0;
  transition: transform var(--side-panel-duration) ease;
}

.side-panel-start .side-panel__dialog {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.side-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.side-panel.is-open::before {
  background-color: var(--color-overlay-backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
}

.side-panel-start.is-open .side-panel__dialog {
  transform: translate3d(0, 0, 0);
}

.side-panel__header {
  display: flex;
  height: 70px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}

.side-panel__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.side-panel__brand img {
  display: block;
  flex: 0 0 auto;
}

.side-panel__title {
  overflow: hidden;
  color: var(--text-color);
  font-family: var(--font-secondary);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-panel__close {
  flex: 0 0 auto;
}

.side-panel__body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 16px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--gray-300) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.side-panel__body::-webkit-scrollbar {
  width: 7px;
}

.side-panel__body::-webkit-scrollbar-track {
  background-color: transparent;
}

.side-panel__body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--gray-300);
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  .side-panel,
  .side-panel::before,
  .side-panel__dialog {
    transition: none;
  }
}

/* Modal */
.modal[data-modal] {
  --modal-content-width: 450px;
  --modal-viewport-offset: 40px;
  --modal-viewport-padding-x: 16px;
  --modal-content-radius: 30px;
  --modal-content-bg: var(--color-surface-overlay);
  --modal-content-shadow: var(--shadow-lg);
  --modal-header-padding: 20px;
  --modal-body-padding: 20px;
  --modal-footer-padding: 16px 20px;
  --modal-section-gap: 12px;
  --modal-transition-duration: 240ms;

  position: fixed;
  z-index: 1050;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-viewport-offset) var(--modal-viewport-padding-x);
  overflow: hidden;
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    background-color var(--modal-transition-duration) ease,
    backdrop-filter var(--modal-transition-duration) ease,
    opacity var(--modal-transition-duration) ease,
    visibility var(--modal-transition-duration) ease;
}

.modal[data-modal].modal-top {
  align-items: flex-start;
}

.modal[data-modal].modal-bottom {
  align-items: flex-end;
}

.modal[data-modal].is-open {
  background-color: var(--color-overlay-backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal[data-modal].is-overflowing {
  --modal-viewport-offset: 0px;
  --modal-content-radius: 0px;

  align-items: center;
}

.modal[data-modal] > .modal-content {
  position: relative;
  display: flex;
  width: min(100%, var(--modal-content-width));
  max-height: calc(100dvh - (var(--modal-viewport-offset) * 2));
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--modal-content-radius);
  color: var(--text-color);
  background: var(--modal-content-bg);
  box-shadow: var(--modal-content-shadow);
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(1.08);
  transform-origin: center;
  transition:
    opacity var(--modal-transition-duration) ease,
    transform var(--modal-transition-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal[data-modal] > .modal-content:focus {
  outline: 0;
}

.modal[data-modal].is-overflowing > .modal-content {
  height: 100dvh;
  max-height: 100dvh;
}

.modal[data-modal].modal-top > .modal-content {
  transform-origin: top center;
}

.modal[data-modal].modal-bottom > .modal-content {
  transform: translate3d(0, 10px, 0) scale(1.08);
  transform-origin: bottom center;
}

.modal[data-modal].is-open > .modal-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.modal[data-modal] > .modal-content-sm {
  --modal-content-width: 300px;
}

.modal[data-modal] > .modal-content-lg {
  --modal-content-width: 550px;
}

.modal[data-modal] .modal-header,
.modal[data-modal] .modal-footer {
  position: sticky;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--modal-section-gap);
  background: var(--modal-content-bg);
}

.modal[data-modal] .modal-header {
  top: 0;
  min-height: 64px;
  padding: var(--modal-header-padding);
  padding-right: 64px;
  border-bottom: 1px solid var(--border-color);
}

.modal[data-modal] .modal-body {
  min-height: 0;
  padding: var(--modal-body-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}

.modal[data-modal].is-overflowing .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, 0.28) transparent;
}

.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar-track,
.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar-corner {
  background: transparent;
}

.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.28);
  background-clip: content-box;
}

.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.45);
  background-clip: content-box;
}

.modal[data-modal].is-overflowing .modal-body::-webkit-scrollbar-button {
  display: none;
}

.modal[data-modal] .modal-footer {
  bottom: 0;
  justify-content: flex-end;
  padding: var(--modal-footer-padding);
  border-top: 1px solid var(--border-color);
}

.modal[data-modal] .modal-title {
  margin: 0;
  color: var(--title-color);

  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.modal[data-modal] .modal-close {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 15px;
}
.modal[data-modal] .modal-back {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 15px;
}

@media (max-width: 480px) {
  .modal[data-modal] {
    --modal-viewport-offset: 20px;
    --modal-viewport-padding-x: 10px;
    --modal-header-padding: 16px;
    --modal-body-padding: 16px;
    --modal-footer-padding: 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal[data-modal],
  .modal[data-modal] > .modal-content {
    transition: none;
  }
}

.card {
  --card-space-unit: 5px;
  --card-spacer-x: calc(var(--card-space-unit) * 4);
  --card-spacer-y: calc(var(--card-space-unit) * 4);
  --card-border-radius: 20px;

  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  word-wrap: break-word;
  border-radius: var(--card-border-radius);
  background-clip: border-box;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-box-shadow);
}

.card-body {
  padding: var(--card-spacer-y) var(--card-spacer-x);
}

.card-body--lg {
  --card-spacer-x: calc(var(--card-space-unit) * 5);
  --card-spacer-y: calc(var(--card-space-unit) * 5);
}
.card-title {
  margin-bottom: 15px;
}
.card-footer {
  margin-top: 15px;
}
/* Tooltip */
.tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 240px;
  padding: 5px 8px;
  border-radius: 10px;
  color: #fff;
  background: #212529;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  font-family: inherit;
  font-size: 0.7rem;

  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
  transition:
    opacity 120ms ease,
    visibility 120ms ease,
    transform 120ms ease;
}

.tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}

.tooltip[data-position="top"] {
  transform-origin: bottom center;
}

.tooltip[data-position="top"]::after {
  top: 100%;
  left: 50%;
  border-top-color: #212529;
  transform: translateX(-50%);
}

.tooltip[data-position="bottom"] {
  transform-origin: top center;
}

.tooltip[data-position="bottom"]::after {
  bottom: 100%;
  left: 50%;
  border-bottom-color: #212529;
  transform: translateX(-50%);
}

.tooltip[data-position="start"] {
  transform-origin: center right;
}

.tooltip[data-position="start"]::after {
  top: 50%;
  left: 100%;
  border-left-color: #212529;
  transform: translateY(-50%);
}

.tooltip[data-position="end"] {
  transform-origin: center left;
}

.tooltip[data-position="end"]::after {
  top: 50%;
  right: 100%;
  border-right-color: #212529;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: none;
  }
}
.d-none {
  display: none !important;
}