/* ================================================================
   HitMaker AI — Mode Select V2 Premium Light Design
   Source: docs/ui-previews/hitmarket_mode_select_v2_preview.html
   Scoped under #screen-mode-select for production safety.
   ================================================================ */

/* ═══ ROOT VARIABLES (scoped) ═══ */
#screen-mode-select .modev2-screen {
  --ink: #101729;
  --muted: #667085;
  --purple: #6a3cff;
  --purple2: #9a63ff;
  --violet: #c44dff;
  --cyan: #12c8ee;
  --blue: #147cff;
  --gold: #ffb43f;
  --pink: #ff4fa7;
  --green: #17d79a;
  --glass: rgba(255,255,255,.76);
  --stroke: rgba(255,255,255,.92);
}

/* ═══ PRODUCTION OVERRIDES ═══ */

/* Отключаем скролл для активного mode-select */
#screen-mode-select.active {
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

/* Фон экрана — светлый V7 gradient */
#screen-mode-select {
  background:
    radial-gradient(circle at 12% 7%, rgba(106,60,255,.18), transparent 30%),
    radial-gradient(circle at 94% 24%, rgba(18,200,238,.16), transparent 35%),
    radial-gradient(circle at 16% 95%, rgba(255,180,63,.10), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #eef6ff 48%, #e8f0fb 100%) !important;
}

/* ═══ MODEV2-SCREEN LAYOUT ═══ */
#screen-mode-select .modev2-screen {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#screen-mode-select .modev2-screen * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══ HEADER — компактный ═══ */
#screen-mode-select .modev2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#screen-mode-select .modev2-back {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255,255,255,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 12px rgba(98,111,141,.14);
  color: #3a445a;
  transition: all 0.2s;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

#screen-mode-select .modev2-back:active {
  transform: scale(0.94);
  box-shadow: 0 2px 6px rgba(98,111,141,.10);
}

#screen-mode-select .modev2-header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}

#screen-mode-select .modev2-header-spacer {
  width: 36px;
}

/* ═══ BADGE — компактный ═══ */
#screen-mode-select .modev2-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(106,60,255,.10), rgba(18,200,238,.10));
  border: 1px solid rgba(106,60,255,.16);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a3faa;
  align-self: center;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

/* ═══ CONTENT — основной блок, flex для заполнения ═══ */
#screen-mode-select .modev2-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

/* ═══ TITLE BLOCK — компактный ═══ */
#screen-mode-select .modev2-title-block {
  text-align: center;
  flex-shrink: 0;
}

#screen-mode-select .modev2-title-block h1 {
  font-size: 23px;
  font-weight: 900;
  color: #151d2e;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.94), 0 8px 20px rgba(31,36,51,.08);
  line-height: 1.15;
}

#screen-mode-select .modev2-title-block p {
  font-size: 13.5px;
  font-weight: 600;
  color: #4a5265;
  margin-top: 2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.82);
}

/* ═══ CARDS SECTION — подняты, не центрированы ═══ */
#screen-mode-select .modev2-cards {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

/* ═══ MODE CARD — объёмный, премиальный ═══ */
#screen-mode-select .modev2-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px 20px 0;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(245,250,255,.94));
  box-shadow:
    0 14px 32px rgba(85,102,132,.18),
    0 4px 10px rgba(85,102,132,.08),
    inset 0 1px 0 rgba(255,255,255,.96);
  border: 1.5px solid rgba(176,188,208,.44);
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  min-height: 122px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

#screen-mode-select .modev2-card:active {
  transform: scale(0.98);
  box-shadow: 0 6px 16px rgba(85,102,132,.12);
}

/* ═══ CARD ACCENT — цветная левая полоса ═══ */
#screen-mode-select .modev2-card-accent {
  width: 5px;
  height: 100%;
  flex-shrink: 0;
  border-radius: 0 3px 3px 0;
  align-self: stretch;
}

/* Fast Track — фиолетовый акцент */
#screen-mode-select .modev2-fast .modev2-card-accent {
  background: var(--purple);
}

/* Pro-режим — cyan акцент */
#screen-mode-select .modev2-pro .modev2-card-accent {
  background: var(--cyan);
}

/* ═══ CARD ICON — крупный ═══ */
#screen-mode-select .modev2-card-icon {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 30px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(106,60,255,.10), rgba(106,60,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 14px rgba(106,60,255,.12);
}

#screen-mode-select .modev2-pro .modev2-card-icon {
  background: linear-gradient(135deg, rgba(18,200,238,.12), rgba(18,200,238,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 14px rgba(18,200,238,.12);
}

/* ═══ CARD TEXT ═══ */
#screen-mode-select .modev2-card-text {
  flex: 1;
  min-width: 0;
}

#screen-mode-select .modev2-card-text h2 {
  font-size: 17px;
  font-weight: 800;
  color: #151d2e;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

#screen-mode-select .modev2-card-text p {
  font-size: 12.5px;
  font-weight: 500;
  color: #4f596f;
  line-height: 1.45;
}

/* ═══ CARD ARROW — цветной круг ═══ */
#screen-mode-select .modev2-card-arrow {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: #fff;
  box-shadow: 0 6px 16px rgba(106,60,255,.28);
  transition: all 0.2s;
}

#screen-mode-select .modev2-pro .modev2-card-arrow {
  background: linear-gradient(135deg, var(--cyan), #0f9fd8);
  box-shadow: 0 6px 16px rgba(18,200,238,.28);
}

#screen-mode-select .modev2-card:hover .modev2-card-arrow {
  transform: translateX(3px);
  box-shadow: 0 8px 20px rgba(106,60,255,.34);
}

#screen-mode-select .modev2-pro .modev2-card:hover .modev2-card-arrow {
  box-shadow: 0 8px 20px rgba(18,200,238,.34);
}

/* ═══ NOTE под карточками ═══ */
#screen-mode-select .modev2-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ═══ BOTTOM NAV — фиксированный отступ ═══ */
#screen-mode-select .modev2-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 10px;
}

/* ═══ NAV BUTTONS ═══ */
#screen-mode-select .modev2-btn {
  flex: 1;
  height: 50px;
  border-radius: 18px;
  font-size: 14.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  letter-spacing: -0.2px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

#screen-mode-select .modev2-btn:active {
  transform: scale(0.96);
}

/* Secondary — На главную */
#screen-mode-select .modev2-btn-secondary {
  background: rgba(255,255,255,.72);
  border: 1.5px solid rgba(176,188,208,.50);
  color: #3a445a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 12px rgba(98,111,141,.10);
}

#screen-mode-select .modev2-btn-secondary:active {
  box-shadow: 0 2px 6px rgba(98,111,141,.06);
}

/* Primary — Продолжить в Pro */
#screen-mode-select .modev2-btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: #fff;
  box-shadow:
    0 6px 20px rgba(106,60,255,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
  flex: 1.3;
}

#screen-mode-select .modev2-btn-primary:active {
  box-shadow: 0 3px 10px rgba(106,60,255,.18);
}

/* ═══ RESPONSIVE — для маленьких экранов ═══ */
@media (max-height: 790px) {
  #screen-mode-select .modev2-screen {
    padding: 10px 14px 12px;
    gap: 4px;
  }
  #screen-mode-select .modev2-back {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 10px;
  }
  #screen-mode-select .modev2-header-title {
    font-size: 14.5px;
  }
  #screen-mode-select .modev2-header-spacer {
    width: 32px;
  }
  #screen-mode-select .modev2-title-block h1 {
    font-size: 20px;
  }
  #screen-mode-select .modev2-title-block p {
    font-size: 12.5px;
    margin-top: 1px;
  }
  #screen-mode-select .modev2-cards {
    gap: 10px;
    margin-top: 4px;
  }
  #screen-mode-select .modev2-card {
    padding: 16px 14px 16px 0;
    min-height: 106px;
    border-radius: 20px;
  }
  #screen-mode-select .modev2-card-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 26px;
    border-radius: 16px;
  }
  #screen-mode-select .modev2-card-text h2 {
    font-size: 15px;
  }
  #screen-mode-select .modev2-card-text p {
    font-size: 11.5px;
  }
  #screen-mode-select .modev2-card-arrow {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 15px;
  }
  #screen-mode-select .modev2-note {
    margin-top: 2px;
    font-size: 10.5px;
  }
  #screen-mode-select .modev2-nav {
    margin-top: 8px;
  }
  #screen-mode-select .modev2-btn {
    height: 44px;
    font-size: 13.5px;
    border-radius: 16px;
  }
}

@media (max-height: 700px) {
  #screen-mode-select .modev2-screen {
    padding: 8px 12px 10px;
    gap: 3px;
  }
  #screen-mode-select .modev2-back {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 8px;
  }
  #screen-mode-select .modev2-header-title {
    font-size: 13px;
  }
  #screen-mode-select .modev2-header-spacer {
    width: 28px;
  }
  #screen-mode-select .modev2-badge {
    font-size: 9.5px;
    padding: 3px 10px;
  }
  #screen-mode-select .modev2-title-block h1 {
    font-size: 17px;
  }
  #screen-mode-select .modev2-title-block p {
    font-size: 11px;
    margin-top: 1px;
  }
  #screen-mode-select .modev2-cards {
    gap: 8px;
    margin-top: 2px;
  }
  #screen-mode-select .modev2-card {
    padding: 12px 12px 12px 0;
    min-height: 88px;
    border-radius: 16px;
  }
  #screen-mode-select .modev2-card-accent {
    width: 4px;
  }
  #screen-mode-select .modev2-card-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    font-size: 22px;
    border-radius: 14px;
  }
  #screen-mode-select .modev2-card-text h2 {
    font-size: 13px;
  }
  #screen-mode-select .modev2-card-text p {
    font-size: 10px;
  }
  #screen-mode-select .modev2-card-arrow {
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 13px;
  }
  #screen-mode-select .modev2-note {
    margin-top: 1px;
    font-size: 9.5px;
  }
  #screen-mode-select .modev2-nav {
    margin-top: 6px;
    gap: 8px;
  }
  #screen-mode-select .modev2-btn {
    height: 38px;
    font-size: 12px;
    border-radius: 14px;
  }
}