/* —— Interface picker — premium redesign —— */

.interface-picker {
  overflow: hidden;
  background: #05060c;
}

.interface-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.interface-picker__aurora {
  position: absolute;
  inset: -20%;
}

.interface-picker__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  animation: pickerAuroraDrift 18s ease-in-out infinite;
  will-change: transform, opacity;
}

.interface-picker__aurora i:nth-child(1) {
  top: 8%;
  left: 12%;
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  background: radial-gradient(circle, rgba(88, 101, 242, 0.95) 0%, rgba(88, 101, 242, 0) 68%);
  animation-duration: 22s;
}

.interface-picker__aurora i:nth-child(2) {
  top: 42%;
  right: 6%;
  width: min(44vw, 440px);
  height: min(44vw, 440px);
  background: radial-gradient(circle, rgba(124, 92, 255, 0.88) 0%, rgba(124, 92, 255, 0) 70%);
  animation-duration: 26s;
  animation-delay: -8s;
}

.interface-picker__aurora i:nth-child(3) {
  bottom: -6%;
  left: 34%;
  width: min(38vw, 380px);
  height: min(38vw, 380px);
  background: radial-gradient(circle, rgba(42, 171, 238, 0.72) 0%, rgba(42, 171, 238, 0) 72%);
  animation-duration: 20s;
  animation-delay: -14s;
}

.interface-picker__grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(120, 150, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  animation: pickerGridPulse 8s ease-in-out infinite;
}

.interface-picker__particles {
  position: absolute;
  inset: 0;
}

.interface-picker__particles i {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(196, 220, 255, 0.85);
  box-shadow: 0 0 8px rgba(120, 180, 255, 0.55);
  animation: pickerParticleFloat 12s ease-in-out infinite;
  will-change: transform, opacity;
}

.interface-picker__particles i:nth-child(1) { top: 12%; left: 18%; animation-delay: 0s; animation-duration: 14s; }
.interface-picker__particles i:nth-child(2) { top: 24%; left: 72%; animation-delay: -2s; animation-duration: 16s; }
.interface-picker__particles i:nth-child(3) { top: 58%; left: 8%; animation-delay: -4s; animation-duration: 13s; }
.interface-picker__particles i:nth-child(4) { top: 78%; left: 64%; animation-delay: -6s; animation-duration: 18s; }
.interface-picker__particles i:nth-child(5) { top: 34%; left: 44%; animation-delay: -1s; animation-duration: 15s; width: 3px; height: 3px; }
.interface-picker__particles i:nth-child(6) { top: 66%; left: 28%; animation-delay: -3s; animation-duration: 17s; }
.interface-picker__particles i:nth-child(7) { top: 8%; left: 52%; animation-delay: -5s; animation-duration: 12s; }
.interface-picker__particles i:nth-child(8) { top: 48%; left: 86%; animation-delay: -7s; animation-duration: 19s; }
.interface-picker__particles i:nth-child(9) { top: 86%; left: 38%; animation-delay: -9s; animation-duration: 14s; }
.interface-picker__particles i:nth-child(10) { top: 18%; left: 90%; animation-delay: -11s; animation-duration: 16s; width: 3px; height: 3px; }
.interface-picker__particles i:nth-child(11) { top: 72%; left: 78%; animation-delay: -13s; animation-duration: 15s; }
.interface-picker__particles i:nth-child(12) { top: 42%; left: 6%; animation-delay: -15s; animation-duration: 18s; }

.interface-picker__glow {
  z-index: 1;
  opacity: 0.45;
  animation: pickerGlowBreathe 6s ease-in-out infinite;
}

.interface-picker__panel {
  z-index: 2;
  border: 1px solid rgba(140, 170, 255, 0.14);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 50% -20%, rgba(88, 101, 242, 0.16), transparent 42%),
    rgba(10, 12, 20, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 32px 120px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(88, 101, 242, 0.08);
  animation: pickerPanelIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.interface-picker__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(140, 170, 255, 0.35),
    rgba(124, 92, 255, 0.08) 35%,
    rgba(42, 171, 238, 0.2) 70%,
    rgba(140, 170, 255, 0.12)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0.7;
}

.interface-picker__header {
  animation: pickerHeaderIn 0.8s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.interface-picker__logo {
  background: linear-gradient(135deg, #fff 0%, #c4d4ff 55%, #8ea8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(124, 135, 255, 0.35));
}

.interface-picker__eyebrow {
  padding: 6px 14px;
  border: 1px solid rgba(140, 170, 255, 0.18);
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.1);
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.12);
}

.interface-picker__header h1 {
  background: linear-gradient(180deg, #fff 0%, #d8e2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.interface-grid {
  align-content: center;
}

.interface-card {
  --card-accent: #5865f2;
  --card-accent-soft: rgba(88, 101, 242, 0.22);
  --card-glow: rgba(88, 101, 242, 0.28);
  position: relative;
  isolation: isolate;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.035), transparent 38%),
    linear-gradient(180deg, rgba(22, 24, 36, 0.96), rgba(14, 15, 24, 0.98));
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: pickerCardIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
}

.interface-card[data-interface="standard"] {
  --card-accent: #9b84ff;
  --card-accent-soft: rgba(155, 132, 255, 0.22);
  --card-glow: rgba(155, 132, 255, 0.3);
}

.interface-card[data-interface="telegram"] {
  --card-accent: #2aabee;
  --card-accent-soft: rgba(42, 171, 238, 0.22);
  --card-glow: rgba(42, 171, 238, 0.3);
}

.interface-card[data-interface="vk"] {
  --card-accent: #2688eb;
  --card-accent-soft: rgba(38, 136, 235, 0.22);
  --card-glow: rgba(38, 136, 235, 0.3);
}

.interface-card:nth-child(1) { animation-delay: 0.14s; }
.interface-card:nth-child(2) { animation-delay: 0.22s; }
.interface-card:nth-child(3) { animation-delay: 0.3s; }
.interface-card:nth-child(4) { animation-delay: 0.38s; }

.interface-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, var(--card-accent-soft), transparent 58%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.interface-card::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 55%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.interface-card:not(:disabled):hover {
  transform: translateY(-8px) scale(1.01);
  border-color: color-mix(in srgb, var(--card-accent) 55%, white 10%);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 28%, transparent),
    0 0 36px var(--card-glow);
}

.interface-card:not(:disabled):hover::before {
  opacity: 1;
}

.interface-card:not(:disabled):hover::after {
  opacity: 1;
  animation: pickerCardShine 0.9s ease;
}

.interface-card.selected {
  border-color: color-mix(in srgb, var(--card-accent) 72%, white 8%);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(24, 26, 40, 0.98), rgba(14, 15, 24, 0.98));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--card-accent) 24%, transparent),
    0 22px 52px rgba(0, 0, 0, 0.34),
    0 0 48px var(--card-glow);
}

.interface-card.selected::before {
  opacity: 1;
}

.interface-card.is-locked {
  opacity: 0.62;
}

.interface-card__badge {
  top: 16px;
  right: 16px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 70%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--card-accent) 35%, transparent);
}

.interface-card__badge--soon {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #aeb2c2;
}

.interface-preview {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.interface-card:not(:disabled):hover .interface-preview,
.interface-card.selected .interface-preview {
  transform: scale(1.015);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 28px var(--card-glow);
}

.interface-card__body strong {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.interface-card__body small {
  color: #a2a7b8;
}

.interface-card__features i {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: #9aa0b3;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.interface-card.selected .interface-card__features i,
.interface-card:not(:disabled):hover .interface-card__features i {
  border-color: color-mix(in srgb, var(--card-accent) 28%, transparent);
  background: color-mix(in srgb, var(--card-accent) 12%, transparent);
  color: #d5dbef;
}

.interface-card__check {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.interface-card.selected .interface-card__check {
  border-color: var(--card-accent);
  background: var(--card-accent);
  box-shadow: 0 0 18px var(--card-glow);
  transform: scale(1.05);
}

.interface-picker__footer {
  animation: pickerFooterIn 0.8s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  border-top-color: rgba(140, 170, 255, 0.1);
  color: #8d93a8;
}

.interface-continue {
  position: relative;
  min-width: 196px;
  padding: 14px 24px;
  border: 1px solid rgba(140, 180, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, #5865f2 0%, #6f5cff 52%, #4f8dff 100%);
  box-shadow:
    0 10px 28px rgba(88, 101, 242, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}

.interface-continue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.interface-continue:not(:disabled):hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #6570ff 0%, #7b6aff 52%, #5b98ff 100%);
  box-shadow:
    0 14px 34px rgba(88, 101, 242, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.interface-continue:not(:disabled):hover::before {
  transform: translateX(120%);
}

.interface-continue span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.interface-continue:not(:disabled):hover span {
  transform: translateX(4px);
}

@keyframes pickerAuroraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  33% { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: 0.62; }
  66% { transform: translate3d(-3%, 4%, 0) scale(0.94); opacity: 0.48; }
}

@keyframes pickerGridPulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.28; }
}

@keyframes pickerParticleFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.25; }
  50% { transform: translate3d(0, -18px, 0); opacity: 0.9; }
}

@keyframes pickerGlowBreathe {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.52; }
}

@keyframes pickerPanelIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pickerHeaderIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pickerCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pickerCardShine {
  from { transform: translateX(-120%) rotate(18deg); }
  to { transform: translateX(220%) rotate(18deg); }
}

@keyframes pickerFooterIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .interface-picker__aurora i,
  .interface-picker__grid,
  .interface-picker__particles i,
  .interface-picker__glow,
  .interface-picker__panel,
  .interface-picker__header,
  .interface-card,
  .interface-picker__footer {
    animation: none !important;
  }

  .interface-card:not(:disabled):hover::after {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .interface-picker__panel {
    border-radius: 24px;
  }

  .interface-card:not(:disabled):hover {
    transform: translateY(-4px);
  }
}