:root,
.theme-arctic {
  color-scheme: dark;

  --theme-bg: #120822;
  --theme-bg-rgb: 18 8 34;
  --theme-surface-gradient-end: #160a28;
  --theme-bg-strong: #0b0416;
  --theme-surface: #1a0d2d;
  --theme-surface-rgb: 26 13 45;
  --theme-surface-2: #24113e;
  --theme-surface-3: #301653;
  --theme-surface-deep: #0e061b;
  --theme-tooltip: #25133d;

  --theme-text: #eee9f8;
  --theme-text-strong: #faf7ff;
  --theme-text-muted: #c1b5d2;
  --theme-text-faint: #88799d;

  --color-accent: #8b5cf6;
  --theme-accent: var(--color-accent);
  --theme-accent-rgb: 139 92 246;
  --theme-accent-strong: #7c3aed;
  --theme-accent-soft: #a78bfa;
  --theme-accent-text: #f5f0ff;
  --theme-accent-muted: #c4b5fd;
  --theme-accent-faint: #ede9fe;
  --theme-accent-wash: rgb(var(--theme-accent-rgb) / 0.20);
  --theme-accent-wash-2: rgb(167 139 250 / 0.15);
  --theme-accent-border: rgb(var(--theme-accent-rgb) / 0.38);
  --theme-accent-border-soft: rgb(167 139 250 / 0.24);
  --theme-accent-shadow-soft: rgb(var(--theme-accent-rgb) / 0.14);
  --theme-accent-shadow: rgb(var(--theme-accent-rgb) / 0.24);

  --theme-border: #3a1c6b;
  --theme-border-soft: #3a1c6b;
  --theme-border-strong: color-mix(in oklab, #3a1c6b 82%, #8b5cf6);
  --theme-white-soft: rgba(255, 255, 255, 0.06);
  --theme-white-hover: rgba(255, 255, 255, 0.10);
  --theme-black-soft: rgb(9 3 18 / 0.35);
  --theme-black-medium: rgb(9 3 18 / 0.58);
  --theme-overlay: rgb(9 3 18 / 0.72);

  --theme-success: #22c55e;
  --theme-danger: #ef4444;
  --theme-danger-bg: rgba(127, 29, 29, 0.62);
  --theme-danger-soft: rgba(239, 68, 68, 0.12);
}

.app-body {
  min-height: 100vh;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  color: var(--theme-text);
  background-color: var(--theme-bg);
  background-image:
    radial-gradient(circle at 18% -8%, rgb(var(--theme-accent-rgb) / 0.16), transparent 34rem),
    radial-gradient(circle at 84% 8%, rgb(167 139 250 / 0.10), transparent 28rem),
    url('/assets/svg/bg.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1972px 615px;
  background-attachment: fixed;
}

.app-main {
  padding: 0.75rem 1.5rem 3.5rem;
}

.app-main--compact {
  padding-inline: 0.5rem;
}

@media (min-width: 768px) {
  .app-main--with-sidebar {
    margin-left: 205px;
  }

  .app-main--compact {
    padding-inline: 1.5rem;
  }
}

.ui-card,
.ui-panel {
  border: 1px solid var(--theme-border-soft) !important;
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-gradient-end)) !important;
  box-shadow: 0 16px 40px rgb(9 3 18 / 0.22);
}

.ui-card {
  border-radius: 0.75rem;
}

.ui-panel {
  border-radius: 1rem;
}

.ui-surface-gradient {
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-gradient-end)) !important;
}

.ui-surface-deep-gradient {
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-deep)) !important;
}

.ui-owned-gradient {
  background: linear-gradient(to bottom, rgb(var(--theme-accent-rgb) / 0.14), var(--theme-surface), var(--theme-bg)) !important;
}

.ui-success-gradient {
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.12), var(--theme-surface-deep)) !important;
}

.ui-warning-gradient {
  background: linear-gradient(to bottom, rgba(251, 191, 36, 0.10), var(--theme-surface-deep)) !important;
}

.ui-subscription-ending-gradient {
  background: linear-gradient(
    to bottom,
    rgb(var(--theme-accent-rgb) / 0.14),
    rgb(36 17 62 / 0.94),
    var(--theme-surface-deep)
  ) !important;
}

.ui-subscription-ending-border {
  border-color: rgb(var(--theme-accent-rgb) / 0.24) !important;
}

.text-subscription-ending {
  color: #f5f0ff !important;
}

.text-subscription-ending-soft {
  color: #c4b5fd !important;
}

.bg-subscription-ending-soft {
  background: rgb(var(--theme-accent-rgb) / 0.11) !important;
}

.ui-subscription-ending-chip {
  border-color: rgb(var(--theme-accent-rgb) / 0.28) !important;
  background: linear-gradient(to right, rgb(var(--theme-accent-rgb) / 0.20), rgb(167 139 250 / 0.08)) !important;
  color: #f5f0ff !important;
}

.ui-subscription-ending-dot {
  background: var(--theme-accent-soft) !important;
  box-shadow: 0 0 14px var(--theme-accent-shadow);
}

.ui-hover-surface:hover,
.ui-btn-secondary:hover {
  background: linear-gradient(to bottom, var(--theme-surface-2), var(--theme-surface-3)) !important;
}

.ui-active-surface:active,
.ui-btn-secondary:active {
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-deep)) !important;
}

.ui-btn-primary,
.ui-primary-surface {
  color: #fff !important;
  border-color: var(--theme-accent-border) !important;
  background: var(--theme-accent) !important;
  box-shadow: 0 10px 30px var(--theme-accent-shadow-soft) !important;
}

.ui-btn-primary:hover,
.ui-primary-surface:hover {
  background: color-mix(in oklab,var(--color-accent) 90%,transparent) !important;
  box-shadow: 0 12px 40px var(--theme-accent-shadow) !important;
}

.ui-btn-secondary,
.ui-secondary-surface {
  color: var(--theme-text) !important;
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-gradient-end)) !important;
  box-shadow: 0 1px 2px rgb(9 3 18 / 0.24) !important;
}

.ui-field-surface {
  color: var(--theme-text-strong) !important;
  border-color: var(--theme-border) !important;
  background: linear-gradient(to bottom, var(--theme-surface), var(--theme-surface-deep)) !important;
}

.ui-field-surface:focus,
.ui-input:focus {
  outline: none !important;
  border-color: var(--theme-border-strong) !important;
  box-shadow: 0 0 0 2px rgb(var(--theme-accent-rgb) / 0.10) !important;
}

.ui-input {
  color: var(--theme-text-strong) !important;
  border: 1px solid var(--theme-border) !important;
  background: rgb(var(--theme-surface-rgb) / 0.72) !important;
}

.ui-input-error {
  border-color: rgba(239, 68, 68, 0.42) !important;
  background: rgba(239, 68, 68, 0.10) !important;
}

.ui-accent-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, var(--theme-accent-wash), var(--theme-accent-wash-2)) !important;
}

.ui-modal-backdrop {
  background: var(--theme-overlay) !important;
  backdrop-filter: blur(12px);
}

.ui-tooltip {
  background: var(--theme-tooltip) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: 0 8px 24px rgb(9 3 18 / 0.45) !important;
}

.ui-thumbnail-base {
  background: var(--theme-surface) !important;
}

.ui-thumb-overlay {
  background: rgb(9 3 18 / 0.35) !important;
  color: var(--theme-text-faint) !important;
}

.ui-btn-danger,
.bg-theme-danger {
  background: var(--theme-danger-bg) !important;
  color: #fff !important;
}

.text-theme { color: var(--theme-text) !important; }
.text-theme-strong { color: var(--theme-text-strong) !important; }
.text-theme-muted { color: var(--theme-text-muted) !important; }
.text-theme-faint { color: var(--theme-text-faint) !important; }
.text-theme-accent { color: var(--theme-accent) !important; }
.text-theme-accent-soft { color: var(--theme-accent-soft) !important; }
.text-theme-accent-muted { color: var(--theme-accent-muted) !important; }
.text-theme-accent-faint { color: var(--theme-accent-faint) !important; }
.fill-theme-accent { fill: var(--theme-accent) !important; }
.bg-theme-bg { background-color: var(--theme-bg) !important; }
.bg-theme-bg-40 { background-color: rgb(var(--theme-bg-rgb) / 0.40) !important; }
.bg-theme-bg-90 { background-color: rgb(var(--theme-bg-rgb) / 0.90) !important; }
.bg-theme-bg-95 { background-color: rgb(var(--theme-bg-rgb) / 0.95) !important; }
.bg-theme-surface { background-color: var(--theme-surface) !important; }
.bg-theme-surface-2 { background-color: var(--theme-surface-2) !important; }
.bg-theme-tooltip { background-color: var(--theme-tooltip) !important; }
.bg-theme-accent { background-color: var(--theme-accent) !important; }
.bg-theme-accent-soft { background-color: rgb(var(--theme-accent-rgb) / 0.12) !important; }
.border-theme { border-color: var(--theme-border) !important; }
.border-theme-soft { border-color: var(--theme-border-soft) !important; }
.border-theme-strong { border-color: var(--theme-border-strong) !important; }
.border-theme-accent { border-color: var(--theme-accent) !important; }
.border-theme-accent-faint { border-color: rgb(var(--theme-accent-rgb) / 0.15) !important; }
.border-theme-accent-soft { border-color: var(--theme-accent-border-soft) !important; }
.border-theme-accent-medium { border-color: rgb(var(--theme-accent-rgb) / 0.38) !important; }
.border-t-theme-accent { border-top-color: var(--theme-accent) !important; }
.ring-theme-accent { --tw-ring-color: rgb(var(--theme-accent-rgb) / 0.80) !important; }
.ring-offset-theme-bg { --tw-ring-offset-color: var(--theme-bg) !important; }
.decoration-theme-accent { text-decoration-color: var(--theme-accent) !important; }

.hover\:bg-theme-accent-hover:hover {
  background-color: color-mix(in oklab,var(--color-accent) 90%,transparent) !important;
}

.hover\:bg-theme-accent:hover { background-color: var(--theme-accent) !important; }
.hover\:bg-theme-accent-soft:hover { background-color: rgb(var(--theme-accent-rgb) / 0.16) !important; }
.hover\:text-theme-accent:hover { color: var(--theme-accent) !important; }
.hover\:text-theme-accent-soft:hover { color: var(--theme-accent-soft) !important; }
.hover\:border-theme-accent-soft:hover { border-color: var(--theme-accent-border-soft) !important; }
.hover\:border-theme-accent-medium:hover { border-color: rgb(var(--theme-accent-rgb) / 0.34) !important; }
.hover\:decoration-theme-accent:hover { text-decoration-color: var(--theme-accent) !important; }
.group:hover .group-hover\:text-theme-accent { color: var(--theme-accent) !important; }
.group:hover .group-hover\:text-theme-accent-soft { color: var(--theme-accent-soft) !important; }
.group:hover .group-hover\:bg-theme-accent-soft { background-color: rgb(var(--theme-accent-rgb) / 0.16) !important; }
.peer:checked ~ .peer-checked\:border-theme-accent-medium { border-color: rgb(var(--theme-accent-rgb) / 0.40) !important; }
.peer:checked ~ .peer-checked\:bg-theme-accent-soft { background-color: rgb(var(--theme-accent-rgb) / 0.20) !important; }
.peer:checked ~ .peer-checked\:after\:bg-theme-accent-muted::after { background-color: var(--theme-accent-muted) !important; }

.theme-arctic .pretty-scrollbar {
  scrollbar-color: rgb(var(--theme-accent-rgb) / 0.55) rgba(255, 255, 255, 0.06);
}

.theme-arctic .pretty-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--theme-accent-rgb) / 0.55);
  border-color: rgb(var(--theme-bg-rgb) / 0.90);
}

.theme-arctic .pretty-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--theme-accent-rgb) / 0.75);
}

.text-theme-accent-gradient {
  color: transparent !important;
  background: linear-gradient(to right, var(--theme-accent-soft), var(--theme-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.bg-theme-vote-down {
  background-color: #ef4444 !important;
}

.text-theme-vote-down { color: #f87171 !important; }
.hover\:text-theme-vote-down:hover { color: #f87171 !important; }

.peer:checked ~ .peer-checked\:bg-theme-accent-strong {
  background-color: rgb(var(--theme-accent-rgb) / 0.60) !important;
}

.bg-theme-accent-10 { background-color: rgb(var(--theme-accent-rgb) / 0.10) !important; }
.bg-theme-accent-12 { background-color: rgb(var(--theme-accent-rgb) / 0.12) !important; }
.bg-theme-accent-15 { background-color: rgb(var(--theme-accent-rgb) / 0.15) !important; }
.bg-theme-accent-18 { background-color: rgb(var(--theme-accent-rgb) / 0.18) !important; }
.bg-theme-accent-20 { background-color: rgb(var(--theme-accent-rgb) / 0.20) !important; }
.bg-theme-accent-gradient { background: linear-gradient(to right, var(--theme-accent), var(--theme-accent-soft)) !important; }
.bg-theme-surface-3 { background-color: var(--theme-surface-3) !important; }
.border-theme-danger { border-color: rgba(239, 68, 68, 0.48) !important; }
.bg-theme-danger-soft { background-color: var(--theme-danger-soft) !important; }
.focus\:ring-theme-accent:focus { --tw-ring-color: rgb(var(--theme-accent-rgb) / 0.40) !important; }
.hover\:bg-theme-accent-15:hover { background-color: rgb(var(--theme-accent-rgb) / 0.15) !important; }

.ui-accent-hover-sheen {
  background: linear-gradient(to right, rgb(var(--theme-accent-rgb) / 0.18), transparent, rgb(167 139 250 / 0.10)) !important;
}

.group:hover .group-hover-surface-accent,
.is-selected-surface-right {
  background: linear-gradient(to left, var(--theme-surface-3), var(--theme-surface-2)) !important;
  color: var(--theme-text) !important;
}

.is-selected-surface {
  background: linear-gradient(to bottom, var(--theme-surface-3), var(--theme-surface-2)) !important;
}

.focus\:border-theme-accent:focus,
.focus-within\:border-theme-accent:focus-within {
  border-color: var(--theme-accent) !important;
}

.hover\:text-theme:hover { color: var(--theme-text) !important; }
.hover\:text-theme-accent-muted:hover { color: var(--theme-accent-muted) !important; }
.group:hover .group-hover\:text-theme-accent-muted { color: var(--theme-accent-muted) !important; }
.group:hover .group-hover\:border-theme { border-color: var(--theme-border) !important; }

.ui-btn-primary {
  border: 1px solid var(--theme-accent-border) !important;
}