/* ===== MODE SELECT V5 — PREMIUM CHOICE SCREEN START ===== */

#screen-mode-select {
  background:
    radial-gradient(circle at 12% 8%, rgba(117, 76, 255, .18), transparent 32%),
    radial-gradient(circle at 92% 22%, rgba(18, 200, 238, .16), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(157, 112, 255, .12), transparent 36%),
    linear-gradient(180deg, #fbfdff 0%, #f1f7ff 46%, #eaf3fb 100%) !important;
}

#screen-mode-select.active {
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

#screen-mode-select .modev5-screen {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  color: #10182c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Header */

#screen-mode-select .modev5-header {
  height: 48px;
  min-height: 48px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
}

#screen-mode-select .modev5-back {
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(172, 185, 210, .72);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.94));
  color: #6d43f4;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  box-shadow:
    0 12px 24px rgba(96, 110, 145, .18),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -8px 16px rgba(222,230,244,.65);
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-mode-select .modev5-header-title {
  text-align: center;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.4px;
  color: #10182c;
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
}

#screen-mode-select .modev5-header-spacer {
  width: 46px;
  height: 46px;
}

/* Top block */

#screen-mode-select .modev5-top {
  flex: 0 0 auto;
  text-align: center;
  padding: 2px 4px 0;
}

#screen-mode-select .modev5-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 16px;
  border-radius: 999px;
  color: #6945ee;
  font-size: 13px;
  font-weight: 850;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,247,255,.86));
  border: 1.2px solid rgba(143, 118, 255, .28);
  box-shadow:
    0 8px 18px rgba(98, 88, 180, .12),
    inset 0 1px 0 rgba(255,255,255,.96);
  margin-bottom: 10px;
}

#screen-mode-select .modev5-top h1 {
  margin: 0;
  color: #0f172a;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
}

#screen-mode-select .modev5-top p {
  margin: 8px auto 0;
  color: #4f5a70;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 650;
  max-width: 330px;
}

#screen-mode-select .modev5-visual {
  position: relative;
  height: 78px;
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-mode-select .modev5-disc {
  width: 142px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.96) 0%, rgba(231,218,255,.8) 42%, rgba(150,106,255,.18) 70%, transparent 76%);
  box-shadow:
    0 16px 26px rgba(112, 86, 200, .16),
    inset 0 2px 0 rgba(255,255,255,.92);
}

#screen-mode-select .modev5-disc::before,
#screen-mode-select .modev5-disc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(134, 99, 255, .16);
}

#screen-mode-select .modev5-disc::before {
  width: 190px;
  height: 72px;
}

#screen-mode-select .modev5-disc::after {
  width: 240px;
  height: 92px;
}

#screen-mode-select .modev5-note {
  position: absolute;
  left: 50%;
  top: -44px;
  transform: translateX(-50%);
  font-size: 62px;
  line-height: 1;
  font-weight: 900;
  color: #a945ff;
  text-shadow:
    0 10px 22px rgba(144, 72, 255, .32),
    0 1px 0 rgba(255,255,255,.85);
}

#screen-mode-select .modev5-eq {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 260px;
  height: 44px;
  transform: translateX(-50%);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  opacity: .22;
}

#screen-mode-select .modev5-eq span {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5cff, #25c8f2);
}

#screen-mode-select .modev5-eq span:nth-child(1) { height: 18px; }
#screen-mode-select .modev5-eq span:nth-child(2) { height: 28px; }
#screen-mode-select .modev5-eq span:nth-child(3) { height: 38px; }
#screen-mode-select .modev5-eq span:nth-child(4) { height: 24px; }
#screen-mode-select .modev5-eq span:nth-child(5) { height: 44px; }
#screen-mode-select .modev5-eq span:nth-child(6) { height: 34px; }
#screen-mode-select .modev5-eq span:nth-child(7) { height: 22px; }
#screen-mode-select .modev5-eq span:nth-child(8) { height: 39px; }
#screen-mode-select .modev5-eq span:nth-child(9) { height: 27px; }
#screen-mode-select .modev5-eq span:nth-child(10) { height: 20px; }

/* Choices */

#screen-mode-select .modev5-choices {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 13px;
  min-height: 0;
  padding-top: 4px;
}

#screen-mode-select .modev5-card {
  position: relative;
  min-height: 184px;
  border-radius: 32px;
  padding: 18px 76px 18px 18px;
  display: grid;
  grid-template-columns: 142px 1fr;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1.6px solid rgba(255,255,255,.88);
  box-shadow:
    0 18px 42px rgba(82, 96, 132, .20),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -12px 28px rgba(188, 202, 229, .18);
}

#screen-mode-select .modev5-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 27px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.52);
}

#screen-mode-select .modev5-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 8px;
  height: 38%;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), transparent);
  pointer-events: none;
}

#screen-mode-select .modev5-fast {
  background:
    radial-gradient(circle at 23% 20%, rgba(255,255,255,.44), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, rgba(82,48,220,.98) 0%, rgba(137,69,255,.96) 48%, rgba(29,151,235,.92) 100%);
  box-shadow:
    0 20px 44px rgba(116, 74, 255, .26),
    0 8px 18px rgba(35, 84, 210, .12),
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -14px 28px rgba(40, 23, 120, .22);
}

#screen-mode-select .modev5-pro {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.38), transparent 25%),
    radial-gradient(circle at 84% 28%, rgba(105,240,255,.22), transparent 28%),
    linear-gradient(135deg, rgba(10,84,180,.98) 0%, rgba(20,160,226,.95) 50%, rgba(109,79,255,.9) 100%);
  box-shadow:
    0 20px 44px rgba(28, 160, 226, .22),
    0 8px 18px rgba(60, 64, 210, .12),
    inset 0 2px 0 rgba(255,255,255,.43),
    inset 0 -14px 28px rgba(11, 56, 116, .22);
}

#screen-mode-select .modev5-card-glow {
  position: absolute;
  inset: auto -20px -38px -20px;
  height: 80px;
  opacity: .56;
  filter: blur(8px);
  pointer-events: none;
}

#screen-mode-select .modev5-fast .modev5-card-glow {
  background: radial-gradient(ellipse, rgba(188, 88, 255, .58), transparent 68%);
}

#screen-mode-select .modev5-pro .modev5-card-glow {
  background: radial-gradient(ellipse, rgba(48, 220, 255, .56), transparent 68%);
}

#screen-mode-select .modev5-card-text {
  position: relative;
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 10px rgba(13, 20, 66, .28);
}

#screen-mode-select .modev5-card-text h2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.6px;
  color: #fff;
}

#screen-mode-select .modev5-card-text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  max-width: 250px;
}

#screen-mode-select .modev5-arrow {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  border: 1.4px solid rgba(255,255,255,.58);
  box-shadow:
    0 12px 28px rgba(28, 30, 98, .26),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -8px 16px rgba(25, 18, 98, .20);
}

#screen-mode-select .modev5-arrow-purple {
  background: linear-gradient(135deg, #b559ff, #6e3df1);
}

#screen-mode-select .modev5-arrow-cyan {
  background: linear-gradient(135deg, #42d9ff, #138ee8);
}

/* Art common */

#screen-mode-select .modev5-art {
  position: relative;
  z-index: 3;
  width: 142px;
  height: 126px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  border: 1.4px solid rgba(255,255,255,.42);
  box-shadow:
    0 16px 28px rgba(20, 28, 90, .22),
    inset 0 1px 0 rgba(255,255,255,.40);
  overflow: hidden;
}

/* Rocket CSS art */

#screen-mode-select .modev5-rocket-art {
  background:
    radial-gradient(circle at 50% 84%, rgba(255,255,255,.72), transparent 28%),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.32), transparent 26%),
    linear-gradient(145deg, rgba(190,139,255,.58), rgba(104,78,255,.28));
}

#screen-mode-select .rocket {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 58px;
  height: 98px;
  transform: translate(-50%, -50%) rotate(34deg);
  filter: drop-shadow(0 12px 16px rgba(42, 20, 120, .34));
}

#screen-mode-select .rocket-body {
  position: absolute;
  left: 15px;
  top: 17px;
  width: 28px;
  height: 62px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(90deg, #f7fbff 0%, #b9c7ff 44%, #ffffff 64%, #7b57ed 100%);
  box-shadow:
    inset 4px 0 8px rgba(255,255,255,.72),
    inset -4px 0 8px rgba(36, 42, 124, .18);
}

#screen-mode-select .rocket-window {
  position: absolute;
  left: 22px;
  top: 34px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #a472ff 44%, #3e1a91);
  border: 2px solid rgba(70, 36, 180, .55);
}

#screen-mode-select .rocket-nose {
  position: absolute;
  left: 16px;
  top: 0;
  width: 26px;
  height: 30px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(135deg, #f8fbff, #c98cff 46%, #5f2de8);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

#screen-mode-select .rocket-fin {
  position: absolute;
  bottom: 15px;
  width: 20px;
  height: 28px;
  background: linear-gradient(135deg, #c98cff, #5a2ce0);
  clip-path: polygon(100% 0%, 100% 100%, 0% 78%);
}

#screen-mode-select .rocket-fin-left {
  left: 0;
  transform: rotate(-8deg);
}

#screen-mode-select .rocket-fin-right {
  right: 0;
  transform: scaleX(-1) rotate(-8deg);
}

#screen-mode-select .rocket-flame {
  position: absolute;
  left: 20px;
  bottom: -12px;
  width: 20px;
  height: 34px;
  border-radius: 50% 50% 60% 60%;
  background:
    radial-gradient(circle at 50% 20%, #ffffff 0%, #ffe4ff 22%, #ff8cf4 45%, #7f48ff 72%, transparent 76%);
  filter: blur(.2px);
}

#screen-mode-select .rocket-cloud {
  position: absolute;
  bottom: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  filter: blur(1px);
}

#screen-mode-select .rocket-cloud-1 {
  left: 12px;
  width: 52px;
  height: 22px;
}

#screen-mode-select .rocket-cloud-2 {
  left: 42px;
  width: 72px;
  height: 28px;
}

#screen-mode-select .rocket-cloud-3 {
  right: 8px;
  width: 42px;
  height: 18px;
}

/* Mixer CSS art */

#screen-mode-select .modev5-mixer-art {
  background:
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.55), transparent 32%),
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(145deg, rgba(91,213,255,.58), rgba(77,92,255,.26));
}

#screen-mode-select .mixer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 86px;
  border-radius: 18px;
  transform: translate(-50%, -50%) rotate(-7deg);
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.78), transparent 24%),
    linear-gradient(145deg, #ffffff, #c4dcff 48%, #7d8ff5);
  box-shadow:
    0 14px 22px rgba(15, 58, 130, .28),
    inset 0 2px 0 rgba(255,255,255,.88),
    inset 0 -8px 14px rgba(40, 76, 160, .22);
  border: 1.2px solid rgba(255,255,255,.66);
}

#screen-mode-select .mixer-slot {
  position: absolute;
  top: 16px;
  width: 8px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16dfff, #6d4cff);
  box-shadow: inset 0 0 5px rgba(20,30,80,.34);
}

#screen-mode-select .mixer-slot span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 13px;
  border-radius: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffffff, #aebff4);
  box-shadow: 0 5px 10px rgba(23,44,110,.28);
}

#screen-mode-select .slot-1 { left: 16px; }
#screen-mode-select .slot-2 { left: 32px; }
#screen-mode-select .slot-3 { left: 48px; }
#screen-mode-select .slot-4 { left: 64px; }

#screen-mode-select .slot-1 span { top: 7px; }
#screen-mode-select .slot-2 span { top: 29px; }
#screen-mode-select .slot-3 span { top: 19px; }
#screen-mode-select .slot-4 span { top: 10px; }

#screen-mode-select .mixer-knob {
  position: absolute;
  bottom: 9px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #67dfff 48%, #2b5ee9);
}

#screen-mode-select .knob-1 { left: 22px; }
#screen-mode-select .knob-2 { right: 22px; }

#screen-mode-select .mixer-led {
  position: absolute;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  box-shadow: 0 0 10px currentColor;
}

#screen-mode-select .led-1 {
  right: 16px;
  color: #39f4ff;
  background: #39f4ff;
}

#screen-mode-select .led-2 {
  right: 30px;
  color: #a75cff;
  background: #a75cff;
}

/* Footer */

#screen-mode-select .modev5-footer {
  flex: 0 0 auto;
  padding-top: 2px;
}

#screen-mode-select .modev5-home-btn {
  width: 100%;
  height: 60px;
  border-radius: 24px;
  border: 1.5px solid rgba(176, 188, 208, .72);
  background:
    radial-gradient(circle at 35% 12%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,255,.94));
  color: #111827;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.4px;
  box-shadow:
    0 16px 30px rgba(95, 108, 140, .18),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -10px 18px rgba(222,230,244,.70);
}

/* Interactions */

#screen-mode-select .modev5-card:active,
#screen-mode-select .modev5-home-btn:active,
#screen-mode-select .modev5-back:active {
  transform: translateY(1px) scale(.995);
}

#screen-mode-select .modev5-card,
#screen-mode-select .modev5-home-btn,
#screen-mode-select .modev5-back {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

/* Responsive */

@media (max-height: 790px) {
  #screen-mode-select .modev5-screen {
    padding: 8px 12px 10px;
    gap: 7px;
  }

  #screen-mode-select .modev5-header {
    height: 44px;
    min-height: 44px;
  }

  #screen-mode-select .modev5-back,
  #screen-mode-select .modev5-header-spacer {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  #screen-mode-select .modev5-top h1 {
    font-size: 28px;
  }

  #screen-mode-select .modev5-top p {
    font-size: 15px;
    margin-top: 6px;
  }

  #screen-mode-select .modev5-badge {
    min-height: 29px;
    font-size: 12px;
    margin-bottom: 7px;
  }

  #screen-mode-select .modev5-visual {
    height: 62px;
    margin-top: 6px;
  }

  #screen-mode-select .modev5-note {
    font-size: 50px;
    top: -33px;
  }

  #screen-mode-select .modev5-card {
    min-height: 160px;
    border-radius: 28px;
    padding: 15px 68px 15px 15px;
    grid-template-columns: 120px 1fr;
    gap: 14px;
  }

  #screen-mode-select .modev5-art {
    width: 120px;
    height: 108px;
    border-radius: 24px;
  }

  #screen-mode-select .modev5-card-text h2 {
    font-size: 25px;
    margin-bottom: 7px;
  }

  #screen-mode-select .modev5-card-text p {
    font-size: 15px;
    line-height: 1.23;
  }

  #screen-mode-select .modev5-arrow {
    width: 50px;
    height: 50px;
    font-size: 31px;
    right: 17px;
    bottom: 20px;
  }

  #screen-mode-select .modev5-home-btn {
    height: 54px;
    border-radius: 22px;
    font-size: 21px;
  }

  #screen-mode-select .modev5-choices {
    gap: 10px;
  }
}

@media (max-height: 700px) {
  #screen-mode-select .modev5-visual {
    display: none;
  }

  #screen-mode-select .modev5-card {
    min-height: 144px;
    grid-template-columns: 104px 1fr;
  }

  #screen-mode-select .modev5-art {
    width: 104px;
    height: 96px;
  }

  #screen-mode-select .modev5-card-text h2 {
    font-size: 23px;
  }

  #screen-mode-select .modev5-card-text p {
    font-size: 14px;
  }
}

/* ===== MODE SELECT V5.1 — REFERENCE MATCH FIX START ===== */

/* Общий layout: сохраняем деление экрана, но убираем ощущение пустоты */
#screen-mode-select .modev5-screen {
  padding: 8px 14px 12px !important;
  gap: 8px !important;
}

/* Header компактный */
#screen-mode-select .modev5-header {
  height: 46px !important;
  min-height: 46px !important;
}

#screen-mode-select .modev5-back {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  color: #6d43f4 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.94)) !important;
  border: 1.5px solid rgba(164,178,210,.70) !important;
  box-shadow:
    0 12px 24px rgba(92,106,138,.18),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -8px 16px rgba(220,229,244,.70) !important;
}

#screen-mode-select .modev5-header-title {
  color: #10182c !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

/* Верхний блок: все тексты должны быть тёмные и читаемые */
#screen-mode-select .modev5-top {
  padding-top: 0 !important;
}

#screen-mode-select .modev5-badge {
  margin-bottom: 8px !important;
  min-height: 30px !important;
  color: #6843ef !important;
  font-weight: 900 !important;
}

#screen-mode-select .modev5-top h1 {
  color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 8px 18px rgba(30,40,80,.08) !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  margin: 0 !important;
}

#screen-mode-select .modev5-top p {
  color: #4a5368 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #4a5368 !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  margin-top: 7px !important;
}

/* Визуальная музыкальная подсказка компактнее, но видимая */
#screen-mode-select .modev5-visual {
  height: 58px !important;
  margin-top: 7px !important;
  opacity: .95 !important;
}

#screen-mode-select .modev5-note {
  color: #9c4dff !important;
  -webkit-text-fill-color: #9c4dff !important;
  font-size: 48px !important;
  top: -30px !important;
  text-shadow:
    0 10px 22px rgba(144,72,255,.28),
    0 1px 0 rgba(255,255,255,.90) !important;
}

#screen-mode-select .modev5-disc {
  width: 132px !important;
  height: 40px !important;
}

#screen-mode-select .modev5-eq {
  bottom: 18px !important;
  height: 34px !important;
  opacity: .18 !important;
}

/* Карточки: возвращаем светлый premium-card стиль как на референсе */
#screen-mode-select .modev5-choices {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-top: 2px !important;
}

#screen-mode-select .modev5-card {
  min-height: 174px !important;
  border-radius: 30px !important;
  padding: 16px 72px 16px 16px !important;
  display: grid !important;
  grid-template-columns: 138px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,247,255,.90)) !important;

  border: 1.8px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 18px 38px rgba(82,96,132,.18),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -14px 28px rgba(211,222,240,.48) !important;
}

/* Цветные акценты по правому краю карточек */
#screen-mode-select .modev5-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 25px !important;
  pointer-events: none !important;
  border: 1px solid rgba(255,255,255,.72) !important;
}

#screen-mode-select .modev5-card::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  right: 0 !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 999px 0 0 999px !important;
  pointer-events: none !important;
}

#screen-mode-select .modev5-fast::after {
  background: linear-gradient(180deg, #8b5cff, #b65cff) !important;
  box-shadow: 0 0 18px rgba(139,92,255,.48) !important;
}

#screen-mode-select .modev5-pro::after {
  background: linear-gradient(180deg, #21d4ff, #238dff) !important;
  box-shadow: 0 0 18px rgba(33,212,255,.46) !important;
}

/* Текст карточек: тёмный, крупный, читаемый */
#screen-mode-select .modev5-card-text {
  position: relative !important;
  z-index: 5 !important;
  color: #10182c !important;
  text-shadow: none !important;
  min-width: 0 !important;
}

#screen-mode-select .modev5-card-text h2 {
  color: #10182c !important;
  -webkit-text-fill-color: #10182c !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.5px !important;
  margin: 0 0 10px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.95) !important;
}

#screen-mode-select .modev5-card-text p {
  color: #4a5368 !important;
  -webkit-text-fill-color: #4a5368 !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
  max-width: 245px !important;
  text-shadow: none !important;
}

/* Показываем и усиливаем 3D-арт слева */
#screen-mode-select .modev5-art {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 6 !important;
  width: 138px !important;
  height: 122px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 16px 30px rgba(55,67,110,.20),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#screen-mode-select .modev5-rocket-art {
  background:
    radial-gradient(circle at 52% 80%, rgba(255,255,255,.84), transparent 28%),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.36), transparent 24%),
    linear-gradient(145deg, rgba(206,158,255,.72), rgba(103,77,255,.28)) !important;
}

#screen-mode-select .modev5-mixer-art {
  background:
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.72), transparent 32%),
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.34), transparent 24%),
    linear-gradient(145deg, rgba(90,215,255,.74), rgba(76,92,255,.28)) !important;
}

/* Убеждаемся, что CSS-ракета и микшер не скрыты */
#screen-mode-select .rocket,
#screen-mode-select .mixer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 8 !important;
}

/* Стрелки справа — большие глянцевые, по центру карточек */
#screen-mode-select .modev5-arrow {
  position: absolute !important;
  z-index: 9 !important;
  right: 18px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 36px !important;
  font-weight: 950 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 14px 28px rgba(60,70,130,.22),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -10px 18px rgba(32,28,110,.20) !important;
}

#screen-mode-select .modev5-arrow-purple {
  background: linear-gradient(135deg, #bb5cff, #6e3df1) !important;
}

#screen-mode-select .modev5-arrow-cyan {
  background: linear-gradient(135deg, #42dfff, #138ee8) !important;
}

/* Нижняя кнопка: одна, большая, светлая, объёмная */
#screen-mode-select .modev5-footer {
  flex: 0 0 auto !important;
  padding-top: 2px !important;
}

#screen-mode-select .modev5-home-btn {
  width: 100% !important;
  height: 58px !important;
  border-radius: 24px !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  color: #111827 !important;
  background:
    radial-gradient(circle at 35% 12%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,247,255,.94)) !important;
  border: 1.6px solid rgba(176,188,208,.76) !important;
  box-shadow:
    0 16px 30px rgba(95,108,140,.18),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -10px 18px rgba(222,230,244,.70) !important;
}

/* Mobile compact */
@media (max-height: 790px) {
  #screen-mode-select .modev5-screen {
    padding: 7px 12px 10px !important;
    gap: 7px !important;
  }

  #screen-mode-select .modev5-header {
    height: 42px !important;
    min-height: 42px !important;
  }

  #screen-mode-select .modev5-back,
  #screen-mode-select .modev5-header-spacer {
    width: 40px !important;
    height: 40px !important;
  }

  #screen-mode-select .modev5-header-title {
    font-size: 19px !important;
  }

  #screen-mode-select .modev5-badge {
    min-height: 28px !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  #screen-mode-select .modev5-top h1 {
    font-size: 27px !important;
  }

  #screen-mode-select .modev5-top p {
    font-size: 15px !important;
    margin-top: 5px !important;
  }

  #screen-mode-select .modev5-visual {
    height: 48px !important;
    margin-top: 5px !important;
  }

  #screen-mode-select .modev5-note {
    font-size: 42px !important;
    top: -26px !important;
  }

  #screen-mode-select .modev5-card {
    min-height: 154px !important;
    border-radius: 26px !important;
    padding: 13px 62px 13px 13px !important;
    grid-template-columns: 112px 1fr !important;
    gap: 12px !important;
  }

  #screen-mode-select .modev5-art {
    width: 112px !important;
    height: 100px !important;
    border-radius: 22px !important;
  }

  #screen-mode-select .modev5-card-text h2 {
    font-size: 24px !important;
    margin-bottom: 7px !important;
  }

  #screen-mode-select .modev5-card-text p {
    font-size: 14px !important;
    line-height: 1.24 !important;
  }

  #screen-mode-select .modev5-arrow {
    width: 50px !important;
    height: 50px !important;
    font-size: 31px !important;
    right: 14px !important;
  }

  #screen-mode-select .modev5-home-btn {
    height: 54px !important;
    font-size: 21px !important;
  }

  #screen-mode-select .modev5-choices {
    gap: 10px !important;
  }
}

/* ===== MODE SELECT V5.1 — REFERENCE MATCH FIX END ===== */

/* ===== MODE SELECT V5 — PREMIUM CHOICE SCREEN END ===== */