:root {
  --rose: #ff7ea8;
  --rose-deep: #7d3559;
  --rose-shadow: rgba(125, 53, 89, 0.22);
  --paper: rgba(255, 251, 247, 0.98);
  --line: rgba(176, 128, 104, 0.22);
  --text: #6d5160;
  --text-strong: #5a3b4b;
  --label: rgba(125, 53, 89, 0.68);
  --shadow-soft: 0 26px 36px rgba(110, 63, 81, 0.08);
  --shadow-card: 0 34px 54px rgba(110, 63, 81, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 201, 224, 0.94), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 245, 230, 0.72), transparent 24%),
    radial-gradient(circle at 84% 84%, rgba(214, 237, 244, 0.54), transparent 20%),
    linear-gradient(180deg, #fff7fa 0%, #ffedf5 36%, #fdf0e2 100%);
}

button,
input,
textarea,
select {
  font: inherit;
}

.music-app {
  min-height: 100vh;
  padding: 18px 16px 26px;
}

.music-shell {
  width: min(100%, 420px);
  margin: 0 auto;
}

.panel-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(205, 174, 156, 0.26);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 210, 229, 0.36), transparent 22%),
    radial-gradient(circle at 88% 86%, rgba(220, 238, 244, 0.28), transparent 18%),
    linear-gradient(180deg, rgba(255, 251, 247, 0.99) 0%, rgba(255, 248, 243, 0.97) 100%);
  box-shadow: var(--shadow-card);
}

.panel-card--intro {
  min-height: min(84vh, 660px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.panel-card--music {
  padding: 16px;
}

.intro-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.pulse-line {
  position: absolute;
  top: 110px;
  left: 50%;
  width: min(84%, 320px);
  height: 54px;
  transform: translateX(-50%);
  pointer-events: none;
}

.pulse-line::before,
.pulse-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.pulse-line::before {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 215, 231, 0.74) 16%,
      rgba(255, 255, 255, 0) 100%
    );
  filter: blur(8px);
}

.pulse-line::after {
  top: 22px;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 167, 200, 0) 0%,
      rgba(255, 167, 200, 0.82) 12%,
      rgba(255, 167, 200, 0.14) 34%,
      rgba(255, 167, 200, 0.84) 50%,
      rgba(255, 167, 200, 0.14) 66%,
      rgba(255, 167, 200, 0.74) 84%,
      rgba(255, 167, 200, 0) 100%
    );
  clip-path: polygon(0 56%, 14% 56%, 20% 56%, 26% 0, 32% 100%, 40% 24%, 47% 56%, 60% 56%, 68% 14%, 74% 92%, 80% 56%, 100% 56%, 100% 74%, 0 74%);
}

.heart-shell {
  position: relative;
  display: flex;
  width: min(78vw, 290px);
  height: min(78vw, 290px);
  align-items: center;
  justify-content: center;
}

.heart-shell::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 247, 0.94) 0%, rgba(255, 241, 247, 0.18) 68%, rgba(255, 241, 247, 0) 100%);
}

.heart-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 137, 183, 0.24);
}

.heart-ring--outer {
  width: min(72vw, 248px);
  height: min(72vw, 248px);
  animation: breathe 2.8s ease-in-out infinite;
}

.heart-ring--inner {
  width: min(58vw, 188px);
  height: min(58vw, 188px);
  animation: breathe 2.8s ease-in-out infinite 320ms;
}

.heart {
  position: relative;
  z-index: 1;
  width: min(34vw, 132px);
  height: min(34vw, 132px);
  transform: rotate(-45deg);
  border-radius: 26px;
  background: linear-gradient(180deg, #ffb2cb 0%, #ee7dad 42%, #c95f8f 100%);
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.26),
    0 24px 42px rgba(201, 95, 143, 0.22),
    0 0 0 18px rgba(255, 144, 186, 0.08);
  animation: beat 1.12s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.heart::before {
  top: -50%;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50%;
}

.heart-core {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 250, 245, 0.96);
  box-shadow: 0 0 0 8px rgba(255, 244, 248, 0.58);
}

.countdown-chip {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 24px 20px;
  border-radius: 999px;
  background: rgba(255, 251, 247, 0.92);
  box-shadow: var(--shadow-soft);
}

.countdown-chip__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(125, 53, 89, 0.66);
}

.countdown-chip__value {
  font-family: "Iowan Old Style", "Baskerville", "Songti SC", "Noto Serif SC", serif;
  font-size: 64px;
  line-height: 0.92;
  color: var(--rose-deep);
  font-weight: 700;
}

.countdown-chip__label {
  font-size: 14px;
  color: rgba(90, 59, 75, 0.82);
}

.intro-actions {
  width: 100%;
  max-width: 340px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(214, 184, 166, 0.34);
  background: rgba(255, 251, 247, 0.72);
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
}

.status-pill__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 157, 194, 0.94);
  box-shadow: 0 0 0 8px rgba(255, 157, 194, 0.16);
}

.music-topbar {
  display: flex;
  justify-content: flex-start;
}

.disc-stage {
  position: relative;
  display: flex;
  min-height: 370px;
  align-items: center;
  justify-content: center;
}

.disc-stage__base {
  position: absolute;
  bottom: 0;
  width: 84%;
  height: 156px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 233, 220, 0.84) 0%, rgba(233, 213, 194, 0.84) 100%);
  filter: blur(0.2px);
}

.disc-stage__glow {
  position: absolute;
  width: min(84vw, 334px);
  height: min(84vw, 334px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 234, 0.5) 0%, rgba(255, 222, 234, 0.08) 54%, rgba(255, 222, 234, 0) 72%);
  filter: blur(10px);
}

.disc {
  position: relative;
  z-index: 1;
  width: min(76vw, 286px);
  height: min(76vw, 286px);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.16) 0 22px, transparent 22px 28px, rgba(0, 0, 0, 0.96) 28px 100%),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 3px, rgba(0, 0, 0, 0) 3px 9px),
    linear-gradient(135deg, #111015 0%, #2d2a31 50%, #070709 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(39, 24, 32, 0.26);
}

.disc--spinning {
  animation: spin 4.8s linear infinite;
}

.disc__label {
  position: absolute;
  inset: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(180deg, #ffb0cb 0%, #f378aa 58%, #d85a87 100%);
}

.disc__hole {
  position: absolute;
  inset: 132px;
  border-radius: 50%;
  background: #fff5ef;
  box-shadow: inset 0 0 0 8px rgba(122, 58, 20, 0.08);
}

.arm {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 128px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7f0df 0%, #d5bf9e 100%);
  transform: rotate(30deg);
  transform-origin: right center;
  box-shadow: 0 10px 18px rgba(61, 31, 44, 0.1);
}

.arm::before {
  content: "";
  position: absolute;
  top: -14px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fffaf5;
  box-shadow:
    inset 0 0 0 5px rgba(122, 58, 20, 0.08),
    0 8px 12px rgba(61, 31, 44, 0.08);
}

.arm::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 12px;
  width: 18px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #dfcdaf 0%, #8e6d59 100%);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.button {
  width: 100%;
  min-height: 62px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  color: #fff9f6;
  background: linear-gradient(180deg, #944164 0%, #7b3558 100%);
  box-shadow:
    0 8px 0 rgba(125, 53, 89, 0.26),
    0 18px 28px rgba(125, 53, 89, 0.18);
  font-size: 18px;
  font-weight: 700;
}

.button--secondary {
  color: var(--rose-deep);
  background: rgba(255, 251, 247, 0.94);
  border: 1px solid rgba(181, 126, 96, 0.8);
  box-shadow:
    0 6px 0 rgba(181, 126, 96, 0.28),
    0 16px 24px rgba(125, 53, 89, 0.08);
  font-size: 18px;
  font-weight: 700;
}

.lyrics-card {
  position: relative;
  margin-top: 16px;
  border-radius: 24px;
  border: 1px solid rgba(214, 184, 166, 0.28);
  background: rgba(255, 251, 247, 0.96);
  padding: 22px 18px 26px 26px;
  box-shadow: var(--shadow-soft);
}

.lyrics-card::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 15px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 180, 205, 0.12) 0%, rgba(255, 140, 184, 0.5) 24%, rgba(255, 180, 205, 0.12) 100%);
}

.lyrics-title {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(214, 184, 166, 0.24);
  background: rgba(255, 250, 247, 0.92);
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
}

.lyrics-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.lyrics-line {
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-strong);
}

.lyrics-line--marker {
  margin-top: 8px;
  color: rgba(125, 53, 89, 0.58);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
}

.feedback-card {
  min-height: min(84vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.feedback-title {
  color: var(--text-strong);
  font-family: "Iowan Old Style", "Baskerville", "Songti SC", "Noto Serif SC", serif;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 700;
}

.feedback-desc {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text);
}

.loader {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(125, 53, 89, 0.14);
  border-top-color: rgba(125, 53, 89, 0.84);
  animation: spin 1s linear infinite;
}

@keyframes beat {
  0%,
  100% {
    transform: rotate(-45deg) scale(0.95);
  }
  18% {
    transform: rotate(-45deg) scale(1.06);
  }
  42% {
    transform: rotate(-45deg) scale(0.99);
  }
  68% {
    transform: rotate(-45deg) scale(1.1);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.44;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .heart,
  .heart-ring--outer,
  .heart-ring--inner,
  .disc--spinning {
    animation: none;
  }
}