html,
body {
  background: transparent;
  overflow-x: hidden;
}

.wf-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: #09090d;
}

.wf-background canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
}

.wf-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5, 6, 10, 0.17), transparent 24%, transparent 72%, rgba(5, 6, 10, 0.43)),
    radial-gradient(ellipse 92% 82% at 50% 44%, transparent 49%, rgba(3, 4, 8, 0.27) 100%);
}

.card,
#input-text,
#output-text,
.style-btn,
.style-card,
.pro-settings-body,
.model-settings-section,
.param-model-select {
  transition:
    background-color 0.72s ease,
    border-color 0.72s ease,
    box-shadow 0.72s ease,
    color 0.35s ease;
}

:root[data-background-mode="basic"] .card {
  background: rgba(17, 17, 24, 0.92);
}

:root[data-background-mode="basic"] #input-text,
:root[data-background-mode="basic"] #output-text {
  background: rgba(26, 26, 34, 0.88);
}

:root[data-background-mode="pro"] .card {
  background: rgba(10, 14, 25, 0.76);
  border-color: rgba(89, 204, 223, 0.21);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 50px rgba(50, 155, 190, 0.035);
}

:root[data-background-mode="pro"] #input-text,
:root[data-background-mode="pro"] #output-text {
  background: rgba(15, 20, 34, 0.7);
  border-color: rgba(103, 219, 235, 0.15);
}

:root[data-background-mode="pro"] .style-card:not(.active),
:root[data-background-mode="pro"] .pro-settings-body,
:root[data-background-mode="pro"] .model-settings-section,
:root[data-background-mode="pro"] .param-model-select {
  background: rgba(18, 24, 40, 0.78);
}

:root[data-background-mode="worldview"] .card {
  background: rgba(12, 10, 27, 0.74);
  border-color: rgba(167, 139, 250, 0.23);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), 0 0 54px rgba(112, 87, 211, 0.05);
}

:root[data-background-mode="worldview"] #output-text {
  background: rgba(17, 14, 34, 0.68);
  border-color: rgba(167, 139, 250, 0.16);
}

:root[data-background-mode="worldview"] .style-card:not(.active),
:root[data-background-mode="worldview"] .pro-settings-body,
:root[data-background-mode="worldview"] .model-settings-section,
:root[data-background-mode="worldview"] .param-model-select {
  background: rgba(22, 18, 42, 0.76);
}

@media (max-width: 640px) {
  :root[data-background-mode="basic"] .card {
    background: rgba(17, 17, 24, 0.95);
  }

  :root[data-background-mode="basic"] #input-text,
  :root[data-background-mode="basic"] #output-text {
    background: rgba(26, 26, 34, 0.92);
  }

  :root[data-background-mode="pro"] .card {
    background: rgba(10, 14, 25, 0.86);
  }

  :root[data-background-mode="pro"] #input-text,
  :root[data-background-mode="pro"] #output-text {
    background: rgba(15, 20, 34, 0.83);
  }

  :root[data-background-mode="worldview"] .card {
    background: rgba(12, 10, 27, 0.84);
  }

  :root[data-background-mode="worldview"] #output-text {
    background: rgba(17, 14, 34, 0.81);
  }
}