/* Actions use three distinct levels rather than one rounded control. */
.v12-button, .btn, .card-link, .heroButtons a, .actions a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 20px; border: 1px solid #62c9ca55; border-radius: 3px; background: #163545; color: #f5eedd; font-size: 12px; font-weight: 800; line-height: 1.35; text-decoration: none; position: relative; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.v12-button::after, .btn::after { content: '↗'; font-size: 16px; transition: translate .2s; }
.v12-button::before, .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent,#fff4,transparent); translate: -120% 0; transition: translate .5s; }
.v12-button:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #0004; }
.v12-button:hover::before, .btn:hover::before { translate: 120% 0; }
.v12-button:hover::after, .btn:hover::after { translate: 3px -2px; }
.v12-button--primary, .btn.primary, .btn:not(.ghost):not(.v98-share-btn) { color: #17201e; background: linear-gradient(110deg,#ffdda0,#db9849); border: 0; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.v12-button--ghost, .btn.ghost { border: 0; background: transparent; border-bottom: 1px solid #62c9ca55; padding-inline: 4px; }
.v12-button--ghost::after, .btn.ghost::after { content: '→'; }
.v12-more__button::after, .v12-button--icon::after { content: none; }
.v12-button--icon { min-width: 44px; padding: 8px; }
.v12-home-actions, .actions, .heroButtons, .release-links, .platforms, .videoUtilityActions { display: flex; flex-wrap: wrap; gap: 10px; }
.v12-badge, .status-pill, .v85-badge, .v85-tv-badges span, .v85-hub-pills span { display: inline-block; padding: 5px 9px; color: var(--v14-cyan); border: 1px solid #62c9ca3b; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #62c9ca09; }
.v12-platform-links, .v12-platforms { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.v12-platform-links a, .v12-platforms a, .platforms a, .release-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 10px; text-decoration: none; border: 0; background: #ffffff09; color: #dbe7e8; font-size: 11px; font-weight: 700; border-radius: 3px; }
.v12-platform-links a:hover, .v12-platforms a:hover { background: #62c9ca18; color: var(--v14-gold-light); }
/* Full image in front, the same image blurred behind. Natural ratios are retained. */
.v14-media-stage, .v14-artwork-frame { position: relative; isolation: isolate; display: grid; place-items: center; background: #18313c; border-radius: 6px; min-width: 0; }
.v14-media-stage::before, .v14-artwork-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--v14-artwork) center / cover; filter: blur(26px) saturate(.9); opacity: .28; border-radius: inherit; }
.v14-media-stage > img, .v14-artwork-frame > img, img.v14-artwork { width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 3px; }
.v14-artwork-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px); opacity: .2; z-index: -1; }
.card, .panel, .section, .time-card, .release-card-artist, .makeda-release-card, .makeda-clip-card { min-width: 0; }
.card { padding: 20px; background: #ffffff06; border: 1px solid var(--v14-line); border-radius: 6px; }
.card img { width: 100%; height: auto; object-fit: contain; margin-bottom: 18px; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { color: var(--v14-muted); font-size: 13px; }
.grid, .cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.section { margin-block: 44px; }
.miniCountdown, .countdown, .v12-countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: min(100%,360px); margin-top: 18px; }
.miniCountdown > div, .countdown > div, .v12-countdown > div { text-align: center; padding: 10px 6px; background: #ffffff09; border-top: 1px solid #62c9ca44; }
.miniCountdown strong, .countdown strong, .v12-countdown strong { display: block; font-size: 23px; color: var(--v14-gold-light); font-variant-numeric: tabular-nums; }
.miniCountdown span, .countdown span, .v12-countdown span { display: block; font-size: 8px; text-transform: uppercase; color: var(--v14-muted); }
input, textarea, select { width: 100%; min-height: 44px; padding: 12px; color: white; border: 1px solid #62c9ca44; border-radius: 4px; background: #081b26; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
button:disabled { cursor: default; opacity: .55; }
.searchInput { margin: 12px 0 28px; }
.v12-filters, .discography-filters, .v13-tv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.v12-filters button, .discography-filters button, .v13-tv-filters button { padding: 11px 16px; min-height: 42px; border: 1px solid var(--v14-line-cyan); border-radius: 3px; background: #102b39; color: #dce9e7; font-size: 11px; font-weight: 700; }
[aria-pressed=true]:is(.v12-filters button,.discography-filters button,.v13-tv-filters button) { background: var(--v14-cyan); color: #0b222d; }
/* Dock is in document flow. It never floats over a section. */
#mpbpAudioControl { display: flex; align-items: center; gap: 8px; width: min(320px,calc(100% - 32px)); height: 56px; margin: 24px 24px 24px auto; padding: 8px; border: 1px solid var(--v14-line-cyan); border-radius: 5px; background: #102e3c; position: relative; }
.v14-dock-logo { width: 32px; height: 32px; object-fit: contain; }
#mpbpAudioControl button { flex: 0 0 auto; width: 30px; height: 34px; padding: 0; color: var(--v14-gold-light); border: 0; background: #ffffff0b; font-size: 14px; border-radius: 3px; }
#mpbpAudioControl .mpbpAudioStatus { display: none; }
.mpbpAudioVolume { flex: 1; min-width: 28px; }
.mpbpAudioVolume > span { display: none; }
.mpbpAudioVolume input { width: 100%; min-height: 0; height: 4px; padding: 0; accent-color: var(--v14-gold); }
.v14-dock-open { display: grid; place-items: center; width: 28px; height: 32px; text-decoration: none; color: var(--v14-cyan); }
#mpbpAudioControl.is-fallback a { font-size: 11px; padding: 8px; }
.v14-reveal { transition: opacity .5s, translate .5s; }
.v14-reveal.is-visible { opacity: 1; translate: none; }