/* Music buy page (extends ../css/styles.css) */
#music-hero { padding: 140px 48px 80px; position: relative; min-height: 100vh; overflow: hidden; }
.music-wrap { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 56px; align-items: start; position: relative; z-index: 2; }
.music-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 0 60px rgba(59,130,246,0.25); display: block; object-fit: cover; background: var(--card); }
.music-meta .section-eyebrow { margin-bottom: 16px; }
.music-title { font-family: 'Orbitron', monospace; font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.music-artist { margin-top: 10px; font-family: 'Rajdhani', monospace; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-bright); }
.music-label { margin-top: 28px; font-family: 'Rajdhani', monospace; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); }
.music-meta audio { width: 100%; margin-top: 10px; border-radius: 8px; }
.music-price { margin-top: 28px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.music-price strong { font-family: 'Orbitron', monospace; font-size: 2.2rem; color: var(--white); }
.music-price span { color: var(--silver); font-size: 0.95rem; }

.wallet-notice { margin-top: 20px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: rgba(13,21,32,0.8); color: var(--silver); font-size: 0.88rem; line-height: 1.65; max-width: 560px; }
.wallet-notice strong { color: var(--silver-light); }
.wallet-notice a { color: var(--blue-bright); text-decoration: none; }
.wallet-notice a:hover { text-decoration: underline; }
.wallet-notice code { font-size: 0.8em; overflow-wrap: anywhere; color: var(--silver-light); }
.buy-btn { margin-top: 20px; width: 100%; max-width: 420px; font-size: 1rem; padding: 16px 28px; }
.buy-btn[disabled] { opacity: 0.7; transform: none; }
.buy-btn[aria-busy="true"] .btn-spin { display: inline-block; }
.btn-spin { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wallet-hint { margin-top: 10px; color: var(--text-muted); font-size: 0.82rem; }
.buy-status { margin-top: 18px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: rgba(13,21,32,0.8); color: var(--silver-light); font-size: 0.92rem; line-height: 1.55; max-width: 560px; }
.buy-status a { color: var(--blue-bright); }
.buy-status[data-state="working"] { border-color: rgba(96,165,250,0.4); }
.buy-status[data-state="success"] { border-color: rgba(52,211,153,0.5); background: rgba(6,40,30,0.6); color: #bbf7d0; }
.buy-status[data-state="warn"] { border-color: rgba(251,191,36,0.5); background: rgba(45,32,6,0.6); color: #fde68a; }
.buy-status[data-state="error"] { border-color: rgba(248,113,113,0.5); background: rgba(50,10,10,0.6); color: #fecaca; }
.wallet-help { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.wallet-help a { font-size: 0.8rem; padding: 10px 18px; }
.buy-result { margin-top: 20px; padding: 18px; border-radius: 8px; border: 1px solid rgba(52,211,153,0.35); background: rgba(13,21,32,0.85); max-width: 560px; }
.buy-result .hero-cta { margin-top: 14px; justify-content: flex-start; animation: none; }
.buy-result .hero-cta a { font-size: 0.8rem; padding: 12px 22px; }
.music-license, .music-how { margin-top: 28px; color: var(--silver); font-size: 0.88rem; line-height: 1.65; max-width: 560px; }
.music-license strong, .music-how strong { color: var(--silver-light); }
.music-how ol { margin: 8px 0 0 18px; }
.music-how code { white-space: normal; overflow-wrap: anywhere; }
.music-back { display: inline-block; margin-bottom: 28px; color: var(--silver); text-decoration: none; font-family: 'Rajdhani', monospace; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.8rem; }
.music-back:hover { color: var(--white); }
[hidden] { display: none !important; }
@media (max-width: 860px) {
  #music-hero { padding: 110px 20px 60px; }
  .music-wrap { grid-template-columns: 1fr; gap: 32px; }
  .music-cover { max-width: 420px; margin: 0 auto; }
  .buy-btn { max-width: none; }
}