/* ================================================================
   HitMaker AI — Welcome Screen V7 Home Design
   Source: docs/ui-previews/hitmarket_home_light_3d_preview_v7_webapp_fit.html
   Scoped under #screen-welcome for production safety.
   ================================================================ */

/* ═══ ROOT VARIABLES (scoped) ═══ */
#screen-welcome .hmv7-home {
  --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 ═══ */

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

/* Фон для #screen-welcome в целом */
#screen-welcome {
  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;
}

/* ═══ HMV7-HOME LAYOUT ═══ */
#screen-welcome .hmv7-home {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#screen-welcome .hmv7-home * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══ HEADER ═══ */
#screen-welcome .hmv7-home .header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#screen-welcome .hmv7-home .logo {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.75), transparent 27%),
    linear-gradient(145deg, #f7faff 0%, #dfe8ff 30%, #7347ff 64%, #12c8ee 100%);
  box-shadow:
    12px 14px 28px rgba(91,106,135,.22),
    -8px -8px 22px rgba(255,255,255,.88),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -12px 20px rgba(80,40,180,.16);
  text-shadow: 0 3px 7px rgba(30,10,100,.20);
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .brand-title {
  font-size: 19px;
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -.7px;
  color: #1a2233;
}

#screen-welcome .hmv7-home .brand-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  color: var(--purple);
}

#screen-welcome .hmv7-home .header-actions {
  display: flex;
  gap: 9px;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #30384f;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,1), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #e6eef8 100%);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow:
    9px 10px 19px rgba(100,116,145,.22),
    -7px -7px 16px rgba(255,255,255,.92),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -9px 16px rgba(140,158,194,.14);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#screen-welcome .hmv7-home .circle-btn::after {
  content: "";
  position: absolute;
  inset: 4px 7px auto 7px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), transparent);
  pointer-events: none;
}

#screen-welcome .hmv7-home .circle-btn:active {
  transform: translateY(3px) scale(.975);
  filter: brightness(.985);
}

/* ═══ HERO SHELL ═══ */
#screen-welcome .hmv7-home .hero-shell {
  flex: 0 0 390px;
  height: 390px;
  min-height: 390px;
  border-radius: 31px;
  padding: 9px 10px 8px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(229,238,250,.78));
  border: 1px solid rgba(255,255,255,.90);
  box-shadow:
    17px 18px 38px rgba(105,121,150,.22),
    -12px -12px 29px rgba(255,255,255,.90),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -18px 34px rgba(145,165,204,.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  position: relative;
}

#screen-welcome .hmv7-home .hero-title {
  text-align: center;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .hero-title h1 {
  font-size: 18px;
  line-height: 1.04;
  letter-spacing: -.6px;
  font-weight: 950;
  color: #151d2e;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 10px 24px rgba(31,36,51,.10);
}

#screen-welcome .hmv7-home .hero-title p {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;
  color: #4a5265;
  text-shadow: 0 1px 0 rgba(255,255,255,.82);
}

/* ═══ CAROUSEL ═══ */
#screen-welcome .hmv7-home .carousel {
  height: 226px;
  position: relative;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .side-card {
  position: absolute;
  top: 24px;
  width: 72px;
  height: 168px;
  border-radius: 22px;
  overflow: hidden;
  opacity: .92;
  filter: saturate(1.05);
  box-shadow:
    0 16px 28px rgba(20,35,70,.18),
    inset 0 1px 0 rgba(255,255,255,.40);
}

#screen-welcome .hmv7-home .side-card.left {
  left: -55px;
  background:
    radial-gradient(circle at 40% 20%, rgba(255,255,255,.38), transparent 26%),
    linear-gradient(160deg, #5b2a1a 0%, #d88948 42%, #251226 100%);
}

#screen-welcome .hmv7-home .side-card.right {
  right: -55px;
  background:
    radial-gradient(circle at 40% 18%, rgba(255,255,255,.44), transparent 26%),
    linear-gradient(160deg, #0c3269 0%, #48b7ff 50%, #092047 100%);
}

#screen-welcome .hmv7-home .side-card::before {
  content: "0:30";
  position: absolute;
  top: 14px;
  left: 10px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

#screen-welcome .hmv7-home .side-card::after {
  content: "▶";
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
  backdrop-filter: blur(8px);
}

/* ═══ MAIN CARD ═══ */
#screen-welcome .hmv7-home .main-card {
  position: absolute;
  inset: 0 10px auto;
  height: 208px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 12%, rgba(255,255,255,.38), transparent 23%),
    radial-gradient(circle at 78% 60%, rgba(18,200,238,.30), transparent 30%),
    linear-gradient(135deg, #1a0b55 0%, #4d15c8 40%, #672fd9 58%, #0b91d8 100%);
  box-shadow:
    0 22px 38px rgba(42,34,112,.36),
    0 7px 16px rgba(18,200,238,.16),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -28px 52px rgba(8,5,45,.36);
  border: 1px solid rgba(255,255,255,.28);
}

#screen-welcome .hmv7-home .main-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.20), transparent 25%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 1px, transparent 1px 14px);
  mix-blend-mode: screen;
  opacity: .84;
}

/* ═══ MOON / LANDSCAPE / PERSON ═══ */
#screen-welcome .hmv7-home .moon {
  position: absolute;
  z-index: 2;
  right: 52px;
  top: 22px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.70), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(145deg, rgba(238,226,255,.58), rgba(120,48,255,.16));
  box-shadow:
    0 0 42px rgba(220,190,255,.36),
    inset 0 0 28px rgba(255,255,255,.18);
  opacity: .82;
}

#screen-welcome .hmv7-home .landscape {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 50px;
  height: 64px;
  background:
    linear-gradient(150deg, transparent 0 15%, rgba(5,8,32,.52) 15% 35%, transparent 35%),
    linear-gradient(205deg, transparent 0 21%, rgba(5,8,32,.42) 21% 43%, transparent 43%),
    linear-gradient(180deg, transparent, rgba(5,8,32,.54));
  opacity: .85;
}

#screen-welcome .hmv7-home .person {
  position: absolute;
  z-index: 4;
  right: 105px;
  bottom: 82px;
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: rgba(7,9,28,.86);
  box-shadow: 0 0 12px rgba(255,255,255,.20);
}

#screen-welcome .hmv7-home .person::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(7,9,28,.88);
}

#screen-welcome .hmv7-home .person::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
  width: 27px;
  height: 2px;
  border-radius: 999px;
  background: rgba(7,9,28,.80);
}

/* ═══ DEMO PILL ═══ */
#screen-welcome .hmv7-home .demo-pill {
  position: absolute;
  z-index: 8;
  right: 12px;
  top: 12px;
  height: 29px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(6,12,38,.48);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 850;
}

#screen-welcome .hmv7-home .demo-pill i {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#screen-welcome .hmv7-home .demo-pill i::before,
#screen-welcome .hmv7-home .demo-pill i::after {
  content: "";
  width: 3px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(18,200,238,.60);
}

#screen-welcome .hmv7-home .demo-pill i::before { height: 11px; }
#screen-welcome .hmv7-home .demo-pill i::after { height: 17px; }

/* ═══ COSMIC LOGO ═══ */
#screen-welcome .hmv7-home .cosmic-logo {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.88);
  text-align: center;
  pointer-events: none;
}

#screen-welcome .hmv7-home .cosmic-logo .cosmic {
  font-size: 32px;
  line-height: .86;
  font-weight: 250;
  letter-spacing: 8px;
  text-shadow: 0 10px 26px rgba(0,0,0,.28);
}

#screen-welcome .hmv7-home .cosmic-logo .dreams {
  margin-top: -1px;
  font-size: 27px;
  line-height: .9;
  font-weight: 300;
  font-style: italic;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  text-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* ═══ PLAY BIG BUTTON ═══ */
#screen-welcome .hmv7-home .play-big {
  position: absolute;
  z-index: 8;
  left: 16px;
  bottom: 56px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--purple);
  font-size: 22px;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,1), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #dce6f7 100%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -10px 20px rgba(140,158,194,.18);
  border: 0;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}

#screen-welcome .hmv7-home .play-big:active {
  transform: translateY(3px) scale(.975);
  filter: brightness(.985);
}

/* ═══ TRACK INFO ═══ */
#screen-welcome .hmv7-home .track-info {
  position: absolute;
  z-index: 8;
  left: 84px;
  bottom: 64px;
  color: #fff;
}

#screen-welcome .hmv7-home .track-info h2 {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.35px;
  text-shadow: 0 8px 20px rgba(0,0,0,.32);
}

#screen-welcome .hmv7-home .track-info p {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 650;
  color: rgba(255,255,255,.86);
  text-shadow: 0 6px 16px rgba(0,0,0,.28);
}

/* ═══ WAVE AREA ═══ */
#screen-welcome .hmv7-home .wave-area {
  position: absolute;
  z-index: 8;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

#screen-welcome .hmv7-home .wave {
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 2px;
}

#screen-welcome .hmv7-home .wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff59d0 0%, #9c6cff 45%, #12c8ee 100%);
  box-shadow: 0 0 8px rgba(18,200,238,.24);
}

#screen-welcome .hmv7-home .wave i:nth-child(1) { height: 18%; }
#screen-welcome .hmv7-home .wave i:nth-child(2) { height: 42%; }
#screen-welcome .hmv7-home .wave i:nth-child(3) { height: 74%; }
#screen-welcome .hmv7-home .wave i:nth-child(4) { height: 33%; }
#screen-welcome .hmv7-home .wave i:nth-child(5) { height: 88%; }
#screen-welcome .hmv7-home .wave i:nth-child(6) { height: 56%; }
#screen-welcome .hmv7-home .wave i:nth-child(7) { height: 36%; }
#screen-welcome .hmv7-home .wave i:nth-child(8) { height: 78%; }
#screen-welcome .hmv7-home .wave i:nth-child(9) { height: 100%; }
#screen-welcome .hmv7-home .wave i:nth-child(10) { height: 48%; }
#screen-welcome .hmv7-home .wave i:nth-child(11) { height: 34%; }
#screen-welcome .hmv7-home .wave i:nth-child(12) { height: 66%; }
#screen-welcome .hmv7-home .wave i:nth-child(13) { height: 92%; }
#screen-welcome .hmv7-home .wave i:nth-child(14) { height: 54%; }
#screen-welcome .hmv7-home .wave i:nth-child(15) { height: 38%; }
#screen-welcome .hmv7-home .wave i:nth-child(16) { height: 82%; }
#screen-welcome .hmv7-home .wave i:nth-child(17) { height: 60%; }
#screen-welcome .hmv7-home .wave i:nth-child(18) { height: 30%; }

/* ═══ DOTS ═══ */
#screen-welcome .hmv7-home .dots {
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(130,145,170,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

#screen-welcome .hmv7-home .dots i:first-child {
  background: var(--purple);
  box-shadow: 0 0 10px rgba(106,60,255,.42);
}

/* ═══ SAMPLES ═══ */
#screen-welcome .hmv7-home .samples {
  height: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 78px;
  gap: 6px;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .sample,
#screen-welcome .hmv7-home .more {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(135deg, var(--a), var(--b));
  box-shadow:
    0 12px 22px rgba(30,40,68,.20),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -10px 18px rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.36);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#screen-welcome .hmv7-home .sample:active,
#screen-welcome .hmv7-home .more:active {
  transform: translateY(3px) scale(.975);
  filter: brightness(.985);
}

#screen-welcome .hmv7-home .sample::after {
  content: "▶";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background: rgba(255,255,255,.88);
  box-shadow: 0 5px 11px rgba(0,0,0,.20);
  font-size: 11px;
  font-weight: 950;
}

#screen-welcome .hmv7-home .sample span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  text-shadow: 0 4px 10px rgba(0,0,0,.32);
}

#screen-welcome .hmv7-home .s1 { --a: #4718a5; --b: #c261ff; }
#screen-welcome .hmv7-home .s2 { --a: #f0802e; --b: #2c1336; }
#screen-welcome .hmv7-home .s3 { --a: #0d62ca; --b: #ff3ea8; }

#screen-welcome .hmv7-home .more {
  --a: rgba(255,255,255,.98);
  --b: rgba(220,229,246,.90);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.80);
  box-shadow:
    9px 9px 18px rgba(100,116,146,.20),
    -7px -7px 16px rgba(255,255,255,.88),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -8px 15px rgba(140,158,194,.14);
}

#screen-welcome .hmv7-home .more b {
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
}

/* ═══ CTA BUTTON ═══ */
#screen-welcome .hmv7-home .cta {
  height: 54px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.25px;
  text-shadow:
    0 3px 10px rgba(30,10,100,.28),
    0 1px 0 rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.62), transparent 20%),
    radial-gradient(circle at 90% 18%, rgba(18,200,238,.50), transparent 26%),
    linear-gradient(145deg, #6236ef 0%, #813fff 46%, #2d1aa8 100%);
  box-shadow:
    0 25px 48px rgba(106,60,255,.45),
    0 10px 19px rgba(70,46,180,.24),
    inset 0 2px 0 rgba(255,255,255,.46),
    inset 0 -22px 37px rgba(20,10,100,.25);
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#screen-welcome .hmv7-home .cta::before {
  content: "";
  position: absolute;
  inset: 5px 8px auto 8px;
  height: 27px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.05));
  opacity: .95;
  pointer-events: none;
}

#screen-welcome .hmv7-home .cta::after {
  content: "✦";
  position: absolute;
  right: 24px;
  top: 16px;
  color: rgba(255,255,255,.65);
  font-size: 18px;
  text-shadow: 0 0 16px rgba(255,255,255,.50);
}

#screen-welcome .hmv7-home .cta:active {
  transform: translateY(3px) scale(.975);
  filter: brightness(.985);
}

#screen-welcome .hmv7-home .cta-inner {
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

#screen-welcome .hmv7-home .cta-icon {
  width: 32px;
  height: 32px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,1), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #e0e9ff 100%);
  box-shadow:
    7px 8px 15px rgba(20,10,90,.24),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -8px 15px rgba(100,80,190,.16);
  font-size: 17px;
}

/* ═══ ACCESS / SPINNER ═══ */
#screen-welcome .hmv7-home .access {
  height: 24px;
  align-self: center;
  min-width: 180px;
  padding: 0 12px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: #4a5265;
  font-size: 11px;
  font-weight: 750;
  background:
    radial-gradient(circle at 28% 14%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #e7eef8 100%);
  box-shadow:
    9px 9px 18px rgba(100,116,146,.20),
    -7px -7px 16px rgba(255,255,255,.88),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -8px 15px rgba(140,158,194,.12);
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2.5px solid rgba(106,60,255,.18);
  border-right-color: var(--purple);
  animation: hmv7-spin 1.2s linear infinite;
}

@keyframes hmv7-spin {
  to { transform: rotate(360deg); }
}

/* ═══ ACTIONS GRID ═══ */
#screen-welcome .hmv7-home .actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex-shrink: 0;
}

#screen-welcome .hmv7-home .action {
  height: 64px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #172033;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 850;
  text-align: center;
  background:
    radial-gradient(circle at 28% 10%, rgba(255,255,255,1), transparent 26%),
    linear-gradient(145deg, #ffffff, rgba(240,245,254,.98));
  box-shadow:
    12px 15px 32px rgba(85,102,132,.32),
    -8px -8px 22px rgba(255,255,255,.94),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -11px 20px rgba(140,158,194,.16);
  border: 1px solid rgba(155,178,210,.48);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#screen-welcome .hmv7-home .action::before {
  content: "";
  position: absolute;
  inset: 4px 7px auto 7px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  pointer-events: none;
}

#screen-welcome .hmv7-home .action::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  opacity: .85;
}

#screen-welcome .hmv7-home .action:nth-child(1)::after { background: rgba(106,60,255,.55); }
#screen-welcome .hmv7-home .action:nth-child(2)::after { background: rgba(255,122,56,.55); }
#screen-welcome .hmv7-home .action:nth-child(3)::after { background: rgba(18,160,238,.55); }
#screen-welcome .hmv7-home .action:nth-child(4)::after { background: rgba(20,140,255,.55); }
#screen-welcome .hmv7-home .action:nth-child(5)::after { background: rgba(157,99,255,.55); }
#screen-welcome .hmv7-home .action:nth-child(6)::after { background: rgba(32,190,100,.55); }

#screen-welcome .hmv7-home .action:active {
  transform: translateY(3px) scale(.975);
  filter: brightness(.985);
}

#screen-welcome .hmv7-home .action-icon {
  width: 28px;
  height: 28px;
  border-radius: 13px;
  margin-bottom: 3px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 17px;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.55), transparent 26%),
    linear-gradient(145deg, var(--ia), var(--ib));
  box-shadow:
    0 8px 15px rgba(106,60,255,.25),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -7px 13px rgba(0,0,0,.16);
}

#screen-welcome .hmv7-home .a1 { --ia: #6041f2; --ib: #9d63ff; }
#screen-welcome .hmv7-home .a2 { --ia: #ff7a38; --ib: #ffbd4a; }
#screen-welcome .hmv7-home .a3 { --ia: #138fe8; --ib: #12c8ee; }
#screen-welcome .hmv7-home .a4 { --ia: #1b8cff; --ib: #5ac7ff; }
#screen-welcome .hmv7-home .a5 { --ia: #8d57ff; --ib: #c47bff; }
#screen-welcome .hmv7-home .a6 { --ia: #38c868; --ib: #7ee487; }

/* ═══ RESPONSIVE: Low height screens ═══ */
@media (max-height: 790px) {
  #screen-welcome .hmv7-home {
    padding: 8px 10px 6px;
    gap: 8px;
  }

  #screen-welcome .hmv7-home .header {
    height: 46px;
  }

  #screen-welcome .hmv7-home .hero-shell {
    flex-basis: 360px;
    height: 360px;
    min-height: 360px;
  }

  #screen-welcome .hmv7-home .hero-title h1 {
    font-size: 16px;
  }

  #screen-welcome .hmv7-home .hero-title p {
    font-size: 11px;
  }

  #screen-welcome .hmv7-home .carousel {
    height: 206px;
  }

  #screen-welcome .hmv7-home .main-card {
    height: 190px;
  }

  #screen-welcome .hmv7-home .samples {
    height: 40px;
  }

  #screen-welcome .hmv7-home .cta {
    height: 48px;
    font-size: 16px;
  }

  #screen-welcome .hmv7-home .access {
    height: 22px;
  }

  #screen-welcome .hmv7-home .action {
    height: 56px;
    font-size: 11px;
  }

  #screen-welcome .hmv7-home .actions {
    gap: 8px;
  }
}

/* ===== V7 STEP POLISH — UNIFIED ACTION BUTTONS START ===== */

/* Корневой контейнер — компактнее */
#screen-welcome .hmv7-home {
  padding: 8px 12px 10px !important;
  gap: 10px !important;
}

/* Верх */
#screen-welcome .header {
  min-height: 50px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#screen-welcome .brand {
  gap: 10px !important;
}

#screen-welcome .logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
}

#screen-welcome .brand-title {
  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

/* .brand-subtitle в проекте называется .brand-sub */
#screen-welcome .brand-sub {
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #8d72ff !important;
}

/* Поднять hero ближе к логотипу */
#screen-welcome .hero-shell {
  margin-top: -6px !important;
  padding-top: 2px !important;
  height: 372px !important;
  min-height: 372px !important;
}

/* Убираем большую бледную надпись */
#screen-welcome .hero-title {
  margin: 0 0 6px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#screen-welcome .hero-title h1 {
  display: none !important;
}

/* Оставляем только компактную читаемую подпись */
#screen-welcome .hero-title p {
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #4f596f !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 2px 8px rgba(146,160,193,.08) !important;
  letter-spacing: .1px !important;
}

/* Карусель и карточки */
#screen-welcome .carousel {
  margin-top: 0 !important;
  height: 238px !important;
}

#screen-welcome .main-card {
  height: 218px !important;
}

#screen-welcome .side-card {
  top: 28px !important;
  height: 176px !important;
}

/* CTA */
#screen-welcome .cta {
  margin-top: 2px !important;
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 26px !important;
  box-shadow:
    0 14px 30px rgba(94,75,202,.24),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -2px 8px rgba(32,42,88,.16) !important;
}

#screen-welcome .access {
  margin-top: -1px !important;
  min-height: 24px !important;
  height: 24px !important;
}

/* Сетка action-кнопок */
#screen-welcome .actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 4px !important;
  align-items: stretch !important;
}

/* Общий единый стиль карточек */
#screen-welcome .action {
  position: relative !important;
  min-height: 86px !important;
  height: 86px !important;
  padding: 12px 8px 10px !important;
  border-radius: 22px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.97) 100%) !important;
  border: 1.5px solid rgba(176,188,208,.82) !important;

  box-shadow:
    0 14px 28px rgba(98,111,141,.16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -8px 14px rgba(224,232,244,.62) !important;

  overflow: hidden !important;
}

/* Убрать старые полоски и нижние акценты */
#screen-welcome .action::before,
#screen-welcome .action::after {
  display: none !important;
  content: none !important;
}

/* Лёгкий верхний блик для объёма */
#screen-welcome .action {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.97) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%) !important;
  background-blend-mode: normal !important;
}

/* Иконка как отдельный цветной chip */
#screen-welcome .action-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 23px !important;
  line-height: 1 !important;

  box-shadow:
    0 10px 18px rgba(64,78,112,.18),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Общий текст — используем span:last-child (реальный селектор в HTML) */
#screen-welcome .action span:last-child {
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #202838 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.84) !important;
  letter-spacing: -.1px !important;
}

/* Индивидуально красим только ИКОНКИ */

/* 1. Мои треки */
#screen-welcome .action:nth-child(1) .action-icon {
  background: linear-gradient(135deg, #9267ff 0%, #6b4df0 100%) !important;
  color: #fff !important;
}

/* 2. Лента */
#screen-welcome .action:nth-child(2) .action-icon {
  background: linear-gradient(135deg, #ffb24c 0%, #ff7f37 100%) !important;
  color: #fff !important;
}

/* 3. Купить генерации */
#screen-welcome .action:nth-child(3) .action-icon {
  background: linear-gradient(135deg, #43d1ff 0%, #1fa2e8 100%) !important;
  color: #fff !important;
}

/* 4. Загрузить трек */
#screen-welcome .action:nth-child(4) .action-icon {
  background: linear-gradient(135deg, #65baff 0%, #3d90ef 100%) !important;
  color: #fff !important;
}

/* 5. Партнёрам */
#screen-welcome .action:nth-child(5) .action-icon {
  background: linear-gradient(135deg, #c76dff 0%, #9d4cf3 100%) !important;
  color: #fff !important;
}

/* 6. Помощь */
#screen-welcome .action:nth-child(6) .action-icon {
  background: linear-gradient(135deg, #68db7c 0%, #46c16d 100%) !important;
  color: #fff !important;
}

/* Активное состояние */
#screen-welcome .action:active {
  transform: translateY(1px) scale(.995) !important;
}

#screen-welcome .cta:active {
  transform: translateY(1px) scale(.995) !important;
}

/* Дополнительное визуальное выделение кнопок относительно фона */
#screen-welcome .actions {
  padding: 1px 0 0 !important;
}

#screen-welcome .action:hover {
  box-shadow:
    0 16px 32px rgba(98,111,141,.18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -8px 14px rgba(224,232,244,.64) !important;
}

/* Адаптация для невысоких экранов */
@media (max-height: 790px) {
  #screen-welcome .hmv7-home {
    padding: 8px 11px 9px !important;
    gap: 9px !important;
  }

  #screen-welcome .hero-shell {
    height: 356px !important;
    min-height: 356px !important;
    margin-top: -5px !important;
  }

  #screen-welcome .hero-title p {
    font-size: 14px !important;
  }

  #screen-welcome .carousel {
    height: 228px !important;
  }

  #screen-welcome .main-card {
    height: 208px !important;
  }

  #screen-welcome .side-card {
    top: 27px !important;
    height: 168px !important;
  }

  #screen-welcome .actions {
    gap: 10px !important;
  }

  #screen-welcome .action {
    min-height: 80px !important;
    height: 80px !important;
    padding: 11px 7px 9px !important;
    border-radius: 20px !important;
  }

  #screen-welcome .action-icon {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    border-radius: 13px !important;
    font-size: 21px !important;
  }

  #screen-welcome .action span:last-child {
    font-size: 12.5px !important;
  }
}

/* ===== V7 STEP POLISH — UNIFIED ACTION BUTTONS END ===== */

/* ===== V7 STEP POLISH — RAISE COMPACT LAYOUT START ===== */

/* 1. Немного уплотняем общий контейнер */
#screen-welcome .hmv7-home {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
  gap: 8px !important;
}

/* 2. Чуть поднимаем верхнюю шапку и уменьшаем вертикальный воздух */
#screen-welcome .header {
  min-height: 48px !important;
  height: 48px !important;
  margin-bottom: -2px !important;
  padding-bottom: 0 !important;
}

/* 3. Чуть поднимаем hero-блок / preview-карусель */
#screen-welcome .hero-shell {
  margin-top: -10px !important;
}

/* 4. Подпись над каруселью оставить читаемой, но компактной */
#screen-welcome .hero-title {
  margin-bottom: 4px !important;
}

#screen-welcome .hero-title p {
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

/* 5. Карусель немного поднимаем без редизайна */
#screen-welcome .carousel {
  margin-top: -2px !important;
}

/* 6. CTA поднимаем выше, размер почти не трогаем */
#screen-welcome .cta {
  margin-top: -4px !important;
  height: 55px !important;
  min-height: 55px !important;
}

/* 7. Строку доступа / остатка генераций поднимаем ближе к CTA */
#screen-welcome .access,
#screen-welcome #welcome-gen-indicator {
  margin-top: -4px !important;
  margin-bottom: -2px !important;
  height: 23px !important;
  min-height: 23px !important;
}

/* 8. Блок 6 action-кнопок поднимаем выше */
#screen-welcome .actions {
  margin-top: -2px !important;
  gap: 10px !important;
}

/* 9. Кнопки оставляем крупными, но чуть компактнее по высоте, чтобы всё влезало */
#screen-welcome .action {
  height: 80px !important;
  min-height: 80px !important;
  padding-top: 9px !important;
  padding-bottom: 8px !important;
}

/* 10. Иконки остаются крупными и заметными */
#screen-welcome .action-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 22px !important;
  margin-bottom: 5px !important;
}

/* 11. Текст кнопок оставить жирным и читаемым */
#screen-welcome .action span:last-child {
  font-size: 12.5px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

/* 12. Для низких экранов — ещё чуть компактнее, но без поломки */
@media (max-height: 790px) {
  #screen-welcome .hmv7-home {
    padding-top: 5px !important;
    padding-bottom: 7px !important;
    gap: 7px !important;
  }

  #screen-welcome .header {
    height: 46px !important;
    min-height: 46px !important;
    margin-bottom: -3px !important;
  }

  #screen-welcome .hero-shell {
    margin-top: -11px !important;
  }

  #screen-welcome .hero-title p {
    font-size: 13.5px !important;
  }

  #screen-welcome .cta {
    margin-top: -5px !important;
    height: 53px !important;
    min-height: 53px !important;
  }

  #screen-welcome .access,
  #screen-welcome #welcome-gen-indicator {
    margin-top: -5px !important;
    margin-bottom: -3px !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  #screen-welcome .actions {
    margin-top: -3px !important;
    gap: 9px !important;
  }

  #screen-welcome .action {
    height: 76px !important;
    min-height: 76px !important;
    padding-top: 8px !important;
    padding-bottom: 7px !important;
  }

  #screen-welcome .action-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 21px !important;
    margin-bottom: 4px !important;
  }

  #screen-welcome .action span:last-child {
    font-size: 12px !important;
  }
}

/* ===== V7 STEP POLISH — RAISE COMPACT LAYOUT END ===== */

/* ===== V7 HEADER ICONS CLARITY FIX START ===== */

#screen-welcome .header-actions .circle-btn {
  color: #6d43f4 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,246,255,.94)) !important;
  border: 1.5px solid rgba(158,174,205,.72) !important;
  box-shadow:
    0 10px 22px rgba(92,106,138,.20),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -7px 14px rgba(221,229,244,.65) !important;
}

#screen-welcome .header-actions .circle-btn:first-child {
  color: #7b4cff !important;
}

#screen-welcome .header-actions .circle-btn:last-child {
  color: #6440df !important;
}

/* ===== V7 HEADER ICONS CLARITY FIX END ===== */