:root {
  color-scheme: light;
  --theme-control-bg: oklch(99.4% 0.004 248);
  --theme-control-ink: oklch(35% 0.02 252);
  --theme-control-line: oklch(84% 0.015 248);
  --theme-control-thumb: oklch(99.7% 0.003 248);
  --theme-control-shadow: 0 1px 2px oklch(18% 0.02 250 / 0.13), 0 2px 7px oklch(18% 0.02 250 / 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: oklch(16.5% 0.014 252);
  --surface: oklch(20.5% 0.016 252);
  --surface-muted: oklch(24.5% 0.017 252);
  --ink: oklch(92% 0.01 248);
  --ink-soft: oklch(78% 0.014 248);
  --muted: oklch(66% 0.014 248);
  --line: oklch(31% 0.018 250);
  --line-strong: oklch(42% 0.023 250);
  --accent: oklch(72% 0.07 247);
  --accent-strong: oklch(82% 0.055 247);
  --accent-soft: oklch(29% 0.035 248);
  --success: oklch(75% 0.105 158);
  --success-soft: oklch(28% 0.045 158);
  --warning: oklch(78% 0.105 78);
  --warning-soft: oklch(29% 0.042 78);
  --danger: oklch(72% 0.12 25);
  --danger-strong: oklch(78% 0.105 25);
  --danger-soft: oklch(29% 0.05 25);
  --shadow: 0 18px 52px oklch(4% 0.015 252 / 0.28);
  --theme-control-bg: oklch(22.5% 0.017 252);
  --theme-control-ink: oklch(82% 0.012 248);
  --theme-control-line: oklch(39% 0.02 250);
  --theme-control-thumb: oklch(31% 0.019 250);
  --theme-control-shadow: 0 0 0 1px oklch(96% 0.006 248 / 0.1), 0 2px 8px oklch(4% 0.015 252 / 0.22);
}

.ui-preferences {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex: none;
}

.ui-preferences .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preference-slider {
  --preference-option-size: 40px;
  position: relative;
  isolation: isolate;
  display: grid;
  flex: none;
  gap: 0;
  padding: 3px;
  border-radius: 11px;
  background-color: var(--theme-control-bg);
  box-shadow: 0 0 0 1px var(--theme-control-line);
  color: var(--theme-control-ink);
  font: 720 10px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preference-locale-slider {
  grid-template-columns: repeat(2, var(--preference-option-size));
}

.preference-theme-slider {
  grid-template-columns: repeat(3, var(--preference-option-size));
}

.preference-theme-slider[data-value="light"] {
  background-color: oklch(91% 0.055 89);
}

.preference-theme-slider[data-value="system"] {
  background-color: oklch(69% 0.045 262);
}

.preference-theme-slider[data-value="dark"] {
  background-color: oklch(29% 0.035 258);
}

.preference-slider-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: var(--preference-option-size);
  height: var(--preference-option-size);
  border-radius: 8px;
  background: var(--theme-control-thumb);
  box-shadow: var(--theme-control-shadow);
  pointer-events: none;
  transform: translateX(0);
}

.preference-locale-slider[data-value="pt-BR"] .preference-slider-thumb {
  transform: translateX(var(--preference-option-size));
}

.preference-theme-slider[data-value="system"] .preference-slider-thumb {
  transform: translateX(var(--preference-option-size));
}

.preference-theme-slider[data-value="dark"] .preference-slider-thumb {
  transform: translateX(calc(var(--preference-option-size) * 2));
}

.ui-preferences.is-ready .preference-slider,
.ui-preferences.is-ready .preference-slider-thumb {
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.ui-preferences.is-ready .preference-slider {
  transition-property: background-color, box-shadow;
}

.ui-preferences.is-ready .preference-slider-thumb {
  transition-property: transform, background-color, box-shadow;
}

.preference-slider button {
  position: relative;
  z-index: 1;
  width: var(--preference-option-size);
  height: var(--preference-option-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: .66;
  transform: scale(.92);
  transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1), color 180ms cubic-bezier(.22, 1, .36, 1);
}

.preference-slider button:hover {
  opacity: .88;
}

.preference-slider button[aria-checked="true"] {
  color: var(--theme-control-ink);
  opacity: 1;
  transform: scale(1);
}

.preference-slider button:active {
  transform: scale(.96);
}

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

.preference-theme-slider[data-value="dark"] button:not([aria-checked="true"]) {
  color: oklch(86% 0.012 248);
}

.preference-theme-icon {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.preference-sun {
  transform: rotate(-18deg);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

button[aria-checked="true"] .preference-sun {
  transform: rotate(0);
}

.preference-moon {
  fill: currentColor;
  stroke-width: 1.35;
  transform: translateX(-1px) rotate(8deg);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

button[aria-checked="true"] .preference-moon {
  transform: translateX(-1px) rotate(0);
}

.preference-auto {
  font-size: 9px;
  letter-spacing: -.02em;
}

.booking-header-actions,
.account-header-actions,
.operations-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.sidebar-bottom > .ui-preferences {
  width: 100%;
  justify-content: space-between;
  padding: 0 6px 8px;
}

.mobile-nav > .ui-preferences {
  justify-content: flex-start;
  padding: 7px 10px 10px;
}

:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .footer-logo {
  filter: grayscale(1) brightness(0) invert(0.92);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  caret-color: var(--accent-strong);
}

:root[data-theme="dark"] .mobile-bar {
  background: oklch(20.5% 0.016 252 / 0.94);
}

:root[data-theme="dark"] .pix-panel,
:root[data-theme="dark"] .pix-confirmation-status.is-success {
  border-color: oklch(42% 0.045 158);
  background: oklch(22% 0.025 158);
}

:root[data-theme="dark"] .reauth-note,
:root[data-theme="dark"] .billing-notice.is-warning,
:root[data-theme="dark"] .plan-change-heading > span,
:root[data-theme="dark"] .pix-confirmation-status.is-pending,
:root[data-theme="dark"] .transfer-option {
  border-color: oklch(44% 0.04 78);
  background: var(--warning-soft);
}

:root[data-theme="dark"] .reauth-icon,
:root[data-theme="dark"] .status-pill.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

:root[data-theme="dark"] .delete-panel {
  border-color: oklch(40% 0.04 25);
  background: oklch(20% 0.018 25);
}

:root[data-theme="dark"] .txid-box,
:root[data-theme="dark"] .paid-state,
:root[data-theme="dark"] .support-priority li.support-clear {
  border-color: oklch(42% 0.045 158);
}

:root[data-theme="dark"] .txid-box {
  background: oklch(22% 0.025 158);
}

@media (max-width: 620px) {
  .ui-preferences {
    gap: 4px;
  }

  .booking-header-actions,
  .account-header-actions,
  .operations-header-actions {
    gap: 8px;
  }

  .account-header-actions .back-link,
  .operations-header-actions .environment-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}