/* ==========================================================================
   LUMEN · glass material system
   Layered translucency: tint, backdrop blur/saturation, rim light, ground
   shadow. Bigger surfaces read as thicker material (stronger blur, darker
   body). Text never sits directly on a busy backdrop without a local tint.
   ========================================================================== */

.glass {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-tint-2), var(--glass-tint) 46%, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  corner-shape: squircle;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07);
  isolation: isolate;
}

/* the specular streak across the top edge of every pane */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.62) 22%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.62) 78%,
    transparent
  );
  opacity: 0.85;
  pointer-events: none;
  border-radius: inherit;
}

.glass--thick {
  background: linear-gradient(180deg, var(--sheet-bg-2), var(--sheet-bg));
  -webkit-backdrop-filter: blur(var(--sheet-blur)) saturate(150%) brightness(0.92);
  backdrop-filter: blur(var(--sheet-blur)) saturate(150%) brightness(0.92);
  border-color: rgba(255, 255, 255, 0.13);
}

.glass--flat {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* chrome bars: a touch more body than a floating pane, so the blur reads as a
   thick slab of glass instead of a bright wash over the wallpaper */
.topbar__inner.glass,
.filterbar.glass {
  background: linear-gradient(180deg, rgba(30, 33, 44, 0.46), rgba(13, 14, 21, 0.42));
  -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(0.95);
  backdrop-filter: blur(30px) saturate(175%) brightness(0.95);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
html[data-surface="light"] .topbar__inner.glass,
html[data-surface="light"] .filterbar.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(246, 247, 252, 0.5));
}

.glass--radius-sm {
  border-radius: var(--r-md);
}
.glass--radius-md {
  border-radius: var(--r-lg);
}
.glass--radius-pill {
  border-radius: var(--r-pill);
}

/* local text backing: a slightly darker pane so type stays legible on any
   wallpaper (the “玻璃上的字体都有点底色” rule) */
.textbed {
  background: rgba(10, 10, 14, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   buttons — liquid glass, ported from the glass-button reference
   Two animated highlight layers on top of a blurred body:
     ::before  a conic rim that sweeps its angle on hover / press
     ::after   a specular band that slides across, screen-blended
   @property makes the rim angle interpolate; browsers without it still get
   the rim, just without the sweep.
   ========================================================================== */
@property --rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --sheen-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.btn {
  --btn-h: 40px;
  --rim: 1.2px;
  --rim-angle: -75deg;
  --sheen-angle: -45deg;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  corner-shape: squircle;
  font-size: var(--fs-sm);
  font-weight: 560;
  letter-spacing: 0.005em;
  color: var(--text-1);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.05)
  );
  -webkit-backdrop-filter: blur(3px) saturate(180%);
  backdrop-filter: blur(3px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    0 4px 2px -2px rgba(0, 0, 0, 0.32),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.26);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out),
    --rim-angle 420ms var(--ease-out);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* conic rim, masked down to a 1.2px ring */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--rim);
  border-radius: inherit;
  corner-shape: inherit;
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(255, 255, 255, 0.62) 0%,
    transparent 6% 41%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 59% 94%,
    rgba(255, 255, 255, 0.62) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* sliding specular band */
.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(
    var(--sheen-angle),
    transparent 0%,
    rgba(255, 255, 255, 0.42) 40% 50%,
    transparent 56%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    background-position 520ms var(--ease-out),
    --sheen-angle 520ms var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    -webkit-backdrop-filter: blur(1px) saturate(190%);
    backdrop-filter: blur(1px) saturate(190%);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(255, 255, 255, 0.08),
      0 3px 1px -1.6px rgba(0, 0, 0, 0.36),
      inset 0 0 1px 0.5px rgba(255, 255, 255, 0.34);
    --rim-angle: -125deg;
  }
  .btn:hover::after {
    background-position: 25% 25%;
  }
}

.btn:active {
  transform: translateY(1px) scale(0.972);
  --rim-angle: -75deg;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.26),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 1px 1px -1px rgba(0, 0, 0, 0.3),
    inset 0 0 2px 0 rgba(255, 255, 255, 0.2);
}
.btn:active::after {
  --sheen-angle: -15deg;
  background-position: 50% 15%;
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    0 0 0 2px hsl(var(--accent-h) 100% 66% / 0.75),
    0 8px 22px -12px rgba(0, 0, 0, 0.7);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* accent-tinted glass: keeps the rim and sheen, only the body warms up */
.btn--primary {
  color: #fff;
  background: linear-gradient(
    100deg,
    hsl(var(--accent-h) 92% 58% / 0.72),
    hsl(var(--accent-h) 100% 74% / 0.9) 50%,
    hsl(var(--accent-h) 92% 56% / 0.74)
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2),
    0 6px 16px -8px var(--accent-glow),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn--primary::before {
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(255, 255, 255, 0.9) 0%,
    transparent 6% 41%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 59% 94%,
    rgba(255, 255, 255, 0.9) 100%
  );
}
@media (hover: hover) {
  .btn--primary:hover {
    background: linear-gradient(
      100deg,
      hsl(var(--accent-h) 94% 62% / 0.8),
      hsl(var(--accent-h) 100% 78% / 0.96) 50%,
      hsl(var(--accent-h) 94% 60% / 0.82)
    );
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.6),
      inset 0 -1px 1px rgba(0, 0, 0, 0.18),
      0 10px 24px -10px var(--accent-glow),
      inset 0 0 1px 0.5px rgba(255, 255, 255, 0.65);
  }
}

.btn--quiet {
  --rim: 0px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text-2);
}
.btn--quiet::before {
  opacity: 0;
}
.btn--quiet::after {
  opacity: 0;
}
@media (hover: hover) {
  .btn--quiet:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --rim-angle: -75deg;
  }
  .btn--quiet:hover::before {
    opacity: 0;
  }
}

.btn--danger {
  color: #ffb3b0;
  background: linear-gradient(
    100deg,
    rgba(255, 69, 58, 0.2),
    rgba(255, 96, 84, 0.34) 50%,
    rgba(255, 69, 58, 0.2)
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2),
    0 6px 16px -10px rgba(255, 40, 30, 0.55);
}
@media (hover: hover) {
  .btn--danger:hover {
    background: linear-gradient(
      100deg,
      rgba(255, 69, 58, 0.28),
      rgba(255, 96, 84, 0.44) 50%,
      rgba(255, 69, 58, 0.28)
    );
    color: #ffc9c6;
  }
}
html[data-surface="light"] .btn {
  color: rgba(14, 14, 18, 0.92);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.62) 46%,
    rgba(255, 255, 255, 0.3)
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(20, 20, 40, 0.12),
    0 4px 2px -2px rgba(20, 20, 40, 0.2),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.9);
}
html[data-surface="light"] .btn::before {
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(20, 20, 40, 0.28) 0%,
    transparent 6% 41%,
    rgba(20, 20, 40, 0.22) 50%,
    transparent 59% 94%,
    rgba(20, 20, 40, 0.28) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
html[data-surface="light"] .btn--primary {
  color: #fff;
  background: linear-gradient(
    100deg,
    hsl(var(--accent-h) 92% 55% / 0.86),
    hsl(var(--accent-h) 100% 66% / 0.96) 50%,
    hsl(var(--accent-h) 92% 55% / 0.86)
  );
}
html[data-surface="light"] .btn--quiet {
  background: transparent;
  box-shadow: none;
  color: rgba(24, 24, 30, 0.62);
}

.btn--sm {
  --btn-h: 32px;
  padding: 0 12px;
  font-size: var(--fs-xs);
  gap: 6px;
}
.btn--lg {
  --btn-h: 46px;
  padding: 0 22px;
  font-size: var(--fs-body);
}
.btn--block {
  width: 100%;
}
.btn--icon {
  width: var(--btn-h);
  padding: 0;
}

/* ==========================================================================
   icon buttons — same liquid-glass rim + sheen, circular
   ========================================================================== */
.icon-btn {
  --rim-angle: -75deg;
  --sheen-angle: -45deg;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.15) 46%,
    rgba(255, 255, 255, 0.05)
  );
  -webkit-backdrop-filter: blur(3px) saturate(180%);
  backdrop-filter: blur(3px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    0 3px 2px -1.6px rgba(0, 0, 0, 0.3),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.24);
  overflow: hidden;
  transition:
    transform var(--dur-2) var(--ease-out),
    color var(--dur-2),
    box-shadow var(--dur-2) var(--ease-out),
    --rim-angle 420ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(255, 255, 255, 0.62) 0%,
    transparent 6% 41%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 59% 94%,
    rgba(255, 255, 255, 0.62) 100%
  );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.icon-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--sheen-angle),
    transparent 0%,
    rgba(255, 255, 255, 0.4) 40% 50%,
    transparent 56%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    background-position 520ms var(--ease-out),
    --sheen-angle 520ms var(--ease-out);
}
.icon-btn > * {
  position: relative;
  z-index: 3;
}
@media (hover: hover) {
  .icon-btn:hover {
    color: var(--text-1);
    --rim-angle: -125deg;
  }
  .icon-btn:hover::after {
    background-position: 25% 25%;
  }
}
.icon-btn:active {
  transform: translateY(1px) scale(0.94);
  --rim-angle: -75deg;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.26),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1);
}
.icon-btn--lg {
  width: 42px;
  height: 42px;
}
html[data-surface="light"] .icon-btn {
  color: rgba(24, 24, 30, 0.66);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.62) 46%,
    rgba(255, 255, 255, 0.3)
  );
}
html[data-surface="light"] .icon-btn::before {
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(20, 20, 40, 0.26) 0%,
    transparent 6% 41%,
    rgba(20, 20, 40, 0.2) 50%,
    transparent 59% 94%,
    rgba(20, 20, 40, 0.26) 100%
  );
}

/* ==========================================================================
   chips / badges / pills
   ========================================================================== */
.chip {
  --rim-angle: -75deg;
  --sheen-angle: -45deg;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 540;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.13) 46%,
    rgba(255, 255, 255, 0.04)
  );
  -webkit-backdrop-filter: blur(3px) saturate(180%);
  backdrop-filter: blur(3px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 3px 2px -1.6px rgba(0, 0, 0, 0.26),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.2);
  transition:
    color var(--dur-2),
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-out),
    --rim-angle 420ms var(--ease-out);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 6% 41%,
    rgba(255, 255, 255, 0.44) 50%,
    transparent 59% 94%,
    rgba(255, 255, 255, 0.5) 100%
  );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.chip::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--sheen-angle),
    transparent 0%,
    rgba(255, 255, 255, 0.3) 40% 50%,
    transparent 56%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    background-position 520ms var(--ease-out),
    --sheen-angle 520ms var(--ease-out);
}
.chip > * {
  position: relative;
  z-index: 3;
}
@media (hover: hover) {
  .chip:hover {
    color: var(--text-1);
    --rim-angle: -125deg;
  }
  .chip:hover::after {
    background-position: 25% 25%;
  }
}
.chip:active {
  transform: translateY(1px) scale(0.96);
  --rim-angle: -75deg;
}
.chip[aria-pressed="true"],
.chip.is-active {
  color: #fff;
  background: linear-gradient(
    100deg,
    hsl(var(--accent-h) 96% 50% / 0.6),
    hsl(var(--accent-h) 100% 72% / 0.82) 50%,
    hsl(var(--accent-h) 96% 52% / 0.62)
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.44),
    inset 0 -1px 1px rgba(0, 0, 0, 0.16),
    0 6px 16px -9px var(--accent-glow),
    inset 0 0 1.5px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.chip[aria-pressed="true"]::before,
.chip.is-active::before {
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(255, 255, 255, 0.92) 0%,
    transparent 6% 41%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 59% 94%,
    rgba(255, 255, 255, 0.92) 100%
  );
}
html[data-surface="light"] .chip {
  color: rgba(24, 24, 30, 0.62);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.58) 46%,
    rgba(255, 255, 255, 0.28)
  );
}
html[data-surface="light"] .chip::before {
  background: conic-gradient(
    from var(--rim-angle) at 50% 50%,
    rgba(20, 20, 40, 0.24) 0%,
    transparent 6% 41%,
    rgba(20, 20, 40, 0.18) 50%,
    transparent 59% 94%,
    rgba(20, 20, 40, 0.24) 100%
  );
}
.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.chip--add {
  border-style: dashed;
  color: var(--text-3);
}
.chip__x {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  margin-right: -2px;
}
.chip__x .icon {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(8, 8, 12, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.badge--accent {
  color: hsl(var(--accent-h) 100% 84%);
  border-color: hsl(var(--accent-h) 100% 74% / 0.32);
  background: hsl(var(--accent-h) 90% 40% / 0.36);
}
.badge--video {
  color: #ffd8a8;
  border-color: rgba(255, 190, 120, 0.3);
  background: rgba(255, 150, 60, 0.26);
}
.badge--muted {
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.07);
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   inputs
   ========================================================================== */
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.field:focus-within {
  border-color: hsl(var(--accent-h) 100% 70% / 0.6);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 3px hsl(var(--accent-h) 100% 62% / 0.18);
}
.field__icon {
  color: var(--text-3);
  flex: none;
}
.field input,
.field textarea {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--text-1);
}
.field input::placeholder {
  color: var(--text-4);
}
.field--sm {
  height: 36px;
  border-radius: var(--r-sm);
  padding: 0 11px;
}
.field--lg {
  height: 50px;
  border-radius: var(--r-lg);
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 580;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* switch -------------------------------------------------------------- */
.switch {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-3) var(--ease-out),
    border-color var(--dur-3) var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #d8d8e0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  transition: transform var(--dur-3) var(--ease-spring);
}
.switch[aria-checked="true"] {
  background: linear-gradient(
    180deg,
    hsl(var(--accent-h) 100% 68% / 0.95),
    hsl(var(--accent-h) 96% 52% / 0.9)
  );
  border-color: hsl(var(--accent-h) 100% 80% / 0.5);
}
.switch[aria-checked="true"]::after {
  transform: translateX(18px);
}

/* range --------------------------------------------------------------- */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    hsl(var(--accent-h) 100% 66% / 0.9) var(--fill, 50%),
    rgba(255, 255, 255, 0.13) var(--fill, 50%)
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #dcdce6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.range::-moz-range-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.13);
}
.range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   segmented switcher  (smooth-option-switcher adaptation)
   Native radios drive a single travelling glass thumb; pure CSS transitions.
   ========================================================================== */
.seg {
  --seg-pad: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--seg-pad);
  border-radius: var(--r-pill);
  corner-shape: squircle;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  gap: 0;
}
.seg__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.seg__thumb {
  position: absolute;
  top: var(--seg-pad);
  left: var(--seg-pad);
  width: calc((100% - var(--seg-pad) * 2) / var(--seg-count, 3));
  height: calc(100% - var(--seg-pad) * 2);
  border-radius: var(--r-pill);
  corner-shape: squircle;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.44) 0%,
    rgba(255, 255, 255, 0.22) 46%,
    rgba(255, 255, 255, 0.12) 100%
  );
  -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 7px 18px -8px rgba(0, 0, 0, 0.72),
    0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur-4) var(--ease-switch);
  pointer-events: none;
  overflow: hidden;
}
/* specular cap on the travelling thumb */
.seg__thumb::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0.9;
}
.seg label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 560;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-3) var(--ease-out), text-shadow var(--dur-3);
  white-space: nowrap;
}
.seg label .icon {
  width: 15px;
  height: 15px;
  opacity: 0.8;
  transition: opacity var(--dur-3);
}
.seg label:hover {
  color: var(--text-2);
}

/* thumb travel + label states, chained off the radio order */
.seg__input:nth-of-type(2):checked ~ .seg__thumb {
  transform: translateX(100%);
}
.seg__input:nth-of-type(3):checked ~ .seg__thumb {
  transform: translateX(200%);
}
.seg__input:nth-of-type(4):checked ~ .seg__thumb {
  transform: translateX(300%);
}
.seg__input:nth-of-type(5):checked ~ .seg__thumb {
  transform: translateX(400%);
}
.seg__input:checked ~ label {
  color: var(--text-1);
}
.seg__input:checked + label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.seg__input:nth-of-type(1):checked ~ label:nth-of-type(1),
.seg__input:nth-of-type(2):checked ~ label:nth-of-type(2),
.seg__input:nth-of-type(3):checked ~ label:nth-of-type(3),
.seg__input:nth-of-type(4):checked ~ label:nth-of-type(4),
.seg__input:nth-of-type(5):checked ~ label:nth-of-type(5) {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.seg__input:checked ~ label .icon {
  opacity: 1;
}
.seg__input:focus-visible ~ .seg__thumb {
  outline: 2px solid hsl(var(--accent-h) 100% 70% / 0.9);
  outline-offset: 2px;
}
.seg--sm label {
  height: 28px;
  min-width: 62px;
  font-size: var(--fs-xs);
  padding: 0 12px;
}
.seg--sm .seg__thumb {
  height: calc(100% - var(--seg-pad) * 2);
}

/* ==========================================================================
   popover
   ========================================================================== */
.popover {
  position: fixed;
  z-index: var(--z-modal);
  min-width: 200px;
  padding: 10px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(30, 30, 36, 0.92), rgba(18, 18, 24, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: pop-in var(--dur-3) var(--ease-spring);
  transform-origin: top center;
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.popover__title {
  padding: 4px 10px 8px;
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-4);
}
.popover__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: left;
  transition: background var(--dur-1), color var(--dur-1);
}
.popover__item:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-1);
}
.popover__item[aria-selected="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.popover__item .icon {
  width: 15px;
  height: 15px;
  color: var(--text-3);
}
.popover__item .check {
  margin-left: auto;
  color: hsl(var(--accent-h) 100% 72%);
  opacity: 0;
}
.popover__item[aria-selected="true"] .check {
  opacity: 1;
}
.popover__sep {
  height: 1px;
  margin: 8px 6px;
  background: rgba(255, 255, 255, 0.09);
}

/* ==========================================================================
   tooltip-lite (title attribute substitute for critical controls)
   ========================================================================== */
[data-tip] {
  position: relative;
}
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 520;
  white-space: nowrap;
  color: var(--text-1);
  background: rgba(14, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 500;
  animation: fade-in var(--dur-2) var(--ease-out) 260ms both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}