.vsinger-page-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.vsinger-hero {
	padding: 0;
}

.vsinger-hero-shell {
	position: relative;
	min-height: min(980px, 92vh);
	overflow: hidden;
	background:
		radial-gradient(circle at top left, rgba(72, 125, 255, 0.22), transparent 28%),
		radial-gradient(circle at 82% 18%, rgba(228, 96, 255, 0.18), transparent 22%),
		linear-gradient(180deg, #060c17 0%, #08101d 48%, #091120 100%);
	box-shadow: 0 32px 84px rgba(3, 8, 19, 0.46);
}

.vsinger-hero-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(104deg, rgba(3, 8, 18, 0.88) 0%, rgba(5, 12, 26, 0.78) 21%, rgba(8, 18, 39, 0.42) 45%, rgba(10, 18, 36, 0.16) 70%, rgba(7, 12, 24, 0.42) 100%),
		linear-gradient(180deg, rgba(4, 9, 20, 0.08) 0%, rgba(4, 9, 20, 0.3) 100%);
	z-index: 1;
	pointer-events: none;
}

.vsinger-hero-media {
	position: absolute;
	inset: 0;
}

.vsinger-hero-media-panel {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: var(--vsinger-hero-image);
	opacity: 0;
	transform: scale(1.07);
	animation: vsingerHeroImageCycle 18s linear infinite;
	will-change: opacity, transform;
}

.vsinger-hero-media-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(7, 13, 26, 0.16) 100%),
		radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.12), transparent 20%);
}

.vsinger-hero-media-panel.is-first {
	background-position: center 38%;
	animation-delay: 0s;
}

.vsinger-hero-media-panel.is-second {
	background-position: center 42%;
	animation-delay: 6s;
}

.vsinger-hero-media-panel.is-third {
	background-position: center 44%;
	animation-delay: 12s;
}

.vsinger-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(124, 153, 214, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(124, 153, 214, 0.08) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
	opacity: 0.66;
	z-index: 1;
	pointer-events: none;
}

.vsinger-hero-rails {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.vsinger-hero-rails span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, rgba(125, 155, 235, 0) 0%, rgba(125, 155, 235, 0.34) 18%, rgba(125, 155, 235, 0.08) 54%, rgba(125, 155, 235, 0) 100%);
}

.vsinger-hero-rails span:nth-child(1) {
	left: max(4%, 24px);
}

.vsinger-hero-rails span:nth-child(2) {
	left: 50%;
	opacity: 0.4;
}

.vsinger-hero-rails span:nth-child(3) {
	right: max(6%, 28px);
}

.vsinger-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.18), transparent 18%),
		radial-gradient(circle at 82% 72%, rgba(217, 104, 255, 0.16), transparent 18%),
		radial-gradient(circle at 18% 16%, rgba(72, 125, 255, 0.16), transparent 20%),
		linear-gradient(180deg, rgba(5, 10, 22, 0) 0%, rgba(5, 10, 22, 0.34) 100%);
}

.vsinger-hero-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 10, 22, 0.04) 0%, rgba(5, 10, 22, 0.14) 100%),
		linear-gradient(90deg, rgba(71, 117, 255, 0.08) 0%, rgba(71, 117, 255, 0) 22%, rgba(220, 97, 255, 0) 78%, rgba(220, 97, 255, 0.08) 100%);
}

.vsinger-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: min(980px, 92vh);
	padding-top: 92px;
	padding-bottom: 72px;
}

.vsinger-hero-copy {
	max-width: 720px;
}

.vsinger-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 9px 14px;
	border: 1px solid rgba(138, 166, 255, 0.28);
	background: rgba(10, 16, 31, 0.42);
	backdrop-filter: blur(10px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.26em;
	color: #dce6ff;
	text-transform: uppercase;
	border-radius: 999px;
}

.vsinger-hero-kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6aa8ff 0%, #db68ff 100%);
	box-shadow: 0 0 16px rgba(133, 132, 255, 0.7);
}

.vsinger-hero-title {
	margin: 0;
	font-size: clamp(2.8rem, 5vw, 6.1rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow:
		0 0 20px rgba(84, 153, 255, 0.16),
		0 0 34px rgba(219, 104, 255, 0.12),
		0 22px 42px rgba(7, 14, 27, 0.36);
}

.vsinger-hero-title .is-line {
	display: block;
}

.vsinger-hero-title .is-line + .is-line {
	margin-top: 10px;
}

.vsinger-hero-lead {
	max-width: 580px;
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.95;
	color: rgba(225, 233, 248, 0.9);
}

.vsinger-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.vsinger-hero-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid rgba(145, 171, 255, 0.24);
	background: rgba(10, 17, 34, 0.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	color: rgba(232, 239, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	border-radius: 999px;
}

.vsinger-hero-display {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.vsinger-hero-display-orbit {
	position: absolute;
	border-radius: 999px;
	border: 1px solid rgba(155, 178, 255, 0.22);
	filter: drop-shadow(0 0 18px rgba(109, 144, 255, 0.18));
}

.vsinger-hero-display-orbit.is-one {
	top: 12%;
	right: min(18vw, 180px);
	width: 220px;
	height: 220px;
	border-color: rgba(99, 142, 255, 0.28);
}

.vsinger-hero-display-orbit.is-two {
	right: 2%;
	bottom: 11%;
	width: 320px;
	height: 320px;
	border-color: rgba(222, 106, 255, 0.24);
}

@keyframes vsingerHeroImageCycle {
	0% {
		opacity: 1;
		transform: scale(1.07);
	}
	28% {
		opacity: 1;
		transform: scale(1.03);
	}
	36% {
		opacity: 0.72;
		transform: scale(1.01);
	}
	44% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}

.vsinger-surface {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

.vsinger-surface--light {
	background: #f8fbff;
}

.vsinger-surface--featured {
	position: relative;
	background:
		radial-gradient(circle at 14% 16%, rgba(76, 132, 255, 0.24), transparent 20%),
		radial-gradient(circle at 82% 18%, rgba(221, 99, 255, 0.18), transparent 24%),
		linear-gradient(180deg, #09111f 0%, #0a1326 42%, #09111f 100%);
}

.vsinger-surface--featured::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(128, 155, 223, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 155, 223, 0.08) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 46%, transparent 100%);
	opacity: 0.72;
	pointer-events: none;
}

.vsinger-surface--featured > .vsinger-page-inner {
	position: relative;
	z-index: 1;
}

.vsinger-surface--dark {
	background:
		radial-gradient(circle at 14% 8%, rgba(83, 141, 255, 0.12), transparent 22%),
		radial-gradient(circle at 82% 18%, rgba(221, 99, 255, 0.1), transparent 18%),
		linear-gradient(180deg, #0a1327 0%, #0b1429 34%, #0a1224 100%);
}

.vsinger-surface--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(128, 155, 223, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 155, 223, 0.07) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.38) 44%, transparent 100%);
	pointer-events: none;
	opacity: 0.72;
}

.vsinger-section {
	position: relative;
	z-index: 1;
	padding: 64px 0;
}

.vsinger-section + .vsinger-section {
	padding-top: 0;
}

.vsinger-featured {
	padding: 84px 0 74px;
}

.vsinger-section-header {
	margin-bottom: 30px;
	text-align: center;
}

.vsinger-section-kicker {
	display: block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.vsinger-featured .vsinger-section-kicker,
.vsinger-songs .vsinger-section-kicker,
.vsinger-news .vsinger-section-kicker {
	color: #7d94d8;
}

.vsinger-releases .vsinger-section-kicker {
	color: #8ea8ff;
}

.vsinger-section-title {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 2.5vw, 2.35rem);
	font-weight: 800;
	letter-spacing: 0.03em;
}

.vsinger-featured .vsinger-section-title,
.vsinger-songs .vsinger-section-title,
.vsinger-news .vsinger-section-title {
	color: #16233f;
}

.vsinger-featured .vsinger-section-title {
	color: #ffffff;
	text-shadow:
		0 0 16px rgba(84, 153, 255, 0.12),
		0 0 26px rgba(219, 104, 255, 0.08);
}

.vsinger-releases .vsinger-section-title {
	color: #ffffff;
}

.vsinger-section-desc {
	max-width: 720px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.9;
}

.vsinger-featured .vsinger-section-desc,
.vsinger-songs .vsinger-section-desc,
.vsinger-news .vsinger-section-desc {
	color: #60708d;
}

.vsinger-featured .vsinger-section-kicker {
	color: #9cb5ff;
}

.vsinger-featured .vsinger-section-desc {
	color: #aebdd9;
}

.vsinger-releases .vsinger-section-desc {
	color: #a9b9d4;
}

.vsinger-placeholder-grid {
	display: grid;
	gap: 22px;
}

.vsinger-featured-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.vsinger-featured-card {
	display: grid;
	grid-template-rows: 550px auto;
	text-decoration: none;
	border: 1px solid rgba(111, 141, 218, 0.26);
	background:
		linear-gradient(180deg, rgba(12, 21, 42, 0.94) 0%, rgba(10, 18, 36, 0.98) 100%);
	box-shadow:
		0 24px 52px rgba(2, 8, 21, 0.26),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
	isolation: isolate;
}

.vsinger-featured-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(81, 136, 255, 0.12) 0%, rgba(220, 97, 255, 0.08) 54%, rgba(81, 136, 255, 0.12) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}

.vsinger-featured-card::after {
	content: "";
	position: absolute;
	top: -18%;
	left: -34%;
	width: 42%;
	height: 140%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(155, 197, 255, 0.28), rgba(237, 169, 255, 0.34), rgba(255, 255, 255, 0));
	transform: rotate(18deg) translateX(-140%);
	opacity: 0;
	transition: transform 0.55s ease, opacity 0.35s ease;
	pointer-events: none;
	z-index: 2;
}

.vsinger-featured-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 32px 64px rgba(2, 8, 21, 0.34),
		0 0 0 1px rgba(128, 168, 255, 0.24),
		0 0 26px rgba(96, 145, 255, 0.2),
		0 0 44px rgba(220, 97, 255, 0.12),
		inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	border-color: rgba(166, 187, 255, 0.64);
	filter: brightness(1.03);
}

.vsinger-featured-card:hover::before {
	opacity: 1;
}

.vsinger-featured-card:hover::after {
	opacity: 1;
	transform: rotate(18deg) translateX(320%);
}

.vsinger-featured-visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 18% 16%, rgba(72, 125, 255, 0.18), transparent 24%),
		radial-gradient(circle at 82% 18%, rgba(228, 96, 255, 0.14), transparent 22%),
		linear-gradient(180deg, #0e1730 0%, #0a1327 100%);
}

.vsinger-featured-visual::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(180deg, rgba(10, 18, 36, 0) 0%, rgba(10, 18, 36, 0.94) 100%);
	pointer-events: none;
}

.vsinger-featured-visual img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 18px 34px rgba(1, 6, 16, 0.44));
}

.vsinger-featured-visual span {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6aa8ff 0%, #db68ff 100%);
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	box-shadow: 0 16px 30px rgba(88, 116, 181, 0.18);
}

.vsinger-featured-meta {
	position: relative;
	padding: 22px 22px 24px;
	z-index: 1;
}

.vsinger-featured-meta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	height: 1px;
	background: linear-gradient(90deg, rgba(125, 148, 216, 0), rgba(125, 148, 216, 0.24), rgba(125, 148, 216, 0));
}

.vsinger-featured-name {
	margin: 0;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 800;
	line-height: 1.3;
	color: #ffffff;
}

.vsinger-featured-subname {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9cb5ff;
}

.vsinger-featured-affiliation {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: #9eafcf;
}

.vsinger-placeholder-grid.is-featured {
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}

.vsinger-placeholder-grid.is-video {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vsinger-placeholder-stack {
	display: grid;
	gap: 18px;
}

.vsinger-placeholder-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	border-radius: 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.vsinger-featured .vsinger-placeholder-card,
.vsinger-songs .vsinger-placeholder-card,
.vsinger-news .vsinger-placeholder-card {
	border: 1px solid #dce6f5;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.98) 100%);
	box-shadow:
		0 22px 44px rgba(43, 66, 111, 0.1),
		inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	color: #657594;
}

.vsinger-featured .vsinger-placeholder-card::before,
.vsinger-songs .vsinger-placeholder-card::before,
.vsinger-news .vsinger-placeholder-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(83, 141, 255, 0.06) 0%, rgba(221, 99, 255, 0.04) 100%);
	pointer-events: none;
}

.vsinger-releases .vsinger-placeholder-card {
	border: 1px solid rgba(114, 138, 188, 0.34);
	background:
		linear-gradient(180deg, rgba(14, 24, 49, 0.94) 0%, rgba(10, 19, 39, 0.96) 100%);
	box-shadow:
		0 24px 58px rgba(5, 10, 22, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	color: #b8c7df;
}

.vsinger-releases .vsinger-placeholder-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(74, 145, 255, 0.12) 0%, rgba(222, 106, 255, 0.08) 100%);
	pointer-events: none;
}

.vsinger-placeholder-card.is-large {
	min-height: 260px;
}

.vsinger-placeholder-card span {
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.vsinger-hero-shell {
		min-height: 700px;
	}

	.vsinger-hero-inner {
		display: block;
		min-height: 700px;
	}

	.vsinger-hero-copy {
		max-width: 640px;
	}

	.vsinger-hero-shell::before {
		background: linear-gradient(180deg, rgba(5, 12, 24, 0.74) 0%, rgba(8, 18, 37, 0.44) 34%, rgba(10, 19, 38, 0.62) 100%);
	}

	.vsinger-hero-display-orbit.is-one {
		top: 10%;
		right: 10%;
		width: 170px;
		height: 170px;
	}

	.vsinger-hero-display-orbit.is-two {
		right: 0;
		bottom: 10%;
		width: 220px;
		height: 220px;
	}

	.vsinger-placeholder-grid.is-featured,
	.vsinger-placeholder-grid.is-video,
	.vsinger-featured-grid {
		grid-template-columns: 1fr;
	}

	.vsinger-featured-card {
		grid-template-rows: 360px auto;
	}
}

@media (max-width: 768px) {
	.vsinger-hero-shell {
		min-height: 620px;
	}

	.vsinger-hero-media-panel {
		background-image: var(--vsinger-hero-image-sp, var(--vsinger-hero-image));
		background-position: center 24%;
	}

	.vsinger-hero-inner {
		min-height: 620px;
		padding-top: 72px;
		padding-bottom: 42px;
	}

	.vsinger-hero-title {
		font-size: 2.55rem;
		line-height: 1.02;
	}

	.vsinger-hero-lead {
		font-size: 14px;
		line-height: 1.85;
	}

	.vsinger-hero-tags {
		gap: 10px;
	}

	.vsinger-hero-tags span {
		min-height: 38px;
		padding: 0 14px;
		font-size: 11px;
	}

	.vsinger-hero-display-orbit.is-one {
		width: 130px;
		height: 130px;
		top: 12%;
		right: -10px;
	}

	.vsinger-hero-display-orbit.is-two {
		width: 170px;
		height: 170px;
		right: -18px;
		bottom: 12%;
	}

	.vsinger-section {
		padding: 48px 0;
	}

	.vsinger-featured {
		padding: 58px 0 52px;
	}

	.vsinger-placeholder-card {
		min-height: 150px;
		border-radius: 18px;
	}

	.vsinger-placeholder-card.is-large {
		min-height: 220px;
	}
}