/*
 * Shared stylesheet for the static model and creator pages (lib/static-site/pages/model.js,
 * creator.js). Kept external so the thousands of generated pages stay small and browsers
 * cache the theme once. Not used by the homepage, recap or payout pages, which each carry
 * their own look.
 */
:root {
	--primary-color: #FF69B4;
	--secondary-color: #FFC0CB;
	--accent-color: #FF1493;
	--text-color: #333;
	--background-color: #FFF0F5;
	--card-background: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.6;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(255, 182, 193, 0.2) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255, 105, 180, 0.2) 0%, transparent 50%);
}

body.centered {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}
body.centered h1 { font-size: 3em; margin-bottom: 20px; color: var(--primary-color); }
body.centered p { font-size: 1.2em; margin-bottom: 15px; }
body.centered a { color: var(--accent-color); text-decoration: none; font-weight: 600; }
body.centered a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.site-nav { margin-bottom: 16px; }
.site-nav a { color: var(--accent-color); text-decoration: none; font-weight: 600; }
.site-nav a:hover { text-decoration: underline; }

/* ---------- Model page ---------- */
.content-card {
	background: var(--card-background);
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2);
	margin-bottom: 30px;
}
.hero-section { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; }
@media (min-width: 768px) {
	.hero-section { grid-template-columns: 1fr 1fr; align-items: start; }
}
.model-thumbnail-container {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
	aspect-ratio: 1;
}
.model-thumbnail { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.model-thumbnail:hover { transform: scale(1.05); }
.model-info { display: flex; flex-direction: column; gap: 20px; }
.model-title { font-size: 2.5em; font-weight: 600; color: var(--primary-color); margin: 0; line-height: 1.2; }

.creator-section-link { text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease; }
.creator-section-link:hover { transform: translateY(-2px); }
.creator-section {
	display: flex; align-items: center; gap: 15px; padding: 15px;
	background: var(--background-color); border-radius: 12px;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.creator-section-link:hover .creator-section { background: rgba(255, 192, 203, 0.3); box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2); }
.creator-avatar {
	width: 60px; height: 60px; border-radius: 12px;
	border: 3px solid var(--primary-color); box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
	background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}
.creator-info { flex: 1; }
.creator-label { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.creator-name-text { font-weight: 600; font-size: 1.1em; color: var(--accent-color); }
.creation-date { font-size: 0.85em; color: #999; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.stat-card {
	text-align: center; padding: 20px;
	background: linear-gradient(135deg, var(--background-color) 0%, rgba(255, 192, 203, 0.3) 100%);
	border-radius: 12px; border: 2px solid var(--secondary-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(255, 105, 180, 0.2); }
.stat-icon { font-size: 2em; margin-bottom: 8px; display: block; }
.stat-value { font-size: 1.8em; font-weight: 600; color: var(--primary-color); display: block; }
.stat-label { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }

.info-badges { display: flex; flex-direction: column; gap: 12px; }
.info-badge { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 0.95em; }
.info-badge.derived { background: linear-gradient(135deg, #FFF9C4 0%, #FFE082 100%); border: 2px solid #FFD54F; }
.info-badge.warning { background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%); border: 2px solid #E57373; }
.badge-icon { font-size: 1.5em; }
.badge-text { flex: 1; }
.inline-link { color: var(--accent-color); text-decoration: none; font-weight: 600; }
.inline-link:hover { text-decoration: underline; }

.description-section { margin-top: 20px; }
.section-title { font-size: 1.2em; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; }
.description-text {
	white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; color: var(--text-color);
	padding: 15px; background: var(--background-color); border-radius: 12px;
	border-left: 4px solid var(--primary-color);
}

/* ---------- Creator page ---------- */
.profile-header {
	background: var(--card-background); border-radius: 20px; padding: 40px;
	box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2); margin-bottom: 30px; text-align: center;
}
.roblox-profile-link { text-decoration: none; color: inherit; display: inline-block; }
.profile-header .creator-avatar {
	width: 150px; height: 150px; border-radius: 16px; border: 4px solid var(--primary-color);
	box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3); margin: 0 auto 20px; display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.roblox-profile-link:hover .creator-avatar { transform: scale(1.05); box-shadow: 0 12px 30px rgba(255, 105, 180, 0.5); }
.creator-name { font-size: 2.5em; font-weight: 600; color: var(--primary-color); margin-bottom: 20px; transition: color 0.2s ease; }
.roblox-profile-link:hover .creator-name { color: var(--accent-color); }
.creator-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.stat-item { text-align: center; }
.creator-stats .stat-value { font-size: 2em; }
.creator-stats .stat-label { font-size: 0.9em; }

.models-heading { font-size: 1.8em; font-weight: 600; color: var(--primary-color); margin-bottom: 20px; text-align: center; }
.models-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;
	margin-bottom: 30px; list-style: none;
}
.model-card-link { text-decoration: none; color: inherit; }
.model-card {
	background: var(--card-background); border-radius: 16px; overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.model-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3); }
.model-card .model-thumbnail-container { border-radius: 0; box-shadow: none; }
.model-card-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.model-card:hover .model-card-thumbnail { transform: scale(1.1); }
.model-card-info { padding: 15px; }
.model-card-title { font-size: 1.1em; font-weight: 600; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-card-stats { display: flex; gap: 15px; font-size: 0.9em; color: #666; }
.model-card-stats span { display: flex; align-items: center; gap: 4px; }

.empty-state { text-align: center; padding: 60px 20px; grid-column: 1 / -1; }
.empty-icon { font-size: 4em; margin-bottom: 20px; opacity: 0.5; }
.empty-text { font-size: 1.2em; color: #666; }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 30px 20px; color: #666; }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.footer-link { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.footer-link:hover { color: var(--accent-color); }

@media (max-width: 600px) {
	.content-card, .profile-header { padding: 20px; }
	.model-title { font-size: 1.8em; }
	.creator-name { font-size: 1.8em; }
	.profile-header .creator-avatar { width: 100px; height: 100px; }
	.creator-stats { gap: 20px; }
	.stats-grid { grid-template-columns: 1fr; }
	.stat-card { padding: 15px; }
	.models-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
}