.zsd-virtual-shelf-page {
	background:
		radial-gradient(circle at top, rgba(251, 191, 36, 0.18), transparent 32%),
		linear-gradient(180deg, #f8f5ef 0%, #efe7da 100%);
	color: #1f2937;
	min-height: 100vh;
}

.zsd-standalone-shell {
	margin: 0 auto;
	max-width: 1240px;
	padding: 32px 20px 56px;
}

.zsd-standalone-header {
	margin-bottom: 28px;
}

.zsd-standalone-kicker {
	color: #9a6700;
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.zsd-standalone-header h1 {
	color: #24180a;
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1;
	margin: 0 0 10px;
}

.zsd-standalone-header p {
	color: #5b4633;
	font-size: 1.05rem;
	margin: 0;
	max-width: 680px;
}

.zsd-portal {
	margin: 24px 0;
}

.zsd-card {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 251, 245, 0.94)),
		linear-gradient(145deg, #fffef8, #ffffff);
	border: 1px solid rgba(121, 85, 46, 0.12);
	border-radius: 28px;
	box-shadow: 0 26px 60px rgba(48, 31, 10, 0.12);
	padding: 28px;
}

.zsd-card h2,
.zsd-card h3,
.zsd-card p,
.zsd-card label,
.zsd-card strong {
	color: #2a1c12;
}

.zsd-form {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	max-width: 520px;
}

.zsd-entry-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.zsd-entry-panel {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(121, 85, 46, 0.14);
	border-radius: 20px;
	padding: 22px;
}

.zsd-form input[type="email"] {
	background: #fff;
	border: 1px solid #d7c8b2;
	border-radius: 14px;
	box-shadow: inset 0 1px 2px rgba(36, 24, 10, 0.05);
	font-size: 16px;
	padding: 14px 16px;
}

.zsd-form input[type="text"] {
	background: #fff;
	border: 1px solid #d7c8b2;
	border-radius: 14px;
	box-shadow: inset 0 1px 2px rgba(36, 24, 10, 0.05);
	font-size: 16px;
	padding: 14px 16px;
}

.zsd-form button,
.zsd-download,
.zsd-logout {
	background: linear-gradient(180deg, #176b5f, #114c43);
	border: 0;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	padding: 12px 18px;
	text-decoration: none;
}

.zsd-download:hover,
.zsd-logout:hover,
.zsd-form button:hover {
	filter: brightness(1.05);
}

.zsd-notice {
	border-radius: 16px;
	margin-bottom: 18px;
	padding: 14px 18px;
}

.zsd-notice-success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.zsd-notice-error {
	background: #fff1f2;
	border: 1px solid #fecdd3;
	color: #9f1239;
}

.zsd-library-card {
	overflow: hidden;
	position: relative;
}

.zsd-library-header {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 24px;
}

.zsd-library-header p {
	max-width: 720px;
}

.zsd-shelf {
	align-items: start;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	position: relative;
	z-index: 2;
}

.zsd-shelf-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.zsd-shelf-cover-wrap {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 246, 234, 0.72));
	border: 1px solid rgba(87, 54, 22, 0.14);
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 12px 26px rgba(52, 34, 16, 0.1);
	padding: 12px;
}

.zsd-shelf-cover {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.zsd-shelf-cover-placeholder {
	align-items: center;
	background:
		radial-gradient(circle at top left, rgba(251, 191, 36, 0.45), transparent 40%),
		linear-gradient(135deg, #32556d, #132838);
	color: #fff;
	display: flex;
	font-size: 1.15rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zsd-shelf-body {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(87, 54, 22, 0.14);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 16px 24px rgba(52, 34, 16, 0.08);
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 16px;
}

.zsd-shelf-body h3 {
	font-size: 1.02rem;
	line-height: 1.3;
	margin: 0;
}

.zsd-shelf-body p {
	color: #5d4b3d;
	font-size: 0.94rem;
	margin: 0;
}

.zsd-meta {
	color: #6b5a4b;
	display: flex;
	flex-direction: column;
	font-size: 0.87rem;
	gap: 4px;
	margin-top: auto;
}

.zsd-download {
	margin-top: 12px;
}

.zsd-code-back {
	margin: 14px 0 0;
}

.zsd-code-back a {
	color: #176b5f;
	font-weight: 700;
	text-decoration: none;
}

.zsd-shelf-wood {
	background:
		linear-gradient(180deg, rgba(105, 62, 19, 0.15), rgba(69, 38, 8, 0.25)),
		repeating-linear-gradient(
			90deg,
			#c68842 0,
			#c68842 36px,
			#d79b57 36px,
			#d79b57 72px
		);
	border-radius: 0 0 18px 18px;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 10px 18px rgba(63, 35, 8, 0.18);
	height: 20px;
	margin: -2px 10px 0;
	position: relative;
	z-index: 1;
}

@media (max-width: 640px) {
	.zsd-standalone-shell {
		padding: 22px 14px 40px;
	}

	.zsd-card {
		padding: 20px;
	}

	.zsd-library-header {
		flex-direction: column;
	}

	.zsd-shelf {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.zsd-form button,
	.zsd-download,
	.zsd-logout {
		width: 100%;
	}
}
