/* ============================================================
   ДИЗАЙН-СИСТЕМА LIQUID GLASS — ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
   ------------------------------------------------------------
   Внутри: пилюля-метка .ls-brand-pill, кнопка темы .ls-theme-btn
           с иконками, стеклянные кнопки .ls-btn-glass /
           .ls-btn-accent, призывы .ls-cta-primary / .ls-cta-ghost
           и модификатор .ls-btn-block, сегментный переключатель
           .ls-segment-*, поля ввода .ls-form-group /
           .ls-form-label / .ls-input.
   Зависит: от ds/tokens.css; призыву-призраку нужен ещё
           ds/glass.css — стекло он не собирает сам.
   Точки перелома: нет.
   ============================================================ */

.ls-brand-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--ls-r-pill);
  background: var(--ls-surface-subtle);
  border: var(--ls-border-subtle);
  color: var(--ls-text-secondary);
}

.ls-theme-btn {
  background: var(--ls-surface-subtle);
  border: var(--ls-border-subtle);
  color: var(--ls-text-primary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ls-theme-btn:hover {
  background: var(--ls-surface-active);
  border-color: var(--ls-white);
}

.ls-theme-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ls-theme-icon--moon {
  display: none;
}

[data-theme="dark"] .ls-theme-icon--sun {
  display: none;
}

[data-theme="dark"] .ls-theme-icon--moon {
  display: block;
}

/* Glass Buttons */

.ls-btn-glass {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ls-text-primary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--ls-r-pill);
  background: var(--ls-surface-subtle);
  border: var(--ls-border-subtle);
  transition: all 0.2s ease;
}

.ls-btn-glass:hover {
  background: var(--ls-surface-active);
  color: var(--ls-text-primary);
}

.ls-btn-accent {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ls-white);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: var(--ls-r-pill);
  background: var(--ls-ink);
  border: var(--ls-bevel) solid var(--ls-white-20);
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), 0 8px 20px -4px rgba(15, 23, 42, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s var(--ls-e-glass);
}

[data-theme="dark"] .ls-btn-accent {
  background: var(--ls-white);
  color: var(--ls-ink-on-white);
  border-color: var(--ls-white);
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.9), 0 8px 24px -4px rgba(255, 255, 255, 0.35);
}

.ls-btn-accent:hover {
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.5), 0 12px 28px -4px rgba(15, 23, 42, 0.35);
}

.ls-cta-primary {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ls-white);
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--ls-r-pill);
  background: var(--ls-ink-deep);
  border: var(--ls-bevel) solid var(--ls-white-18);
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s var(--ls-e-glass);
}

.ls-cta-primary:hover {
  background: var(--ls-black);
  box-shadow:
    0 12px 32px -4px rgba(0, 0, 0, 0.32),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .ls-cta-primary {
  background: var(--ls-white-94);
  color: var(--ls-ink-on-white);
  border: var(--ls-bevel) solid var(--ls-white);
  box-shadow:
    0 8px 28px -4px rgba(255, 255, 255, 0.25),
    inset 0 1px 1.5px #FFFFFF;
}

[data-theme="dark"] .ls-cta-primary:hover {
  background: var(--ls-white);
  box-shadow:
    0 12px 36px -4px rgba(255, 255, 255, 0.45);
}

.ls-cta-ghost {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ls-text-primary);
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--ls-r-pill);
  transition: all 0.2s ease;
}

.ls-cta-ghost:hover {
  background: var(--ls-surface-elevated);
}

.ls-segment-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--ls-white-08);
  backdrop-filter: var(--ls-blur);
  -webkit-backdrop-filter: var(--ls-blur);
  border: var(--ls-bevel) solid var(--ls-white-16);
  border-radius: var(--ls-r-pill);
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .ls-segment-toggle {
  background: var(--ls-white-65);
  border: var(--ls-bevel) solid var(--ls-white-85);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ls-segment-slider {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--ls-r-pill);
  background: var(--ls-white);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--ls-bevel) solid var(--ls-white);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.35);
  transition: transform 0.28s var(--ls-e-glass), width 0.28s var(--ls-e-glass);
  z-index: 1;
  pointer-events: none;
}

[data-theme="light"] .ls-segment-slider {
  background: var(--ls-white);
  border: var(--ls-bevel) solid var(--ls-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.ls-segment-btn {
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  color: var(--ls-white-72);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: var(--ls-r-pill);
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.ls-segment-btn:hover {
  color: var(--ls-white);
}

.ls-segment-btn.is-active {
  color: var(--ls-ink-on-white);
  font-weight: 750;
}

[data-theme="light"] .ls-segment-btn {
  color: var(--ls-text-secondary);
}

[data-theme="light"] .ls-segment-btn:hover {
  color: var(--ls-text-primary);
}

[data-theme="light"] .ls-segment-btn.is-active {
  color: var(--ls-ink-on-white);
}

/* Кнопка во всю ширину блока */

.ls-btn-block {
  width: 100%;
  justify-content: center;
}

.ls-form-group {
  margin-bottom: 16px;
}

.ls-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ls-text-secondary);
  margin-bottom: 6px;
}

.ls-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--ls-surface-subtle);
  border: var(--ls-border-subtle);
  border-radius: 12px;
  color: var(--ls-text-primary);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.ls-input:focus {
  border-color: var(--ls-white);
  background: var(--ls-surface-active);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.ls-btn-glass:focus-visible,
.ls-btn-accent:focus-visible,
.ls-cta-primary:focus-visible,
.ls-cta-ghost:focus-visible,
.ls-theme-btn:focus-visible {
  outline: 2px solid var(--ls-accent-primary);
  outline-offset: 2px;
}