.liquid-theme-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #1a1a1d;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.interface-container {
  width: 333px;
  padding: 25px;
  border-radius: 35px;
  background: linear-gradient(135deg, #222226, #151517);
  box-shadow:
    inset 8px 8px 15px #111113,
    inset -8px -8px 15px #27272b;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.interface-header {
  padding: 5px 5px 25px 5px;
}

.interface-title {
  font-size: 24px;
  font-weight: 600;
  color: #7f8188;
  text-shadow: 0px 1px 2px #000;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.option-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  background: transparent;
}

.option-label {
  font-size: 16px;
  font-weight: 500;
  color: #7f8188;
}

.liquid-toggle-input {
  display: none;
}

.liquid-toggle-label {
  display: flex;
  align-items: center;
  position: relative;
  width: 58px;
  height: 30px;
  cursor: pointer;
}

.toggle-well {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1d;
  border-radius: 15px;
  box-shadow:
    inset 2px 2px 4px #000000,
    inset -2px -2px 4px #343438;
  transition:
    background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s ease;
}

.toggle-orb {
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  background: linear-gradient(145deg, #38383c, #131315);
  border-radius: 50%;
  box-shadow:
    1px 1px 3px #000,
    -1px -1px 3px #343438;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.liquid-toggle-input:checked + .liquid-toggle-label .toggle-well {
  background-color: #8a2be2;
  box-shadow:
    0 0 10px #8a2be2,
    0 0 20px #8a2be2,
    inset 1px 1px 2px #be8df0;
}

.liquid-toggle-input:checked + .liquid-toggle-label .toggle-orb {
  transform: translateX(28px);
  background: #f0f0f0;
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 15px #8a2be2;
}